✔ in einen div zwei vertikale einfügen

Status
Nicht offen für weitere Antworten.
F

fritzje610

Mitglied
Hallo zusammen,

ich habe ein kleines css-Problem und weiß nicht wie ich das lösen kann.

Code: 
#inhalt{
	clear: left;
	font-size: 1.2em;
	margin: auto;
	width: 90%;
	background-color: #FFFFEA;
	margin-top: 3%;
	margin-bottom: 1%;
	padding: 1%;
	border-top: 1px solid red;
	border-left: 1px solid red;
	border-right: 1px solid red;
	border-bottom: 1px solid red;
}

Das ist der "Mutter-div". Dieser wird zum Teil so wie er ist gebraucht. Das Problem ist nun, dass ich diesen div in einigen Fällen nochmals in zwei Teilen brauche. Einmal um links ein Menü hinein zu laden und rechts den Inhalt der Menupunkte anzuzeigen.
Mein Gedanke war nun, im css zwei weitere divs anzulegen und dann wenn erforderlich in der aufrufenden Datei anzugeben.

Quasi zwei vertikal geteilte div in einem darüberliegenden div.
(Ich hoffe man kann nachvollziehen was ich vorhabe)

Ich stecke css-mäßig noch in den Kinderschuhen und weiß nun nicht ob das überhaupt geht bzw. man das so macht und auch nicht wie man das löst.

Würdet ihr mir bitte weiterhelfen?


Gruß

Michael
 
Hi,

grundsätzlich wäre es so möglich:

Code: 
#menu {
float:left;
width:200px;
}

#content {
margin-left:200px;
}

Code: 
<div id="inhalt">
    <div id="menu">menu</div>
    <div id="content">content</div>
</div>
 
Da war ich etwas voreilig. Das erste Problem habe ich gelöst.

Code: 
<div id="inhalt"><h2>Profil</h2>
	<div id="links">
		<a href="a.php">index</a><br />
		<a href="b.php">index</a><br />
		<a href="c.php">index</a><br />
		<a href="d.php">index</a><br />
		<a href="e.php">index</a><br />
	</div>
	<div id="rechts">
		Inhalt von Link A
	</div>
</div>

Somit habe ich zumindest schon mal die beiden kleinen divs in dem großen. Hier noch das css dazu:

Code: 
#inhalt{
	clear: left;
	font-size: 1.2em;
	margin: auto;
	width: 90%;
	background-color: #FFFFEA;
	margin-top: 3%;
	margin-bottom: 1%;
	padding: 1%;
	border-top: 1px solid red;
	border-left: 1px solid red;
	border-right: 1px solid red;
	border-bottom: 1px solid red;
}

#links{
	float: left;
	width: 25%;
	background-color: #FFCC66;
	}

#rechts{
	width: 75%;
	background-color: #33CCFF;
	}

Nun habe ich noch zwei Probleme.

1.)Um den div inhalt wird ein roter Rahmen gezogen. Allerdings "erweitert" dieser sich nicht automtisch, sobbald ich mehr Inhalt in div links haber als die Höhe von inhalt beträgt. Somit schreibt er über den Rahmen hinweg. Lasse ich den float im div weg geht es. Dann habe ich aber das Problem, das die beiden (rechts und links) untereinander stehen. Wie kann ich das lösen?

2.) wie kriege ich es hin, das beide divs immer gleich hoch sind? Damit ich keine Absätze mit den Hintergrundfarben habe?


Bitte um Hilfe !


Gruß

Michael
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück