Problem mit Navigationsleiste

neggnegg · 15.02.2009

Hallo =)

also,vlt wirds manche wieder aufregen das hier so ein mensch (auch noch dazu eine blondine *gg*) der von nichts eine ahnung hat,sich auch einmal an das thema heran gewagt hat...
bisher hatte ich nur mal n bisschen mit html rumprobiert aber um ein vernünftiges layout zu erstellen reicht das nicht,was mir auch klar war...also habe ich mich mal ein wenig mit css vertraut gemacht und bisher bin ich mit meinem testlayout zufrieden,das einzige was ich bis jetzt noch nicht so hinbekommen habe wie ichs möchte ist die navigationsleiste =(
man sieht die buttons haben alle eine blaue umrandung die ich nicht wegbekomme,zudem bekomme ich die lücken dazwischen nicht weg und es ist dadurch alles leicht verschoben und zerstört das ganze (wenn auch primitive) design...
also hier bin ich bei meinem ersten versuch dann an meinen grenzen und hoffe einfach mal auf hifle *liebguck*

so hier dann einmal das bild wies momentan ausschaut und dann noch mein bisheriger versuch des zu coden, den css code hab ich mal als anfänger direkt in das html dokument mit iengebunden...

so und nun warte ich einfach mal auf eure hilfe und danke denen schonmal die antworten =)

eure

neggnegg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: 14px xomic sans, cursive;
text-align: center;
background-color: grey;
}
#container
{
margin: 0em auto;
width: 1024px;
height: 768px;
background-color: white;
border: 2px solid black;
}
#header
{
position: absolute;
}
#mainnav
{
position: absolute;
top: 153px;
}

#mainnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
border: 0
}
#mainnav li
{
display: inline;
}
#trennlinie1
{
position: absolute;
top: 200px;
}
#trennlinie2
{
position: absolute;
top: 200px;
left: 960px;
}
#trennlinie3
{
position: absolute;
top: 200px;
left: 989px;
}
#contents
{
position: absolute;
top: 236px;
width: 832px;
height: 532px;
text-align: center;
font-family: comic sans, cursive;
white.space: normal;
color: black
}

#newstrennung
{
position: absolute;
top: 234px;
left: 960px;
}
#news
{
position: absolute;
top: 234px;
left: 989px;
width: 163px;
height: 532px;
background-image: url("Homepage_12.png");
}
#footer
{
position: absolute;
bottom: 10px;
width: 1024px;
text-align: center;
color: white;
}

</style>
</head>
<body>

<div id="container">
<div id="header"><image src="Homepage_01.png"></div>
<div id="mainnav">
<ul>
<li><a href="index.html"><image src="Homepage_02.png"></a>
<li><a href="index.html"><image src="Homepage_03.png"></a>
<li><a href="index.html"><image src="Homepage_04.png"></a>
<li><a href="index.html"><image src="Homepage_05.png"></a>
<li> <image src="Homepage_06.png">
</ul>
</div>
<div id="trennlinie1"><image src="Homepage_07.png"></div>
<div id="trennlinie2"><image src="Homepage_08.png"></div>
<div id="trennlinie3"><image src="Homepage_09.png"></div>
<div id="contents"><p>Allegmeiner Test</p><p>Allgemeiner Test Allgemeiner Test Allgemeiner Test
Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test
Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test</p>
</div>
<div id="newstrennung"><image src="Homepage_11.png"></div>
<div id="news"><p>Allegmeiner Test</p><p>Allgemeiner Test Allgemeiner Test Allgemeiner Test
Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test
Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test Allgemeiner Test</p>
</div>
<div id="footer">Copyright © 2009</div>
</div> 
</body>
</html>

cebito · 15.02.2009

AW: Problem mit Navigationsleiste

Gib den Bildern border:0; und dann schreib mal über body im css:

Code:

* { 
margin: 0;
padding: 0; /* Voreinstellung 0, wenn für Element nicht anders angegeben */
}

neggnegg · 15.02.2009

AW: Problem mit Navigationsleiste

also das mit den links hat funktioniert...hätt ich au selbst drauf kommen können *lach*

aber die lücken bleiben leider immernoch =/

Herr_D · 15.02.2009

AW: Problem mit Navigationsleiste

Ohne schießeisen:

Schließ mal die <li> mit </li>

neggnegg · 15.02.2009

AW: Problem mit Navigationsleiste

mhh ja hab ich hier vergessen sry,ändert aber auch nichts an dem problem....

neggnegg · 16.02.2009

AW: Problem mit Navigationsleiste

so,habs nu allein hinbekommen,trotzdem ein dankeschön an euch ^^
habe einfach mal das margin negativ gesetzt und es somit ausgeglichen,jetzt passt es um 1 oder 2 px zwar nich mehr ganz inner breite aber das fällt kaum auf,also is ok,sowieso für meine aller erste page

#

lg
eure

neggnegg