zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIVs nebeneinander ohne Umbruch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.01.2009, 18:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.01.2009
Beiträge: 4
t.ockert befindet sich auf einem aufstrebenden Ast
Standard DIVs nebeneinander ohne Umbruch

Hallo zusammen!

Ich möchte gerne mehrere DVIs nebeneinander anordnen. Ich weiss nicht wie viele und nicht wie breit sie werden, kann also die gesamte Breite nicht angeben. Die DIVs sollen auf jeden Fall ohne Umbruch nebeneinander stehen, wenn nötig auch über die Browserbreite hinaus. Etwa so:



bisher löse ich es mit "float:left;", was natürlich zu einem Umbruch führt.
Bitte helft mir!

Danke, t.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.01.2009, 22:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Dann musst Du die Umgebung der divs scrollbar machen.

Code:
overflow: scroll;
und ihr eine feste Breite geben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.01.2009, 10:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.01.2009
Beiträge: 4
t.ockert befindet sich auf einem aufstrebenden Ast
Standard

Ja genau das ist ja das Problem: Ich kann keine Gesamtbreite angeben, weil ich die Breite nicht kenne (das ganze soll dynamisch befüllt werden).

Ich bräuchte irgendwas, wie "white-space: nowrap", das funzt nur leider nicht, oder ich wende es falsch an Bisher hab ichs so:

HTML-Code:
		/* Übergeordnetes DIV: */
		.TockiShaddow-BOX {
		 white-space: nowrap;
		 float: left;
		 height: 498px;
		 margin-top: 50px;
		 margin-left: 150px;
		}

		/* linkes DIV: */		
		.TockiShaddow-links {
		 float: left;
		 background:url(css-bilder/TockiShaddow-links.png) left top no-repeat;
		 width: 45px;
		 height: 498px;
		}
		
		/* mittleres DIV: */	
		.TockiShaddow-mitte {
		 float: left;
		 display: inline;
		 background: url(css-bilder/TockiShaddow-mitte.png) repeat-x;
		 height: 498px;
		}

		/* rechtes DIV: */			
		.TockiShaddow-rechts {
		 float: left;
		 display: inline;
		 background:url(css-bilder/TockiShaddow-rechts.png) right top no-repeat;
		 height: 498px;
		 width: 39px;
		}
Es gibt also ein DIV links (mit fester Breite), eines rechts (ebenfalls mit fester Breite) und das in der Mitte soll nun eben so breit werden, wie der Inhalt breit sein wird. Alle drei sollen aber IMMER nebeneinander angezeigt werden.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.01.2009, 14:06
Neuer Benutzer
neuer user
 
Registriert seit: 14.01.2009
Beiträge: 2
noob befindet sich auf einem aufstrebenden Ast
Standard

habe da ein ähnliches problem, nur funktioniert das bei mir schon mit festen werten nicht!

siehe hier http://xhtmlforum.de/55348-berschnei...ger-werte.html
Mit Zitat antworten
  #5 (permalink)  
Alt 15.01.2009, 14:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.01.2009
Beiträge: 4
t.ockert befindet sich auf einem aufstrebenden Ast
Standard

Ne, wenn ich dem übergeordneten DIV eine feste Breite geben dann funktioniert das bei mir ganz hervorragend...
Mit Zitat antworten
  #6 (permalink)  
Alt 11.03.2009, 12:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Hi zusammen

@noob,t.ockert

Ich habe auch schon auf einigen Sachen an der Problematik rumgebastelt und gesucht.

Threadi hat es schon angetönt.

Wenn der Umgebende Div keine fixe Breite hat, wird es nicht funktionieren.
Bei mir ist auch vieles Dynamisch da ich mit ASPX (ASP.NET 2.0) arbeite. Teilweise musst du aber auf die einte oder andere Art in den sauren Apfel beissen;

Position Absolut um auf den zweit-thread von noob zu antworten zerreisst dir sowieso alles. Hier wirst du auch sehr schöne Probleme bekommen wenn du zwischen IE7 und Firefox wechselt. Das sieht dann jeweils ganz anders aus.
Ich kann mir den Luxus leisten Firefox nicht ins Layout einzubeziehen.

Um auf die Grundproblematik zurückzukommen;

Ich mach hier n kleines Beispiel mit 2 Divs (ist eigentlich egal wieviele);
BasisProblem;
Die meist vorgeschlagene Möglichkeit 2 divs nebeneinander zu positionieren ist; beiden Divs das Float Left zu geben:

HTML-Code:
<div id="container"> 
<div style="height: 100px; width: 100px; background-color: red;float:left"></div>
<div style="height: 100px; width: 100px; background-color: blue;float:left"></div>
</div>
Wenn du nun den Browser kleiner machst als die 200 Pixel, dann wird das "rechte" Div unter dem linken Div angezeigt, da es "Fliesst". --> Und blöder weise ist "fliessen" die vorgeschlagene Möglichkeit die nebeneinander darzustellen.

Nun schau dir folgendes an;
HTML-Code:
<div id="container" style="width:200px"> 
<div style="height: 100px; width: 100px; background-color: red;float:left"></div>
<div style="height: 100px; width: 100px; background-color: blue;float:left"></div>
</div>
Die Divs fliessen nun nicht mehr da der Container ne fixe breite hat. Ohne diese fixe Breite, nix nebeneinander.

Mein Vorschlag, auch wenn ich hier wohl Kritik ernte;
Nimm Tabellen.
Denn wenn du die Div Breite nicht fix setzen kannst, resp. der Inhalt die Breite definieren soll, gehts net so wie dus willst.

Beispiel;
HTML-Code:
	<table>
	<tbody>

	<tr>
	<td><div style="height: 4px; width: 100px;background-color: red"></div></td>
	<td><div style="height: 4px; width: 100px;background-color: blue"></div></td>
	<td><div style="height: 4px; width: 100px;background-color: fuchsia"></div></td>
	</tr>	
	
	</tbody>
	</table>
Die Divs in diesem Beispiel haben ne symbolische breite von 100px, in deinem Beispiel wird der Inhalt vielleicht dynamisch sein, mir gehts darum dass du der Tabelle keine Breite gibst und sie nicht floated, sonst was machst und der Browser Scrollbars anzeigt wenn nicht alles Platz hat.

Gruss

@Edit Ein Beispiel entfernt das nicht zum Thema passt.

Geändert von Lexodus (11.03.2009 um 13:07 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 11.03.2009, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.01.2009
Beiträge: 4
t.ockert befindet sich auf einem aufstrebenden Ast
Standard

Hey Lexodus!

Danke für deine Antwort. Ja, das mit der Tabelle hab ich auch schon auf mich zukommen sehen. War mir nur nicht sicher, ob es da vielleicht eine Lösung zum Auslesen der aktuellen Breite, oder sowas gibt, die ich nicht kenne.

Vielen Dank jedenfalls für Deine Mühe!
Gruss, t.
Mit Zitat antworten
  #8 (permalink)  
Alt 11.03.2009, 13:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Gerne.

Zum auslesen;

Das kannst du in Prinzip schon, mit JavaScript. Dann könntest du deinem DIV mit Javascript eine Breite setzen. (Du musst dann aber den Inhalt per Javascript auslesen, die "grösstmögliche" Breite des Inhalts berechnen und die dann dem Umgebenden Div setzen.

Die Funktion könntest du beim Onload aufrufen.
Mit Zitat antworten
  #9 (permalink)  
Alt 11.03.2009, 13:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard Javascript

Sodala

Das Javascript hätte ich auch fertig;
Aufrufbar im body onload;

HTML-Code:
<body onload="AutoSize">

<script type="text/javascript"">
function AutoSize()
    {
	    var container = document.getElementById("container");
	    var elements = container.getElementsByTagName("div");
	    var length = 0;
	    for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) 
	    {
	    	var element = elements[elementIndex];
	    	length = length + element.offsetWidth;
		}
		container.style.setAttribute("Width", length,false);
    }
</script>
So haste auch keine Tabellen
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.08.2010, 21:09
Neuer Benutzer
neuer user
 
Registriert seit: 26.05.2010
Beiträge: 5
kolarsky befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

nach ewigem Suchen bin ich hier auf das Script gestoßen bzgl. Breite auslesen. Da mir JS-Programmierung nicht unbedingt liegt, hab ich versucht, das ganze auf mein Layout umzusetzen...
Hab im CSS die Breite vom umschließenden DIV auskommentiert und wollte dann mit Hilfe dieses Scriptes die Breite einstellen lassen.
Nur leider klappts nicht. Habe den DivId entsprechend vom Namen her auf meinen DIV umbenannt und am Ende der Funktion, bzw bei <body onload einen alert(length); eingefügt. Der zeigt mir allerdings 0 an...

Ne Idee, worans noch liegen kann?

Danke schonmal vorab
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
2 divs nebeneinander smartexport CSS 6 16.04.2010 17:22
2 DIVs nebeneinander ganzheitlich zentriert SchlechterInformatiker CSS 2 12.11.2009 03:29
Divs nebeneinander... Sengi CSS 4 23.05.2009 09:23
divs fließend nebeneinander, der letzte bis zum seitenrand deelite CSS 2 17.03.2009 22:04
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:10 Uhr.