CSS - DIV-Container

SatansEier · 2. November 2006

leute ich könnte mich sowas von aufregen ^^

ich komm einfach nicht mit diesen css zurecht- unglaublich. man sollte meinen es fällt nix nicht aus dem rahmen, nur funktioniert halt gar nichts so wie ich will.

wär cool wenn sich einer von euch cracks kurz zeit für mich nimmt:)



	<body>

		<div id="root">

			<div id="banner">

<?php				include ("./include/__banner.php");    /*BANNER*/ ?>

			</div>

			<div id="prim_nav">

<?php				include ("./include/__prim_nav.php");    /*PRIM_NAV*/ ?>

			</div>

			<div id="side_bar">

<?php				include("./include/__sidebar.php");    /*SIDE_BAR*/ ?>

			</div>

			<div id="content">

<?php				include("./include/__content.php");    /*CONTENT*/ ?>

			</div>

			<div id="footer">

<?php				include("./include/__footer.php");    /*FOOTER*/ ?>

			</div>

		</div>

	</body>[/PHP]

der content ist noch mal aufgeteilt in drei container. zwei "links" zur navigation und einen rechts daneben zur ausgabe. die insgesamte höhe entspricht ca. 750px (angepasst auf 1024*768)

meinen root-container möcht ich zentriert.

[PHP]
#root {
width:1000px;
top:0px;
left:auto;
border:5px;
}
#banner {
position: fixed;
width: 100%;
height: auto;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#prim_nav {
width:88%;
position: fixed;
float: left;
}
#side_bar {
position: fixed;
width: 12%;
height: auto;
float: left;
left: auto;
}
#content {
position: fixed;
width: 88%;
height: auto;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}

body {
background-color: #2f7fcf;
}

hoffentlich kann mir einer sagen was ich falsch machen:confused:

geloescht_JesterDay · 2. November 2006

hoffentlich kann mir einer sagen was ich falsch machen:confused:

Du denkst zweidimensional! Also du bist immernoch beim Tabellendesign, alles wie ein Puzzel nebeneinanderlegen, und willst das genauso mit CSS umsetzen.

CSS ist aber ganz anders. Es besteht aus verschiedenen Boxen, die den Inhalt der Seite bilden.

(siehe http://www.css4you.de/wsboxmodell/index.html)

Ich sage immer (im Gegensatz zum einfachen nebeneinanderlegen beim Tabellenlayout), bei CSS musst du dreidimensional denken. die Boxen werden nicht nur aneinandergeklebt, sondern auch ineinander verschachtelt.

Hier mal eine simple Umsetzung deines Designs:


<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>test</title>

<style type="text/css">

#root {

    width:1000px;

    margin: 0% auto;

    border:5px;

    background-color: #00ff00;

    border: 1px solid #000000;

}

#banner {

        width:1000px;

        margin: 0% auto;

        background-color: #ff0000;

}

#prim_nav {

    width:88%;

    background-color: #0000ff;

}

#side_bar {

        width: 12%;

        float: right;

        background-color: #ff55cc;

}

#content {

        width: 88%;

        background-color: #cc55ff;

}

#footer {

        height: 100px;

        background-color: #550055;

}


body {

    background-color: #2f7fcf;

}

</style>

</head>

<body>

  <div id="banner">

    Hier kommt das Banner hin

  </div>

  <div id="root">

    <div id="side_bar">

      Hier die sidebar

    </div>

    <div id="prim_nav">

      Hier die prim_nav

    </div>

    <div id="content">

      Hier der content

    </div>

    <div id="footer">

      Hier der footer

    </div>

  </div>

</body>

</html>

Und ein 100% ausfüllen des Browserfensters ist damit nicht möglich. Also zumindest nicht so wie du es mit Tabellen machen würdest. Was bringt dir auch ein Footer, der z.B. bei einer Auflösung von 1600x1200 immer unten am Browserfenster klebt, während der Inhalt nur aus 2 Zeilen besteht?

EDIT:

Beim IE sieht das nicht ganz aus wie gewollt... im FF 1.5.0.7 tut es das...

SatansEier · 2. November 2006

danke jesterday für deine schnelle antwort:)

mit den tabellen hast du sogar recht, "früher" *g* hab ich alles mit tabllen gemacht, warum auch nicht, ich hab alles hinbekommen so wie ich es wollte. leider sind die nicht mehr zeitgemäß (?)

im ff sieht`s wie gewollt aus im iexplorer allerdings nicht. woran liegt das? ich dachte ab der 5.5 version sei auch der voll div-tauglich?

was würdest du an diesem framework anders machen um auf jedem browser und jeder auflösung eine ansehliche page anzuzeigen?

geloescht_JesterDay · 2. November 2006

was würdest du an diesem framework anders machen um auf jedem browser und jeder auflösung eine ansehliche page anzuzeigen?

Erstmal probieren, was genau den IE stört. Hab jetzt nurmal schnell deine Vorlage umgesetzt. Das ganze kann man vielleicht auch anders machen, aber hab mir darüber nicht so viele Gedanken gemacht

Um es in jeder Auflösung ansehnlich zu haben... Du könntest die "äußerste" Breite nicht fix 1000px machen, sondern z.B. 90%. Das kommt aber darauf an, wie du es insgesamt machen willst. Nicht alle Designs müssen über die volle Breite des Fensters gehen (genauso wie sie auch nicht immer die volle Höhe des Fensters haben). Bei http://www.csszengarden.com/ findet man ja viele verschiedene Designs, und da sind genug, die nur einen Teil der Breite nutzen.

EDIT:

Zwei Beispiele:

http://www.csszengarden.com/?cssfile=/142/142.css&page=6

für eine fixe Breite

und

http://www.csszengarden.com/?cssfile=/170/170.css&page=3

für ganze Breite nutzen

Anmelden

CSS - DIV-Container

Empfohlene Beiträge

SatansEier

Link zu diesem Kommentar

Auf anderen Seiten teilen

geloescht_JesterDay

Link zu diesem Kommentar

Auf anderen Seiten teilen

SatansEier

Link zu diesem Kommentar

Auf anderen Seiten teilen

geloescht_JesterDay

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de