Float Problem

Hallo, ich bin gerade dabei mich mit html zu beschäftigen und habe ein kleines Problem unzwar habe ich ein navigationsmenü mithilfe einer liste erstellt und mit float angeordnet, so weit, so gut. Jetzt habe ich ein Bild(title.gif) wenn ich einbibnde wird es ebenfalls von der float funktion eingebunden ich hab zwar clear: both; vversucht, es hilft aber nix.
Das ist die Seite: BJC-Buchen

HTMl
[HTML]

BJC-Buchen


[/HTML]CSS: [CODE]body { background-color: 76EE00; margin:0; padding:0; font: bold 11px/1.5em Verdana; } /*----------------------------------------------------------------*/

img#streifen {

width: 700px;
height: 100%;
padding-top: 100px;
}

img#title {
clear:both;
heihgt: 88px;
width: 513;
align: left;

}

img#menubar {
width: 90%;
height: 140px;
padding-top: 10px;
padding-bottom: 30px;
}

/----------------------------------------------------------------/
ul#list-nav {
list-style:none;
padding-left: 5px;
padding-top: 20px;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;

width:100px;
background:#76EE00;
color:black;
float:left;
text-align:center;
border-left:1px solid black;
}
ul#list-nav li#impressum a {

border-right: 1px solid black;
widht: 100px;
height: 17px;
}

ul#list-nav li a:hover {
background:#C0FF3E;
color:black
}

/---------------------------------------------------------------/

[/CODE]

cleare noch vor dem Bild
[HTML]

 

[/HTML]

Hey, Vielen Dank :DD

wusste nicht, dass das so einfach geht :smiley:

MfG Dennis

Hallo.

Ein sogenanntes cleardiv ist natürlich semantischer Schwachsinn und bei dir absolut unnötig…

Schritt 1: Entferne die Schreibfehler aus deinem CSS

Schritt 2: Zeichne deine Bilder semantisch korrekt aus und du hast einen Selektor dem du das clear geben kannst.

Gruss
Elroy

Also das mit dem Zeichnen tue ich ja eigentlich selber, nur die Schrift soll animiert sein, und da hab ich ein Programm, welches mir diese GIF datei erstellt.
zu der css: ich finde leider keine fehler(gehirn hat keine Selbstzweifel :D) kannste mir bissle auf die sprünge helfen?
Und wenn ich schon dabei bin, eine Frage habe ich noch: ich hab die Seite bissle verändert und jz bekommt ich den abstand zum menü nciht auf 0 padding und so ist auf 0 aber trotzdem ist abstand da, warum?

MfG Dennis

Hallo.

Füge erst mal einen Doctype hinzu damit der Browser nicht im Quirkmodus läuft.

Ich hoffe die Fehler erkennst du selbst:

[CODE]
img#title {
clear:both;
heihgt: 88px;
width: 513;
align: left;
}

ul#list-nav li#impressum a {

border-right: 1px solid black;
widht: 100px;
height: 17px;
}
[/CODE]Wie schon gesagt es sind Rechtschreibfehler.

Mit dem Auszeichnen meine ich HTML für das zu benutzten für das es gedacht ist.
Deine Bilder haben eine Bedeutung? Dann benutze HTML um sie ihrer Bedeutung entsprechend auszuzeichnen.

Beispiel:
Ist das der Titel deiner Webseite?
[HTML][/HTML]Warum dann nicht so?
[HTML]

Titel der Webseite

[/HTML]CSS dann natürlich anpassen.
Übrigens ist das alt Attribut ist bei Bildern ein Pflichtattribut.

Gruss
Elroy

Ok, erstmal vielen Dank für deine Hilfe die Rechtschreibfehler habe ichebenfalls gefunden height und width sollte das heißen :smiley:
aber eine Frage hätt ich da noch, kann es sein dass ist die css anderst strukturieren oder aufbauen muss wenn ich den Doctype einfüge?
Und warum hat mein nav-list menü abstand zu top und bottom obwohl ich da alles auf 0 gestellt habe, bekomme das iwie nicht ganz auf die reihe.

Nicht anders strukturieren, sondern das Boxmodell kann sich ändern SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell

Hallo.

Der Doctype versetzt den Browser in den Standardkonformen Modus.

Vorher irgendwelche padding oder margin Fehler zu suchen ist nicht sinnvoll weil sich ohne Doctype jeder Browser anders verhält.

Gruss
Elroy

Also ich hab jz den Doctype eingefügt und das bisherige Ergebnis sieht so aus: BJC-Buchen

html: [CODE]

BJC-Buchen

Titel der Website

[/CODE]CSS [CODE]body { background-color: #76EE00; margin:0; padding:0; font: bold 11px/1.5em Verdana; } /*----------------------------------------------------------------*/

img#streifen {

width: 700px;
height: 100%;

}

img#menubar {
clear: both;
width: 90%;
height: 140px;
padding-top: 0px;
padding-bottom: 30px;
align: top;
}

/----------------------------------------------------------------/
ul#list-nav {
list-style:none;
padding-left: 5px;
padding-top: 0px;
width:525px
margin: 0px;
align: top;
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;

width:100px;
background:#76EE00;
color:black;
float:left;
text-align:center;
border-left:1px solid #000000;
}
ul#list-nav li#Impressum a {

border-right: 1px solid black;

}
[/CODE]jz bleibt nur noch das Problem, dass die nav-list nicht oben andockt

Schau mal in die Fehlerkonsole vom Firefox, da werden auch CSS Fehler als Warnungen angezeigt. Da ist einer dabei der das Problem verursachen könnte.

Also ich habe alle Warnungen behoben nur die eine Warnung verstehe ich nicht:
unter
ul#list-nav {
.
.
.
align:top;
}

des align:top; ist eine Warnung wenn ich es weg mach hilft es aber auch nicht.

Mach es weg, es hat keine Auswirkung.

Was aber an deinem Code fehlt, ist ein margin für die Liste

Und auf welchem Wert soll ich das Margin stellen? mit 0px; bringt es nix und jeder andere wert würde den abstand nur vergrößern

0px bringt es bei mir

Klasse, danke dir :smiley: hab es versehentlich nciht der Liste, sondern den Listeneinträgen gegeben :smiley:
evht vielen Dank an ALLE die mir geholfen haben.