Forum PHP.pl > [HTML][CSS]Odpowiednie rozmieszczenie DIV'ow

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Odpowiednie rozmieszczenie DIV'ow

OrginaL

8.11.2008, 17:39:14

Witam,
mam kodzik:
kod cssa:

Kod

   #stopka {
        margin: 5px 20px 20px 20px;
        padding: 0px;
        border: 2px solid #868686;
        background: black;
        }

    #top {
        margin: 5px 20px 20px 20px;
        padding: 10px;
        border: 2px solid #868686;
        background: black;
        height: 100px;
        voice-family: "\"}\"";
        voice-family:inherit;
        height: 70px;
        }
    body #top {
        height: 70px;
        }
    #left {
        position: absolute;
        top: 120px;
        left: 0px;
        margin: 20px;
        padding: 10px;
        border: 2px solid #868686;
        background: black;
        width: 150px;
        voice-family: "\"}\"";
        voice-family:inherit;
        width: 120px;
        }
    body #left {
        width: 120px;
        }
    #middle {
        margin: 20px 190px 20px 190px;
        padding: 10px;
        border: 2px solid #868686;
        background: black;
        }
    #right {
        position: absolute;
        top: 120px;
        right: 0px;
        margin: 20px;
        padding: 10px;
        border: 2px solid #868686;
        background: black;
        width: 150px;
        voice-family: "\"}\"";
        voice-family:inherit;
        width: 120px;
        }
    body #right {
        width: 120px;
        }

kod html:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<style type="text/css" media="all">@import url("style.css");</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
</head><body>
<div id="top">
<p>logo</p>
</div>
<div id="left">
<p>lewy</p>
</div>
<div id="middle">
srodek
</div>
<div id="right">
<p>prawy</p>
</div>
<div id="stopka">
<p>stopka</p>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Strona mi się wyświetla tak:

A chce żeby kolumny lewy, srodek, prawy byly przy sobie i pod topem a stopka byla pod tymi 3 kolumnami.
Prosze was o pomoc

piotrooo89

8.11.2008, 17:47:25

[HTML] pobierz, plaintext 
#logo
	{
		background-color: blue;
	}
	#leftmenu
	{
		width:25%;
		float: left;
		background-color: red;
	}
	#main
	{
		background-color: yellow;
		float: left;
		width: 50%;
	}
	#rightmenu
	{
		width:25%;
		float: right;
		background-color: red;
	}
	#stopka
	{
		clear: both;
		background-color: blue;
	}
 
<div id="logo">
	logo
</div>
<div id="leftmenu">
	lewe menu
</div>
<div id="main">
	sordek
</div>
<div id="rightmenu">
	prawe menu
</div>
<div id="stopka">
	stopka
</div>
[HTML] pobierz, plaintext

hiszpanespaniol

8.11.2008, 17:51:20

w lewej i prawej masz paragrafy, a w środkowej nie. paragrafy (<p>) mają swoje marginesy. usuń/zdefiniuj je.

marginesy zsumuj i zobacz, czy 120px dla left, to nie za dużo skoro top ma 95px.

OrginaL

9.11.2008, 13:13:15

ok ustawiłem i jest ok poza srodkiem.
mimo wszystkiego srodek nie chce byc pod logiem.
Efekt:

Kod css:

Kod

#stopka{
top: auto;
height: auto;
overflow: hidden;
margin: 5px 20px 20px 20px;
padding: 0px;
border: 2px solid #868686;
background: black;
}

#top{
margin: 5px 20px 20px 20px;
padding: 10px;
border: 2px solid #868686;
background: black;
voice-family: "\"}\"";
voice-family: inherit;
overflow: hidden;
}

body #top{
height: 100px;
}

#left{
position: absolute;
margin: 20px;
padding: 10px;
border: 2px solid #868686;
background: black;
voice-family: "\"}\"";
voice-family: inherit;
overflow: hidden;
}

body #left{
top: 110px;
height: auto;
width: 150px;
}

#middle{
margin: 10px 192px 10px 192px;
padding: 10px;
border: 2px solid #868686;
background: black;
overflow: hidden;
}

body #middle{
top: auto;
height: auto;
width: auto;
}

#right{
position: absolute;
right: 8px;
margin: 20px;
padding: 10px;
border: 2px solid #868686;
background: black;
voice-family: "\"}\"";
voice-family:inherit;
overflow: hidden;
}

body #right{
top: 110px;
width: 150px;
height: auto;
}

a:active, a:focus, a:hover, a:link, a:visited{
font-weight: lighter;
color: white;
vertical-align: baseline;
text-decoration: blink;
}

body{
background: url(img/tlo.png);
font: serif;
color: white;
}

co bedzie tego wina?

ayeo

9.11.2008, 13:18:27

@OrginaL, witaj na forum. Proszę zapoznaj się z regulaminem. Chodzi mi o tytuł Twojego posta. W tytule staraj się przybiżyć problem, bo "POMOCY!" nic nikomu nie mówi. Szanuj czas innych.

Pozdrawiam!

korek_a

9.11.2008, 13:58:46

usuń wszystkie marginesy i paddingi ustaw na 0 bo masz ich stanowczo za dużo i u mnie jest ok

a po za tym przemyślał bym twoje konstrukcie kodu bo żeby zrobić taki układ strony wystarczy ewidentnie miej kodu

chociaż wiadomo ile koderów tyle rozwiązani

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.