23-11-2008, 20:36
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 :
z gory dzieki za pomoc bo ja juz nie mam pomyslow:/
Pozdrawiam
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
