Hilfe benötigt .. Div Container

ralfmuc

Hi...
Ich bastel jetzt schon seit gestern an folgenden Problem rum. Ich würde gerne meine Internetseite: http://www.wunschmode.net in div container umbauen. Doch irgendwie bekomme ich die Seitentruktur nicht so hin wie ich möchte. Vielleicht kann mir einer von euch helfen.

Folgendes habe ich schon gemacht, aber der div Container # content will einfach nicht da hin wo er soll mit dem hintergrundbild (siehe wunschmode.net).

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 36</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">




<style type="text/css">


html,body{margin:0;padding:0}


body{font: 76% arial,sans-serif;text-align:center}


p{margin:0 10px 10px}


a{display:block;color: #981793;padding:10px}


div#header
{
background-image: url(bilder/bg_kopf.jpg);
width:800px;height:70px;
padding:20px;
}






div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#9B9A98}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}


div#container{width:700px;margin:0 auto}
div#content{float:right;width:500px;background-image: url(bilder/bg_home.jpg);}
div#navigation{float:left;width:160px;height:100%}
div#footer{clear:both;width:840px}
</style>








</head>
<body>
<div id="container">


<div id="header">
div-Container mit Hintergrundbild
</div>


<div id="wrapper">
<div id="content">




[b]1) Content here.[/b] column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>




very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>




fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>




column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
</div>
</div>
<div id="navigation">








					[b]Startseite[/b]</p>



[b]Die Produkte[/b]</p>



[b]Termin vereinbaren[/b]</p>



[b]Jobs zu vergeben[/b]</p>



[b]Kontakt[/b]</p>



[b]Impressum[/b]</p>



[b]Downloads[/b]</p>



[b]Newsletter[/b]</p>



[b]Kundenlogin[/b]</p>
			</div>
<div id="footer">


Here it goes the footer</p></div>
</div>
</body>
</html>

Alles anzeigen

Ich würde mich sehr über eine hilfestellung freuen.
Lieben gruss aus München
Ralf

Lizzard

Hi,

dein Div "wrapper" hat keinerlei Klasseninformation...

Einen Moment, ich bau dir das Layout schnell um.

ralfmuc

Das ist ganz lieb von dir bin jetzt schon seit mehr als 24h wach und am rumbasteln

Lizzard

Ganz so lang hab ich zum Glück nicht gebraucht jetzt

Hab ein neues Bild erstellt für den Hintergrund, hab dir den ganzen benötigten Bildordner angehängt.

Hier der Code für die Seite:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wunschmode.net</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="LizZard :D">




<style type="text/css">


body {


	margin: 0;
	padding: 0;
	background: #FFFFFF url(bilder/bg_rechts.jpg);
	font-family: Arial, verdana, sans-serif;
	font-size: 0.9em;
	color: #B0211D;
}


#header {

	margin: 0 auto;
	margin-top: 10px;
	width: 800px;
	height: 100px;
	background: #FFFFFF url(bilder/bg_kopf.jpg);
}


#header h1, #header h2 {

	display: none;
}


#container {


	margin: 0 auto;
	width: 800px;
	border-top: 2px solid #9B9A98;
	background: #9B9A98 url(bilder/main_bg.gif) repeat-y;
}


#content {


	width: 638px;
	padding: 6px;
	float: right;
}


#navigation {


	margin: 15px;
	padding: 0;
	width: 120px;
	list-style-type: none;
	float: left;
}
#navigation li {

	padding: 2px;
}


a {


	color: #B0211D;
	text-decoration: underline;
}
a:visited {


	text-decoration: none;
}
a:hover, a:focus {


	text-decoration: underline;
}

#footer {

	margin: 0 auto;
	width: 640px;
	background: #FFFFFF url(bilder/bg_gesamt.gif);
	clear: both;
	border-top: 2px solid #9B9A98;
	padding-left: 160px;
}


#footer p {


	margin: 0;
	padding: 2px;
	color: #FFFFFF;
	font-size: 0.7em;
}		 


</style>








</head>
<body>


<div id="header">
	<h1>Wunschmode.net</h1>
	<h2>Josephstraße 5, 80798 München, Fon: 288077 -11</h2>
</div>


<div id="container">
	<div id="content">





			[b]1) Content here.[/b] column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
		</p>





			very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column 
		</p>





			fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very 
		</p>





			column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very 
		</p>


	</div>
	<ul id="navigation">
		[*][url='']Startseite[/url]
            	[*][url='']Die Produkte[/url]
            	[*][url='']Termin vereinbaren[/url]
            	[*][url='']Jobs zu vergeben[/url]
            	[*][url='']Kontakt[/url]
            	[*][url='']Impressum[/url]
            	[*][url='']Downloads[/url]
            	[*][url='']Newsletter[/url]
            	[*][url='']Kundenlogin[/url]
         [/list]
	 <br style="clear: both;" />
</div>
<div id="footer">





		Here goes the footer
	</p>
</div>


</body>
</html>

Alles anzeigen

funktioniert in allen gängigen Browsern.
Content verlängert sich durch Faux Columns schön nach unten, und auch der Footer kann wie bisher mit Inhalt gefüllt werden. Auch wenn ich es bevorzugen würde, den Content nicht in den schwarzen Bereich zu schreiben, sondern "im weißen zu bleiben".

Optimal wär noch eine Auslagerung des CSS in eine externe Datei.
Deine Content-Hintegründe müssen dann entsprechend in das #content - Div. Allerdings würde ich weniger Schrift in die Bilder packen, und mehr Text verwenden! (Besser für Suchmaschinen)

Falls dir der Code maßgebilch geholfen, und dir Arbeit gespart hat, könntest du ja als Dank einen Link auf meine Seite setzen

Grüße,
LizZard

ralfmuc

Super Danke ... ich werd das gleich mal ausprobieren. Melde mich dann gleich nochmal. Und ein Link setzte ich dir dann sehr gerne !!

Lizzard

Hab mir erlaubt, deine Seite zu zentrieren, wenn du sie wieder am Rand haben willst, musst du nur das "auto" in den margin: 0 auto; -Attributen entfernen.

ralfmuc

Ne zentriert ist super.
Also sieht super aus, genau so wie ich es haben wollte *freu* und ich hab mehr als 24h für das nicht fertige Gerüst gebraucht. Wie man alles ändert weiss ich ja ungefähr Also der link auf der Startseite ist dir sicher Danke dir nochmal

Lizzard

Gern geschehen, und Danke für den Link

ralfmuc

ok letzte sache noch das hintergrundbild mit dem Anzug wie packe ich das jetzt am geschicktesten da rein? Rest müsste ich dann wissen

ralfmuc

ok hab es schon Ich sollte wohl mal schlafen gehen

ralfmuc

So seite ist wieder fertig, bzw auf dem letzten Stand So ich habe den Link für dich eingefügt. Im HTML Code habe ich auch noch nen kleinen Text eingefügt mit deiner url. Geb mir bitte kurz bescheid ob es so ok für dich ist.

Gruss aus München

Lizzard

Perfekt, dankeschön

Wenn ich dir noch kurz nen Tip geben darf:

#content {

width: 638px;
padding: 6px;
float: right;
background: #FFFFFF url(bilder/bg_home.jpg) no-repeat;
}

füge an das Background noch ein no-repeat; an, damit verhinderst du, dass sich dein Hintergrundbild nach unten hin wiederholt (was es bei mir ein wenig tut).

ralfmuc

Super, weiss schon gar nicht mehr wie ich dir danken soll

Lizzard

für mich ist das ein kurzer Post im Forum, für dich vielleicht ne Stunde Arbeit
Dafür gibts ja solche Foren

Hilfe benötigt .. Div Container

Tags

Benutzer online in diesem Thema