DIV`u problēma.

eT` · November 27, 2009

Tātad man jautājums par div`iem.

Problēmas skaidrojums bildē:

Tātad man gribas, lai ja contents pārsniedz menu garumu, tad, lai menu stiepjas tik garš cik garš ir contents.

Kods:

<html>
<head>
<title>TEST PAGE!</title>
</head>
<style>
#page {	
width: 955px;
min-height: 500px;
margin: 0 auto;
}

#logo {
margin: 0 auto;
width: 955px;
height: 124px;
background: url(../images/logo.gif) no-repeat left top;
}

#menu {
float: left;
width: 209px;
background:url(../images/menu.gif) #75bed9 no-repeat;
min-height: 500px;
}

#content {
float: right;
width: 738px;
background:url(../images/content.gif) #75bed9 no-repeat;
min-height: 500px;
}

#text {
margin: 60px 0 20px 20px;
}

#footer_text {
padding-top: 20px;
text-align:center;
}

#footer {
width: 955px;
margin: 6px auto;
background: url(../images/footer.gif) no-repeat left top;
height: 65px;
}
</style>
<body>
<div id="logo"><h1>LOGO!</h1></div>
   <div id="page">
       <div id="menu">
           <ul>
           <li><a href="./">Home</a></li>
           </ul>
       </div>
       <div id="content">
           <div id="text">
           CONTENTA SATURS!
           </div>
       </div>
       <div style="clear: both;"></div>
</div>
   <div id="footer">
       <div id="footer_text">COPYRIGHT</div>
   </div>
</div>
</body>
</html>

2easy · November 27, 2009

gribēt ir veselīgi :D

hehe es tā saprotu, ka vajag jau tikai lai vizuāli izskatītos, ka menu "stiepjas" līdz ar content

apvieno abas menu un content background bildes vienā garā bildē (width:955px height:1px) un liec kā page background, lai tā atkārtojas pa vertikāli. tad pat ja menu būtu garāks par content, content "stieptos" līdzi menu. tobish šis ir elastīgais/vispārīgais veids, kā taisa css layoutus ar kolonnām. ā un vēl apakšā pieliec otru background bildi priekš apaļajiem stūrīšiem abām kolonnām (menu,content)

mefisto · November 27, 2009

@2easy, varbūt te tomēr vajadžetu nedaudz pamācīties pamatus ...

http://www.positioniseverything.net/articles/onetruelayout/equalheight

2easy · November 27, 2009

oo paldies par linku :))

es jau tik mācos, es jau neko... :D

thesnarkie · November 29, 2009

šo, manuprāt, vajadzēja postot iekš css sadaļas.

bet nu jā, no mefisto linka var mācīties. ;)

eT` · November 29, 2009

cik sapratu man #page jāuzliek overflows un gan menu gan content jānodefinē margin un padding :?

2easy · November 30, 2009

yep, pareizi saprati. vispār labāk uzreiz pamēģini, nevis pārjautā. jo vairāk praktiski kko darīsi, jo vairāk pats iemācīsies un mazāk būs jautājumu :D

starp citu, par to mefisto linku ar "equal height colums" risinājumu. izlasīju to rakstu, un tur viss nav nemaz tik spīdoši. pats autors sākumā bija baigā starā un jau bezmaz norakstīja iepriekšējo "faux columns" metodi, bet kad pusgadu vēlāk atklājās šādi tādi gļuki, tad beigās pat atzina, ka viņa metodes patiesais lietderīgums drīzāk varētu būt tas, ka viņš atklājis jaunus browseru gļukus (kaut gan tie ir tikai dažos spec gadījumos, kas var arī nebūt aktuāli, atkarībā no projekta) :D:D:D un ka vnm ir vecā labā "faux columns" metode...

http://positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

So, the end result may be that the actual usefulness of the equal heights technique is in exposing flaws in certain rendering engines

Fortunately for me, it's the technique that I'm least concerned about since there's always Faux Columns to fall back on

ā un pa ceļam uzgāju vēl vienu elegantu risinājumu, kur kolonnām fonu pilnā augstumā dabū ar konteineru relatīvo pozicinēšanu. šeit ir piemēri visām 3x metodēm

<!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><title>test</title>
<style type="text/css">
#page-1 {background: url(i/page-bg.gif); width: 200px; overflow: hidden}
.col-1 {float: left; width: 100px}

#page-2 {width: 200px; overflow: hidden}
#col1-2 {background: url(i/col1-bg.gif)}
#col2-2 {background: url(i/col2-bg.gif)}
.col-2 {float: left; width: 100px; padding-bottom: 10000px; margin-bottom: -10000px}

#page-3 {background: url(i/col2-bg.gif); position: relative; width: 200px; overflow: hidden}
#pagebg-3 {background: url(i/col1-bg.gif); float: left; position: relative; left: -100px}
.col-3 {float: left; position: relative; left: 100px; width: 100px}
</style>
</head><body>

<a href="http://alistapart.com/articles/fauxcolumns">Faux Columns (since 2004)</a>
<div id="page-1">
 <div id="col1-1" class="col-1">123<br />456</div>
 <div id="col2-1" class="col-1">aaa<br />bbb<br />ccc</div>
</div><br />

<a href="http://positioniseverything.net/articles/onetruelayout/equalheight">Equal Height Columns (since 2005)</a>
<div id="page-2">
 <div id="col1-2" class="col-2">123<br />456</div>
 <div id="col2-2" class="col-2">aaa<br />bbb<br />ccc</div>
</div><br />

<a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks">Equal Height Columns (2008 edition)</a>
<div id="page-3">
<div id="pagebg-3">
 <div id="col1-3" class="col-3">123<br />456</div>
 <div id="col2-3" class="col-3">aaa<br />bbb<br />ccc</div>
</div></div>

</body></html>

pirmajā piemērā fonam izmantoju šādu bildi (dimensijas: 200x1)

bet nākamajos katra kolonna ir puse no šīs (tik triviālā gadījumā, protams, pietiek vnk ar orange/red, bet tā kā topica autoram vajag ar ēnām, tad ieliku bildes)

anyway, man vislabāk patīk "faux columns", ko jau sākumā ieteicu eT`, kaut vai tāpēc, ka tur vajag vismazāk html,css, lai to norealizētu. man liekas, ka jo risinājumā ir mazāk floati un negatīvi margini/poziconēšana, jo labāk. vismaz vienkāršākam layoutam ir mazāka varbūtība, ka tas var radīt kkādus blakusefektus dziļāk contentā, kur jau arī var būt visādas struktūras ar floatiem, pozicionēšanām, utt

Sign In

DIV`u problēma.

Recommended Posts

eT`

Link to comment

Share on other sites

2easy

Link to comment

Share on other sites

mefisto

Link to comment

Share on other sites

2easy

Link to comment

Share on other sites

thesnarkie

Link to comment

Share on other sites

eT`

Link to comment

Share on other sites

2easy

Link to comment

Share on other sites

Join the conversation

Browse

Activity