CSS Profis hier?

Stefan Brinkers

Stefan Brinkers

Angesehenes Mitglied
Hallo, habe ein Problem mit einem Layout und bin schon fast am verzweifeln...

so in etwa soll es am Ende aussehen: Vorschau

allerdings schiebt sich der Text bei geringen Auflösungen unter das Logo.
Ich möchte aber das das Logo und der Text sichtbar bleibt und das Foto auf der rechten Seite ggf. verschwindet.
Der scrollbare Bereich soll weiterhin direkt rechts am Foto liegen.

Der Quelltext ist ein wenig durcheinander, weil ich schon so einiges ausprobiert habe...

Macht es überhaupt Sinn das ganze noch mit CSS zu lösen, wenn man mit Tabellen das ganze recht schnell und mit weniger Code fabrizieren kann?
 
QUOTE (Stefan Brinkers @ Di 14.11.2006, 12:03) Macht es überhaupt Sinn das ganze noch mit CSS zu lösen, wenn man mit Tabellen das ganze recht schnell und mit weniger Code fabrizieren kann?

Hö? Das will ich aber überhört haben! Tabellen machen viel mehr Code als eine Seite die mit Div`s und CSS umgesetzt wurde. Tabellen wurden nicht für das Layout eines Designs gemacht sondern für Tabellarische anordungen.

Zum Thema, vllt zeigst du uns mal dein Quelltext.
 
Der z-index von #rechts2 muss größer sein als der von #links.
Mach einfach mal für #rechts2 z-index:601;

gruß
Karsten
 
vielen Dank für die Antworten.

wenn ich den z-index erhöhe, legt sich der text über das logo (voher das logo über den text).

bin gerade nochmal von vorne angefangen (der andere code ist ja schon etwas durcheinander), werde die gesamte Seite (bzw. den content) an den rechten Seitenrand legen, und den linken leeren Bereich sozusagen "variabel" machen.
ich glaube das könnte eine Lösung sein, zwar nicht wie ich es ursprünglich wollte,.... außerdem bin ich jetzt eh total verwirrt
biggrin.gif
blink.gif


vielleicht poste ich später nochmal das ergebnis, falls es was geworden ist
wink.gif



hier noch der Quelltext, falles es noch irgendjmd. interessiert:
CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background-color: #58595B;
background-image:url(Bilder/hintergr2.gif);
background-repeat:repeat-y;
background-position:right;
}
#var {
width: auto;
margin: 0px 160px;
margin-right:auto;
z-index:0;
}
#links {
position: absolute;
top: 0px;
left: 0px;
width: 160px;
height: 580px;
z-index:600;
}

#rechts2 {
position: absolute;
top: 0px;
right: 341px;
width: 500px;
height: 580px;
z-index:601;
}

#rechts {
position: absolute;
top: 0px;
right: 0px;
width: 341px;
height: 580px;
z-index:100;
}
</style>
</head>

<body>

<div id="var">
<div style="height:112px; background-color:#58595B; border-bottom:1px solid white;"> </div>
<div style="height:350px; background-color:#FFFFFF;"> </div>
<div style="height:112px; background-color:#58595B; border-top:1px solid white"> </div>
</div>

<div id="links">
<div style="height:112px; background-color:#58595B; border-bottom:1px solid white;"><img src="Bilder/logo.gif"></div>
<div style="height:350px; background-color:#FFFFFF;">asd</div>
<div style="height:112px; background-color:#58595B; border-top:1px solid white">dgdgdfg dg </div>
</div>
<div id="rechts2">
<div style="height:112px; background-color:#58595B; border-bottom:1px solid white;">menu</div>
<div style="height:350px; background-color:#FFFFFF; overflow:auto">asdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asd</div>
<div style="height:112px; background-color:#58595B; border-top:1px solid white">dg dg </div>
</div>
<div id="rechts">
<div style="height:112px; background-color:#58595B; border-bottom:1px solid white; border-left:1px solid white"><img src="einfach.gif"></div>
<div style="height:350px; background-color:#FFFFFF; border-left:1px solid black"><img src="foto.jpg"></div>
<div style="height:112px; background-color:#58595B; border-top:1px solid white; border-left:1px solid white">asd</div>
</div>

</body>
</html>

 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben