• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 Spalten Layout - Abgrenzung - Bild als background

C

Corraggiouno

Mitglied
Hi,

ich benötige eure Hilfe hinsichtlich meines 3 Spalten Layouts. Meine Abgrenzung hat (Bild als Background) eine Länge von 450px. Nun habe ich das Problem, wie man erkennen kann
Staiger Dorflaedele
wird meine Abgrenzung links sowie rechts unterschiedlich und nicht in 450px Länge dargestellt.
Mein html-code
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/sd.css" rel="stylesheet" type="text/css" />
<title>Staige</title>
</head>
<body>
<div id="wrapper">
<h1>Staiger Dorflaedele</h1>
<ul>
<li><a href="willkommen.php">Willkommen</a></li>
<li><a href="unserteam.php">Unser Team</a></li>
<li><a href="sortiment.php">Sortiment</a></li>
<li><a href="spezialitaeten.php">Spezialitäten</a></li>
<li><a href="aktuelles.php">Aktuelles</a></li> 
</ul>
<div id="maintext">
<h2>Willkommen</h2>
<p>hier steht der Inhalt von willkommen</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p><p>kjadlkfjalkdjf</p><p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p><p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>
<p>kjadlkfjalkdjf</p>

</div>
<dl>
<dt><img src="http://www.html.de/images/sd.jpg" alt="dorflaedele"></dt>
<dt class="oeffnungszeit">Öffnungszeiten:<dt/>
<dt>Montag bis Freitag:</dt>
<dt>06:30 Uhr bis 12:30 Uhr</dt>
<dt>und</dt>
<dt>14:30 bis 18:00 Uhr</dt>
<dt class="absatz">Samstag:</dt>
<dt>06:30 Uhr bis 12:30 Uhr</dt>
<dt class="absatz">Mittwochnachmittag geschlossen</dt>
</dl>
<div id="footer">
© 2010 Inhaberin
</div>
</div>
</body>
</html>

mein CSS-Code
Code: 
* {margin: 0px; padding: 0px; border: 0px;}

html 
{
height: 100.3%;
font-family: Verdana;
font-style: normal;
font-size: 0.8em;
}

body {text-align: center;}

div#wrapper 
{
width: 900px; 
margin: 20px auto;
background: url(../images/background_wrapper.gif) repeat-x;
}
/*Schriftarten: Adobe Caslon Pro; Kunstler Script*/
h1
{
/*background:red;*/
background: url(../images/test1.gif) no-repeat;
padding-bottom: 5.2em;
text-indent: -999em;
}

h2
{
padding-bottom:5px;
}

ul
{
float:left;
width: 160px;
background: url(../images/begrenzung.gif) no-repeat;
background-position:90% 10%;
color:#5a2600;
padding-top: 4.6em;
padding-bottom: 3.2em;
}

li
{
margin-left: 20px;
text-align: left;
padding-bottom: 5.4em;
list-style-type: none;
}

div#maintext
{
float:left;
width: 520px;
padding-left: 1.2em;
padding-top:3.2em;
text-align:left;
color:#8B7355;
}

dl
{
float:right;
background: url(../images/begrenzung.gif) no-repeat;
background-position: left;
width: 200px;
padding-top: 5.8em;
text-align:left;
color: #5a2600;
}

dt
{
padding-left: 10px;
}

.oeffnungszeit
{
font-weight:bold;
padding-top:70px;
padding-bottom:5px;
}

.absatz
{
padding-top:5px;	
}

a 
{
padding-left: 15px;
text-decoration:none;
}

a:link
{
text-decoration:none;
color:#5a2600;
}

a:visited
{
color:#5a2600;
}

a:focus 
{
text-decoration:none; 
color:#5a2600;
}

a:hover 
{
background: url(../images/kaffeebohne_klein.gif) no-repeat;
text-decoration:none;
color:#5a2600;
}

a:active 
{ 
text-decoration:none;
color:#5a2600;
}

div#footer
{
clear: both;
width:880px;
padding-top:8px;
padding-bottom:8px;
padding-left:20px;
text-align: left;
background: url(../images/footer.gif);/*#5a2600*/
font-family: Verdana;
font-style: normal;
font-size: 0.8em;
color: #ffffff;
}
Kann mir jemand einen Tipp geben, wie ich mein 3-Spalten-Layout besser hinsichtlich der Länge (px, em, %) machen kann? Wo habe ich in meinem Code evtl. Fehler?
 
ich meine die Abgrenzung neben meiner Navigation (rechts) und links von meiner rechten Spalte. Die beiden Abgrenzungen (border) sind unterschiedlich lang
 
Achsooo .. die Grafik hast Du ja so erstellt wie sie jetzt ist. Wenn Du das dynamischer haben willst, musst Du die Grafik 3teilen: oberer Verlauf, Mitte und unterer Verlauf. Das musst Du dann in jeweils eigenen Elementen als Hintergrundbilder unterbringen die wiederum die Navigation beinhalten.
 
mmh, nö ich hätte nur ganz gerne erfahren warum die linke Abgrenzung nicht mit der rechten Abgrenzung hinsichtlich der Länge nicht identisch ist!
die rechte scheint mir länger als die rechte zu sein. Ursprünglich ist diese ja, welche ich mit einem Graphikprogramm erstellt habe 450px lang. Wenn ich meine Seite so anschaue, scheint mir dies nicht der Fall zu sein bzw. wie schon gesagt, die beiden Abgrenzung sind hinsichtlich der Länge nicht identisch, obwohl es ja die gleiche Graphik ist.
 
Bei der einen hast Du das Hintergrundbild "left center" positioniert, bei der anderen "90% 10%" - da gibt es klar Unterschiede.
 
also ich habe dies jetzt geändert;
Code: 
* {margin: 0px; padding: 0px; border: 0px;}

html 
{
height: 100.3%;
font-family: Verdana;
font-style: normal;
font-size: 0.8em;
}

body {text-align: center;}

div#wrapper 
{
width: 900px; 
margin: 20px auto;
background: url(../images/background_wrapper.gif) repeat-x;
}
/*Schriftarten: Adobe Caslon Pro; Kunstler Script*/
h1
{
/*background:red;*/
background: url(../images/test1.gif) no-repeat;
padding-bottom: 5.2em;
text-indent: -999em;
}

h2
{
padding-bottom:5px;
}

ul
{
float:left;
width: 160px;
background: url(../images/begrenzung.gif) no-repeat;
background-position:right;
color:#5a2600;
padding-top: 4.6em;
padding-bottom: 3.2em;
}

li
{
margin-left: 20px;
text-align: left;
padding-bottom: 5.4em;
list-style-type: none;
}

div#maintext
{
float:left;
width: 520px;
padding-left: 1.2em;
padding-top:3.2em;
text-align:left;
color:#8B7355;
}

dl
{
float:right;
background: url(../images/begrenzung.gif) no-repeat;
background-position: left;
width: 200px;
padding-top: 5.8em;
text-align:left;
color: #5a2600;
}

dt
{
padding-left: 10px;
}

.oeffnungszeit
{
font-weight:bold;
padding-top:70px;
padding-bottom:5px;
}

.absatz
{
padding-top:5px;	
}

a 
{
padding-left: 15px;
text-decoration:none;
}

a:link
{
text-decoration:none;
color:#5a2600;
}

a:visited
{
color:#5a2600;
}

a:focus 
{
text-decoration:none; 
color:#5a2600;
}

a:hover 
{
background: url(../images/kaffeebohne_klein.gif) no-repeat;
text-decoration:none;
color:#5a2600;
}

a:active 
{ 
text-decoration:none;
color:#5a2600;
}

div#footer
{
clear: both;
width:880px;
padding-top:8px;
padding-bottom:8px;
padding-left:20px;
text-align: left;
background: url(../images/footer.gif);/*#5a2600*/
font-family: Verdana;
font-style: normal;
font-size: 0.8em;
color: #ffffff;
}
Staiger Dorflaedele

jetzt sieht man ganz deutlich das die beiden Begrenzungen (background) nicht auf einer Höhe bzw. gleiche Länge besitzen
 
hi
habe meinen Code dementsprechend verändert
Code: 
* {margin: 0px; padding: 0px; border: 0px;}

html 
{
height: 100.3%;
font-family: Verdana;
font-style: normal;
font-size: 0.8em;
}

body {text-align: center;}

div#wrapper 
{
width: 900px; 
margin: 20px auto;
background: url(../images/background_wrapper.gif) repeat-x;
}
/*Schriftarten: Adobe Caslon Pro; Kunstler Script*/
h1
{
/*background:red;*/
background: url(../images/test1.gif) no-repeat;
padding-bottom: 5.2em;
text-indent: -999em;
}

h2
{
padding-bottom:5px;
}

ul
{
float:left;
width: 160px;
background: url(../images/begrenzung.gif) no-repeat;
background-position: top right;
color:#5a2600;
padding-top: 4.6em;
padding-bottom: 3.2em;
}

li
{
margin-left: 20px;
text-align: left;
padding-bottom: 5.4em;
list-style-type: none;
}

div#maintext
{
float:left;
width: 520px;
padding-left: 1.2em;
padding-top:3.2em;
text-align:left;
color:#8B7355;
}

dl
{
float:right;
background: url(../images/begrenzung.gif) no-repeat;
background-position: top left;
width: 200px;
text-align:left;
color: #5a2600;
padding-top: 4.6em;
padding-bottom: 3.2em;
}

dt
{
padding-left: 10px;
}

.oeffnungszeit
{
font-weight:bold;
padding-top:70px;
padding-bottom:5px;
}

.absatz
{
padding-top:5px;	
}

a 
{
padding-left: 15px;
text-decoration:none;
}

a:link
{
text-decoration:none;
color:#5a2600;
}

a:visited
{
color:#5a2600;
}

a:focus 
{
text-decoration:none; 
color:#5a2600;
}

a:hover 
{
background: url(../images/kaffeebohne_klein.gif) no-repeat;
text-decoration:none;
color:#5a2600;
}

a:active 
{ 
text-decoration:none;
color:#5a2600;
}

div#footer
{
clear: both;
width:880px;
padding-top:8px;
padding-bottom:8px;
padding-left:20px;
text-align: left;
background: url(../images/footer.gif);/*#5a2600*/
font-family: Verdana;
font-style: normal;
font-size: 0.8em;
color: #ffffff;
}
Ich wollte mal fragen, ob es aus Sicht von CSS so akzeptabel ist, oder ob ich da noch was besser machen kann?
Staiger Dorflaedele
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben