IPB

Witaj Gościu ( Zaloguj | Rejestruj )



 
 Reply to this topicStart new topic
[CSS] strona z 3kolumnami oparta na DIVach
ziele
post 30.06.2007 - 12:24
Post #1


Ma za dużo wolnego czasu
****

Grupa: Użytkownicy
Postów: 296
Dołączył: 23.06.2007
Skąd: się biorą dzieci?
Nr użytkownika: 52,393
no i zaczniemy od początku, bo pewnie spora część nawet podstaw nie umie tongue.gif

No i... podstawowy kod wraz z divem głównym o nazwie "cialo":
Kod
<html>
<head>

</head>

<body>
    <div id="cialo">
    

    </div>    
</body>
<html>

Strona miała być oparta na 3kolumnach dlatego w naszym głównym divie tworzymy wszystkie części:
Kod
<html>
<head>

</head>

<body>
    <div id="cialo">
    
    <div id="naglowek"> </div>

    <div id="lewo"> </div>

    <div id="srodek"> </div>

    <div id="prawo"> </div>

    <div id="stopka"> </div>
    

    </div>    
</body>
<html>

Dobrze jest już na początku tworzenia stronki zamykać starannie wszystkie znaczniki żeby potem zbytniego syfu sobie nie zrobić smile.gif
Poniżej pokazuję powyższy kod tongue.gif wraz z jakąś zawartością:
Kod
<html>
<head>

</head>

<body>
    <div id="cialo">
    
    <div id="naglowek">  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum.</div>

    <div id="lewo"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum.</div>

    <div id="srodek"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, </div>

    <div id="prawo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. </div>

    <div id="stopka"> Created by Jan Kowalski</div>
    

    </div>    
</body>
<html>

Stronka została już napisana więc teraz trzeba zdefiniować jej wygląd za pomocą arkuszy stylów css wink.gif
Kod
<head>

<style type="text/css">

body {
        background-color: #000;
        margin: 0;
        padding: 0;
        text-align:center;
    }

div {
        font: verdana 12px #000;
        position:relative;
    }

#cialo {
        margin:0 auto;
        padding:0 5px 0 5px;
        position:relative;
        width:700px;
        background-color:#fff;
        text-align:left;
        clear: both;
    }

#naglowek {
        background: #fff url(logo.jpg) no-repeat;
        width:700px;
        height:150px;
        margin-bottom:10px;
    }

#lewo {
        width:150px;
        float:left;
    }

#prawo {
        width:150px;
        float:right;
    }

#srodek {
        width:400px;
        float:left;
}

#stopka {
        clear:both;
        text-align:center;
}

</style>
</head>

Jeżeli jest to dla ciebie niezrozumiałe to oczywiście gotowca możesz pobrać stąd: http://www.plikownik.pl/484296
Oczywiście to od ciebie zależy jakimi kolorami i grafiką to wypełnisz wink.gif
Go to the top of the page
 
+Quote Post
« Następny starszy · Programowanie · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

Wersja Lo-Fi Aktualny czas: 09.09.2010 - 09:27
Powered By IP.Board © 2010  IPS, Inc.
Licensed to: Agencja Interaktywna TRADELAY.COM