Navibar & Content nebeneinander ausrichten??? :'(

Enzario

Hey liebe [SIZE="6"][COLOR="#ff8c00"]M[/COLOR][/SIZE]-[SIZE="3"]Core[/SIZE] Community :)

Ich hab ein behindertes Problem -.-'

Undzwar:

Die Navibar und der Content sollen nebeneinander ausgerichtet werden doch es funktioniert mit keinem beschissenen Code.
Google hat auch nicht weiter geholfen.
Und deswegen wollte ich mein Glück bei meinen baby's probieren :grin:
wisst ihr villt. wie der code dafür lauten könnte?

Hoffe über schnelle und hilfreiche antworten :)

Danke! ♥

mfg

Virtual

Hier ein Code-Beispiel

Code

*
{
	padding: 0px;
	margin: 0px;
}


#wrapper
{
	width: 960px;
	background-color: #EFEFEF;
	margin: 0 auto;
}


#sidebar_left
{
	width: 150px;
	display: block;
	float: left;
	background-color: #DFDFDF;
	height: 250px;
}


#content
{
	margin-left: 150px;
	min-height: 250px;
}


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


.box
{
	background-color: #CCF;
	float: left;
	margin: 10px 35px;
	width: 250px;
	height: 250px;
}

Alles anzeigen

HTML

<!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">


<html>
<head>
	<link rel="stylesheet" type="text/css" href="design/default.css" media="screen" />
</head>
<body>
<!-- Zentrierung der Website -->
	<div id="wrapper">
		<!-- Linke Sidebar = Navigation -->
		<div class="clearfix">
			<div id="sidebar_left">
				Navigation
			</div>
			<!-- Maincontent -->
			<div id="content">
				<h3>Hauptinhalt</h3>
			</div>
		</div>
		<!-- Box 1 -->
		<div class="box">
			<h4>Box1</h4>
		</div>
		<!-- Box 2-->
		<div class="box">
			<h4>Box2</h4>
		</div>
		<!-- Box 3-->
		<div class="box">
			<h4>Box3</h4>
		</div>
	</div>
</body>
</html>

Alles anzeigen

Synaptic

Zitat

( Wrapper oder Body sollten display: relative haben, da sonst hier spätestens der IE sein eigenes Spielchen spielt.)

Wäre mir neu.

Ich würde einen FullWrapper machen (der den kompletten Seiteninhalt enthält),
die Navigation via Margin & width anrichten und dann den Content Absolut ( Margin-left: Navigationsbreite + Abstand px/%tual)
anrichten und fertig.

Vorteil wäre hierbei, dass du weder eine feste Content Höhe noch eine feste Navigationshöhe festlegen müsstest.

Virtual

Dann ist es dir neu bezüglich des Internet Explorers.
Ich weiß es, da es mir vor wenigen Tagen passiert ist.
Dies ist ein spezieller Fall, da ich ihn simple nachgestellt habe, er jedoch ohne position:relative funktioniert hat.
Woran es gelegen hat, ist mir nicht ganz bewusst.
Eventuell Überschreibung unterer Ordnungen, worauf ich nun nicht eingehen möchte.
Dennoch war hier die Lösung position:relative.

Sage mir den Unterschied zwischen deinem und meinem Vorschlag?
Ich habe hier einen Wrapper, an dem alles ausgerichtet wird und die Navigation links verläuft?

Die Höhe ist bei mir ebenso irrelevant, ich aufgrund des mageren Inhaltes einfach festgelegt habe.

ulle

Aber Virtual das hier kannste dir beim Content sparen.

PHP

margin-left: 150px;

da du dem Wrapper ja sowieso eine feste Breite gibst, kannst du das ebenfalls mit dem Content machen.
Dann noch nen float left und der Kittel ist geflickt ;)

silvermf

Ich frag mich wieso ihr alles mit Wrapper und so macht, naja egal

mach einfach "float: left;" in die Container "navbar" und "content"

Du gibst "navbar" und "content" ne feste breite und jenachdem, ne höhe, ausser du machst background repeaten..

Demnach nach den "content" setzt du einfach ein "clear" um das Float zu beenden

<div class="clear:both"> oder so war das, bin leider gerade per PS3 Online und kann gerade nicht an den Rechner

ulle

Durch den Wrapper ist man halt sehr flexibel ;)

Fruchtiiiii

Zitat von silvermf;271531

Ich frag mich wieso ihr alles mit Wrapper und so macht, naja egal
mach einfach "float: left;" in die Container "navbar" und "content"
Du gibst "navbar" und "content" ne feste breite und jenachdem, ne höhe, ausser du machst background repeaten..
Demnach nach den "content" setzt du einfach ein "clear" um das Float zu beenden
<div class="clear:both"> oder so war das, bin leider gerade per PS3 Online und kann gerade nicht an den Rechner

Wrapper ist wie der Body ein Grundbegriff des Codens..
Wrapper bedeutet sowas wie.. joar verpackung XD
Ebenetwas was alles zusammen fasst...
Daher benutzt man auch die div id wrapper damit jeder seit das es um die gesamte verpackung der HP geht.

Mit deiner Lösung selbst wirst du aber überhaupt nicht weiter kommen xD

Synaptic

Ich würde... sofern es möglich ist NIE Position Absolut nehmen... Soweit wie möglich sollte man imemr versuchen alles mit margin udn Float in irgendeiner Form zu lösen. Ansonsten kommt man mit den ganzen absolut,relativ oder fixxirten Elementen nur durcheinander...

Virtuals lösung ist hier wohl eindeutig die beste..
sogar an Browserversatz ect. gedacht XD

Aber die grundidee dies zu lösen ist einfach das benutzen von Float und Margin. Damit bekommt man das sicher hin.
Hat aber Virtual schon gezeigt.

Zum problem mit dem IE:
Virtual hat recht^^
Der dreht bei sowas leicht ab

Navibar & Content nebeneinander ausrichten??? :'(

Jetzt mitmachen!

SCHNELLZUGRIFF

HILFE & COMMUNITY

RECHTLICHES