| Autor |
Nachricht |
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Fr 15.09.2006 09:47
Titel CSS Div Problem |
  |
|
Hallo Leute,
ich hab ein kleines Problem. Und zwar besteht das Layout der zu gestaltenden Website aus 5 Divs, Header, Footer, einem großen Content auf der linken Seite und neben dem Content zwei weitere Divs zu Navigation und Subnavigation. Diese liegen aber nicht nebeneinander, sondern übereinander.
Zum besseren Verständnis, es geht nur um den Content Bereich, der eine feste Höhe von 400px hat und rechts daneben zwei Navigations Divs die zusammen auch die Höhe von 400px haben.
Ich komm nicht drauf, wie ich die Divs anordnen, floaten oder clearen soll, dass es meinen Vorstellungen entspricht.
Vielen Dank
|
|
| |
  |
 |
Spladder
Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 15.09.2006 09:52
Titel
|
|
|
|
Schick mal die URL damit man sich den Quelltext anschauen kann, oder poste den hier, aber bitte inklusive CSS!
|
|
| |
 |
|
|
Anzeige
|
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 15.09.2006 10:12
Titel
|
|
|
Also das ist nur ein Entwurf, aber es will nicht so richtig klappen. Auch hab ich bis auf die wichtigsten Angaben noch nichts erstellt. Es geht nur um die Posiionierung!
Edit
Also die frische Luft scheint mir gut getan zu haben. Jetzt funktionierts, würd nur gern wissen, ob die Lösung in Ordnung ist, oder ob das nur ne schlechtere Notlösung ist:
CSS:
| Code: |
body {
margin: 0px;
padding: 0px;
font: 0.7em arial, helvetica, sans-serif;
text-align: center;
color: #FFFFFF;
background-color: #000000;
}
#container {
margin: 1em auto;
width: 1000px;
background-color: #000000;
}
#header {
height: 125px;
background-color: #FFFFFF;
}
#navi {
height: 20px;
background-color: #ee7f00;
}
#content {
float: left;
height: 410px;
width: 700px;
background-color: 4f4f4f;
}
#subnavi {
margin-left: 700px;
height: 250px;
width: 300px;
background-color: #FFFFFF;
}
#navi2 {
margin-left: 700px;
height: 160px;
width: 300px;
background-color: #8e6e38;
}
#footer {
clear: both;
height: 30px;
width: 1000px;
background-color: #FFFFFF;
}
|
HTML:
| Code: |
<body>
<div id="container">
<div id="header"></div>
<div id="navi"></div>
<div id="content"></div>
<div id="subnavi"></div>
<div id="navi2"></div>
<div id="footer"></div>
</div>
</body>
|
Zuletzt bearbeitet von Krisslinger am Fr 15.09.2006 10:23, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Spladder
Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 15.09.2006 11:00
Titel
|
|
|
Soll dass dann so aussehen!?
Kopier mal einfach in die Datei!
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
font: 0.7em arial, helvetica, sans-serif;
text-align: center;
color: #FFFFFF;
background-color: #000000;
}
#container {
margin: 1em auto;
width: 1000px;
background-color: #000000;
}
#header {
position:relative;
height: 125px;
background-color: #FFFFFF;
}
#navi {
position:relative;
height: 20px;
background-color: #ee7f00;
}
#content {
position:relative;
float: left;
height: 410px;
width: 697px;
background-color: 4f4f4f;
}
#subnavi {
position:relative;
float: left;
height: 250px;
width: 300px;
background-color: #FFFFFF;
}
#navi2 {
position:relative;
float: left;
height: 160px;
width: 300px;
background-color: #8e6e38;
}
#footer {
position:relative;
clear: both;
height: 30px;
width: 1000px;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">asdasdasdasdsa</div>
<div id="navi">asdasdasd</div>
<div id="content">asdasdsad</div>
<div id="subnavi">aqqqqqqqqqqqqqqqqasd</div>
<div id="navi2">asasdadasdxcyyxcyxyxccyxycxad</div>
<div id="footer">asdasdsa</div>
</div>
</body>
Greez Mattes
|
|
| |
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 15.09.2006 11:21
Titel
|
|
|
Danke, genau das brauch ich.
Mich würd jetzt noch interessieren, in wie fern sich dein Vorschlag von meiner Lösung unterscheidet, die ja auch funktioniert? Und was bringt mir das position: relative?
Danke für die schnelle Hilfe
|
|
| |
|
|
Spladder
Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 15.09.2006 11:28
Titel
|
|
|
hattes bei der subnavi margin-left auf 700 gesetzt. da das aber neben dem content stehen soll brauchste keine margin left sondern nur das float left.
Würde die Schriftfarbe in den weißen feldern noch mit color:#000000; ändern, da man die ja sonnst nicht sieht.
Sind halt immer Kleinigkeiten, damit sowas funktioniert!
Greez
|
|
| |
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 15.09.2006 11:34
Titel
|
|
|
Ok, vielen Dank.
Die weißen Felder bleiben nicht weiß, da kommen noch Graphiken rein. Außerdem muss ich dem CSS eh noch einiges hinzufügen, so wie jetzt wird ja eigentlich nichts dargestellt außer den Begrenzungen.
Was mir das position:relative hier bringt würd mich trotzdem noch interessieren *g*
Super Sache hier. Vielen Dank
Zuletzt bearbeitet von Krisslinger am Fr 15.09.2006 11:35, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Spladder
Dabei seit: 26.05.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 15.09.2006 12:27
Titel
|
|
|
schau mal hier
für die position:relative;
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Formmailer-Problem-neues problem
css-problem
css-Problem
IE 7 Problem!
Problem mit IE 6
xtc-Problem
|
|
Willkommen auf dem Portal für Mediengestalter
