zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü kalibrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.07.2013, 12:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2013
Beiträge: 1
_SIE_ befindet sich auf einem aufstrebenden Ast
Standard Horizontales Menü kalibrieren

Hallo an alle,

ich programmiere noch nicht lange in html, habt deshalb etwas Nachsicht.

Also ich wollte eine eigene Website erstellen die schon ein bisschen style hat .
Dafür soll sie einen feststehenden Kopf haben wo einmal groß die überschrift steht und links und rechts ganz unten am rand des Kopfes weitere links also die Navigation sind/ist.

Dazu hab ich als erstes einen Container erstellt und den nach meinen wünschen gestaltet mit der überschrift in der Mitte. Das Menü hab ich danach aber nicht mehr hinbekommen.

Dann hab versucht durch eine Liste erst ein horizontales Menü zu erstellen und dann die überschrift hinzu zu fügen. Klappte noch weniger.

Hab dann mal den Code von SELFHTML ausprobiert und das hat dann auch geklappt.

Jetzt meine Frage: Wie kriege ich es hin die Menü punkte zu kalibrieren als links unten zwei, rechts unten zwei und in die Mitte eine überschrift zu machen. Und der Hintergrund sollte auch fixed sein sodass er sich bei längerem text nicht wiederholt.

Mein HTML code:

HTML-Code:
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>3D Drucker</title>
		<link rel="stylesheet" type="text/css" href="stylesheet_1.css">
	</head>
	<body>
		<ul id="header">
			<li><a href="#home">Home</a></li>
			<li><a href="#meiner">Mein 3D Drucker</a></li>
			<li><a href="#bilder">Bilder</a></li>
			<li><a href="#download">Downloads</a></li>
		</ul>	
	</body>
</html>
Mein CSS Code:

Code:
* {
	margin:0;
	padding:0;
}

body {
	background-image:URL(illumine.png);
	font-family: courier;
	text-align:center;
}

ul#header {
	position:fixed;
	width:100%;
	height:100px;
	background-image:URL(illumine_tiny.png);
}
  
ul#header li {
    list-style:none;
    display:inline;
}

ul#header a, ul#header span {
    padding:7px;
    text-decoration:none; 
	font-weight:bold;
    color:white; 
	background-color:black;
}

ul#header a:hover, ul#header span {
    color:black; 
	background-color:white;
}
im voraus schon mal DANKE

LG SIE
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.07.2013, 13:09
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

eine einfache Variante:
HTML-Code:
<!DOCTYPE html>
<html>
	<head lang="de">
		<meta charset="UTF-8"/>
		<title>3D Drucker</title>
		<style type="text/css">
			* {
				margin: 0;
			        padding: 0;
			}
			body {
				font: 100%/1.5 sans-serif;
			}
			#header {
				list-style: none;
				width: 50em;
				margin: 1.5em auto;
				text-align: center;
				border: 1px solid #999;
			}
			#header li {
				float: left;
				width: 20%;
			}
			#header h2 {
				font-size: 1em;
				text-align: center;
				padding: .8em 0;
 			}
			#header a {
				color: #000;
				display: block;
				padding: .8em 0;
			}
			#header a:hover {
				color: #fff;
				text-decoration: none;
				background: #999;
			}
			.cf:before, .cf:after {content:" "; display:table;}
			.cf:after {clear:both;}
			.cf {*zoom:1;} /* for IE 6/7 (trigger hasLayout) */
		</style>
	</head>
	<body>
		<ul id="header" class="cf">
			<li><a href="#home">Home</a></li>
			<li><a href="#meiner">Mein 3D Drucker</a></li>
			<li><h2>Überschrift</h2></li>
			<li><a href="#bilder">Bilder</a></li>
			<li><a href="#download">Downloads</a></li>
		</ul>	
	</body>
</html>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontales Menü centriert, Menühintergrund über ganze Seite PowerNerd CSS 19 05.05.2012 22:06
horizontales Menü in horizontales Pulldown-Menü ändern Stephan1958 CSS 5 11.01.2012 14:37
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
horizontales Menü sarahg CSS 9 10.02.2009 15:25
horizontales Menü 2 Zeilen daniele1985 CSS 15 20.10.2006 14:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:35 Uhr.