Autor |
Nachricht |
dombur
Threadersteller
Dabei seit: 30.05.2005
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mo 16.02.2009 18:33
Titel Tabellenloses Layout - Die ersten Schritte... |
|
|
Hallo,
ich versuche seit ein paar Tagen ein tabellenloses Layout mit Hilfe von CSS zu erstellen. Mein erstes Etappenziel soll sein die Grundstruktur der späteren Seite zu erstellen.
So habe ich mir das Grundgerüst vorgestellt:
So sieht der Code aus:
Code: |
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
background: #fff;
}
#boxeins {
width: 700px;
height: 500px;
background: #111;
}
#boxzwei {
width: 100%;
background: #222;
}
#navigation {
width: 100%;
background: #333;
}
#inhalt {
width: 100%;
height: 100%;
background: #444;
}
#fußzeile {
width: 100%;
background: #555;
}
#abstand {
width: 35px;
background: #666;
}
</style>
</head>
<body>
<div id="boxeins">
<div id="navigation">navigation</div>
<div id="boxzwei">
<div id="abstand">abst</div>
<div id="inhalt">inhalt</div>
<div id="abstand">abst</div>
</div>
<div id="fußzeile">fußzeile</div>
</div>
</body>
</html>
|
Und so sieht der Code im Browser aus:
test.htm
Wie schaffe ich es, den Inhalt in eine Zeile mit den beiden Abständen (links und rechts) zu bekommen? Oder ist mein Denkansatz falsch und ich muss ganz anders an die Sache rangehen?
Ich freue mich auf eure Antworten! dombur
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Mo 16.02.2009 18:45
Titel
|
|
|
id's dürfen nur einmal vegeben werden
wenn in die "abstände" nix reinkommen soll, kannst es über margin-bottom lösen
|
|
|
|
|
Anzeige
|
|
|
dombur
Threadersteller
Dabei seit: 30.05.2005
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mi 18.02.2009 17:42
Titel
|
|
|
Danke für die schnelle Antwort. Die "Abstände" bleiben leer, sie dienen tatsächlich nur als Abstand zwischen "Inhalt" und dem äußeren Container. Wenn ich dem #inhalt ein margin von 35px gebe stimmt der Abstand auf der linken Seite aber auf der rechten schaut der "Inhalt" um 35px über den Container hinaus. Wie bekomme ich das in Griff? Indem ich das ganze nochmals mit einem Container umschließe?
|
|
|
|
|
juwer
Dabei seit: 19.08.2008
Ort: sAarbrücken
Alter: 36
Geschlecht:
|
Verfasst Mi 18.02.2009 18:04
Titel
|
|
|
ich meine mich zu erinnern, dass der Inhalt-layer automatisch mittig gesetzt wird, wenn du margin: 0 auto; setzt.
Was der vorredner im Übrigen meinte ist, dass es keine Rolle spielt, ob die Abstände leer bleiben oder nicht, ids vergibt man nur einmal.
Wenn du eine 'id' mehrmals verwenden willst, definier es als class.
Code: | #inhalt {
margin: 0 auto;
width: xxx px;
background: #444;
}
#fußzeile {
width: 100%;
background: #555;
}
|
Ich meine, dass es so funktionieren müsste, auch ohne die abstand-divs.
Darüber hinaus kannst dus einfacher aufbauen:
div
div navi
div inhalt
div fuß
Zumindest meine ich, dass es so gehen sollte... kannsts ja ma ausprobiern Vllt kann dir da auch jemand besser helfen
|
|
|
|
|
Synoxis
Dabei seit: 07.09.2005
Ort: Roßdorf
Alter: 35
Geschlecht:
|
|
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
|
|
|
|
smiley.sturmwind
Dabei seit: 11.09.2008
Ort: Darmstadt
Alter: 47
Geschlecht:
|
|
|
|
|
|
|
|
Ähnliche Themen |
Tabellenloses Layout - Horizontal 100% vertikal zentriert
problem mit ersten css layout
tabellenloses design -> 3px abstand zwischen divs nur im IE
Photoshop Cs2 (Pinselgröße 10er Schritte?)
Erste Schritte im Bereich Webdesign - How to start?
suche sounds, schritte, brennende lunte usw...
|
|