Ich habe ein Design in Photoshop erstellt und auch in HTML implementiert, allerdings wollen die schwarzen Abstände zwischen den Div-Containern nicht verschwinden.
http://img505.imageshack.us/my.php?imag ... ler2ts.jpg
Kann sich das mal einer ansehen? Der Abstand zwischen den einzelnen-Div-Containern sollte eigentlich durch Nullsetzung von padding, margin und border eliminiert werden, oder?
Ich weiß einfach nicht mehr weiter!
HTML-Teil:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>_,.-+* BlackRose Design *+-.,_</title>
<link rel="stylesheet" type="text/css" href="blackrose_style.css" media="all" />
</head>
<body style="direction: ltr;">
<div class="main">
<div class="header">&</div>
<div class="nav">
<ul id="Navigation">
<li><a href="index.php">
<img name="startseite" id="startseite" src="Bilder/startseite.jpg" width="244" height="37" border="0" alt="" /></a></li>
<li><a href="news.php">
<img name="news" id="news" src="Bilder/news.jpg" width="244" height="19" border="0" alt="" /></a></li>
<li><a href="archiv.php">
<img name="archiv" id="archiv" src="Bilder/archiv.jpg" width="244" height="21" border="0" alt="" /></a></li>
<li><a href="tutorials.php">
<img name="tutorials" id="tutorials" src="Bilder/tutorials.jpg" width="244" height="22" border="0" alt="" /></a></li>
<li><a href="links.php">
<img name="links" id="links" src="Bilder/links.jpg" width="244" height="33" border="0" alt="" /></a><div></div></li>
</ul>
</div>
<div class="menu">
<ul id="Navigationw">
<li><img src="Bilder/rundung_oben.jpg" border="0" alt="&" /></li>
<li><img src="Bilder/space_linksoben.jpg" border="0" alt="&" /></li>
<li><a href="index.php">
<img name="home" id="home" src="Bilder/home.jpg" width="128" height="39" border="0" alt="" /></a></li>
<li><a href="about.php">
<img name="about" id="about" src="Bilder/about.jpg" width="113" height="39" border="0" alt="" /></a>/<li>
<li><a href="projects.php">
<img name="projects" id="projects" src="Bilder/projects.jpg" width="117" height="39" border="0" alt="" /></a></li>
<li><a href="references.php">
<img name="references" id="references" src="Bilder/references.jpg" width="142" height="39" border="0" alt="" /></a></li>
<li><a href="guestbook.php">
<img name="guestbook" id="guestbook" src="Bilder/guestbook.jpg" width="156" height="39" border="0" alt="" /></a></li>
</ul>
</div>
<div class="links"><div class="rundung">&</div></div>
<div class="content">Inhalt...</div>
<div class="footer">
<p style="text-align:center;">& Copyright 2006 & BlackRose Design & Alle Rechte vorbehalten & v1.0</p>
</div>
<br style="clear:both;" />
</div>
</body>
</html>
CSS-Teil:
- Code: Alles auswählen
body {
font-family: Verdana,Arial,sans-serif;
font-size: 12px;
color: #000000;
background-color: #000000;
margin: 0px;
}
ul#Navigation {
margin: 0px;
padding: 0px;
border: 0px;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
border: 0px;
}
ul#Navigation a, ul#Navigation span {
float: left;
}
* html ul#Navigation a, * html ul#Navigation span { /* Korrektur fuer IE 5.x */
width: 8em;
w\idth: 6em;
}
ul#Navigation div {
clear: left;
}
/* ------------- */
ul#Navigationw {
margin: 0px;
padding: 0px;
border: 0px;
}
ul#Navigationw li {
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
border: 0px;
}
ul#Navigationw a, ul#Navigationw span {
padding: 0px;
margin: 0px;
border: 0px;
}
* html ul#Navigationw a, * html ul#Navigationw span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
.main {
width: 781px;
margin: 0px auto;
text-align: left;
color: #333333;
background-color: #000000;
vertical-align: middle;
border: 0px;
display: block;
}
.header {
background-image: url('Bilder/header.jpg');
background-position: left top;
background-repeat: no-repeat;
width: 533px;
height: 132px;
padding: 0px;
border: 0px;
color: #000000;
display: block;
background-color: #000000;
float: left;
}
.nav {
width: 244px;
height: 132px;
padding: 0px;
margin: 0px;
border: 0px;
color: #000000;
background-color: #000000;
float: right;
display: block;
text-align: center;
}
.menu {
color: #000000;
background-color: #000000;
width: 807px;
height: 39px;
float: left;
display: block;
border: 0px;
}
.content {
color: #333333;
background-color: #000000;
background-image: url('Bilder/content.jpg');
width: 739px;
height: 340px;
float: right;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
display: block;
overflow: auto;
border: 0px;
}
.links {
background-color: #000000;
background-image: url('Bilder/seite_links.jpg');
width: 38px;
height: 340px;
float: left;
padding: 0px;
display: block;
vertical-align: middle;
display: block;
border: 0px;
}
.rundung {
background-color: transparent;
background-image: url('Bilder/rundung_unten.jpg');
background-position: bottom left;
background-repeat: no-repeat;
width: 38px;
height: 340px;
float: left;
padding: 0px;
display: block;
vertical-align: middle;
border: 0px;
}
.footer {
color: #FFFFFF;
background-color: #000000;
background-image: url('Bilder/footer.jpg');
background-position: top right;
background-repeat: no-repeat;
width: 781px;
height: 39px;
font-family: Verdana,Arial,sans-serif;
font-size: 10px;
text-align: center;
overflow: hidden;
float: right;
padding: 0px;
display: block;
border: 0px;
}
Wäre sehr dankbar, wenn mir da einer weiterhelfen könnte!
![;-]](./images/smilies/icon_impudently.gif "Extrem frech"){kind=icon}
