Problem beim Positionieren!

incendium · 8 März 2008

Hi @ all,

ich will gerade mein neues Layout , das aus einzelnen Bildern besteht, in eine Css Site umwandeln. Bis jetzt hat alles gut funktioniert, doch jetzt kommt das erste Problem. Der Content will nicht an die Stelle an der er soll. Hier mein Code:

index.html

Code:

<html>
<head>
<title>slice</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="wrap">

<div class="header"></div>
<div class="navi"></div>
<div class="navibtm"></div>
<div class="links"></div>
<div class="contenttop"></div>
<div class="mitte"></div>
<div class="angebotetop"></div>
<div class="rechts"></div>
<div class="content">s</div>

</div>

</body>
</html>

style.css

Code:

body{
text-align:center;
}
.wrap{
width:800px;
height:100%;
}
.header{
background-image: url(images/slice_01.gif);
height:157px;
width:800px;
}
.navi{
background-image: url(images/slice_02.gif);
height:26px;
width:800px;
}
.navibtm{
background-image: url(images/slice_03.gif);
height:55px;
width:800px;
}
.links{
background-image: url(images/slice_04.gif);
height:399px;
width:14px;
float:left;
}
.contenttop{
background-image: url(images/slice_05.gif);
height:30px;
width:589px;
float:left;
}
.mitte{
background-image: url(images/slice_06.gif);
height:339px;
width:22px;
float:left;
}
.angebotetop{
background-image: url(images/slice_07.gif);
height:30px;
width:161px;
float:left;
}
.rechts{
background-image: url(images/slice_08.gif);
height:399px;
width:14px;
float:left;
}
.content{
float:left;
margin-left:14px;

background-image: url(images/slice_09.gif);
height:146px;
width:589px;

}

Und hier noch ein Link um alles zu betrachten:

slice

Ich hoffe ihr könnt mir helfen .Der content muss einfach in seine passende Lücke rutschen....

mfg

peterle · 15 März 2008

Hallo,

das Problem sind die vielen Elemente ohne Inhalt.
Füge mal mindestens ein " " (ohne die ") ein.
Elemente mit leeren Inhalten werden nicht von allen Browsern dargestellt,
sonder quasi "weg optimiert".

neuroleptika · 15 März 2008

(old user) schrieb:
ich will gerade mein neues Layout , das aus einzelnen Bildern besteht, in eine Css Site umwandeln.

Du versuchst das ganze Layout zeilenweise mit Bildern zusammenzusetzen.
Die Abstände mit willst du mit leeren Divs erreichen.
Im Grunde ist es ein Tabellenlayout aus Divs anstelle von Zellen.

Durch das zeilenweise Denken, hast du schon die erste "Zelle"
vergessen:

Code:

<div class="content">
<div class="links"></div>
<div class="contenttop">1</div>
<div style="width : 22px; height:30px; float:left; background-image: url(http://phpkevin.yourftp.de/test/images/slice_06.gif)
">2</div>
<div class="rechts">3</div>
<div class="angebotetop"></div>

Das fehlende Div hab ich mit dem nötigen style eingefügt.

Versuche in Blöcken zu denken, nicht in Zeilen.
Das wird sonst eine riesige Div-Suppe.

...Füge mal mindestens ein " "ein.

Besser noch, er nutzt sichtbare Zeichen damit er (und wir) sieht was er tut.

Problem beim Positionieren!

incendium

Guest

peterle

Neues Mitglied

neuroleptika

Aktives Mitglied

Neueste Beiträge