Witam.
Chcialbym zrobic taki Layoucik stronki oparty o warstwy DIV.
Tutaj jest screen
Niestety mam bardzo duze problemu bo jak cos mi zaczyna wychodzi to jest problem z kompatybilnoscia miedzy przegladarkami.
Bardzo prosze o pomoc w napisaniu poprawnego CSSa.
Pełna wersja: [css] layoucik - problemy z DIVami
Zajrzyj tu: http://glish.com/css/ (szczególnie tabelka po prawej).
Witam.
Wielkie dzikei za linka.
Czesciowo juz sobie dzieki temu poradzilem.
Tutaj mozna zobaczy jak to wyglada: TEST1
1. Niestety mam problem aby wszytko wysrodkowac.
2. Ponadto "STOPKA" zamiast byc na dole w Firefoxie i w Operze jest zaraz pod "prawa" kolumna.
3. Jesli bede uzywal pozniej procz DIVow tabel to czy sotrna bedzie zgodna z XHTML 1.0
4. Jak ustawic minimalna wysokosc DIV tam gdzie jest tresc i lewa kolumna ?
5. div col2_page (ten z trescia ma) ma wymiar 630px zas PRAWY ma 150 px - w sumie che aby strona miala szerokosc 780px - jednak po takim ustawieniu lewa kolumna wychodzi 2 px na prawo
Z gory dzieki za pomoc.
Wielkie dzikei za linka.
Czesciowo juz sobie dzieki temu poradzilem.
Tutaj mozna zobaczy jak to wyglada: TEST1
1. Niestety mam problem aby wszytko wysrodkowac.
2. Ponadto "STOPKA" zamiast byc na dole w Firefoxie i w Operze jest zaraz pod "prawa" kolumna.
3. Jesli bede uzywal pozniej procz DIVow tabel to czy sotrna bedzie zgodna z XHTML 1.0
4. Jak ustawic minimalna wysokosc DIV tam gdzie jest tresc i lewa kolumna ?
5. div col2_page (ten z trescia ma) ma wymiar 630px zas PRAWY ma 150 px - w sumie che aby strona miala szerokosc 780px - jednak po takim ustawieniu lewa kolumna wychodzi 2 px na prawo
Z gory dzieki za pomoc.
1. Dla body dodaj styl:text-align:center
Dodaj jeszcze jedną warstwę i niej zamknij całą strukturę strony.
2. Po znaczniku zamykającym right_prawe daj <br style="clear:both" />.
3. Strona będzie zgodna z xhtml.
4. Jeśli wysokość będzie u Ciebie zmienna to musisz użyć tricku
klik
5. IE i FF mają innaczej interpertują margin,padding i bordery, na forum było o tym wiele razy, poszukaj.
Dodaj jeszcze jedną warstwę i niej zamknij całą strukturę strony.
Kod
#cont {
margin:0 auto;
width:780px;
}
margin:0 auto;
width:780px;
}
2. Po znaczniku zamykającym right_prawe daj <br style="clear:both" />.
3. Strona będzie zgodna z xhtml.
4. Jeśli wysokość będzie u Ciebie zmienna to musisz użyć tricku
klik
5. IE i FF mają innaczej interpertują margin,padding i bordery, na forum było o tym wiele razy, poszukaj.
Witam.
Teraz stronka wygalda tak:
TUTAJ
I tak warstwa o nazwie #right_page (prawe menu) jak widac na stronie nie jest idealnie dociagnieta do prawej - jest roznica 2 pikseli.
Zas w tej warstwie mam kolejne 2 warstwy: #lewakolumna1 (REKLAMA) oraz #lewakolumna2 (IMPREZY) - z tymi warstwami jest tak ze che aby mialy szerokosc taka sama jak warstwa w ktroej sie znajduja czyli: jak #right_page - niestety ta warstwa ma 150px i jak dam warstwie z reklama tez 150px to cala stronka sie sypie.
Bardzo prosze o pomoc.
Z gory bardzo dziekuje.
Teraz stronka wygalda tak:
TUTAJ
I tak warstwa o nazwie #right_page (prawe menu) jak widac na stronie nie jest idealnie dociagnieta do prawej - jest roznica 2 pikseli.
Zas w tej warstwie mam kolejne 2 warstwy: #lewakolumna1 (REKLAMA) oraz #lewakolumna2 (IMPREZY) - z tymi warstwami jest tak ze che aby mialy szerokosc taka sama jak warstwa w ktroej sie znajduja czyli: jak #right_page - niestety ta warstwa ma 150px i jak dam warstwie z reklama tez 150px to cala stronka sie sypie.
Bardzo prosze o pomoc.
Z gory bardzo dziekuje.
Masz css'a to rozwiązaniem.
Co do tych reklam. Jeśli chcesz żeby miały szerokość taką jak prawa warstwa, bo wywal z nich bordery i daj width:100%.
Kod
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin:10px 10px 0px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #efefef;
font-size: 11px;
}
#content {
margin:0 auto;
width:780px;
border:1px solid #c0c0c0;
}
#logo {
background:#efefef;
height:50px;
width:780px;
}
#banner {
background:#ffffff;
height:60px;
width:780px;
border-top:1px solid #c0c0c0;
border-bottom:1px solid #c0c0c0;
}
#navigacja {
background:#f5f5f5;
height:16px;
width:780px;
border-bottom:1px solid #c0c0c0;
}
#stopka {
clear: both;
background:#efefef;
height:20px;
width:780px;
border-top:1px solid #c0c0c0;
}
#main2{
float: left;
width:625px;
height:500px;
background:#fff;
border-right:1px solid #c0c0c0;
}
#content>#main2 {
width:624px;
}
#right_page{
float:left;
width:154px;
height:500px;
background:#fff;
}
#lewakolumna1 {
margin:0 auto;
margin-top:8px;
border:1px solid;
border-color:#F5F5F5 #c0c0c0 #c0c0c0 #c0c0c0;
background: #efefef;
width:120px
}
#lewakolumna2 {
margin:0 auto;
margin-top:8px;
border:1px solid;
border-color:#F5F5F5 #c0c0c0 #c0c0c0 #c0c0c0;
background: #f8f8f8;
width:120px;
}
#lewakolumna1 h1 {
background:#008000;
font-size:14px;
padding-top:10px;
}
#lewakolumna2 h1 {
background:#008000;
font-size:14px;
padding-top:10px;
}
* {
margin:0;
padding:0;
}
body {
margin:10px 10px 0px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #efefef;
font-size: 11px;
}
#content {
margin:0 auto;
width:780px;
border:1px solid #c0c0c0;
}
#logo {
background:#efefef;
height:50px;
width:780px;
}
#banner {
background:#ffffff;
height:60px;
width:780px;
border-top:1px solid #c0c0c0;
border-bottom:1px solid #c0c0c0;
}
#navigacja {
background:#f5f5f5;
height:16px;
width:780px;
border-bottom:1px solid #c0c0c0;
}
#stopka {
clear: both;
background:#efefef;
height:20px;
width:780px;
border-top:1px solid #c0c0c0;
}
#main2{
float: left;
width:625px;
height:500px;
background:#fff;
border-right:1px solid #c0c0c0;
}
#content>#main2 {
width:624px;
}
#right_page{
float:left;
width:154px;
height:500px;
background:#fff;
}
#lewakolumna1 {
margin:0 auto;
margin-top:8px;
border:1px solid;
border-color:#F5F5F5 #c0c0c0 #c0c0c0 #c0c0c0;
background: #efefef;
width:120px
}
#lewakolumna2 {
margin:0 auto;
margin-top:8px;
border:1px solid;
border-color:#F5F5F5 #c0c0c0 #c0c0c0 #c0c0c0;
background: #f8f8f8;
width:120px;
}
#lewakolumna1 h1 {
background:#008000;
font-size:14px;
padding-top:10px;
}
#lewakolumna2 h1 {
background:#008000;
font-size:14px;
padding-top:10px;
}
Co do tych reklam. Jeśli chcesz żeby miały szerokość taką jak prawa warstwa, bo wywal z nich bordery i daj width:100%.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.