Zu den Aufzeichnungen der tutorials.de-Live-Workshops
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
457
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 05.09.10 11:54 #1
    powerranger2 powerranger2 ist offline Grünschnabel
    Registriert seit
    Sep 2010
    Beiträge
    3
    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

    Hier mal mein momentaner Ansatz:

    HTML
    HTML-Code:
    <!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-Code:
    * {
	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
    Ich hoffe ihr könnt mir weiterhelfen !
     
    Zitieren Zitieren
  2. 05.09.10 14:07 #2
    powerranger2 powerranger2 ist offline Grünschnabel
    Registriert seit
    Sep 2010
    Beiträge
    3
    Ich hab mal eben bisschen weiter versucht und hab mal folgendes gemacht:

    HTML-Code:
    <!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-Code:
    * {
	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

    Bitte um Hilfe !
     
    Zitieren Zitieren
  3. 06.09.10 12:09 #3
    zenturio Tutorials.de Gastzugang
    Code css:
    1
2
3
4

    #navi li{
    display: inline; 
    list-style-type: none;
    }
    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.
     
    Zitieren Zitieren
  4. 06.09.10 16:17 #4
    powerranger2 powerranger2 ist offline Grünschnabel
    Registriert seit
    Sep 2010
    Beiträge
    3
    Es läuft ! :-o
    Vielen Dank !
     
    Zitieren Zitieren
« a hover CSS Menü | First-Letter funktioniert nicht wie gewollt »

Ähnliche Themen

  1. Horizontale Navigation mit Umbrüchen
    Von TeBeO im Forum CSS
    Antworten: 11
    Letzter Beitrag: 01.02.10, 13:45
  2. Horizontale Navigation
    Von alex130 im Forum CSS
    Antworten: 30
    Letzter Beitrag: 02.01.08, 23:31
  3. Horizontale Navigation
    Von Arndtinho im Forum CSS
    Antworten: 4
    Letzter Beitrag: 23.05.06, 15:16
  4. Horizontale Navigation im FF und IE verschoben
    Von Fiberman im Forum CSS
    Antworten: 3
    Letzter Beitrag: 09.11.05, 13:25
  5. Horizontale Navigation mit CSS
    Von roliboli im Forum CSS
    Antworten: 0
    Letzter Beitrag: 28.01.05, 01:08