Hallo,
vielleicht kann mir jemand helfen?
Ich hab für einen Bekannten eine Website erstellt, was ganz einfaches, aber irgendwie bekomm das Design nicht zum Laufen.
Momentan wird mir das Hingergrundbild von der Navigation einfach nicht mehr angezeigt.
Weiß jemand, woran es liegt? Ich seh den Wald vor lauter Bäumen nicht mehr...
http://seitentest.bplaced.de/vicente/index.html
(Die anderen Links - außer der Hauptseite - sind noch nicht umgeändert, funktionieren also noch weniger.)
Danke schon mal 
deine struktur is ja auch ööhm suboptimal
verwende wrapper und wenn du floatest musste auch hier und da mal clearen.
überleg dir genau, wie du deine struktur aufbauen willst. dann mach dir deine rahmen (wrapper) und dann positionierst du deine elemente stück für stück.
derzeit steckt deine navi definitiv nicht an der position, wo du die haben willst
hab grad aber auch keine zeit, um das zu korrigieren.
Danke, schonmal.
Ja, ich weiß auch irgendwie, dass es alles ein bisschen Wirr Warr ist, aber ich bekomms auch nicht entwirrt.
Hat mir schon den Kopf gefloatet
Ich hab das mal vor 4-5 Jahren bei meiner damaligen Ausbildung gelernt, aber lange gar nix mehr gemacht und irgendwie ist von der anfänglichen Struktur auch nicht mehr viel übrig...
Wenn mir da noch jemand einen Tipp geben könnte, wo ich vielleicht was umstrukturieren müsste, wär ich sehr dankbar
probiers mal so:
is jetzt nur im ff 3.6.13 getestet.. die absoluten pfade sollteste noch relativ machen
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Vicente Tattoo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="ram">
<div id="links"></div>
<div id="center">
<div id="header"></div>
<div id="navi">
<a href="index.html" class="nav">HOME</a>
<a href="vicente.html" class="nav">VICENTE</a>
<a href="gallery.html" class="nav">GALLERY</a>
<a href="studio.html" class="nav">STUDIO</a>
<a href="kontakt.html" class="nav">KONTAKT</a>
</div>
<div id="content">
<div align="center">
<h1>Du suchst ein individuelles Tattoo?!</h1>
<br>
Wir entwerfen es für Dich. Einen Überblick über die aktuellen Arbeiten findest Du in der Galerie.<br>
<p>Wir freuen uns auf Deinen Besuch!</p>
</div>
</div>
</div>
<div id="rechts"></div>
<br class="clear" />
<div id="footer">
<a href="imp.html" class="nav2">IMPRESSUM</a>
</div>
</div>
</body>
</html>css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
color: #999999;
font-family: Helvetica,Verdana,Arial;
font-size: 16px;
height: 100%;
margin: 0;
padding: 0;
text-decoration: none;
width: 100%;
}
#ram {
background-color: #000000;
margin: 0 auto;
width: 995px;
}
#links {
background-image: url("http://seitentest.bplaced.de/vicente/images/left.jpg");
background-repeat: no-repeat;
float: left;
height: 738px;
width: 79px;
}
#center{
float:left;
width: 840px;
}
#header {
background-image: url("http://seitentest.bplaced.de/vicente/images/header.jpg");
background-repeat: no-repeat;
margin:0 auto;
height: 189px;
width: 840px;
}
#navi {
background-image: url("http://seitentest.bplaced.de/vicente/images/nav.jpg");
background-repeat: no-repeat;
height: 62px;
text-align: center;
width: 840px;
margin:0 auto;
}
#rechts {
background-image: url("http://seitentest.bplaced.de/vicente/images/right.jpg");
background-repeat: no-repeat;
float: left;
height: 738px;
width: 76px;
}
#content {
background-image: url("http://seitentest.bplaced.de/vicente/images/content.jpg");
background-repeat: no-repeat;
height: 487px;
width: 840px;
}
#box {
height: 480px;
padding: 5px 7px 5px 5px;
text-align: justify;
width: 835px;
}
#footer {
background-image: url("http://seitentest.bplaced.de/vicente/images/footer.jpg");
background-repeat: no-repeat;
height: 44px;
margin: 0;
width: 995px;
}
a:link, a:visited, a:active {
color: #000000;
font-family: Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
}
a:hover, a:active {
color: #332213;
text-decoration: none;
}
a.nav {
color: #999999;
font-family: Helvetica,Verdana,Arial,sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0 25px 20px 0;
text-align: center;
text-decoration: none;
}
a.nav:hover {
color: #990000;
}
a.nav_ga {
color: #666666;
font-family: Helvetica,Verdana,Arial,sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0 25px 10px 0;
text-align: center;
text-decoration: none;
}
a.nav_ga:hover {
color: #F80521;
}
a.nav2 {
color: #999999;
font-family: Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
margin: 0;
margin: 18px 70px 0 0;
text-align: center;
text-decoration: none;
}
a.nav2:hover {
color: #F80521;
}
a.nav2_ga {
color: #666666;
font-family: Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
margin: 0;
padding: 0 25px 0 0;
text-align: left;
text-decoration: none;
}
a.nav2_ga:hover {
color: #F80521;
}
p {
padding: 0 10px 0 0;
}
h1 {
border-bottom: 2px solid #CCCCCC;
color: #CCCCCC;
font-size: 18px;
font-weight: bold;
text-align: center;
}
h2 {
border-bottom: 1px solid #332213;
color: #332213;
font-size: 16px;
font-weight: bold;
text-align: center;
}
i {
color: #332213;
font-weight: bold;
}
.foto-link {
display: block;
height: 100px;
width: 150px;
}
.foto1 {
background: url("http://seitentest.bplaced.de/vicente/images/pferde.jpg") no-repeat scroll 0 0 transparent;
}
.foto2 {
background: url("http://seitentest.bplaced.de/vicente/images/nature.jpg") no-repeat scroll 0 0 transparent;
}
.foto-link:hover {
background-position: 0 -100px;
}
.table {
border: 1px dashed #F80521;
}
.clear{
clear: both;
}Vielen Dank, das hat geklappt.
Ich schaue mir den Code mal in Ruhe durch, um davon etwas zu lernen
Danke nochmal!