Jump to content
php.lv forumi

clear {side}


Recommended Posts

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?

 

Untitled-1_15.jpg

 

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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!

Link to post
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...