nabend!
da mir von ein paarn hier geraten wurde mich mit css zu beschäftigen hab i mir kurzerhand ein buch zur hand genommen (little boxes) und hab da ein wenig hineingeschnuppert...also ich muss zugeben...es ist zum teil einfacher als lauter tablellen zu bastln!
nun zu meinem problem...
ich habe eben mein altes design auf http://tigpl.ti.funpic.de und möchste genau dieses mit css umsetzen!
ich hab jetzt schonmal in html diesen code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<link href="test.css" rel="stylesheet" type="text/css" media="screen" />
<title>
css test";
</title>
</head>
<body id="body">
<center>
<div id="kopf">
<h1>Kopf</h1>
</div>
<div id="Eck1"></div>
<div id="Eck2"></div>
<div id="m1"></div>
<div id="seite1"></div>
<div id="seite2" ></div>
<div id="text">
blablabla TEXT blablabla
</div>
<div id="Eck3"></div>
<div id="Eck4"></div>
<div id="m2"></div>
</center>
</body>
</html>und meinen css code...
#body {
background-color: black;
color: white;
}
#wrap {
width: 90%;
background-color: black;
color: white;
}
#kopf {
background-color: black;
color: white;
}
#Eck1 {
color: white;
background-color: black;
background-image: url(gfx/menu/eck1.jpg);
float: left;
width: 40px;
height: 40px;
}
#m1 {color: white;
height: 40px;
background-image: url(gfx/menu/menu2.jpg);
}
#Eck2 {
color: white;
background-color: black;
background-image: url(gfx/menu/eck2.jpg);
float: right;
width: 40px;
height: 40px;
}
#seite1 {
float: left;
background-color: black;
background: url(gfx/menu/seitelinks.jpg);
width: 40px;
background-repeat: repeat-y;
border: 0px;
background-position: 100%;
}
#text {
color: black;
background-color: #fffedc;
}
#seite2 {
width: 40px;
height: 200px;
float: right;
background-color: black;
background-image: url(gfx/menu/seiterechts.jpg);
border: 0px;
}
#Eck3 {
color: white;
background-image: url(gfx/menu/eck3.jpg);
float: left;
background-color: black;
width: 40px;
height: 40px;
}
#m2 {
color: white;
background-image: url(gfx/menu/menu2u.jpg);
background-color: black;
height: 40px;
width: 100%;
}
#Eck4 {
color: white;
background-color: black;
background-image: url(gfx/menu/eck4.jpg);
float: right;
width: 40px;
height: 40px;
}
* {
margin: #fffedc;
border: 0px;
}klappt auch fast alles so wie ich es wollte...nach stunden langem herumgeschreibsl und probiern...
jetzt komm ich aber schon den zweiten tag ned weiter...hab verschiedene seiten durchforstet...dieses buch an der stelle über hintergründe und den begriff float bis zur vergasung gelesen und i komm und komm ned drauf wos hackt!
also...
ich kann bei #seite1 und #seite2 keine 100% höhenangabe machen! nur wenn ich eine höhenangabe von mind 175px (so groß is das jpg) eintrage zeigt er die grafik an!
jetzt isses aba so das i ned bei jeder seite eine genaue px angabe machen möchte...das würde das css wieder unnötig machen dnek i ma...das wär dann mit tabellen wieder viel einfacher....nicht übersichtlicher aber einfacher....
warum zeigt er mir die grafik ned an wenn i height"100%" eintrage!? und das mit repeat-y geht a ned! er "repeatet" einfach ned!
bitte um ratschläge...rauskommen soll genau so ein rahmen wie unter der url die ich oben angegeben hab...
ich weiß echt nicht mehr weiter ]=
danke schonmal
lg tigpl
