Jump to content
php.lv forumi

3 kolonas


gunmetal

Recommended Posts

Sveiki

Vēlējos pajautāt, kā uztaisīt normālu un vienkāršu dizainu ar 3 kolonām.

Ja taidu ar tiem float nevar apvilkt apkārt border.

Ja, kāds zin, kā var vienkārši uztaisīt 3 kolonu dizainu lūdzu palīdziet.

arī tā lai visas 3 kolonas height lielumu palielinātu līdz ar materiāla daudzumu, jo ir daudzi pamācību, kur vainu nevar to border apvilkt vai height nemainās pēc materiālu daudzuma.

 

Mans dizains, kurš netaisa kolonu height pēc materiāla daudzuma

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <link type="text/css" href="css.css" rel="stylesheet" media="screen" />
 <title>SMS-SHOP.CO.CC</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container2">
 <div id="container"><div id='cleft'></div><div id='cright'></div>
  <div id="banner" >
<div id="logo">
</div>
<div id='nav'>
<a href=''>Sākums</a>
<a href=''>Cw atskaites</a>
<a href=''>Forums</a>
<a href=''>Spēlētāji</a>
</div>
  </div>
  <div id="left">
<h2>Kreisā puse!</h2>
<p>Jūsu teksts tieši šeit!</p>
<h2>Kreisā puse!</h2>
<p>Jūsu teksts tieši šeit!</p>
  </div>
  <div id="right">
<div id='ho'><h2>Labā puse!</h2></div>
<p>Jūsu teksts tieši šeit!</p>
<h2>Labā puse!</h2>
<p>Jūsu teksts tieši šeit!</p>
  </div>
  <div id="content">
  <p>Testa teksts tieši Jums!</p>
  </div>
  <div id="footer"><h3><a href="http://sms-shop.co.cc">Orģinālā mājas lapa!</a> Made by GunMetal</h3></div>
 </div>
</div>
</body>
</html>

 

body {
background-color: #fff;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#000;
margin:0;
padding:0 25px;
}
a {
text-decoration: none;
color: #fff;
}
a:visited {color:#fff;}
a:hover {color: #fff;}
a:active { color:#fff;}
#nav{
height:25px;
background:url(images/nav_bg.gif) repeat-x;
}
#nav a{
height:19px;
padding-top:6px;
border-right:1px solid #666;
background:url(images/nav_bg.gif) repeat-x;
text-decoration:none;
border-right:1px solid #666;
color:#fff;font-size:11px;
display:block;float:left;
padding-left:20px;
padding-right:20px;
}
#nav a:hover{
text-decoration:none;
background: #C0C0C0;
color: #000;
background:url(images/men.png) repeat
}
h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #4A4344;
padding:5px 15px;
overflow: hidden;
text-shadow: #000000 1px 1px 1px;
margin:0
}

h2 {
width: 200px;
height: 31px;
font-family: Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
background: url('images/cs.GIF') #ffffff no-repeat left center;
text-shadow: #6a6a6a 0px 0px 0px;
line-height: 31px;
color: #11859C;
text-indent: 20px;
margin: 6px 0;
margin-left: 0px;
}

#container {
width: 900px;
margin-bottom: 10px;
margin:0 auto;
background-color: #DCDCDC;
border: 1px solid #000;
}
#container2 {
width: 940px;
margin:0 auto;
background: url('images/cont.png') repeat-y left;
}

#banner {
background-color: #e1ddd9;
text-align: left;
padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;}
#logo {
background-color: #2B65EC;
text-align: left;
height: 232px;
padding: 0px;
margin: 0px;
background: url('images/logo.png') no-repeat;
}
#content {
background-color: #ffffff;
padding: 0;
margin: 0 200px;
padding: 10px 10px;
}

div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
p, pre{
padding: 5px 10px;
margin:0;
}
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}
#right {
float: right;
width: 200px;
margin: 0;
padding: 0;
}

#footer {
text-align: left;
}
#footer h3 {
font-size: 11px;
text-transform:uppercase;
background-color: #4A4344;
padding:5px 15px;
overflow: hidden;
margin:0
}

Edited by gunmetal
Link to comment
Share on other sites

<div style="float:left;width:200px;">


left
</div>
<div style="float:left;width:700px;margin-left:10px;">
middle
</div>
<div style="float:left;width:200px;margin-left:10px;">
right
</div>
<div style="clear:both"></div>

Edited by sand2s
Link to comment
Share on other sites

<div style="float:left;width:200px;">


left
</div>
<div style="float:left;width:700px;margin-left:10px;">
middle
</div>
<div style="float:left;width:200px;margin-left:10px;">
right
</div>
<div style="clear:both"></div>

Ou nop, nop... Pareizi pateici tikai vajedzēja 1 div un viss ir oky. tnq tu esi kolosāls ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...