✔ CSS-Layout: Schwierigkeiten bei Umsetzung

Status
Nicht offen für weitere Antworten.
H

Harzteufel

Erfahrenes Mitglied
Hallo,
ich möchte folgendes Layout (siehe Anlage) in CSS umsetzen, kriegs aber nicht so richtig hin :-( Könnt ihr mir sagen, wie ich es hinbekommen, so dass es auch noch in den gängigen Browsern aktzeptabel aussieht?

Besten Dank,
Harzteufel
 

Anhänge

  • layout.gif
    layout.gif
    3,7 KB · Aufrufe: 35
Hallo Harzteufel

Bitte poste doch mal Quellcode den du geschrieben hast und die CSS Datei.
Dann kann Dir auch schneller geholfen werden.

Schau dich mal hier auf der Seite um, könnte dir helfen. >>Hier
 
okay, hier mein momentaner standpunkt... nicht erschrecken, bin durch das ganze herumprobieren auch ein wenig durcheinander gekommen :-(
besten dank für eure mühe und hilfe die links werde ich mir morgen anschauen...


HTML: 
<body>
<div class="box1">
<img src="bilder/linksoben.jpg">
<div class="buttonscontainer">
	<div class="buttons">
		<a href="#">Startseite</a>
		<a href="#">Über uns</a>
		<a href="#">Unser Service</a>
		<a href="#">Online-Shop</a>
		<a href="#">Kontakt</a>
		<a href="#">Impressum</a>
	</div>
</div>
</div>
<div class="box2">
	<h3>Freilebende Gummibärchen gibt es nicht.</h3>
	<p>Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten 
    Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle 
    Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine 
    Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins 
    Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen 
    ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral. 
    Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. 
    Auch das macht sie spannend.</p>
</div>
</body>


CSS-Code:
Code: 
body{
margin:0px;
padding:0px;
overflow:auto;
font-family:Verdana, Arial, Tahoma;
font-size:12px;
line-height:16px;
color:#000000;
}

.box1{
background-image: url(bilder/linksbg.gif);
float:left;
height:100%;
overflow:hidden;
width:380px;
margin:0;
padding:0;
}

.box2{
background:#D9EFEF;
height:100%;
margin:0px;
padding:10px;
overflow:auto;
}

.buttonscontainer {
float:left;
width: 180px;
margin-top:30px;
}

.buttons a {
color: #ffffff;
background-color: ;
padding: 7px;
padding-left: 3px;
display: block;
border-bottom: 1px solid ;
font: 12px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: right;
}

.buttons a:hover {
background-color: ;
color: #000000;
text-decoration: none;
}

h1 {font-size:18px;color:#000000;line-height:24px;padding-top:20px;}
h2 {font-size:16px;color:#000000;line-height:21px;padding-top:16px;}
h3 {font-size:14px;color:#000000;line-height:18px;padding-top:12px;}
p {margin-top:0px;}


[editpost by michaelsinterface @ 22:50]

  1. Der besseren Übersicht wegen, habe ich deine Code-Angaben mit [ html ] ... [ /html ] und [ code ] ... [ /code ] (ohne Leerzeichen!) formatiert.

  2. Bitte halte dich in deinen Beiträgen an die Groß- und Kleinschreibung.
 
Hier der überarbeitete CSS-Code:

CSS: 
html, body{
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
}

body{
font-family:Verdana, Arial, Tahoma;
font-size:12px;
line-height:16px;
color:#000000;
}

.box1{
background-image: url(bilder/linksbg.gif);
float:left;
height:100%;
overflow:hidden;
width:380px;
margin:0;
padding:0;
}

.box2{
background:#D9EFEF;
height:100%;
margin:0;
padding:0;
overflow:auto;
}

.buttonscontainer {
float:left;
width: 180px;
margin-top:30px;
}

.buttons a {
color: #ffffff;
padding: 7px;
padding-left: 3px;
display: block;
border-bottom: 1px solid #000000;
font: 12px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: right;
}

.buttons a:hover {
color: #000000;
text-decoration: none;
}

h1 {font-size:18px;color:#000000;line-height:24px;padding-top:20px;}
h2 {font-size:16px;color:#000000;line-height:21px;padding-top:16px;}
h3 {font-size:14px;color:#000000;line-height:18px;padding-top:12px;}
p {margin-top:0px;}
 
Besten Dank für die Überarbeitung vom CSS-Code! Jetzt funktioniert es genau so, wie ich es mir vorgestellt habe... Nur der IE hat seinen deaktivierten Scrollbalken stehen. Mit <body scroll="auto"> verschwindet dieser, aber genau an dieser Stelle bleibt eine weisse Lücke, d.h. das DIV rutscht nicht bis an den rechten Rand.

Gibt es da noch eine Möglichkeit dieses Problem zu beheben?

Besten Dank
 
In den Selektoren html,body habe ich doch den Scrollbalken mit overflow:hidden deaktiviert, somit rutscht das rechte DIV bis an den rechten Browserfensterrand und es bleibt dazwischen keine Lücke. :confused:
 
Ja, so ist es schick - vielen Dank!
Mit der Lücke meinte ich den deaktivierten Scrollbalken... scroll="auto" bewirkt doch in html, dass der IE den scrollbalken ausblendet, wenn dieser nicht nötig. Das hat er auch gemacht, nur das DIV ist nicht bis an den Rand gesprungen... der Scrollbalken schien also noch da zu sein, nur unsichtbar! War also der falsche Ansatz von mir...
Egal, jetzt funktioniert alles nach meinen Wünschen und Vorstellungen.

Ich komme wieder, versprochen!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück