PDA

Zobacz pełną wersję : 1wszy szablon i uparty DIV


skyd34th
28-09-2010, 20:37
Witam

Od kilku dni męczę się z divami, mianowicie:

1. DIV container zawiera w sobie divy (left,content,right) z treścia.
Jak go zmusić aby rozciągał się do długości divów które zawiera ?



<body>

<div id="page">
<div id="top_">
<div id="login">
<jdoc:include type="modules" name="top" style="top_" />
</div>
</div>
<div id="header_">
<jdoc:include type="modules" name="header" style="header_" />
</div>
<div id="toolbar_">
<div id="menu_">
<jdoc:include type="modules" name="toolbar" style="toolbar_" />
</div>
</div>
<div id="container_">
<?php if($this->countModules('left')) : ?>
<div id="left_">
<jdoc:include type="modules" name="left" style="left_" />
</div>
<?php endif; ?>

<div id="content<?php echo $contentwidth; ?>">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>

<div id="right_">
<jdoc:include type="modules" name="right" style="right_" />
</div>

<div id="beforefoot">
</div>

<div id="footbar_">
<div id="stopka_">
<jdoc:include type="modules" name="footbar" style="stopka_" />
</div>
</div>
</div>

</div>


</body>
#page {
width: 1300px;
position: absolute; left: 50%;
margin-left: -650px;
background-color:#0a162b;
}

#main {
position:absolute;
left:0px;
top:0px;
width:1280px;
height:2288px;
}

#top_ {
position:absolute;
left:0px;
top:0px;
width:1280px;
height:41px;
background-image:url(images/top.jpg)
}

#login {
position:absolute;
left:580px;
top:10px;
width:500px;
height:41px;
}

#header_ {
position:absolute;
left:1px;
top:41px;
width:1279px;
height:459px;
background-image:url(images/header_glowna.jpg)
}

#toolbar_ {
position:absolute;
left:0px;
top:500px;
width:1280px;
height:58px;
background-image:url(images/toolbar.jpg)
}

#menu_ {
position:absolute;
left:152px;
top:0px;
width:962px;
height:58px;
}

#container_ {
position:absolute;
left:0px;
top:558px;
width:1280px;
background-image:url(images/container.jpg)
}

#beforefoot {clear: both;
}

#footbar_ {
position:absolute;
left:0px;
width:1279px;
height:276px;
float:left;
background-image:url(images/footbar.jpg)
}

#stopka_ {
position:absolute;
left:479px;
top:240px;
width:696px;
height:28px;
}

#left_ {
position:absolute;
left:175px;
top:20px;
width:209px;
height:auto;
}

#right_ {
position:absolute;
left:875px;
top:20px;
width:229px;
height:auto
}

#content80 {
position:absolute;
left:409px;
top:20px;
width:450px;
height:auto;
}

#content100 {
position:absolute;
left:200px;
top:20px;
width:659px;
font-size:16px;
height:auto;
}
Robster
28-09-2010, 20:41
Dodaj do DIV'a container nowy DIV (równorzędny dla tych 3 w środku, ale żeby wyświetlał się pod nimi, tak jak stopka na stronie) i w CSS nadaj mu taki atrybut:

clear: both;
skyd34th
28-09-2010, 20:58
Dodaj do DIV'a container nowy DIV (równorzędny dla tych 3 w środku, ale żeby wyświetlał się pod nimi, tak jak stopka na stronie) i w CSS nadaj mu taki atrybut:

clear: both;

Poprawiłem kod w 1wszym poście
dalej nic to nie zmienia,

uparcie div 'footbar' pojawia się zaraz pod DIV 'container'
tak jakby DIV 'container' miał height=0

tak jakby DIV 'container' nie widział wysokości wewnetrznych divów (left, content, right) które zawiera.
i defacto one wyświetlają się na divie 'footer' i lecą w dół

A chce aby footer był pod container (który byłby długości jak divy które zawiera) jednocześnie wyświetając tło.
krzychoooo
28-09-2010, 21:05
Witam
footbar masz ustawione :
position:absolute;

Więc jego położenie nie wynika z innych kontenerów.
Robster
28-09-2010, 21:13
Wow teraz w CSS spojrzałem. Dlaczego nadałeś wszystkim blokom position:absolute? Przecież to całkiem mija się z celem, teraz musisz pozycjonować każdy blok względem bloku nadrzędnego, a przecież one "same" mogą się ustawić w kolumny.
a_m
28-09-2010, 21:15
tam prawie wszystko ma absolute , musisz się pobawić w divami floatujacymi o określonych szerokościach; a jak chcesz mieć position:absolute, to poczytaj o jego kontekście pozycjonowania
krzychoooo
28-09-2010, 21:18
Zaglądni sobie tutaj (http://www.kurshtml.boo.pl/css/absolutne,pozycjonowanie.html)
dkint
28-09-2010, 21:21
Witam

Tak na szybko bez głębszej analizy, nie do końca przekonuje mnie "left: ....px;", "top:....px;" itp. czemu nie padding-left, padding-top np. ?

pozdrawiam
Krzysiek
a_m
28-09-2010, 21:23
@dkint, bo position jest absolute
dkint
28-09-2010, 21:26
Witam

a_m racja, nie zauważyłem ... :)

pozdrawiam
Krzysiek
skyd34th
28-09-2010, 21:40
Zdaję sobie sprawę że pozycjonowanie absolutne to nie najlepszy sposób, ale jak na pierwszy raz łatwiej było mi wszytko sobie poukładać. ;)

Pomijając już div 'footer' nie rozumiem dlaczego np DIV container (z tłem z obrazka) zachowuję się jakby był pusty (i miał height=0), a gdy na sztywno dam mu wysokość wyświetla tło.
Jest jakiś sposób aby jego wielkość była zależna od divów które zawiera w środku ?
a_m
28-09-2010, 21:49
pozycjonowaniem absolutnym można sobie poukładać, ale jako zasada dla witryny dynamicznej wymagającej np. zmiennej wysokości dla kontenerów treści ten sposób się nie nadaje; raczej nie spodziewaj się, że Ci tu zrobimy kompletny kod html+css
skyd34th
28-09-2010, 22:26
czyli w obecnej formie kodu jest to nie wykonalne ? i nie da się wykonać drobnej modyfikacji ?
a_m
28-09-2010, 22:29
drobnej - nie (drobna, to godzina, 2, 3 ?), wywal te "absolute", poczytaj o elementach pływających (float)