+- 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: problem z pozycjonowaniem elementow DIV (/thread-problem-z-pozycjonowaniem-elementow-div)
problem z pozycjonowaniem elementow DIV - inos - 23-11-2008
Witam
Mam taki problem nad ktorym juz siedze z 3 dni i niestety to co wyszukalem na necie tzn. teoretyczne rozwiazanie mojego problemu nie skutkuje:/
Chce wypozycjonowac 3 elementy obok siebie i pod tym wszystkim wstawic stopke... Udalo mi sie to uzyskac za pomoca float ale niestety stopka nie jest na dole strony tylko zlewa sie z tabelkami :/ Jesli usune float to tabelki zamiast na srodku sa jedna pod druga... probowalem wypozycjonowac to za pomoca marginesow ale gdy dodaje cos do bocznej tabelki srodkowa przesowa sie na dol - zamiast pozostac na gorze:/
zaczynam swoja przygode z php ale najpierwchce stworzyc "szkielet" strony zeby pozniej umieszczac w nim php;-)
ponizej daje kody do strony i css :
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div class="obramowanie">
<div class="logo">
logo
</div>
<div class="logo_menu">logo_menu
</div>
</div>
<div class="obramowanie">
tu maja sie znajdowac bloki : lewy, srodek i prawy
<div class="lewa_strona">
<div class="naglowekl">naglowek
</div>
<div class="kolumnal">
lewa kolumna
</div>
<div class="naglowekl">naglowek
</div>
<div class="kolumnal">
lewa kolumna
</div>
<div class="naglowekl">naglowek
</div>
<div class="kolumnal">
lewa kolumna
</div>
<div class="naglowekl">naglowek
</div>
<div class="kolumnal">
lewa kolumna
</div>
<div class="naglowekl">naglowek
</div>
<div class="kolumnal">
lewa kolumna
</div>
<div class="naglowekl">naglowek
</div>
<div class="kolumnal">
lewa kolumna
</div>
</div>
<div class="srodek">
srodek
</div>
<div class="prawa_strona">
<div class="naglowekp">naglowek
</div>
<div class="kolumnap">prawa kolumna
</div>
<div class="naglowekp">naglowek
</div>
<div class="kolumnap">prawa kolumna
</div>
<div class="naglowekp">naglowek
</div>
<div class="kolumnap">prawa kolumna
</div>
</div>
</div>
<div class="stopka">
stopka
</div>
</body>
</html>Kod:
BODY
{
text-align: center; /*centruje caly tekst na dokumencie*/
font: 10px; /*czcionka dokumentu-napisow*/
}
A:link /*musza byc te 3 link, active i visited*/
{
color: #444444; /*color linka*/
text-decoration: none; /*link bez podkreslenia*/
}
A:active /*aktywny*/
{
color: #444444; /*color linka*/
text-decoration: none; /*link bez podkreslenia*/
}
A:visited /*odwiedzony*/
{
color: #444444; /*color linka*/
text-decoration: none; /*link bez podkreslenia*/
}
.obramowanie
{
border: 1px solid #888888;
width: 90%; /*szerokosc*/
height: auto; /*wysokosc*/
margin: auto auto;
margin-top: 2%;
}
.logo
{
height: 10%;
text-align: right;
border-top: 1px solid #888888; /* obramowanie*/
background-color: #DDDDED; /*kolor tego elementu (wypelnienie tego bloku)*/
color: #444444; /*kolor tekstu*/
font-size: 12px; /*rozmiar czcionki*/
padding: 3px 10px; /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/
}
.logo_menu
{
text-align: right;
height: 2%;
border: 1px solid #888888; /* obramowanie*/
background-color: #DDDDED; /*kolor tego elementu (wypelnienie tego bloku)*/
color: #444444; /*kolor tekstu*/
font-size: 12px; /*rozmiar czcionki*/
padding: 3px 10px; /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/
margin: 0px 0px 0px 0px;
}
.lewa_strona
{
border: 1px solid #888888;
width: 15%; /*szerokosc*/
height: auto; /*wysokosc*/
float: left;
}
.prawa_strona
{
border: 1px solid #888888;
width: 15%; /*szerokosc*/
height: auto; /*wysokosc*/
float: right;
}
.naglowekl
{
width: 60%; /*szerokosc*/
height: 2%; /*wysokosc*/
text-align: center;
border: 1px solid #888888; /* obramowanie ale bez dolnego paska*/
background-color: #DDDDED; /*kolor tego elementu (wypelnienie tego bloku)*/
color: #444444; /*kolor tekstu*/
font-size: 12px; /*rozmiar czcionki*/
padding: 3px 10px; /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/
}
.kolumnal
{
width: 60%; /*szerokosc*/
height: 15%; /*wysokosc*/
text-align: left;
border: 1px solid #888888; /* obramowanie ale bez dolnego paska*/
background-color: #DDDDED; /*kolor tego elementu (wypelnienie tego bloku)*/
color: #444444; /*kolor tekstu*/
font-size: 12px; /*rozmiar czcionki*/
padding: 3px 10px; /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/
margin-bottom: 20%;
}
.naglowekp
{
width: 60%; /*szerokosc*/
height: 2%; /*wysokosc*/
text-align: center;
border: 1px solid #888888; /* obramowanie ale bez dolnego paska*/
background-color: #DDDDED; /*kolor tego elementu (wypelnienie tego bloku)*/
color: #444444; /*kolor tekstu*/
font-size: 12px; /*rozmiar czcionki*/
padding: 3px 10px; /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/
float: right;
}
.kolumnap
{
width: 60%; /*szerokosc*/
height: 20%; /*wysokosc*/
text-align: left;
border: 1px solid #888888; /* obramowanie ale bez dolnego paska*/
background-color: #DDDDED; /*kolor tego elementu (wypelnienie tego bloku)*/
color: #444444; /*kolor tekstu*/
font-size: 12px; /*rozmiar czcionki*/
padding: 3px 10px; /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/
margin-bottom: 35%;
float: right;
}
.srodek
{
width: 59%; /*szerokosc*/
height: 76%;
text-align: justify; /*wyjustowanie tekstu*/
border: 1px solid #888888;
background-color: #EEEEEE; /*kolor tego elementu (wypelnienie tego bloku)*/
font-size: 10px; /*rozmiar czcionki*/
color: #555555; /*kolor tekstu*/
margin-right: 20%;
margin-left: 20%;
/*float: left;*/
/*padding: 10px 10px 25px 10px; */ /*odstep od gory 10 dolu 25 i pawej-lewej 10 do tekstu*/
}
.stopka
{
text-align: right;
height: 2%;
border: 1px solid #888888; /* obramowanie ale bez gornego paska*/
background-color: #E9E9E9; /*kolor tego elementu (wypelnienie tego bloku)*/
color: #444444; /*kolor tekstu*/
font-size: 10px; /*rozmiar czcionki*/
padding: 3px 10px; /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/
margin-bottom: 0%;
margin-top: 2%;
}z gory dzieki za pomoc bo ja juz nie mam pomyslow:/
Pozdrawiam
RE: problem z pozycjonowaniem elementow DIV - Jupiter - 23-11-2008
Wyślij jakiegoś screen'a! U mnie wygląda tak
http://upload.programik.net/view.php?file_id=6
RE: problem z pozycjonowaniem elementow DIV - inos - 23-11-2008
hehe no u mnie to inaczej widac ;-)
dam dwa screeny bo na jednym sie nie zmiescilo ;-)
fotki sa w zalaczniku;-)
dzieki za zainteresowanie:-)
RE: problem z pozycjonowaniem elementow DIV - Jupiter - 23-11-2008
Rozwiązaniem może być
Kod:
clear:both;RE: problem z pozycjonowaniem elementow DIV - inos - 23-11-2008
RE: problem z pozycjonowaniem elementow DIV - Szorstki - 06-12-2008
Pozwolę sobie podłączyć się pod temat, także związany z pozycjonowaniem. Wewnątrz 1 DIVa znajdują się dwa inne, niestety ten 1 główny mimo że ma wys na auto jest krótszy niż wewnętrzne- w efekciewyjeżdżają poza tło(wygląda to tak, jakby tło nie było dla nich rysowane). Oto kod:
Kod:
<div id="zewnetrzny">
<div class="pierwszy"><p><span>1 wewnetrzny div lezy po prawej i jest wypelniony jakas trescia</span></p></div>
<div id="drugi">
<h1><span>Witam serdecznie</span></h1>
<p><span>jakas tresc, ktora jest po lewej i tez cos w nim jest</span></p>
</div>
</div>Kod:
#zewnetrzny {
color: #000;
font-size: 12px;
font-family: Verdana;
background: url(img/body.gif) repeat-y;
position: relative;
width: 800px;
height: auto;
}
#pierwszy {
float: right;
width: 150px;
position: relative;
clear: right;
display: auto;
}
#drugi{
float: left;
margin-left: 50px;
width: 450px;
}IE wyświetla to tak jak chcę, problem jest w operze... wer.9.62. ff nie używam, więc nie wiem jak to widzi.
RE: problem z pozycjonowaniem elementow DIV - pRzemo - 06-12-2008
Wielu już się z tym borykało i wiele jest rozwiązań na ten problem. Ja stosuje taki myk:
CSS:
Kod:
.clear {
clear:both;
}HTML:
Kod:
<div id="zewnetrzny">
<div class="pierwszy"><p><span>1 wewnetrzny div lezy po prawej i jest wypelniony jakas trescia</span></p></div>
<div class="drugi">
<h1><span>Witam serdecznie</span></h1>
<p><span>jakas tresc, ktora jest po lewej i tez cos w nim jest</span></p>
</div>
<div class="clear"></div>
</div>Na sam koniecd "zewnętrznego" diva wklejasz pusty div czyszczący.
Powinno zadziałać
RE: problem z pozycjonowaniem elementow DIV - Szorstki - 06-12-2008
Nie pomyślałem o dodatkowym divie, dzięki