3 kolonas

gunmetal · November 6, 2011

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 November 6, 2011 by gunmetal

sandis_m · November 6, 2011

<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 November 6, 2011 by sand2s

gunmetal · November 6, 2011

<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>

Nu jā, bet to border nevar apvilkt...

gunmetal · November 6, 2011

<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 ;)

Sign In

3 kolonas

Recommended Posts

gunmetal

Link to comment

Share on other sites

sandis_m

Link to comment

Share on other sites

gunmetal

Link to comment

Share on other sites

gunmetal

Link to comment

Share on other sites

Join the conversation

Browse

Activity