Forum PHP.pl > Problem z rozmieszczeniem strony (uklad 3- obszarowy)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem z rozmieszczeniem strony (uklad 3- obszarowy)

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

martinstw

20.12.2008, 17:01:48

Witam!

Mam następującą stronę: http://www.sendspace.com/file/p50ych

Czy mógłby mi ktoś powiedzieć jak poprawić kod, żeby strona wyglądała tak:

- u góry nagłówek z takimi samymi marginesami w pionie, górnym i dolnym (szerokość na cała stronę),
- pod nagłówkiem, żeby zanjdowały się trzy obszary obok siebie,
- pod nimi stopka 1 z przyciskiem (szerokość na całą stronę),
- a pod nim stopka 2 (szerokość na cał stronę),

Obecnie lewy obszar jest bardzo wydłużony do dołu, przez co wypycha dwie stopki w dół i tworzy się pusta przestrzeń.
Srodkowy obszar jest przesunięty w lewo.

Jak można poprawić te błedy?

Proszę o pomoc

Pozdrawiam

martinstw

erix

20.12.2008, 19:18:19

Cytat

Mam następującą stronę: http://www.sendspace.com/file/p50ych

Nie oczekuj, że każdy będzie ściągał stronę do siebie i specjalnie dla Ciebie rozpakowywał, itd, itp. Umieść stronę w sieci i do niej linkuj.

Gryf

21.12.2008, 14:18:04

ehh...
Powiem tak szkoda czasu na poprawianie twojego kodu
dużo prościej jest po prostu napisać to od nowa

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <title>PageName</title>
        <meta http-equiv = "Content-Language" content = "pl" />
        <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
        <link rel = "stylesheet" href = "style.css" type = "text/css" />
    </head>
    <body>
        <div id = "header">
            <h1>FORMULARZ WYBORU MASZYNY</h1>
        </div>
        <div id = "content">
            <div id = "contentLeft">
                Text, text text ...
            </div>
            <div id = "contentCenter">
                Text, text text ...
            </div>
            <div id = "contentRight">
                Text, text text ...
            </div>
        </div>
        <div id = "footer">
            Button
        </div>
        <div id = "footer2">
            stopka
        </div>
    </body>
</html>

oraz css

Kod

html, body {
    color : #000000;
    margin : 0px 0px 0px 0px;
    padding : 0px 0px 0px 0px;
    text-align : center;
}
#content {
    background-color : #E6E6FA;
    clear : both;
    height : auto;
    text-align : left;
    width : 100%;
}
#contentCenter {
    background-color : #00FFFF;
    float : left;
    height : auto;
    width : 60%;
}
#contentLeft {
    background-color : #6495ED;
    float : left;
    height : auto;
    width : 20%;
}
#contentRight {
    background-color : #7FFF00;
    float : left;
    height : auto;
    width : 20%;
}
#footer {
    background-color : #7FFFD4;
    clear : both;
    height : 40px;
    text-align : center;
    width : 100%;
}
#footer2 {
    background-color : #C0C0C0;
    clear : both;
    height : 40px;
    text-align : center;
    width : 100%;
}
#header {
    background-color : #C0C0C0;
    clear : both;
    height : auto;
    width : 100%;
}
#header h1 {
    color : #0000FF;
    margin : 0px 0px 0px 0px;
    padding : 15px 0px 15px 0px;
}

popraw style względem swojego projektu i proszę zmień edytor.

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.