+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] obramowanie wrappera (/thread-css-obramowanie-wrappera)
[css] obramowanie wrappera - byker - 03-10-2012
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.
RE: [css] obramowanie wrappera - camelrafal - 03-10-2012
daj linka do strony
RE: [css] obramowanie wrappera - byker - 03-10-2012
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.
RE: [css] obramowanie wrappera - camelrafal - 03-10-2012
dalej nic to nie mówi
podaj kod css w takim razie ale w znaczniki code w nawiasach kwadratowych
RE: [css] obramowanie wrappera - byker - 03-10-2012
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;
}RE: [css] obramowanie wrappera - camelrafal - 03-10-2012
no i w czym masz problem??
do #wrappera dodałem
Kod:
border: 1px solid;RE: [css] obramowanie wrappera - byker - 03-10-2012
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.
RE: [css] obramowanie wrappera - Kartofelek - 03-10-2012
google: css clearfix
RE: [css] obramowanie wrappera - byker - 04-10-2012
to jest dobra podpowiedź! Clearfix rozwiązał problem. Dzięki.