Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów › Technologie internetowe - tworzenie stron WWW › xHTML, CSS, JavaScript v
CSS layout

Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tryb drzewa
CSS layout
l245c4l Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 1
Dołączył: 20-09-2009
Reputacja: 0
#1
20-09-2009, 07:16
Hej,

Jestem poczatkujacy w css i od jakiegos czasu mecze sie z ulozeniem layoutu... Otoz cel jaki chce osiagnac to miec ulozona strone w ten sposob, ze mam wrappera, headera, footera i panel content.
I teraz wszystko jest skalowalne, nie uzywam pixeli tylko procenty. I teraz tak:
Kod:
p
{
    margin:0 0 0 0;
}

ul
{
    margin:0 0 0 0;
}

body
{
    font-family: "Segoe UI", "Trebuchet MS";
    color: green;
    background:black;
}

div#wrapper
{
    background:teal;
    width:60%;
    height:100%;
    margin:0 auto;
}

div#header
{
    margin:0 auto;
    background:yellow;
    height:200px;
}

div#menu
{
    background:red;
    width:100px;
}

div#footer
{
    background:white;
}

div#content
{
    margin:0 auto;
    background:navy;
    height:70%;
    width:50%;
}

Problem w tym ze chce, aby i wrapper byl wysrodkowany (uzywam margin 0 auto) i content(ta sama komenda), natomiast menu chce zeby przylegalo do wyposrodkowanego contentu. I probowalem juz tyle komend... bania mala i nic. Probowalem z display:inline ale jakies dziwne rzeczy sie dzieja. Prosze o pomoc!

P.S. kolory sa do bani wiemSmile ale to tylko test
Szukaj
Odpowiedz
dziamber Offline
Super Moderator
******
Liczba postów: 938
Liczba wątków: 22
Dołączył: 21-01-2009
Reputacja: 23
#2
20-09-2009, 15:24
Body nadajesz margin zero, wrapperowi margin zero auto, content sam sie ju z wysrodkuje a menu nadaj float: left;. jeżeli dobrze zrozumiałem o co Ci chodzi to powinno pomóc, ale dopiero wstałem i zamulam więc za ewentualne błędy z góry przepraszam Smile
[Obrazek: 2guxq1i.gif]
Szukaj
Odpowiedz
l245c4l Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 1
Dołączył: 20-09-2009
Reputacja: 0
#3
20-09-2009, 19:05
No niestety nie dzialaSad

Chce zeby wrapper i content byly zawsze posrodku strony, natomiast menu przylegalo to wysrodkowanego contentu. Inaczej wytlumaczyc tego nie potrafieSmile
Szukaj
Odpowiedz
dziamber Offline
Super Moderator
******
Liczba postów: 938
Liczba wątków: 22
Dołączył: 21-01-2009
Reputacja: 23
#4
20-09-2009, 19:53
Może rozrysuj jak ma to wyglądac. To zawsze pomoże
[Obrazek: 2guxq1i.gif]
Szukaj
Odpowiedz
l245c4l Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 1
Dołączył: 20-09-2009
Reputacja: 0
#5
20-09-2009, 20:09
Szukaj
Odpowiedz
l245c4l Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 1
Dołączył: 20-09-2009
Reputacja: 0
#6
21-09-2009, 19:31
Nikt nie pomoże?
Szukaj
Odpowiedz
Labsta.com Offline
Super Moderator
******
Liczba postów: 682
Liczba wątków: 9
Dołączył: 03-03-2009
Reputacja: 18
#7
21-09-2009, 19:45
Wklej cały kod html i css. Zobaczymy z czym masz problem.
Strona WWW Szukaj
Odpowiedz
l245c4l Offline
Junior Member
**
Liczba postów: 5
Liczba wątków: 1
Dołączył: 20-09-2009
Reputacja: 0
#8
21-09-2009, 20:18
Kod:
p
{
    margin:0 0 0 0;
}

ul
{
    margin:0 0 0 0;
}

body
{
    font-family: "Segoe UI", "Trebuchet MS";
    color: green;
    background:black;
    margin:0;
}

div#wrapper
{
    background:teal;
    width:60%;
    height:100%;
    margin:0 auto;
}

div#header
{
    margin:0 auto;
    background:yellow;
    height:200px;
}

div#menu
{
    margin:0 auto;
    background:red;
    width:10%;
    float:left;
}

div#footer
{
    background:white;
}

div#content
{
    margin:0 auto;
    background:navy;
    height:100%;
    width:70%;
    float:left;
}

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="mystyle.css" type="text/css">
        <title>Drink Team</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <p style="text-align:center">Here goes HEADER</p>
            </div>
            <div id="menu">
                <p>Here goes menu et dsasflasf s;ldfksd;lfks flksd;flk s;dkf
            </div>
            <div id="content">
                <p>Here goes content
            </div>
        </div> <!-- wrapper-->
    </body>
</html>

Chce, zeby content byl wysrodkowany a menu do niego przylegalo
Szukaj
Odpowiedz
Labsta.com Offline
Super Moderator
******
Liczba postów: 682
Liczba wątków: 9
Dołączył: 03-03-2009
Reputacja: 18
#9
21-09-2009, 21:31 (Ten post był ostatnio modyfikowany: 21-09-2009, 21:32 przez Labsta.com.)
Kod:
p
{
    margin:0 0 0 0;
}

ul
{
    margin:0 0 0 0;
}

body
{
    font-family: "Segoe UI", "Trebuchet MS";
    color: green;
    background:black;
    margin:0;
}

div#wrapper
{
    background:teal;
    width:60%;
    height:100%;
    margin:0 auto;
}

#wrap2 {
    margin:0 auto;
        
}

div#header
{
    margin:0 auto;
    background:yellow;
    height:200px;
}

div#menu
{
    margin:0 0 0 5%;
    background:red;
    width:10%;
        float:left;
}

div#footer
{
    background:white;
}

div#content
{
    margin:0 15% 0 0;
    background:navy;
    height:100%;
    width:70%;

}
Kod:
<div id="wrapper">
            <div id="header">
                <p style="text-align:center">Here goes HEADER</p>
            </div>
                    <div id="wrap2">
                        <div id="menu">
                <p>Here goes menu et dsasflasf s;ldfksd;lfks flksd;flk s;dkf</p>
                            </div>
            <div id="content">
                            <p>Here goes content</p>
            </div>
                    </div>
        </div> <!-- wrapper-->
Strona WWW Szukaj
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Fluid layout i problem ze stopką Mtk 5 3,199 21-09-2012, 02:54
Ostatni post: kornell
  Programowanie Layout'a DMkociarz 5 3,845 14-11-2011, 21:36
Ostatni post: Kartofelek
  css/html layout bartek23 6 4,237 25-10-2011, 01:13
Ostatni post: Moody
  Nietypowy layout defox 0 1,894 24-07-2011, 04:41
Ostatni post: defox
Exclamation Layout - Problem Spartacus 9 6,446 07-01-2011, 02:45
Ostatni post: dervi3

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl