zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden mal wieder: divs mit variabler Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.11.2010, 14:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard mal wieder: divs mit variabler Breite

Servus,

ich sitz gerade an einem Joomla-Template.
dabei soll es links und rechts neben dem Inhalt Modulpositionen geben, die aber nicht auf allen Seiten Inhalt enthalten sollen.
Ich habe ein umgebendes Div mit fixer Breite (#center).
Darin soll das Div #left, das links floatet und das div #content das rechts floatet enthalten sein.
In #content sind wiederum zwei Divs (#main und #right) die dann wieder links und rechts floaten.
Quasi ein dreispaltiges Layout.

Ziel wäre jetzt, den Inhalt von #main immer auf volle Breite zu bekommen, egal ob und wie viel Inhalt sich in #left und #right befindet.

HTML-Code:
        <div id="center">
           	<div id="left">
				<jdoc:include type="modules" name="left" style="xtml" />
			</div>
			<div id="content">
				<div id="main">
					<jdoc:include type="component" style="xhtml"/>	<!-- include inhalt der seite-->
				</div>				
				<div id="right">
					<jdoc:include type="modules" name="right" style="xtml" />
				</div>
				<div class="clear"></div>
			</div>			
			<div class="clear"></div>
		</div><!--end div center-->
Ich habe bis jetzt versucht, sowohl den #left als auch den #content-Container links floaten zu lassen...beide ohne Breiten-Angaben oder auch mit 'width:auto' was aber immer in 100% resultierte.

Wenn sich das Problem für #left und #content lösen lässt, sind #main und #right natürlich hinfällig.

Schonmal danke
Schwammakobf
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.11.2010, 15:04
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Du kannst #main ungefloatet lassen und nur #left float:left geben.
Hat #left eine feste Breite?
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.11.2010, 15:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard

Hallo ArcVieh,
#left hat leider keine feste Breite...das ist ja das Problem...sonst könnte #content auch einen fixen Abstand von links einhalten und das Prob wäre gelöst

eigentlich kann man das Problem auf folgendes herunterbrechen:
Die Breite des umgebenden Containers ist fix (980px)
darin sollen zwei Container sein: #left und #content

#content soll immer 100% Breite haben (also auch 980px)! Außer, in #left wird auch Inhalt geladen. Dann soll #content die Breite [width: 980px - width(#left)] haben und quasi den kompletten Bereich zwischen #left und rechtem Containerrand füllen.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.11.2010, 15:16
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Ach so.
Leere Elemente sind aber nicht gut - ich würde eher mit if-Klauseln bei Joomla abfragen, ob da Inhalt geladen wird. Und wenn ja, soll das div#left dazu kommen und sich zB die Klasse von content ändern (um die Breite ggf anzupassen).

Ich habe seit Jahren nicht mehr mit Joomla gearbeitet, da ich das CMS als eher "schrottig" bewerte (kA wie es heute ist). Aber schon damals konnte man da mit einer if-Klausel abfragen, ob Module geladen werden oder nicht -- musst Du mal schauen.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #5 (permalink)  
Alt 22.11.2010, 15:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard

Ok, das ist natürlich ein vollkommen anderer Ansatz...Danke

Dann werd ich mal probieren, das auf diese Art zu lösen.

Trotzdem würds mich irgendwie interessieren... kann doch eine allzu seltene Anforderung sein, nebeneinander liegende Bereiche in variablen Größen zu gestalten...
Mit Zitat antworten
  #6 (permalink)  
Alt 22.11.2010, 15:27
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Schwammakobf Beitrag anzeigen
trotzdem würds mich irgendwie interessieren... kann doch eine allzu seltene Anforderung sein, nebeneinander liegende Bereiche in variablen Größen zu gestalten...
Na ja, in der Regel hat man aber keine leeren Inhalte.
Du kannst #left & #right & #main floaten.
#content könntest Du wiederum eine Hintergrundfarbe wie #main zuweisen, dann würde shrink-to-fit bei #main optisch nicht aufallen - wenn ich nicht gerade einen Denkfehler hab.

Du kannst auch mal hier schauen: http://xhtmlforum.de/40267-faq-h-ufi...-und.html#faq3
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #7 (permalink)  
Alt 22.11.2010, 15:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard

wenn ich dich jetzt richtig verstanden hab, geht das aber auch nicht...
Der linke Rand von meinem content würde sich ja trotzdem nicht verschieben.
mit der Hintergrundfarbe hat das ja zunächst mal noch gar nichts zu tun (wir sind ja quasi jetzt auf dem Stand, dass nur 2 divs enthalten sind)

der Bereich #left muss ja nicht zwangsläufig leer sein: er dürfte ja auch einfach mit dem enthaltenen Text in die Breite wachsen. (angenommen ich hätte darin ein Menü, das unterschiedlich lange Menüpunkte enthält...oder zusätzlich aufklappende submenüs, die dann das Menü nach rechts erweitern)

werd mir nachher mal den Link ansehen...evtl ist da ja noch irgend ein tipp drin.

Trotzdem danke, dass du dich damit auseinandersetzt!

Gruß Schwammakobf
Mit Zitat antworten
  #8 (permalink)  
Alt 22.11.2010, 17:28
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Schwammakobf Beitrag anzeigen
wenn ich dich jetzt richtig verstanden hab, geht das aber auch nicht...
Der linke Rand von meinem content würde sich ja trotzdem nicht verschieben.
mit der Hintergrundfarbe hat das ja zunächst mal noch gar nichts zu tun (wir sind ja quasi jetzt auf dem Stand, dass nur 2 divs enthalten sind)
Doch, wenn #left leer ist, würde #content nach links wandern. Aber auch nur, wenn #left kein padding/margin/border hat.

Zitat:
Zitat von Schwammakobf Beitrag anzeigen
der Bereich #left muss ja nicht zwangsläufig leer sein: er dürfte ja auch einfach mit dem enthaltenen Text in die Breite wachsen. (angenommen ich hätte darin ein Menü, das unterschiedlich lange Menüpunkte enthält...oder zusätzlich aufklappende submenüs, die dann das Menü nach rechts erweitern)
Tja, ohne feste Breite würde die Box dann aber irgendwann gezwungenermaßen die anderen verdrängen.
Mein Vorschlag funktioniert zwar, sollte aber #content zu viel Inhalt haben, rutscht es einfach nach unten.
Wobei Du da mit max-width arbeiten könntest, was dann aber wiederum zu unterschiedliche Abständen führen könnte.


Wie Du merkst, ist das nicht ganz so einfach.
Aber ich würde es - wie bereits empfohlen - über die Template-Funktionen von Joomla! regeln.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #9 (permalink)  
Alt 23.11.2010, 08:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2010
Beiträge: 9
Schwammakobf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ArcVieh Beitrag anzeigen
Doch, wenn #left leer ist, würde #content nach links wandern. Aber auch nur, wenn #left kein padding/margin/border hat.

Wie Du merkst, ist das nicht ganz so einfach.
Aber ich würde es - wie bereits empfohlen - über die Template-Funktionen von Joomla! regeln.
...ah! vllt. liegts am margin...mal sehen.
Ist tatsächlich ein interessanteres Problem als zunächst vermutet.
Ich werds dann auch mal über's Joomla versuchen.

Vielen Dank
Schwammakobf
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
div mit variabler Breite nebeneinander rifl CSS 9 17.02.2011 10:25
Horizontaler Scroll mit DIVs und Breite über Javascript kolarsky Javascript & Ajax 1 16.08.2010 11:18
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite devnull CSS 3 02.02.2009 11:03
Zwei DIVs nebeneinander mit variabler Breite FuryDE CSS 1 27.08.2008 19:40
floaten von divs ohne breite dany CSS 18 27.03.2008 12:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:15 Uhr.