Horizontale Navigation

powerranger2

powerranger2

Grünschnabel
Hallo nettes Board,

ich verzweifle so langsam. Ich möchte für die Ferienwohnung meiner Eltern eine Internetseite basteln. Hierfür brauche ich eine horizontale Navigation.

Zur Navi:
Sie besteht auf 7 Grafiken, die alle einen unterschiedlichen Hintergrund haben. Sie sollten horizontal, also nebeneinander aufgelistet werden. Text auf die Buttons kommt nicht, da ich das über die Grafik miteingebunden hab.
So..ich hab jetzt auch gegoogelt, nur hab ich zich-verschiedene Lösungen gefunden. Doch mit keiner kam ich so richtig klar :D

Hier mal mein momentaner Ansatz:

HTML
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
	   
<html>
	<head><title>Ferienwohnung - An der großen Buche</title></head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<body>
		
	<div id="header"></div>
	
	<div id="navi">
		<img src="bilder/schatten_left_button.jpg"/>
		<img src="bilder/home.jpg"/>
		<img src="bilder/ferienwohnung.jpg" />
		<img src="bilder/anreise.jpg" />
		<img src="bilder/kosten_buchen.jpg" />
		<img src="bilder/schatten_right_button.jpg" />
	</div>		

	</body>
</html>


CSS
HTML: 
* {
	margin: 0px;
	padding: 0px;
	}

body {
	width: 842px;
	background-color: #cb9340;
	font-family: arial;
	margin-left: auto;
	margin-right: auto;
	}

#header {
	background: url(Bilder/header.jpg);
	width: 100%;
	height: 227px;
	}


Für die Navi hab ich jetzt noch nichts im CSS-Teil eingefügt, da ich nur Käse bisher drin hatte und das wieder gelöscht hab :D
Ich hoffe ihr könnt mir weiterhelfen !
 
Ich hab mal eben bisschen weiter versucht und hab mal folgendes gemacht:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
	   
<html>
	<head><title>Ferienwohnung - An der großen Buche</title></head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<body>
		
	<div id="header"></div>
	
	<ul id="navi">
		<li id="button1">test</li>
		<li id="button2"></li>
		<li id="button3"></li>
		<li id="button4"></li>	
	</ul>
	
	</body>
</html>


HTML: 
* {
	margin: 0px;
	padding: 0px;
	}

body {
	width: 842px;
	background-color: #cb9340;
	font-family: arial;
	margin-left: auto;
	margin-right: auto;
	}

#header {
	background: url(Bilder/header.jpg);
	width: 100%;
	height: 227px;
	}
	
#navi {
	width: 100%;
	height: 46px;
}
	
#navi li{
	display: inline; 
	list-style-type: none;
	}
	
#button1 {
	width: 139px;
	height: 46px;
	background: url(bilder/home.jpg);
	}

Das komische ist jetzt hierbei, dass nur hinter dem Wort "test" der Hintergrund dargestellt wird. Nur der kleine Bereich :p

Bitte um Hilfe !
 
CSS: 
#navi li{
	display: inline; 
	list-style-type: none;
	}
Zum Vergrößern anklicken....

Tausch in dieser Regelmenge display:inline gegen float:left, damit das Element auch die nachfolgend deklarierte Breite und Höhe annimmt, was für Inline-Elemente, bzw. Elemente mit dieser Eigenschaft nicht möglich ist.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück