• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Div macht keinen Zeilenumbruch und weitere Fragen

P

ps2freak

Mitglied
Hallo, folgender html code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id='aussen'>
  <div id='balken'>
	Heute, 10:20 Uhr
    <div id='nummer'>
	  #1
	</div>
  </div>
  <div id='links'>
	<span id='name'>Mein Name</span><br /><br />
	<span id='ort'><span class='fett'>Ort:</span> Nirgendwo im Irgendwo im Nirgendwo</span>
  </div>
  <div id='rechts'>
	<span id='überschrift'>
	  Überschrift
	</span>
	<hr />
	Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext
  </div>
</div>
</body>
</html>

Hier das CSS:
Code: 
#aussen {	border:1px solid #009;
	min-height:300px;
}


#balken {
	position:relative;
	top:0;
	left:0px;
	border:none;
	background-color:#009;
	height:25px;
	text-align:left;
	color:white;
	padding-left:5px;
}


#nummer {
	float:right;
	color:white;
	margin-right:5px;
}


#links {
	position:absolute;
	background-color:#F0F0F0;
	height:100%;
	width:200px;
	padding:5px;
}


#name {
	color:#009;
	font-weight:bold;
}


#ort {
	font-size:14px;
}


.fett {
	font-weight:bold;
}


#rechts {
	padding:5px;
	padding-left:215px;
}


#überschrift {
	
}

Meine Frage dazu:
Das rechte Div vergrößert ja anscheinend auch das Elternelement (in die Höhe) je mehr Text drinne steht. Wie mache ich das mit dem linken div bzw. das linke soll sich ja nicht nur vergrößern wenn dort mehr Text drinne steht, sondern auch, wenn das rechte div größer wird. Ich habe jetzt mal zum Probieren die Höhe auf 100% gesetzt, in der Hoffnung, dass es dann bis zum unteren Rand des Divs "aussen" geht, aber das hat auch nichts gebracht - jetzt geht es weit darüber hinaus...
Ich weiß, dass das nichts mehr mit dem ursprünglichem Titel zu tun hat, aber die anderen Probleme konnte ich beheben, sodass dies jetzt mein Hauptproblem ist.

Danke und MfG.
 
Zuletzt bearbeitet:
Werbung:
Danke für die Antwort, aber ne Tabelle zu simulieren erscheint mir sinnlos (oder seit ihr da anderer Meinung?), weil ich das extra mit divs gemacht hab und absichtlich nicht als Tabelle ;)
Dieses Faux Columns krams hatte ich auch schon gefunden, jedoch verstehe ich nicht ganz ob das trotzdem geht, weil ja das linke div ne feste Breite hat und das rechte div ja quasi keine Breitenangabe hat (eben damit es bis ganz zum Rand geht)...
Kann mir das vielleicht nochmal jemand näher erklären, wie das gehen soll? Wäre echt nett.

MfG.
 
Werbung:
Nein, sinnlos ist es keineswegs. Würdest Du eine HTML-Tabelle verwenden wären die Inhalte semantisch falsch ausgezeichnet. Tabellen in HTML sollte man nur für tabellarische Inhalte verwenden. Um eine mehrspaltige Ansicht zu erreichen ist es somit der falsche Weg, vor allem wenn die Inhalte keine tabellarischen Daten sind. Eine Tabelle per CSS nachzubauen ist somit ein sauberer Weg, auch wenn man dabei aufpassen muss nicht gleichzeitig zu viele semantisch bedeutungslose Elemente wie <div> zu verwenden.

Faux columns habe ich nur noch für Webseiten verwendete die auch im Internet Explorer 7 angezeigt werden sollten. Neuere Browser (auch Internet Explorer ab Version 8) unterstützen jedoch die CSS-Eigenschaften für "display: table;" etc. weshalb ich dir zu diesem Weg raten würde.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.
 
Mit JS ginge das viel einfacher. Die Höhe des linken Div auslesen und dem rechten Div zuweisen.
 
Werbung:
threadi schrieb:
Auf JS kann man verzichten, da man das auch mit reinem CSS lösen kann.
Zum Vergrößern anklicken....

Können schon, aber es ist wesentlich aufwendiger. Zumal dann, wenn man Faux Columns auf ein fluides Grid portieren will.

Letztendlich hängt es vom Projekt ab. Habe ich ein kommerzielles Webportal mit etlichen Seiten, hohen Zugriffszahlen, vielen eingebundenen Skripten und jeder Menge Legacy Code, dann würde ich aus Gründen der Performance und Stabilität auch sowenig wie möglich JS für Styling-Aufgaben einsetzen.
 
Also JS ist schon nützlich und kann "tolle sachen machen", aber in diesem Fall kann man das vermeiden, darum bedanke ich mich erstmal für eure Antworten und werde dann mal dem Vorschlag die Tabelle zu simulieren nachgehen.
Und - keine Angst ;) - kommerzielle Websites mache ich swieso nicht (kp ob ich das in n paar Jahren mal machen werde), denn ich will mal behaupten, dass ich schon Ahnung habe, aber mir noch ne ganz große Menge aneignen muss, um wirklich "professionell" Webseiten zu erstellen (aber dafür, dass ich erst seit ca. 2 Monaten "intensiv" lerne, würde ich sagen, dass ich schon ganz gut was kann (auch wenn man hier immer nur mitbekommt, dass ich Fragen habe ;) ).

Melde mich dann nochmal...
MfG.
 
Also erstmal, dass der Edit-Button nicht funzt ist nicht normal, oder? Jedenfalls habe ich draufgedrückt und es ist nichts passiert....
Naja, aber ich wollte schon noch schreiben, dass ich weitergekommen bin, also:
Mein HTML-Code sieht nun folgendermaßen aus:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id='aussen'>
  <div id='balken'>
	Heute, 10:20 Uhr
  <div id='nummer'>
	#1
  </div>
</div>
  <div id='table'>
  	<div id='row'>
  	  <div id='links'>
		<span id='name'>Lorem ipsum</span><br /><br />
		<span id='ort'><span class='fett'>Ort: </span>Lorem ipsum dolor sit amet</span>
  	  </div>
  	  <div id='rechts'>
		<span id='überschrift'>
	  	Lorem ipsum dolor sit amet, consetetur sadipscing elitr
		</span>
		<hr />
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  	  </div>
  	</div>
  </div>
</body>
</html>

Und mein CSS so:
Code: 
#aussen {	border:1px solid #009;
}


#balken {
	position:relative;
	top:0;
	left:0px;
	border:none;
	background-color:#009;
	height:25px;
	text-align:left;
	color:white;
	padding-left:5px;
}


#nummer {
	float:right;
	color:white;
	margin-right:5px;
}


#links {
	background-color:#F0F0F0;
	width:200px;
	padding:5px;
	display:table-cell;
}


#name {
	color:#009;
	font-weight:bold;
}


#ort {
	font-size:14px;
}


.fett {
	font-weight:bold;
}


#rechts {
	padding:5px;
	padding-left:10px;
	padding-bottom:12px;
	display: table-cell;
}


#überschrift {
	
}


#table {
	display:table;
}


#row {
	display:table-row;
}

Erstmal vielen Dank! Es hat tatsächlich geholfen und bewirkt was ich wollte, aber es ist nun logischerweise so, dass wenn der Text im div "rechts" nur z.B. 3 Wörter lang ist, dann geht die Zelle auch nur so weit, sprich die Linie von der Überschrift ist dann nur dementsprechend lang (sonst fällt es ja auch nicht auf, dass die Zelle "nur" so klein ist). Ich will aber, dass sie immer bis "ganz nach rechts" geht. Gibt es dafür auch noch ne Lösung? Ansonsten ist es perfekt, so wie es jetzt ist...

Danke bisher und MfG.
 
Werbung:
Ich bin mir nicht sicher was Du für einen Abstand meinst? Kann man das auch irgendwo online sehen?
 
Jo, hier hast es "online", auch wenn nicht so, wie du meintest ;)
Es geht halt darum, dass die schwarze Linie, die hier zu sehen ist, nur so weit geht, wie Text in dieser "gefälschten" Zelle ist, sie soll aber halt eitergehen.
Warum das so ist, ist ja logisch (wegen dem Tabellen-Attribut) - die Frage ist nur, wie kann ich das so machen, dass es wie vorher ist? --> Vorher ging die Linie (einfacher Strich, also horizontale Linie mittels <hr /> Tag) nämlich bis ganz rechts zum rand - dieses Verhalten ist ja auch, wenn "genug" Text drinne ist.

Ich hoffe, es ist verständlich genug...

Edit:ich habe dazu auch noch eine Grafik "sosoll.png"angehangen, als Vergleich, damit ihr wisst, wie es "richtig" aussieht, sprich wie es aussehen soll, auch wenn weniger Text drinne ist.
 

Anhänge

  • dasda.jpg
    dasda.jpg
    4,1 KB · Aufrufe: 6
  • sosoll.jpg
    sosoll.jpg
    14 KB · Aufrufe: 4
Lass mal das "ü" in

Code: 
#überschrift {

weg, analog im HTML-Code. Denn der Ausschnitt in deinem (winzigen) Screenshot scheint sich ja auf genau dieses <span> zu beziehen. Einen border kann ich in deinem CSS-Code an der Stelle aber nicht erkennen, daher die Umlaut-Vermutung.

Wenn es auch so nicht geht, dann bräuchten wir wirklich einen Link zur Seite.
 
Werbung:
Also, das mit dem ü passt schon so. normalerweise benutze ich auch immer ue oe und ae, aber das war nur eben ein Beisiel.
Wie ich sagte, ist dieser "Srich" auch wirklich "nur" eine horizontale Linie, welche im html code direkt unter dem schließenden Span der "überschrift" zu sehen ist - da ist nix mit border ;) - und das im CSS dazu nichts steht, ist auch richtig so, da ich die Überschrift (noch) nicht weiter formatiert habe.

Dass die Screenshots so "winzig" sind, liegt weder an mir, noch an Windows, sondern anscheinend an vBulletin, oder zumindest an diesem Board - denn ursprünglich sind sie definitiv nicht so klein (also frag mich nicht, warum die so klein sind).
Ansonsten, wegen Webspace - könnt ihr mir sagen, wo man sich anmelden kann und den sofort zu verfügung hat (kostenlos)? Mir fällt grad nur funpic ein, aber muss man da nich ewig warten? Weil, wenn euch n Link besser hilft, würd ich euch den Gefallen natürlich gerne tun ;)
 
Hm...
werd dann mal gucken
aber kann man das auf den screenshots nicht auch sehen? Das eine mal geht die Linie bis ganz nach rechts (vorher) - jetzt geht sie aber nur soweit, wie auch text drinne ist, das sieht man doch! Warm das so is, lieg doch daran, dass es nun ne Tabelle "ist".... Oder sehe ich das falsch? Ich will ja im rinzi nr wissen, wie ich das mache, dass die Linie, also die Zelle immer bis zum rand des äußeren divs geht (id=aussen) - also im rinzi wie das normale Verhalten eines Divs...

MfG.
 
Werbung:
Nein, ein Link ist hilfreicher da man dann mit einem Entwicklertool wie Firebug direkt schauen kann, welche Eigenschaften wo wirken. Das ist einfacher als Quellcode lesen und nachvollziehbarer als ein Screenshot in dem man die wirkenden Eigenschaften nur erahnen kann.
 
Danke, hab jetzt ne Nacht drüber geschlafen und habs dann heute Morgen auf Anhieb hinbekommen - dem div "table" ein "width:100%" gegeben - jetzt funzts so wie ich will.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben