• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Float Problem

Dendem

Neues Mitglied
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:
<html>
<head>
<title>BJC-Buchen</title>
<link rel="stylesheet" type="Text/css" href="style.css">
</head>
<body>
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Suche</a></li>
<li id="Impressum"><a href="#">Impressum</a></li>

</ul>



<img src="title.gif" id="title">
<img src="Menubar.png" id="menubar">

<center><img src="Streifen.png" id="steifen.png"></center>
</body>
</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
}


/*---------------------------------------------------------------*/
 
cleare noch vor dem Bild
HTML:
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Suche</a></li>
<li id="Impressum"><a href="#">Impressum</a></li>

</ul>

<div style="clear:left">&nbsp;</div>

<img src="title.gif" id="title">
 
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;
}
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:
<img src="title.gif" id="title">
Warum dann nicht so?
HTML:
<h1 id="title"><img src="title.gif" alt="Titel der Webseite"></h1>
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 :D
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.
 
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BJC-Buchen</title>
<link rel="stylesheet" type="Text/css" href="style.css">
</head>
<body>
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Suche</a></li>
<li id="Impressum"><a href="#">Impressum</a></li>

</ul>

<img src="title.png" id="menubar" alt="Titel der Website">

<center><img src="Streifen.png" id="steifen.png"></center>

</body>
</html>
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;

}
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
 
Klasse, danke dir :D hab es versehentlich nciht der Liste, sondern den Listeneinträgen gegeben :D
evht vielen Dank an ALLE die mir geholfen haben.
 
Zurück
Oben