zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CCS Problem mit <div>s

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.10.2005, 12:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2005
Beiträge: 84
dope_dope befindet sich auf einem aufstrebenden Ast
Standard CCS Problem mit <div>s

Hi Leute,

eigentlich möchte ich nur ein <div id="1">, dass ein weiteres <div id="2"> enthält, welches noch ein <div id="3"> enthällt.

div 3 enthält den text und soll rechts einen Scrollbalken anzeigen, fals der Text zu lang ist.

Mein problem ist dabei, dass die inneren divs immer aus dem äußeren "ausbrechen". Wie kann ich denn sagen, dass z.b. div 2 nicht über div 1 hinausragen darf???

Kann mir jemand helfen????
thx, MFG
dope_dope
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.10.2005, 13:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 19.07.2005
Beiträge: 211
Cyberman befindet sich auf einem aufstrebenden Ast
Standard

Soweit ich weiß dürfen IDs und Klassen nicht mit Zahlen beginnen.

Die Browser sollten die IDs also ignorieren. Versuch mal IDs die mit einem Buchstaben beginnen, ev. klappts dann.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.10.2005, 13:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2005
Beiträge: 84
dope_dope befindet sich auf einem aufstrebenden Ast
Standard

Das ist nur ein Beispiel, die Klassen haben eigentlich Namen anstatt zahlen!

Hat jemand eine andere Idee??
Mit Zitat antworten
  #4 (permalink)  
Alt 03.10.2005, 13:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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 dope_dope
Das ist nur ein Beispiel, die Klassen haben eigentlich Namen anstatt zahlen
Erstell doch bitte einen Beispielcode, der dein Problem nachvollziehbar macht:
http://www.xhtmlforum.de/viewtopic.php?t=1399

Grüße
fricca
Mit Zitat antworten
  #5 (permalink)  
Alt 03.10.2005, 13:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2005
Beiträge: 84
dope_dope befindet sich auf einem aufstrebenden Ast
Standard

Also noch mal von vorne:

Das ist meine HTML-Datei:

Code:
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/XHTML-1.0-Transitional.dtd">
	
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 

<head>
	<title>Titel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<link rel="stylesheet" type="text/css" media="screen, projection, print" href="style.css" />
</head>

<body>

<div id="header">
</div>

<div id="main">

	<div id="main-left">
		Menu
	</div>
		
	<div id="main-content">
		<div id="inner-border">
			ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		</div>
	</div>

</div>

</body>
</html>

Und das ist die CSS-Datei:
Code:
body { 
	font-family: verdana, geneva, arial, sans-serif;
	font-size: 0.7em;
	color: #5c5c5c;
	line-height: 1.7em;	}

div#header {	/* Header */
	font-size: 28px;	
	text-align: center;
	color: #000000;
	border: 2px solid red;
	height: 91px;
	padding: 3px;
	margin-bottom: 10px;
	clear: both;	}

div#main {	/* Main */
	position: absolute;
	background-color: #ffffff;
	border: 1px solid green;
	padding: 2px;
	height: 75%;
	margin-top: 5px;
	width: 98%;	}

div#main-left {	/* Linke Leiste */
	background-color: #ffffff;
	border-right: 5px solid red;
	float: left;
	padding: 5px;
	width: 16%;
	height: 85%;
	padding-top: 25px;
	padding-bottom: 35px;
	padding-right: 0px;	}

div#main-content {	/* Rechte Seiste */
	position: relative;
	background-color: #ffffff;
	border: 5px solid red;
	float: right;
	padding: 2px;
	width: 80%;
	height: 96%;	}

div#inner-border {	/* Main-Content innerer Rahmen */
	background-color: #ffffff;
	border: 2px solid red;
	padding: 10px;
	margin: 0px;
	height: 94%;
	overflow: auto;	}

Was ich möchte:
1.) div#main soll 75% der gesamten Seite hoch sein, egal was drin steht!
2.) div#main-left und div#main-content dürfen nicht über den unteren Rand von div#main hinausragen
3.) div#inner-border darf nicht über den unteren Rand von div#main-content hinauragen
4.) bei div#inner-border sollen scrollbalken angezeigt werden, anstatt den gesamten div#main einfach nach unten zu vergrößern wie es im Moment im IE der Fall ist (siehe auch 1.)

--> Was muss ich machen, damit z.B. div#main-content weiss, dass es nen Teil von div#main ist und da drinnen bleibt anstatt sich drüber zu legen??? Und damit es auch die Größe von div#main nicht einfach vergrößert sondern so lässt wie sie ist? Kann ich das mit position machen oder wie geht das???

Ist das jetzt besser erklärt???
Mit Zitat antworten
  #6 (permalink)  
Alt 03.10.2005, 13:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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 dope_dope
Ist das jetzt besser erklärt?
Es geht nicht um die Erklärung, sondern um die Beschaffenheit der Codeauschnitts. Folge bitte dem Link!!!11!1

Welchen Doctype verwendest du?
Hast du alle relevanten CSS-Angaben für die Elternelemente von #main gemacht?
Das kann man an deinen Ausschnitten nicht sehen.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.10.2005, 14:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2005
Beiträge: 84
dope_dope befindet sich auf einem aufstrebenden Ast
Standard

Ich habe den obigen Code jetzt um die entsprechenden Punkte ergänzt. Wenn du dir diesen kopierst, dann wirst du merken, dass "ganz langer Text (...)" nicht eine absolute größe hat und mit Scrollbalken angezeigt wird wie ich es haben möchte, sondern die divs einfach immer weiter nach unten vergrößert werden umso mehr text es wird.

Was kann ich denn nun dagegen machen???
Mit Zitat antworten
  #8 (permalink)  
Alt 03.10.2005, 19:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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

Ich vermute, du testest im IE? Schlechte Wahl, nimm lieber Firefox.

Der IE braucht:
html, body {height:100%}

Setz außerdem mit
* {margin:0; padding:0;} alle Default-Randabstände auf 0.

Warum positionierst du #main absolut?

Pixel und Prozentwerte mischen (so wie du es tust) kann nicht gutgehen. Pixelhöhe von #header + Prozenthöhe von #main erzeugt irgenwann doppelte Scrollleisten. Nicht schön.
Außerdem mischt du prozentuale Höhen und Breitenangaben mit padding/border/margin in Pixel.
Das Box-Modell ist dir bekannt?

Hier gibt's eine "100% + Rest"-Lösung:
http://www.xhtmlforum.de/viewtopic.php?t=4465

Grüße
fricca
Mit Zitat antworten
  #9 (permalink)  
Alt 03.10.2005, 20:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2005
Beiträge: 84
dope_dope befindet sich auf einem aufstrebenden Ast
Standard

Hier die Lösung für mein Beispiel:

IE braucht:
body { height: 100%;}

Firefox braucht zusätzlich:
html { height: 100%;}

Jetzt kann ich auch endlich das position: absolute was da eh nichts verloren hatte entfernen!

THX an fricca !!!
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
Design CCS Problem bei Joomla Template KITN Alomaman CSS 4 07.01.2008 16:43
Design zu CSS/HTML verarbeiten - Problem häufen sich. Grafikamateur CSS 2 06.08.2007 10:57
Problem mit WordPress und dem Bilder Upload Maxefix Serveradministration und serverseitige Scripte 0 19.12.2006 15:58
Problem bei Div's - zwei mal das gleiche und doch nicht ... Niriel CSS 10 09.06.2005 18:39
Problem mit einem CSS Layout nARC CSS 20 21.05.2005 07:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:53 Uhr.