Problem mit Design Umsetzung

K

Kerle

Well-known member
ID: 392294
L
16 August 2007
987
42
Hallo also ich hab versucht ein Design umzusetzen. Aber irgendwie spinnt es jetzt bei der Navigation.



Das wollte ich hinbekommen. Geht aber nicht hab Floats,Z-Index geschaut ob vllt die Breite und Höhen nicht stimmen aber alles ist glaub ich richtig.

Was kann ich da jetzt am besten machen?

Quellcode:
von Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testseite</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {color: #CCCCCC}
-->
</style>
</head>
<body>
<div class="seite" id="body">

<div id="bild"><img src="Bilder/test_03.gif" alt="Logo" width="311" height="69" /></div>
<div id="banner"><img src="Bilder/test_05.gif" alt="Banner" /></div>
<div id="navi">
<div align="right">Home<img src="Bilder/punkt.gif" width="4" height="4" hspace="4" vspace="2" />Kontakt<img src="Bilder/punkt.gif" width="4" height="4" hspace="4" vspace="2" />Impressum<img src="Bilder/punkt.gif" width="4" height="4" hspace="4" vspace="2" />Gästebuch</div></div>
</div>
<div id="header">
<div align="left">
<div id="inhead"></div>
</div>
<div id="headcon"> <img src="Bilder/namederhp.gif" /> </div>
<div id="inhead2"></div>

<div id="balken">
</div>
<div class="Stil1" id="balken2">
<div align="right">10.04.2008 - 15:05</div>
</div>
<div id="balken3"></div>
<div id="navi2">
<div id="streifen"></div>
<div id="navi2boxen">
<div id="streifen2"></div>
<div id="link1">
</div>
<div id="link2" class="boxen">
</div>
<div id="link2" class="boxen">
</div>
<div id="link3" class="boxen">
</div>
<div id="link4" class="boxen">
</div>
<div id="link5" class="boxen">
</div>
<div id="link6" class="boxen">
</div>
<div id="link7" class="boxen">
</div>
<div id="link8" class="boxen">
</div>
<div id="link9">
</div>
<div id="link10" class="boxen">
</div>
<div id="link11" class="boxen">
</div>
<div id="link12" class="boxen">
</div>
<div id="link13" class="boxen">
</div>
</div>
</div>
<div id="content">
</div>

</div>
</body>

</html>
Zum Vergrößern anklicken....


Quellcode von der CSS datei:

@charset "utf-8";
/* CSS Document */

#body {
background-color: #505A78;
height: 600px;
width: 624px;
}
#banner {
float: left;
background-color: inherit;
margin-right: 0px;
margin-top: 15px;
margin-left: 10px;
}

#bild {
float: left;
background-color: inherit;
margin-top: 10px;
margin-left: 0px;
}
#navi {
background-image: url(Bilder/nbg.gif);
background-repeat: repeat-x;
height: 21px;
width: 624px;
position: absolute;
top: 98px;
left: 8px;
margin: 0px;
}
#header {
background-image: url(Bilder/bgheader.gif);
background-repeat: repeat;
height: 70px;
width: 624px;
background-position: 0px 0px;
bottom: 0px;
position: absolute;
top: 120px;
left: 8px;
}
#inhead {
background-image: url(Bilder/linie.gif);
background-repeat: repeat-x;
height: 6px;
width: 624px;
margin-top: 2px;
}
#headcon img {
margin: 0px;
position: absolute;
left: 38px;
top: 7px;
}
#balken {
background-image: url(Bilder/balken.gif);
background-repeat: repeat-x;
height: 19px;
width: 624px;
}
#balken2 {
background-image: url(Bilder/balken2.gif);
background-repeat: repeat-x;
height: 21px;
width: 624px;
}
#balken3 {
background-image: url(Bilder/balken3.gif);
height: 3px;
width: 624px;
}
#navi2 {
background-color: #52628f;
height: 261px;
width: 147px;
z-index: 5;
}
#streifen {
background-image: url(Bilder/streifen.gif);
background-repeat: repeat-y;
height: 262px;
width: 16px;
z-index: 5;
}
#navi2boxen {
background-color: #FFFF00;
height: 249px;
width: 115px;
margin-left: 16px;
position: relative;
}



#inhead2 {
background-image: url(Bilder/linie.gif);
background-repeat: repeat-x;
height: 6px;
width: 624px;
margin-top: 56px;
}


#header img {
float: right;
background-color: inherit;
}
Zum Vergrößern anklicken....

Komplettes Design das ich auf dem Rechner hab mit quellcode und das alles.

https://rapidshare.com/files/110734100/testzone.rar.html
 
Zuletzt bearbeitet:
So können wir dir da garnicht helfen. Entweder du gibst uns mal den HTML-Code oder einen Link zu der Seite. Mit divs ist das alles immer etwas schwieriger, die sind "eigenwilliger" als Tabellen aber halt auch schöner :p

Wenn ich das so sehe, das Bild, dann sieht es mir danach aus, als ob dein Content, der heller blaue Teil auch nach links gerutscht ist. Hat dieser denn das Attribut "float: right;"? Die Navi muss "float: left;" haben. und natürlich dürfen die Divs zusammen nicht breiter sein, als das übergeordnete Div.

Mehr ist schwer zu sagen, mit deinem QuellCode ginge das einfacher
 
jepp, Quelltext oder Link wäre von Vorteil

ansonsten kann ich als "Programmier"-Tipp noch sagen, dass du am besten noch irgendwelchen Text in die Divs schreibst, so kann man auch viele Fehler besser erkennen
 
argh, wieviele Divs benutzt du denn da?

und in dem Screenshot sind keine Texte zu sehen, oder?
im Quelltext stehen aber welche, werden die Sachen alle nicht angezeigt, oder ist der Quelltext aktueller als der Screenshot?
 
ich wollte ja noch die navi machen mit 13 Divs aber die sind nicht sichtbar denn das gelbe teil will da nicht rein gehen
 
also so wie es aussieht, liegt es am #streifen, wenn du ihn nicht für irgendwas nutzen willst, mach ihn doch einfach weg und nutze padding/margin für den abstand links...
 
tjo, du willst aber eie Internetseite erstellen und kein Bild bearbeiten

und um das zu machen nutzt man eben HTML/CSS und bei CSS nimmt man eben die vorgegebenen abstandseigenschaften und keine Bilder wie bei HTML1.0 ;)

jedenfalls blähst du die Datei nur unnötig auf und funktionieren tut es, wie du siehst, sowieso nicht ;)
 
ich habe dein Problem aber gefunden: zum einen sind einige Div-Container nicht richtig geschlossen zum anderen ist dein div mit der id="streifen" zu hoch. du gibst ihm in deiner CSS-Datei ne Höhe von 262px... klar dass die Navi dann runter rutscht ;)

Ich weiß nicht was du damit vorhast, aber den QuellCode könnte man viel schmaler und effektiver gestallten ;)
 
ja und genau das kleiner und effektiver gestalten will ich lernen mit dem design hab ich gar nichts vor.

Wie geht das kleiner und effektiver?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Zicklein444
Umfragen, technisches Problem
Antworten
3
Aufrufe
1K
Zicklein444
Zicklein444
domino
Problem bei »Alle Cookies aktivieren.«
Antworten
1
Aufrufe
2K
klamm
klamm
T
Display Design
Antworten
0
Aufrufe
2K
tbraun1997
T
Zurück
Oben