zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden <div> soll restliche Breite annehmen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2008, 09:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2008
Beiträge: 25
oetzi befindet sich auf einem aufstrebenden Ast
Standard <div> soll restliche Breite annehmen

moin zusammen,

da mein letzter Thread leicht "missbraucht" wurde, fasse ich mein Problem hier nochmal übersichtlich zusammen.

Ich bin gerade dabei das Standardlayout für meine Seite zu entwerfen. Eigentlich ja ganz simpel:
- header
- links die navi
- daneben der content (orange)
- dadrunter der footer

Das Ergebnis sieht wie folgt aus:



1. Problem:
Warum nimmt der content-div (orange) nicht die restliche Breite ein?? Nehmen <div> nicht normalerweise automatisch die komplette Breite ein, wenn man das nicht beschränkt?

2. Problem/Frage:
Eine Generelle Frage zur float Eigenschaft:
Das die Navi nen float:left bekommt ist soweit klar, schließlich soll sie links stehen und rechts "umflossen" werden.
Was ich nicht so ganz verstehe ist, warum der content auch die float:left Eigenschaft braucht?! Wenn ich die weglasse, fängt der content-Bereich ja ganz links unter der navi an. Seit ich die Eigenschaft dazu genommen habe, besteht das 1. Problem, nämlich dass der content nicht mehr die volle Breite einnimmt.

Ich hoffe, mein Problem ist jetzt deutlich geworden

Hier noch der aktuelle Code:

HTML:
Code:
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Testprojekt</title>
    <link rel="stylesheet" type="text/css" href="test.css">
		
</head>

<body>
<div id="maincontainer">
	<div id="header"> Header</div>
	<div id="mainnav"> Link <br> link<br> link<br> link</div>
	<div id="content">aaaaaa bbbbbbbbbbbb cccccccccccccc dddddddddddd eeeeeeeeee</div>
	<div id="footer"> Footer</div>
</div> <!-- /container -->
</body>
CSS
Code:
	body 
	{
  background-color: #e1ddd9;
  font-size: 12px;
  font-family: Arial;
  color:#564b47;
  padding:0px;
  margin:0px;
	}
	
	#maincontainer
	{
	margin: auto;
	background-color:#00FFFF;
	width: 800px;
	height:600px;
	}
		
	#header
	{
	background-color:#FF00FF;
	height: 80px;
	margin-bottom: 5px;
	}
	
	#mainnav
	{
	width:150px;
	float:left;
	background-color:#00FF00;
	margin-bottom: 5px;
	}
	
	#content
	{
	background-color:#ffA500;
	margin-left:10px;
	margin-right:10px;
	float:left;
	}
	
	#footer
	{
	clear:both;
	background-color:#FF0000;
	}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2008, 10:27
Benutzerbild von SSY
SSY SSY ist offline
Benutzer
neuer user
 
Registriert seit: 27.03.2008
Beiträge: 69
SSY befindet sich auf einem aufstrebenden Ast
Standard

Durch das float: left; wird dein Content-div zu einem inline-Element. Ohne diese Eigenschaft ist ein div (falls nicht expliziet anders definiert) ein block-Element. Blockelemente nehmen automatisch die verfügbare Breite ein (hier gewünscht). Allerdings können block-Elemente nichts umfließen. Daher brauchst Du das float: left;, damit der andere gewünschte Effekt eintritt. Jetzt musst Du irgendwie trickreich beide Eigenschaften miteinander verbinden.
Am simpelsten wäre es ein block-div für den Contentn über die komplette Breite zu machen und das Navi-div in dem conent-div absolut zu positionieren. Dann noch ein padding-left um die Breite der Navi für den Content und schon sollte der gewünschte Effekt erzielt sein.
__________________
Durch unbedachte Reden
entsteh'n viel Sünd und Schäden
Der ist bedacht und voller List,
der seiner Red ein Meister ist.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.08.2008, 10:34
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 703
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von oetzi
da mein letzter Thread leicht "missbraucht" wurde, ...
Wieso missbraucht? Es ging genau um Deine Sache und wenn Du den Thread gelesen hast, hättest Du auch eine Lösung für Dein Problem.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
  #4 (permalink)  
Alt 11.08.2008, 10:37
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Floats sind immer nur so breit, wie der in ihnen enthaltene Content Platz beansprucht. Es sei denn, dass ihnen ausdrücklich eine Breite zugewiesen wird.

Dein #content floatet und hat keine Breitenangabe. Wenn du nun möchtest, dass #content sich bis an den rechten Rand des #maincontainers erstreckt, hast du zwei Möglichkeiten:

1. #content bekommt - unter Beachtung des Box-Modells - die Restbreite ausdrücklich zugeordnet (bei dir: width: ...px)

2. Du änderst die Taktik, in dem du das Float aus #content ersatzlos herausnimmst und mit margin-left in der Breite der Navi ersetzt.

Beispiel:
Code:
#mainnav {float:left; width: 150px;}
#content {margin-left: 150px;}
Mit Zitat antworten
  #5 (permalink)  
Alt 11.08.2008, 10:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2008
Beiträge: 25
oetzi befindet sich auf einem aufstrebenden Ast
Standard

AHHHH endlich!
Vielen Dank!
@SSY und EvT: Diese Hintergrundinfos haben mir gefehlt, um selber auf die Lösung zu kommen

@emti: war ja nicht bös gemeint, aber es wurde auf einmal über sehr viel geredet und diskutiert. Und gerade weil es ja eine kleine spezielle Sache war (fieses float ) war es für mich nicht gerade leicht aus 3 Seite diese Lösung herauszufinden.

So war es jetzt wesentlich einfacher
Mit Zitat antworten
  #6 (permalink)  
Alt 11.08.2008, 10:57
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

Zitat:
Zitat von SSY Beitrag anzeigen
Durch das float: left; wird dein Content-div zu einem inline-Element.
*hüstel*, ähem..., sorry, aber das ist imho keinesfalls richtig.

durch float wird ein Element imho keinesfalls ein inline-Element, es bleibt weiterhin ein Blockelement.
Ein gefloatetes Element wird aus dem Textfluß genommen und schwebt je nach Angabe im Elternelement nach oben links oder rechts.
Ein gefloatetes Element erzeugt immer eine Block-Box auch wenn ein inline-Element gefloatet wird.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 11.08.2008, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2008
Beiträge: 25
oetzi befindet sich auf einem aufstrebenden Ast
Standard

So, habe mich jetzt an den nächsten Schritt gewagt.
Wollte noch rechts auf der Seite einen Bereich für Zusatzinfos.
Aber so ganz war das jetzt wohl nicht das wahre ^^
Einen Schritt vor, zwei zurück

Ein paar Rückfragen hätte ich, vielleicht komme ich dann selber auf die Lösung

1. Ich habe meine Navi jetzt absolut positioniert.
Generell bedeutet das doch nichts anderes, als dass die Navi an der Stelle wo sie ohne eine spezielle Positionierung stehen würde auch steht, mit dem Unterschied, dass sie sich jetzt vor dem Textfluss befindet, also über dem Rest.
Darum gebe ich meinem content ja auch die Breite der Navi mit, damit er rechts daneben anfängt. Das klappt aktuell auch.
Ist das soweit richtig?

2. Jetzt zum Infomenue auf der rechten Seite.
Wie krieg ich das nach rechts ohne float:right zu nutzen?? Muss ich jetzt wieder ne Margin Eigenschaft setzen, die vom linken Rand ausgeht? Das wäre dann ja auf jedenfall überhaupt nicht flexibel.

3. Ich habe gerade den Nachteil von position:absolut erkannt. Das clear:both vom Footer orientiert sich dann logischerweise nicht mehr an einem solchem Element. Folglich orientiert sich gerade der Footer am content und somit verdeckt die Navi einen Teil des Footers. Dies passiert natürlich nur wenn die Navi größer ist, als der content, aber das könnte ja durchaus vorkommen.

Ich will jetzt nicht wieder den Thread mit meinen "Quellcodes" zuspamen Falls benötigt wird er natürlich sofort nachgereicht


EDIT:
@klaus: Interessehalber dann eine Frage zu Blockelementen: Wenn ein Element durch einen float ein Blockelement bleibt, was ändert sich dann, dass es nicht mehr die restliche/volle Breite einnimmt?
Mit Zitat antworten
  #8 (permalink)  
Alt 11.08.2008, 12:02
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi oetzi,

Zitat:
Zitat von oetzi Beitrag anzeigen
@klaus: Interessehalber dann eine Frage zu Blockelementen: Wenn ein Element durch einen float ein Blockelement bleibt, was ändert sich dann, dass es nicht mehr die restliche/volle Breite einnimmt?
Wenn du ein Block-Element ohne width floatest, schrumpft es dadurch auf die Größe des Inhalts zusammen ("shrink to fit").
Dadurch könnte man meinen es wäre deshalb ein inline-Element geworden, was aber nicht stimmt.

Ein inline-Element nimmt z.B. vertikale margins nicht so ohne weiteres an, da es ja keinen eigenen Absatz bildet sondern im Textfluss des umgebenden Blockelements sozusagen mitschwimmt und nur eine Ausdehnung gemäß seines Inhaltes hat, bzw. die Höhe durch die Höhe des umgebenden Blockelementes festgelegt wird.
Du könntest allerdings durch line-height oder font-size auf die Höhe Einfluß nehmen.

Ein gefloatetes Element nimmt vertikale margins sehr wohl an, soweit ich weiß.

Was der float anrichtet schrieb ich ja schon.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #9 (permalink)  
Alt 11.08.2008, 12:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von oetzi Beitrag anzeigen
da mein letzter Thread leicht "missbraucht" wurde,
Schade, dass du das so siehst.
Du hättest eine Menge lernen können aus dem, was andere für dich ausprobiert haben.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.08.2008, 12:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2008
Beiträge: 25
oetzi befindet sich auf einem aufstrebenden Ast
Standard

Ich hätte wohl besser ein anderes Wort benutzt. Seht das Wort "missbraucht" bitte nicht so negativ! So war es gar nicht gemeint.

Ich hatte das ganze Wochenende einiges zu tun und als ich gestern abend da rein guckte und diese 3 Seiten gelesen habe, war ganz einfach das Problem, dass meine ursprüngliche Frage nicht direkt beantwortet wurde (wie ein div die restliche Breite annimmt) und es für mich als CSS-Anfänger nicht wirklich ersichtlich war, wo auf diesen 3 Seiten sich jetzt die Antwort versteckt haben könnte

Darum habe ich heute morgen meine ursprüngliche Frage hier nochmal zusammengefasst, was denke ich mal einfach übersichtlicher war, als jetzt wieder am ende der 3. seite was zu posten, was sich auf die 1. seite bezieht.

Ich habe mir gerade nochmal in Ruhe den anderen Thread durchgelesen und werde da jetzt auch nochmal was zu posten
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
li:last-child -> restliche Breite? ReeN CSS 4 06.07.2011 19:06
<div> restliche höhe?? Hilfe chrisjay CSS 4 28.10.2008 19:46
Variable Breite mit fester Breite vermischen vertex CSS 11 16.10.2006 14:22
3 Spalten | Aussen: variable Breite; Mitte: feste Breite dreamshocker CSS 9 17.08.2005 17:23
<div> nicht auf volle Breite ausdehnen timo123 CSS 10 29.04.2005 00:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:55 Uhr.