1 Spaltiges Layout

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- 1 Spaltiges Layout »

Icynator

Eroberer

Dabei seit: 30.03.2009

Beiträge: 65

Mittwoch, 3. Februar 2010, 19:30

Hey,
und zwar wollte ich mal fragen ob mir jemand dieses Design:

in etwa erstellen könnte?! Also nur des Grundgerüst.
Farben, Ränder etc. alles kann ich selber.
Nur eben das Grundgerüst. Besonders mit der Navileiste oben das die so nebeneinander sind.

lpion3d

Eroberer

Dabei seit: 20.11.2009

Beiträge: 60

Mittwoch, 3. Februar 2010, 19:45

Soll die Seite zentriert inder Mitte sein, oder das ganze browserfenster ausfüllen?
Soll das Menü einfach nur horizental sein, oder sollte das ein TAb-Menü darstellen?

Mit php oder ohne? Css?

Ein paar infos wären nicht schlecht.

Warum machst dus eigentlich nicht selber? Ist nicht so schwer....

Wenn du erst lernst kennst du bestimmt schon selfhtml oder Css4 you

Nicht der Tage erinnert man sich, sondern der Augenblicke.

Icynator

Eroberer

Dabei seit: 30.03.2009

Beiträge: 65

Mittwoch, 3. Februar 2010, 19:55

-Zentriert in der Mitte
-sollte so etwa 70% vom Browserfenster ausfüllen (Also rechts und links etwa 15% leer)
-Mir egal ob mit php oder ohne (Wenns geht mit)
-Nur horizontal
-Css klares JA (wenn möglich als extra css Datei)

Warum ichs nich selber mach?
Zur Zeit leider 0 Zeit

lpion3d

Eroberer

Dabei seit: 20.11.2009

Beiträge: 60

Mittwoch, 3. Februar 2010, 19:57

Ok, ich hab zwar auch grad nicht viel zeit, aber ich werd schaun ob ichs bis zum wochenende schaff...

Nicht der Tage erinnert man sich, sondern der Augenblicke.

Crush

Kaiser

Dabei seit: 22.09.2002

Beiträge: 1 095

Mittwoch, 3. Februar 2010, 20:57

Hi,
hier hast du was

Cascading Style Sheet

html, body {
    padding: 0;
    margin: 0;
    text-align: center; /* IE-Fix */
}

#main-container {
    width: 70%;
    margin: 5% auto;
    text-align: left; /* because of IE-Fix */
    
    border: 1px solid #444444;
}

#header {
    width: auto;
    height: 130px;
    background-color: #F6F6F6;
}

#navigation {
    width: auto;
    height: 50px;
    border: 1px solid #444444;
    border-left: none;
    border-right: none;
}

#navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#navigation ul li {
    float: left;
    line-height: 50px;
    height: 50px; /* IE-Fix */
    padding: 0 20px;
}

#navigation a {
    display: block;
    width: auto;
    height: 100%;
    text-decoration: none;
}
#navigation a:hover {
    color: red;
}


#content {
    width: auto;
    padding: 1%;
}


#footer {
    width: auto;
    line-height: 50px;
    height: 50px; /* IE-Fix */
    text-align: center;
    border-top: 1px solid #444444;
}

HTML

<!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" lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="main.css" type="text/css" />
        <title>1-Spalten-Layout</title>
    </head>
    <body>

    <div id="main-container">

        <div id="header">Logo</div>

        <div id="navigation">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
            </ul>
        </div>

        <div id="content">
            <p>Content</p>
        </div>

        <div id="footer">footer</div>

    </div>

    </body>
</html>

Ich hoffe, es entspricht in etwa deinen Vorstellungen.

Icynator

Eroberer

Dabei seit: 30.03.2009

Beiträge: 65

Mittwoch, 3. Februar 2010, 22:17

perfekt

genauso wie ichs wollte

@Crush BIG THX