Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
CSS layout - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: CSS layout (/thread-css-layout)

CSS layout - l245c4l - 20-09-2009

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

RE: CSS layout - dziamber - 20-09-2009

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

RE: CSS layout - l245c4l - 20-09-2009

No niestety nie dzialaSad

Chce zeby wrapper i content byly zawsze posrodku strony, natomiast menu przylegalo to wysrodkowanego contentu. Inaczej wytlumaczyc tego nie potrafieSmile

RE: CSS layout - dziamber - 20-09-2009

Może rozrysuj jak ma to wyglądac. To zawsze pomoże

RE: CSS layout - l245c4l - 20-09-2009



RE: CSS layout - l245c4l - 21-09-2009

Nikt nie pomoże?

RE: CSS layout - Labsta.com - 21-09-2009

Wklej cały kod html i css. Zobaczymy z czym masz problem.

RE: CSS layout - l245c4l - 21-09-2009

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

RE: CSS layout - Labsta.com - 21-09-2009

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-->