CSS problem z pozycjonowaniem


(K4c5er) #1

Witam. CSS zacząłem się uczyć od niedawna i jestem na etapie pozycjonowania i nie chce mi wyjść takie coś. Wiem, że trzeba używać m.in. float, position [relative, absolute], margin, padding, ale jak robię to nigdy mi nie wychodzi tak jak na zdjęciu powyżej. Szczerze to za bardzo nie rozumiem działania tych poleceń jak już próbuje coś uporządkować, wiem, że jest wiele kursów, które wyjaśniają co i jak, ale jak pobiorę jakiś kod szablonu (xhtml+css) to nie ma pojęcia skąd co się tam bierze!


(athei) #2

No to czytaj kurs, aż zrozumiesz, przerabiaj przykłady i patrz co się zmienia, dzieje.

Nikt Ci gotowego kodu nie będzie klepał, pokaż to co już zrobiłeś, a ktoś pomoże.

Trzymaj kilka ciekawych linków.

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/

http://css.maxdesign.com.au/index.htm

http://www.barelyfitz.com/screencast/ht ... sitioning/

http://www.kurshtml.boo.pl/index.html

http://www.webhosting.pl/Kurs.CSS.2.1.. ... we.witryny


(K4c5er) #3

Dzięki za linki.

Na razie stanąłem, na tym momencie. Coś w kodzie jest nie tak? może coś da się lepiej zapisać? Nie wiem dlaczego, ale jak w kodzie CSS dałem #blok width 100% to czemu #menu width 20% nie łączy się #tresc width 80%.


(athei) #4

To co na tym obrazku w 1 poście http://www.strictlycss.com/examples/thr ... yout-2.asp

A co do Twojego kodu to niepotrzebne to position:relative, tak na szybko żeby jakoś się trzymało

html, body {

        margin: 0;

        padding: 0;

        text-align: center;

    }


    #blok {

           width:90%;

           margin:0 auto;

           margin-top:20px;

           text-align: left;



    }


    #naglowek {

               height: 100px;

               background-color: teal;

               text-align: center;

    }


    #menu {

           float:left;

           width: 20%;

           height: 150px;

           background-color: yellow;

    }


    #tresc {

            float: right;

            width: 80%;

            height: 100px;

            background-color: red;

    }


    .menu {

           width: 20%;

    }


    #stopka {

             clear: both;

             width: 100%;

             background-color: blue;

    }

i wywal

Menu

z tego miejsca w którym teraz jest!


(K4c5er) #5

Dzięki za linka i za kod, ale...

No właśnie ja nie rozumiem co kiedy stosować np. position (relative, absolute), margin, padding itp. Mimo, że poczytam o tym to i tak widzę inny szablon (przykład) to jest to zrobione inaczej.

Dlaczego teraz akurat jest w #blok margin:0 auto i na końcu clear: both?

Edit

Mimo, że jeszcze wszystkiego nie rozumiem to zacząłem coś kombinować i wyszło mi coś takiego:

Efekt jest taki. I teraz nie wiem jak zrobić, aby powstało po prawej stronie Menu 3 i Menu 4 i aby były równoległe do Menu i Menu 2.