| Autor |
Nachricht |
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht: 
|
Verfasst Fr 27.06.2008 05:18
Titel Css, Divs nacheinander platzieren. 100% Browserhöhe. Hilfe. |
  |
|
Hallo zusammen,
ich brauche (nochmal) Hilfe bei folgendem Problem.
1.) Ich möchte zwei Divs direkt untereinander platzieren. Div01 (der obere Div-Container) soll eine variable Höhe erhalten (je nach Hinzufügen von Inhalt soll sich die Höhe erweitern, das ist bisher kein problem!).
Der Zweite Div-Container dagegen soll sich entsprechend der Höhe direkt unter dem Div01 platzieren! (Wie?)
2.) Der Zweite Div-Container soll angefangen bei der Platzierung direkt unter dem Div01... die gesamte restliche Höhe bis zum unteren Browserrand einnehmen. (Wie?)
Wie kriege ich diese zwei Probleme hin? Hoffe auf reichlich Antwort  Danke!
anbei noch ein Bild zur Verdeutlichung!
Klicken, um eine Vergrößerung zu sehen.
Zuletzt bearbeitet von deliciious am Fr 27.06.2008 05:22, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
DontSayYes
Dabei seit: 31.01.2006
Ort: Berlin
Alter: 38
Geschlecht:
|
Verfasst Fr 27.06.2008 09:42
Titel
|
|
|
ALso meine (eventuell umständliche) Lösung wäre:
CSS
| Code: |
*, html, body {margin:0; padding:0; height:100%;}
div#rahmen {
width: 200px;
height: 100%;
background-color:#CCCCCC;
}
div#platzhalter {
width: 200px;
height:190px;
margin:0;
background-color:white;
}
div#navi {
width: 200px;
height:auto;
margin:0;
background-color:#999999;
color:white;
} |
HTML
| Code: |
<body>
<div id="rahmen">
<div id="platzhalter"></div>
<div id="navi">Navigationselement</div>
</div>
</body>
|
Funktioneirt bei mir auf jeden Fall im FF3 und IE7.
|
|
| |
|
|
|
Anzeige
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 27.06.2008 10:07
Titel
|
|
|
finde die o.a. lösung zwar schon ok, man könnte sich aber noch ein div sparen - klingt spießig, kann aber später durchaus sinnvoll sein
| Code: |
<style type="text/css">
* {margin:0; padding:0;}
body, html {height: 100%;}
#wrapper {
width: 200px;
height: 100%;
background-color: #cccccc;
}
#nav {
width: 200px;
padding-top: 190px;
background-color: #ffffff;
}
#nav ul {
width: 200px;
background-color: #999999;
color: #ffffff;
font-weight: bold;
}
</style>
...
<div id="wrapper">
<div id="nav">
<ul>
<li>Menüpunkt I</li>
<li>Menüpunkt II</li>
<li>Menüpunkt III</li>
</ul>
</div>
</div>
|
|
|
| |
 |
|
art-d-sign
Dabei seit: 01.08.2007
Ort: ludwigsburg/berlin
Alter: 60
Geschlecht:
|
Verfasst Fr 27.06.2008 11:15
Titel
|
|
|
hallo habe mal ne frage ;hat irgend jemand an deiser aufgabe der ihk prüfung 2006 teilgemonnen ? wenn ja hat da mal jemend ne zielgruppenanlyse.....wäre klasse
danke mirko 
|
|
| |
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Fr 27.06.2008 16:33
Titel
|
|
|
Vielen Dank schonmal für eure Hilfe "DontSayYes" und "Pixelpapst"
habe es versucht umzusetzen, hehe... und folgend mal die bisherige Seite ins Netz gestellt:
http://www.deliciious.de/lcg/Test/Header_mit_Navi.html
Probleme die ich jetzt noch habe:
1.) Warum entsteht ein vertikaler Scrollbalken für die paar Pixel? Wo liegt der Fehler?
2.) Warum wird im Firefox mein "Dreieck.gif" so komisch angezeigt? (im Opera wird die Grafik ohne Probleme angezeigt!)
3.) Ich denke der Code ist gar nicht, gar nicht schön, ich bitte dies zu ignorieren - ansonsten sind hilfreiche Tipps natürlich gern gesehen! An welchen Stellen ich mir Code sparen könnte usw.
Hoffe noch einmal auf nützliche Antwort
und Danke euch allen!!
Zuletzt bearbeitet von deliciious am Sa 28.06.2008 19:02, insgesamt 1-mal bearbeitet
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 27.06.2008 16:40
Titel
|
|
|
| deliciious hat geschrieben: |
Probleme die ich jetzt noch habe:
1.) Warum entsteht ein vertikaler Scrollbalken für die paar Pixel? Wo liegt der Fehler?
|
... weil du nun durch den header mehr als 100% definiert hast! sprich wrapper 100% + header. dir sollte auffallen, dass der scrollbereich nach unten ungefähr so groß ist wie deine headergrafik 
| deliciious hat geschrieben: |
2.) Warum wird im Firefox mein "Dreieck.gif" so komisch angezeigt? (im Opera wird die Grafik ohne Probleme angezeigt!)
|
img {border: 0px;}
(ab ins css damit )
| deliciious hat geschrieben: |
3.) Ich denke der Code ist gar nicht, gar nicht schön, ich bitte dies zu ignorieren - ansonsten sind hilfreiche Tipps natürlich gern gesehen! An welchen Stellen ich mir Code sparen könnte usw.
Hoffe noch einmal auf nützliche Antwort
und Danke euch allen!! |
habs ignoriert - was du dir sparen kannt, hab ich nu auch nicht drauf geachtet...
(will den anderen ja auch noch was lassen...  )
|
|
| |
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Fr 27.06.2008 16:56
Titel
|
|
|
| pixelpapst303 hat geschrieben: | | deliciious hat geschrieben: |
Probleme die ich jetzt noch habe:
1.) Warum entsteht ein vertikaler Scrollbalken für die paar Pixel? Wo liegt der Fehler?
|
... weil du nun durch den header mehr als 100% definiert hast! sprich wrapper 100% + header. dir sollte auffallen, dass der scrollbereich nach unten ungefähr so groß ist wie deine headergrafik
|
und wie kann ich das nun ändern im css-code, dass die Höhe bis zum unteren Bereich führt ohne einen Scrollbalken zu erstellen? mit "Minus-Angaben"?
Und selbst wenn das gelingt, befürchte ich nun zusätzlich folgendes, größeres Problem(?):
Ich möchte ja auch Inhalt einfügen, der natürlich variabel in der Höhe ist, das heisst ich benötige manchmal ja zwingend einen Scrollbalken (vertikal). Passt sich der graue Balken unter dem Menü automatisch der variabel-entstehenden Höhe mit an?
Das ist alles sooo kompliziert  
Danke für die Hilfe!
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 27.06.2008 17:20
Titel
|
|
|
|
bevor wir immer wieder auf probleme kommen, will/muss ich dir sagen, dass du da falsch ran gehst. du solltest erstmal aufzeichnen, wie das gesamtlayout deiner seite aussehen soll. hätte man von vornherein gewusst, dass du oben links noch einen header haben willst, wäre man anders rangegangen. es wäre jetzt einfach falsch, das zu korrigieren um das korrigierte im nächsten schritt den du planst wieder zu korrigieren... verstehe
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
HTML/CSS: DIV unten kleben AUSSER wenn Browserhöhe < Inhalt
Mit PHP Links nacheinander aufrufen (Per ID)
flashs nacheinander abspielen
[JS] Fomulare nacheinander einblenden lassen
mehrere swf-filme nacheinander laden
2 Flash Dateien nacheinander laufen lassen
|
|
Willkommen auf dem Portal für Mediengestalter
