Habe mich nun durch eine Reihe von Tutorials und Forenbeiträgen gewöhnt und war gerade kurz davor mein Vorhaben aufzugeben, möchte aber noch nen Versuch starten, in dem ich hier um Hilfe bitte.

Ich möchte unsere Webseite glasdesign-schaefers.de vom bisherigen Tabellenlayout komplett in CSS umsetzen. Nun ist das bei unserer Seite anscheinend etwas komplexer als bei den Beispielen, die ich bislang im Netz gefunden habe.

Das Hauptmenü und Logo waren leicht umzusetzen. Aber dann...

Meine Idee war es, einen Container, der den linken, weißen Seitenbereich darstellt in den Hintergrund zu legen und darauf den hellblauen Bereich als neuen Container zu platzieren, der den Inhalt ausgibt.
Soweit so gut, nur ergeben sich da zwei Probleme...

1: Der weiße Container im Hintergrund muss seine Höhe dem blauen Container im Vordergrund anpassen und umgekehrt, weil ja mal der Seiteninhalt länger ist und mal das Menü. Idealerweise sollte unten drunter noch das Stück herausragen, wo die Links zu Impressum & Co platziert sind, aber da ist wohl ohnehin ein weiterer div-Container nötig.

2: Die Grafik mit den beiden Glasscheiben. Im Tabellenlayout war das kein Problem die dort unten links zu platzieren. Aber wie mache ich das in css? Ich kann sie ja nicht einfach in den weißen Div-Container packen und den Inhalt nach unten ausrichten, weil er ja noch andere Inhalte enthält, die oben stehen müssen.
Einen eigenen Container mit absoluter Position zu erzeugen geht auch nicht, weil seine Position dynamisch ist, das heißt davon abhängt wie lang das Menü bzw. der Inhaltsbereich ist.

Es folgt mein CSS-File:

Code:

body {
	background-color:#FFFFFF;
	margin:40px 0px 40px 0px;
	padding:0px;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:0.7em;
	color:#303884;
	text-align:center;
}

img {
	border:0px;
	margin:0px;
	padding:0px;
}

#main {
	width:860px;
	margin:0px auto;
	text-align:left;
}

#kundencenter {
	position:relative;
	top:0px;
	left:0px;
	width:832px;
	background-color:#FFFFFF;
	border-bottom:1px solid #A6A9CB;
	border-right:1px solid #A6A9CB;	
	border-left:1px solid #FFEA99;	
	margin:0px;
	padding:0px;
	z-index:1;
}

#content1 {
	position:absolute;
	top:0px;
	left:255px;
	width:602px;
	background-color:#F5F5FA;
	margin:0px;
	border-bottom:1px solid #A6A9CB;
	border-left:1px solid #A6A9CB;
	border-right:1px solid #A6A9CB;	
	z-index:2;	
}

#menubild {
	position:relative;
	top:20px;
	left:0px;
	width:268px;
	margin:0px;
	z-index:3;	
}

Und hier findet ihr das bisher zusammengemurkste Ergebnis:

http://www.glasdesign-schaefers.de/xmltest.php

Fragen über Fragen... und gleich noch eine:

Wo genau ist der Unterschied zwischen position:absolute und position:relative? Ich dachte erst, absolute bezieht sich immer auf das Elternelement, während relative von der Position ausgeht, wo nach HTML-Syntax das nächste Elemente positioniert werden würde. Aber das scheint nicht ganz zu stimmen, denn in meinem Fall musste ich #kundencenter auf relativ setzen, weil sich die Werte sonst nach dem Seitenrand, statt nach dem übergeordneten Container #main ausrichten.

Ich hoffe mir kann jemand helfen. Vielen Dank im voraus!

MiH

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenannt</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
	#wrapper{
		width: 860px;
		margin: 20px auto 20px auto;
	}
	
	#header{
		background: #ff1;
		height: 30px;
	}
	
	#box{
		background: #f2f;
	}
	
	#navi{
		width: 200px;
		float: left;
	}
	
	#content{
		margin: 0 0 0 200px;
		background: #f1a;
		border: 1px solid #000;
	}
	
	#footer{
		clear: both;
		background: #ff1;
		margin: 0 50px 0 0;
		border: 1px solid #000;
		border-top: 0;
	}
</style>
</head>
<body>
<div id="wrapper">
	<div id="header">
		HEADER
	</div>
	<div id="box">
		<div id="navi">
			NAVI
		</div>
		<div id="content">
			CONTENT
		</div>
	</div>
	<div id="footer">
		FOOTER
	</div>
</div>	
</body>
</html>

hier dein layout. irgendwie hab ich kein position gebraucht.

absolute: positioniert deine ebene dort, wo du sie willst. also
left, top, bottom, right.

relative: bezieht sich auf das eltern element und dort von der oberen linke ecke gesehen.

NORRITT

Erstmal vielen Dank! Bin schon ein ganzes Stück weiter. Ein "kleineres" Problem hab ich allerdings noch.

Und zwar habe ich nun diese Glas-Bild als Hintergrund der Box-Ebene eingefügt und für die Navigationsebene den gelben und blauen Rand gesetzt. Nun kommt jedoch das Problem zum Tragen, dass der #navi-Container gar nicht mit dem #content-Container runtergezogen wird (sondern nur der #box Container) und so eine Lücke bei den Rändern entsteht.
Jetzt könnte man auf die Idee kommen, die Ränder im #box-Container zu setzen. Das geht jedoch nur bedingt, weil dann der Glasschneider, der optisch von der Navigationsleiste in die Contentleiste ragt, vom Rand "durchschnitten" wird.

Ich habe das bisherige Ergebnis mal online gestellt. Hier der Quellcode:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenannt</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
body {
	background-color:#FFFFFF;
	margin:0px;
	padding:0px;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:0.7em;
	color:#303884;
	text-align:center;
}
	img {
		border:0px;
		margin:0px;
		padding:0px;
	}
	#main{
		width: 860px;
		margin: 20px auto 20px auto;
		text-align:left;		
	}
	
	#header{
		background: #ff1;
		height: 30px;
	}
	
	#box{
		background: #FFFFFF url(pics/glaeser.jpg) no-repeat bottom left;
	}
	
	#navi{
		width:256px;
		float:left;
		border-right:1px solid #A6A9CB;
		border-left:1px solid #FFEA99;				
	}
	
	#content{
		margin: 0 0 0 256px;
		border-bottom:1px solid #A6A9CB;
		border-right:1px solid #A6A9CB;
		background: #F5F5FA url(pics/slogan.jpg) no-repeat bottom left;
		padding: 20px 20px 100px 20px;			
	}
	
	#footer{
		height:18px;
		clear: both;
		background: #FFFFFF url(pics/glaeser_footer.jpg) no-repeat top left;
		margin: 0 30px 0 0;
		border-bottom:1px solid #A6A9CB;
		border-right:1px solid #A6A9CB;
		border-top: 0;
	}
</style>
</head>
<body>
<div id="main">
	<div id="menu"><a href="index.php"><img src="pics/logo_new.gif" alt="" /></a><img src="pics/menu_vor2.gif" alt="" /><a href="index.php"><img src="pics/menu_ueber_act.jpg" alt="Über uns" /></a><a href="http://www.glasdesign-schaefers.de/shop/caupo/index.php"><img src="pics/menu_shop.jpg" alt="Onlineshop" /></a><img src="pics/menu_spacer.jpg" alt="" /><a href="kurse_allgemein.php"><img src="pics/menu_kurse.jpg" alt="Kursangebote" /></a><img src="pics/menu_spacer.jpg" alt="" /><a href="ptipps.php"><img src="pics/menu_tipps.jpg" alt="Profi-Tipps" /></a><img src="pics/menu_spacer.jpg" alt="" /><a href="tipps.php"><img src="pics/menu_galerie.jpg" alt="Galerie" /></a><img src="pics/menu_spacer.jpg" alt="" /><a href="tipps.php"><img src="pics/menu_forum.jpg" alt="Forum" /></a><img src="pics/menu_spacer.jpg" alt="" /><a href="hilfe.php"><img src="pics/menu_hilfe.jpg" alt="Hilfe" /></a></div>
	<div id="box">
		<div id="navi">Test<br />Noch ein Test</div>
		<div id="content">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br /></div>
	</div>
	<div id="footer"></div>
</div>	
</body>
</html>

NORRITT

Bin mit meine Bemühungen fast am Ziel und hab nun auch ne Lösung für obiges Problem gefunden. Im IE sieht die Seite schon perfekt aus, doch der Netscape bzw. Mozilla haben noch ein Problem mit meinem Code. Und zwar wird dort zwischen dem Hauptmenü und dem #box-Container eine 1px hohe Spalte eingeblendet. Gibt es da ne Lösungsmöglichkeit? Sieht nicht so wirklich schön aus...

Zu sehen: hier

MiH

wo deine obere navigation ist gibts du dem div mal die id navitop und dann das CSS schnippselchen

Code:

	  #navitop img{
	  	margin-bottom: -2px;
		padding: 0;
	  }

danach sollte es klappen. unten links in der ecke ist auch noch ein fehler, da steht etwas vom rand über.

NORRITT

Ich habe es geschafft. Das mit dem 1px-Abstand hab ich hinbekommen, in dem ich die Höhe für den #div-Container, der das Menü enthält angegeben hab.
Das Problem unten links war mir erst gar nicht aufgefallen. Leider war das sehr vielschichtig und wieder IE/Netscape-abhängig.

Da gibt es nämlich einen entscheidenden Unterschied:

Wenn man ein Background-Image und zusätzlich eine Border-Angabe für einen #div-Container setzt, positioniert der IE das Bild innerhalb dieses Borders, während im Netscape der Border das Bild überlagert. Musste die Browser daher grafisch etwas austricksen, was jetzt aber zu weit führen würde. Ist zwar nicht die sauberste Lösung, aber zumindest die optisch beste.

Danke nochmal für die Hilfe, alleine hätte ich das sicher nicht geregelt bekommen

NORRITT

Leider hab ich immer noch nicht alle Probleme lösen können.
Zwar habe ich die Startseite nun entsprechend meiner Vorstellungen vom Tabellendesign ins reine CSS-Design umgesetzt, doch ein Problem werde ich einfach nicht los.

Und zwar sieht man ja, dass ich in der #content-Box noch eine weitere Box eingebunden habe, welche die Spalte mit den Links und Fotos neben dem Text bildet. Ist diese Box länger als der Text (was durchaus mal vorkommen kann), zieht sie die darunterliegenden, bzw. übergeordneten Container (Elternelemente?) nicht mit nach unten, sondern überlagert sie. Hier zu sehen!

Das gleiche Problem tritt im linken Seitenbereich auf. Ich wollte padding-bottom : 240px setzen, damit der Text, wenn er zu lang wird (bzw. der Inhaltsbereich zu kurz, je nach dem), die Glasscheiben, die als Hintergrundsbild gesetzt sind, nicht überlagert. Beim Ergebnis hab ich mal den #nav-Container eingefärbt, damit es deutlicher wird.

Bin langsam echt am Ende mit meinem Latein. Anscheinend ist dieses Container-Layout nicht das richtige, wenn verschiedene Seitenbereiche dynamisch aufeinander reagieren? Stehe momentan wieder kurz vor der Kapitulation und Rückkehr zum Tabellendesign. Ihr seit meine letzte Hoffnung.

Achja, hier der css-Code:

Code:

body  {
      background-color : #ffffff;
      margin : 0px;
      padding : 0px;
      font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size : 0.7em;
      color : #303884;
      text-align : center;
}

table, tr, td, form, span, p {
      margin : 0px;
      padding : 0px;
      font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size : 1.0em;
      color : #303884;
}

img {
      border : 0px;
}

img.pfeil {
	  margin-right : 4px;
}

img.adresse {
	  margin-left : 78px;
}

img.menu {
	  border-left : 1px solid #a6a9cb;	  
}
    
#main {
      width : 860px;
      margin: 40px auto 40px auto;
      text-align : left;
}
	  
#menu {
 	  height : 49px;
}
      
#box2 {
      margin : 0 0 0 255px;
      border-bottom : 1px solid #a6a9cb;
      background : #f5f5fa url(pics/main_back.gif) repeat;
}

#box {
      background : #ffffff url(pics/glaeser.jpg) no-repeat bottom left;
      border-left : 1px solid #ffea99;
}

#navi {
      float : left;
	  padding : 20px 0px 0px 20px;
}

#lspalte {
	  position : relative;
	  top : 35px;
	  left : 0px;
	  float : left;
}

#content {
      background : url(pics/slogan.jpg) no-repeat bottom left;
	  padding: 20px 25px 20px 22px;	  
}

#footer {
      height : 18px;
      clear : both;
      background : #ffffff url(pics/glaeser_footer.jpg) no-repeat top left;
      margin : 0px 26px 0px 0px;
	  padding : 0px 10px 0px 0px;
      border-bottom : 1px solid #a6a9cb;
      border-right : 1px solid #a6a9cb;
      text-align : right;	  
}

p.text {
	  text-align : justify;
	  margin : 0px 0px 0px 145px;
}

h1 {
    font-size : 1.3em;
    letter-spacing : 2px;
    font-weight : bold;
    margin : 0px 0px 15px 145px;
}

h2 {
    font-size : 1.2em;
    letter-spacing : 2px;
    font-weight : bold;
    margin : 0px 0px 15px 0px;	
}

a, a:link, a:visited, a:active {
	color: #303884;
	font-size: 0.9em;
	text-decoration: none;
}

a:hover {
	color: #303884;
	font-size: 0.9em;
	text-decoration: underline;
}

input{
	background-color : #FAFAFA;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	color : #333399;
	border : 1px solid #A6A9CB;
}

Dexter

Setze

Code:

<br style="clear:both" />

ans Ende des Textes.

Zum Code noch: Hast Du im Text noch andere Absatzklassen ausser Text? Wenn's tatsächlich nur eine ist, dann ist es eleganter die Klasse/ ID dem Elternelement zu geben:

Code:

<div id="text"><h1>20 Jahre Glaserfahrung</h1>			
<p>Mit Glas Design Schäfers haben Sie ...</p>
CSS: #text p {Formate...;}

Im Menü links hab ich nicht geschaut, wird wohl dass selbe "Problem" sein.
Stell das bitte mit den Tabellenerpressereien ab

Edit: Noch 1 Tip: mehr und schnellere Hilfe bekommst Du mit Testcases. Es hätte ausgereicht, wenn Du nur die Content-box mit dem dazugehörigen CSS online stellst/ hier postest.
Die Grösse und Farbe einer Überschrift hat ist hier eher uninteressant.

NORRITT

Danke, Dexter! Eines der beiden Probleme ist damit beseitigt. Warum hab ich allerdings nicht ganz verstanden.
Naja, das zweite besteht leider immer noch, wie man hier sieht. Obwohl ich den <br style="clear:both" />-Tag eingefügt habe. Könntest Du, oder auch jemand anderes da nochmal drüber gucken? Stecke noch nicht so in dem Thema drin, dass ich an Kleinigkeiten oftmals stundenlang hängenbleibe. Danke schonmal vorab für die Hilfe!

Das man der ID des Elternelementes spezifische Format für Tags zuweisen kann, wußte ich noch gar nicht. Werd ich in Kürze umstellen.

Spricht eigentlich etwas dagegen, weiterhin Tabellen an Stellen zu nutzen, wo sie ihrer eigentlichen Funktion nachkommen und nicht das Layout bilden, sondern den Inhalt strukturieren? Habe z.B. beim Kurskalender wieder eine Tabelle benutzt, weil ich das für die kürzeste und sauberste Lösung gehalten habe.

Dexter

Mhh, ich finde das Problem nicht, aber vielleicht hilft's Dir bei der Fehlersuche weiter zu wissen, dass das Problem nur im IE auftritt. Opera und Mozilla/Firefox stellen alles richtig dar.

Zitat:

Original geschrieben von NORRITT
Das man der ID des Elternelementes spezifische Format für Tags zuweisen kann, wußte ich noch gar nicht. Werd ich in Kürze umstellen.

Jein. Du gibst nicht der ID des Elternelementes Formate sondern dem Kind dieses Elternelementes.
In meinem Beispiel

Code:

#text p {Formate...;}

Alle Absätze (p), die Kinder vom Container #text sind sollen formatiert werden.

Code:

#text .img {Formate...;}

Alle Kinder von #text, die die Klasse .img haben sollen formatiert werden.

Zitat:

Spricht eigentlich etwas dagegen, weiterhin Tabellen an Stellen zu nutzen, wo sie ihrer eigentlichen Funktion nachkommen und nicht das Layout bilden, sondern den Inhalt strukturieren?

Nein. Dazu sind sie ja da.

Schade, dass ich Dir beim eigentlichen Problem nicht weiterhelfen kann, ich find's 'ne schöne Seite.

Edit:Ähm, ich hatte mir das am Tag Deines Beitrages angeschaut, jetzt hast Du Änderungen drin, die mein hier geschriebens revidieren. In besagten Browsern ist überall das "impressum" ganz unten am Seitenrand.

NORRITT

Hi Dexter,

ja, hab noch ne Menge rumgefummelt und bin letztlich so verzweifelt gewesen, dass ich nun vor zwei Stunden nochmal von vorne angefangen (bin halt noch in der Lernphase) habe und das Ganze als klassiches 3-Spalten-Layout aufziehen möchte. Das erscheint mir deutlicher einfacher. Ich glaube vorher habe ich mich ganz schön verstrickt. Doch auch hier stoße ich auf ein Problem, diesmal im Mozilla.

Code:

 <body>
  <div style="margin : 0px auto 0px auto; width : 860px;">
	<div id="menu">
	 <a href="index.php"><img src="pics/logo_new.gif" width="256" height="49" alt="" /></a><img src="pics/menu_vor2.gif" width="87" height="49" alt="" /><a href="index.php"><img src="pics/menu_ueber_act.jpg" width="78" height="26" alt="Über uns" /></a><a href="http://www.glasdesign-schaefers.de/shop/caupo/index.php"><img src="pics/menu_shop.jpg" width="95" height="21" alt="Onlineshop" /></a><a href="kurse_allgemein.php"><img src="pics/menu_kurse.jpg" width="105" height="21" alt="Kursangebote" class="menupic" /></a><a href="ptipps.php"><img src="pics/menu_tipps.jpg" width="86" height="21" alt="Profi-Tipps" class="menupic" /></a><a href="tipps.php"><img src="pics/menu_galerie.jpg" width="66" height="21" alt="Galerie" class="menupic" /></a><a href="tipps.php"><img src="pics/menu_forum.jpg" width="56" height="21" alt="Forum" class="menupic" /></a><a href="hilfe.php"><img src="pics/menu_hilfe.jpg" width="26" height="21" alt="Hilfe" class="menupic" /></a><br />
	</div>  
   <div  style="background : url(pics/background.gif) repeat;">
    <div style="background : url(pics/background2.jpg) no-repeat bottom left;">
	 <div style="width : 256px; float : left;">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
     <div style="width : 434px; float : right;">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Test</div>
     <div>Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
     <div style="clear : both;"></div> 
	</div>
   </div>
  </div>
  <div style="margin : 0px auto 0px auto; width : 860px; background : url(pics/background_footer.jpg) no-repeat bottom left; height : 20px;">
    <a href="impressum.php" class="asmall">Impressum</a>&nbsp;&nbsp;&nbsp;<a href="http://www.glasdesign-schaefers.de/shop/caupo/shop_condition.php" class="asmall">AGB</a>&nbsp;&nbsp;&nbsp;<a href="mailto:mail@glasdesign-schaefers.de" class="asmall">Kontakt</a><span style="font-size : 0.9em; margin-left : 82px; font-style: italic;">Oststraße 156-158&nbsp;&nbsp;&nbsp;47057 Duisburg&nbsp;&nbsp;&nbsp;Tel.: 02 03 / 37 44 37</span>
  </div>
 </body>

Zu sehen ist das Ganze hier! Wie gesagt tritt im Mozilla ein Fehler auf und zwar der, dass die Eltern-divs sich nicht mit den Kind-divs nach unten ausdehnen und somit eine Lücke zu footer entsteht. Vielleicht diesmal nicht ganz so kompliziert mein Problem?

Anzeige

Anmelden

Weitere Tipps