clear {side}

Colderon · December 27, 2009

Labdien!

Lieta tāda, kad ja man vienam div tagam ir vairāki apakš divi, ties automātiski neaizņem vietu (nezinu kā savādāk noformulēt) un nespiež pārējos div tagus uz leju, varat pateikt kā šo problēmu atrisina?

<body>
<div id="konteineris">
 <div id="banneris"></div>

 <div id="nav1">
 	<div id="navpogas">
 		<ul>
 	  		<li><a href="#">HOME</a></li>|
     		<li><a href="#">FORUM</a></li>|
           <li><a href="#">DOWNLOADS</a></li>|
     		<li><a href="#">MEMBERS</a></li>|
     		<li><a href="#">CHEATS</a></li>|
    	 	<li><a href="#">CONFIGS</a></li>|
     		<li><a href="#">STATS</a></li>|
    		<li><a href="#">GAMES</a></li> |
           <li><a href="#">MUSIC</a></li> |
           <li><a href="#">GROUPS</a></li>
  		</ul>
  </div>  
 </div>

 <div id="nav2">
 	<div id="nav2pogas">
   	<ul>
 	  		<li><a href="#">VIDEO</a></li>|
     		<li><a href="#">PICTURES</a></li>|
           <li><a href="#">ALL NEWS</a></li>|
     		<li><a href="#">LATEST NEWS</a></li>|
     		<li><a href="#">CHEATS</a></li>|
    	 	<li><a href="#">CONFIGS</a></li>|
     		<li><a href="#">STATS</a></li>|
    		<li><a href="#">GAMES</a></li> |
           <li><a href="#">MUSIC</a></li>
  		</ul>
   </div>
 </div>

 <div id="bloks1">
 <div id="b1virsraksts">TOP NEWS</div>
 <div id="jaunumib1"></div>
 </div>


 <div id="bloks2">
 	<div id="b2virsraksts">NEWS</div>
 </div>

 <div id="bloks3">
 	<div id="b3virsraksts">SPONSORS</div>
 </div>

 <div id="bloks4">
 	<div id="b4virsraksts">MEMBERS</div>
 </div>

 <div id="footeris">
 	<div id="footeratxt">Web by Davis Â© 2009 | yoursite.com</div>
 </div>

</div>
</body>
</html>

#konteineris {
padding: 0px;
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}

#banneris {
margin: 0px;
padding: 0px;
height: 150px;
width: 900px;
background-image: url(../images/banneris.png);
background-repeat: no-repeat;
}

#nav1 {
font: 17px Arial, Helvetica, sans-serif;
color: #7D7D7D;
font-weight: bold;
background-image: url(../images/navigbg1.gif);
background-repeat: no-repeat;
height: 40px;
width: 900px;
margin-top: 5px;
}

#navpogas {
padding-top: 10px;
padding-bottom: 10px;
}

#navpogas ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#navpogas li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#navpogas li a {
color: #000;
text-decoration: none;
color: #D6D6D6;
font-weight: bold;
}

#navpogas a:hover {
color:#FFF;
text-decoration:none;
}

#navpogas a.current { 
text-decoration:none;
}

#nav2 {
background-image: url(../images/navigbg2.png);
background-repeat: no-repeat;
height: 26px;
width: 900px;
}

#nav2pogas {
padding-top: 6px;
padding-bottom: 6px;
}

#nav2pogas ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#nav2pogas li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#nav2pogas li a {
color: #000;
text-decoration: none;
color: #D6D6D6;
font-weight: bold;
}

#nav2pogas a:hover {
color:#FFF;
text-decoration:none;
}

#nav2pogas a.current { 
text-decoration:none;
}
#bloks1 {
background-image: url(../images/ar.png);
background-repeat: no-repeat;
float: left;
height: 25px;
width: 400px;
margin-top: 10px;
margin-right: 20px;
}

#b1virsraksts {
color: #D6D6D6;
font-weight: bold;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 40px;
}

#jaunumib1 {
height: 200px;
width: 400px;
background-image: url(../images/bgne.jpg);
background-repeat: no-repeat;
clear: both;
}

#bloks2 {
background-image: url(../images/ar.png);
background-repeat: no-repeat;
float: right;
height: 25px;
width: 400px;
margin-top: 10px;
margin-left: 50px;
}

#b2virsraksts {
color: #D6D6D6;
font-weight: bold;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 40px;
}
#bloks3 {
background-image: url(../images/ar.png);
float: left;
height: 25px;
width: 400px;
margin-top: 5px;
background-repeat: no-repeat;
margin-right: 20px;
margin-bottom: 10px;
}

#b3virsraksts {
color: #D6D6D6;
font-weight: bold;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 40px;
}

#bloks4 {
background-image: url(../images/ar.png);
background-repeat: no-repeat;
float: right;
width: 400px;
margin-top: 5px;
margin-left: 50px;
height: 25px;
margin-bottom: 10px;
}

#b4virsraksts {
color: #D6D6D6;
font-weight: bold;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 40px;
}

#footeris {
height: 100px;
width: 900px;
clear: both;
margin-top: 10px;
background-image: url(../images/footeraBG.jpg);
background-repeat: no-repeat;
}

#footeratxt {
color: #D6D6D6;
font-weight: bold;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 20px;
clear: both;
}

waplet · December 27, 2009

ja domā .. tad teorētiski vajag lapai augtumu definēt.. lai zinātu kur footerim iet, ja gribi viņu apakšā.. bet ja nē, tad clear:left vai both vajadzētu atrisināt.. vispār kaut kā jocīgi sanāk, nevar īsti saprast kā gribi

Colderon · December 27, 2009

Nu lai sponsor divs (bloks3) ietu uz leju.

2easy · December 27, 2009

wapletam taisnība. clear:both vajadzēja izbeigt floatošanos un nākamajam blokam (footerim) jau vajadzēja attēloties zemāk. njaa, bet #footeris jau ir ar clear:both, taču tas nedarbojas. hmm, savādi. pamēģini pirms #footeris ielitk atsevišķu <div style="clear:both"></div>

otrs variants ir visus floatotos div (bloks1,bloks2,bloks3,bloks4) ielikt vēl vienā div (konteinerī/wrapperī) un tam uzlikt overflow:hidden. tipa

<div style="overflow: hidden">
 <div style="float: left">kkāds floatots bloks</div>
 <div style="float: left">vēl viens floatots bloks</div>
</div>
šis būs zem zemākā float

efektam jābūt tādam pašam - visi nākamie teksti/bloki būs zem zemākā float bloka

Colderon · December 28, 2009

Paldies par palīdzību! Sapratu, kas tur nogāja greizi piemēram tur kur TOP NEWS vinam apaksšā ir bg bilde un es pirmajam div tagam iedevu uzreiz izmēru (augstumu un platumu) precīzi kā bg bildeitapēc pārējiem div tagiem kas bija apakšā pirmajam jau vairs negāja iekšā tajos izmēros tapēc arī float: both nedarbojās un vinš nespieda automātiski uz leju, bet tā kā man negribējās visu pārakstīt izmantoju margin: palīdzību.

http://davis.byethost17.com/Templates_a/TF2/ iznākums!

Sign In

clear {side}

Recommended Posts

Colderon

Link to comment

Share on other sites

waplet

Link to comment

Share on other sites

Colderon

Link to comment

Share on other sites

2easy

Link to comment

Share on other sites

Colderon

Link to comment

Share on other sites

Join the conversation

Browse

Activity