allles verrutscht

nickido · 08.10.2008 18:47

hallo,

ich programmiere gerade meine erste homepage...
ich habe eine hintergrundbild und eine navigationsleiste mit css gemacht, beides verschiebt sich sobald ich das Fenster verkleinere.

In firefox wird die navi-leiste nur im rohformat angezeigt...:'(

kann mir jemand helfen??

Vielen Dank schon einmal

toxictoon · 08.10.2008 18:55

AW: allles verrutscht

mach doch mal nen link oder poste nen code auszug...

nickido · 08.10.2008 19:05

AW: allles verrutscht

ja, klar, mach ich:

<style type=text/css>
body {
background-image:url(bild.jpg);
background-color:eeeeee;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
}
</style>
</body>

<body>

<div id="bl_main_nav">
<ul>
<li><a id="main_nav1" href="home" target="_top">Home</a></li>
<li><a id="main_nav2" href="general_person.shtml" target="_top">Gruppe</a></li>
<li><a id="main_nav3" href="general_skills.shtml" target="_top">Kalender</a></li>
<li><a id="main_nav4" href="general_projects.shtml" target="_top">Kontakt</a></li>
<li><a id="main_nav5" href="general_contact.shtml" target="_top">Impressum</a></li>

</div>

<style type=text/css>{

#bl_main_nav ul {
width:600px;
line-height:20px;
margin:0px;
padding:0px;
list-style-type:none;
letter-spacing:1px;
}

#bl_main_nav li {
margin:0px;
padding:0px;
text-align:center;
float:left;
border:0px solid #ffffff;
}

#bl_main_nav a {
color:#FFFFFF;
font-family:tahoma;
font-weight:bold;
display:block;
height:30px;
width:158px;
padding-top:0px;
background:#cccccc;
text-decoration:none;
border-bottom:5px solid #7f7f7f;
}

#bl_main_nav a:hover {
color:#000000;
background:#eeeeee;
border-bottom:5px solid #7f7f7f;
}

</style>
<style type=text/css>
body { margin-top: 150px; margin-left: 15%; }

</style>

toxictoon · 08.10.2008 19:14

AW: allles verrutscht

vll sottest du die width der ul auch der breite von 5 nebeneinaderliegenden 158 px breiten li elementen anpassen

Guin · 08.10.2008 19:14

AW: allles verrutscht

Hallo

In firefox wird die navi-leiste nur im rohformat angezeigt
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Anders rum ist es einfacher gesagt: Nur im IE wird es so angezeigt, wie du es möchtest

Schau dir mal bei selfhtml an, wie das Grundgerüst einer HTML Seite aussehen muss
SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei

nickido · 08.10.2008 19:26

AW: allles verrutscht

Zitat von toxictoon: ↑

vll sottest du die width der ul auch der breite von 5 nebeneinaderliegenden 158 px breiten li elementen anpassen
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

wie meinst du das?? Hier bei (#bl_main_nav ul) width:158px eingeben?? das hab ich versucht, leider ändert sich nichts

@guin: ich brauche nicht den Grundaufbau, sonder die Lösung für das Navi-Problem...

Guin · 08.10.2008 19:33

AW: allles verrutscht

Ok,

toxictoon meint, dass 5 mal 158px nicht in 600px passt.
Also entweder die Buttons schmaler machen, so dass sie in 600px passen oder aber die 600 erhöhen.

Beispiel
#bl_main_nav ul {
width:800px;
line-height:20px;
margin:0px;
padding:0px;
list-style-type:none;
letter-spacing:1px;
}

toxictoon · 08.10.2008 19:34

AW: allles verrutscht

#bl_main_nav ul {
width:600px;
line-height:20px;

...

hier solltest du die breit von 5 x 158 px eingeben... 790 px wenn ich richtig gerechnet hab???

nickido · 08.10.2008 19:41

AW: allles verrutscht

ok, das klingt logisch, das habe ich auch versucht, aber wenn ich das browser-fenster verkleinere, dann verrutschen die einzelnen "buttons" immernoch in die nächste Zeile...ich habe mir noch überlegt als attachement:fixed, oder so was zu nehmen. könnte es damit klappen??

toxictoon · 08.10.2008 19:45

AW: allles verrutscht

warum arbeitest du denn eigneltich mit ul?

mach doch einfach ganz nomrmale links, dann brauchste auch nicht float:left...

Guin · 08.10.2008 19:45

AW: allles verrutscht

HTML:

<head>

<style type=text/css>

body {

background-image:url(bild.jpg);

background-color:eeeeee;

background-attachment:fixed;

background-position:center;

background-repeat:no-repeat;

margin-top: 150px; margin-left: 15%;

}

#bl_main_nav ul {

width:800px;

line-height:20px;

margin:0px;

padding:0px;

list-style-type:none;

letter-spacing:1px;

}

#bl_main_nav li {

margin:0px;

padding:0px;

text-align:center;

float:left;

border:0px solid #ffffff;

}

#bl_main_nav a {

color:#FFFFFF;

font-family:tahoma;

font-weight:bold;

display:block;

height:30px;

width:158px;

padding-top:0px;

background:#cccccc;

text-decoration:none;

border-bottom:5px solid #7f7f7f;

}

#bl_main_nav a:hover {

color:#000000;

background:#eeeeee;

border-bottom:5px solid #7f7f7f;

}

</style>

</head>

<body>

<div id="bl_main_nav">

<ul>

<li><a id="main_nav1" href="home" target="_top">Home</a></li>

<li><a id="main_nav2" href="general_person.shtml" target="_top">Gruppe</a></li>

<li><a id="main_nav3" href="general_skills.shtml" target="_top">Kalender</a></li>

<li><a id="main_nav4" href="general_projects.shtml" target="_top">Kontakt</a></li>

<li><a id="main_nav5" href="general_contact.shtml" target="_top">Impressum</a></li>

</ul>

</div>

</body>

Hier stelle ich kein verrutschen mehr fest.

nickido · 08.10.2008 19:48

AW: allles verrutscht

juhu....ne jetzt auch nicht mehr, vielen Dank an euch beide!!

allles verrutscht

Newsletter einpacken, Geschenk auspacken!