Zaloguj się

byker · 03-10-2012, 13:43

Witam,
Buduję stronę o szerokości 900px (div wrapper), w której jest sporo divów. Część ma ustawione float: left, i wyskakuje z normalnego obiegu divów. Chciałbym całą stronę obramować, ale kiedy dodaję znacznik border: solid do diva wrapper, obramowanie nie obejmuje divów z float. Ustawienie sztywnej długości dla wrapper nie ma sensu, bo długosć strony będzie się zmieniała. Czy jest na to jakieś rozwiązanie? Proszę o pomoc. Pozdrawiam.

camelrafal · 03-10-2012, 13:57

daj linka do strony

byker · 03-10-2012, 14:23

Przykro mi, stronę robię na localhost więc nie moge jej pokazać (przy wordpressie eksport na zewnętrzny serwer troche trwa).
Sprubuję opisać jak to jest w kodzie:
<code>
<div id= "wrapper">
<div id ="header">
</div>
<div id= "slider">
</div>
<div id = "menupionowe">
</div>
<div id= "content">
</div>
<div id="promocje">
</div>
<div id="publikacje">
</div>
<div id="wydarzenia">
</div>
</div>
</code>
header i slider są spozycjonowane statycznie, reszta ma ustawiony float: left lub right.
Bedę wdzięczny za jakieś wskazówki.

camelrafal · 03-10-2012, 15:15

dalej nic to nie mówi
podaj kod css w takim razie ale w znaczniki code w nawiasach kwadratowych

byker · 03-10-2012, 15:55

może to coś rozjaśni:

Kod:
html:

<body>

<div id="wrapper">

    <div id="header_tlo">

    </div>

    <div id="header">

    </div>

    <div id="slider_gora">

    </div>

    <div id="sidebar_lewy">

    <div id="menu">

    </div>

    <div id="baner">    

    </div>

    </div>

    <div id="content">

    <div id="thumbnail">

    </div>

    </div>

    <div id="promocje">

    </div>

    <div id="aktualnosci>"

    <div class="wydarzenia">

    </div>

    <div class="publikacje">

    </div>

    </div>

    <div id="footer">

    </div>

</div>

</body>

css:

body{

    background: #fff;

    font-size: 90%;

    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;

    line-height: 1.6;

    color: #555;

}

#wrapper{

    margin: 0px auto 0px auto;

    padding: 0 px 0px;

    width: 900px;

}

#header_tlo{

background: url(http://localhost/wordpress/wp-content/themes/birdsite/images/tlo.jpg) no-repeat;

width: 900px;

height: 100px;

margin-bottom: -100px;

}

#sidebar_lewy{

float: left;

min-height: 900px;

width: 200px;

padding-right: 5 px;

border-right-style: solid;

border-width:1px;

#menu {

width:200px;

margin-bottom: 100px;

}

#baner{

width: 100px;

}

#promocje{

float:right;

border-left-style: solid;

border-width:1px;

min-height: 600px;

padding-left: 5px;

width: 200px;

}

#content{

    width: 395 px;

    text-align: left;

    padding: 0 auto;

    margin:  0 auto;

    clear: both;

}

#content #thumbnail {

    width: 490px;

    float: left;

}

#aktualnosci{

float:left;

width: 495x;

height: 405px;

}

#aktualnosci .wydarzenia{

width: 248px;

height: 400px;

float: left;

border-top: solid;

border-width: 1px;

}

#aktualnosci .publikacje{

width: 248px;

height: 400px;

float: left;

border-top: solid;

border-width: 1px;

}

#footer {

    background: url(http://localhost/wordpress/wp-content/themes/birdsite/images/headers/tlo.png) repeat-x;

    border-top: solid;

    border-width: 2px;

    border-color: #fff;

    float: left;

    width: 100%;

    padding:  0;

    text-align: center;

    min-height: 100px;

    }

camelrafal · 03-10-2012, 17:29

no i w czym masz problem??
do #wrappera dodałem

Kod:
border: 1px solid;

i dobrze jest (ramka oblewa całego wrappera)

byker · 03-10-2012, 18:08

widocznie gdzieś jest błąd w innych divach których nie podałem, bo u mnie efekt jest zgoła inny. Dzięki za pomoc.

**Kartofelek** · 03-10-2012, 23:28

google: css clearfix

byker · 04-10-2012, 03:13

to jest dobra podpowiedź! Clearfix rozwiązał problem. Dzięki.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie