|
|||
Website mit rand rechts und links
Hallo Community,
ich möchte das auf meiner Website auf der rechten und linken seite ein unsichtbarer Rand ist den alle Elemente die in diesem Div Container sind nicht überschreiten können außerdem will ich, dass alle Elemente auf der Website sich in der Mitte anordnen. Kann mir da jemand helfen ich weiß nämlich nicht wie es so funktioniert. Hier noch mein jetziger HTML Quellcode: Code:
<html> <head> <title>Website</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <body style="text-align:center;"> <div id="wrapper"> <div id="image1"> <img src="bild 1" width="1000" height="400" alt="logo" /> </div> <div id="navi"> <nav> <ul> <li class = "cat1"> <a href="#">Home</a> </li> <li class = "cat2"> <a href="#">News</a> </li> <li class = "cat3"> <a href="#">Forum</a> </li> <li class = "cat4"> <a href="#">Kontakt</a> <ul> <li><a href="#">Wer sind wir?</a></li> <li><a href="#">Fragenstellung</a></li> <li><a href="#">Community</a></li> </ul> </li> <li class = "cat5"> <a href="#">Impressum</a> </li> </ul> </nav> </div> Code:
div#wrapper { color: black; background-color: white; margin-right: 50%; margin-left: 25%; } div#navi { display: block; width: auto; margin-top: 0%; margin-right: 50%; margin-left: 0%; position: relative; z-index: auto; } nav { width: 1000px; } nav ul { padding: 0%; margin: 0%; } nav ul:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; } nav ul,nav ul li{ background-color: lightgrey; } nav ul li { list-style: none; float:left; } nav ul li a { text-decoration: none; display: block; color: #333; padding: 14px 34px 14px 34px; } nav ul li:hover > ul { visibility: visible; } nav ul li ul{ display: inline; visibility: hidden; position: absolute; padding:0px; } nav ul li ul li{ float: none; } nav ul li ul li a:hover{ color: #333; } nav ul { padding: 0px; margin: 0px; box-shadow: 2px 2px 2px #dfdfdf; -moz-box-shadow: 2px 2px 2px #dfdfdf; -webkit-box-shadow: 2px 2px 2px #dfdfdf; } nav ul li { list-style: none; float:left; border-right: 1px solid #dfdfdf; } nav ul li a { text-decoration: none; display: block; color: #333; padding: 14px 34px 14px 34px; -webkit-transition: background 0.3s ease-out 0s; -moz-transition: background 0.3s ease-out 0s; -o-transition: background 0.3s ease-out 0s; transition: background 0.3s ease-out 0s; } nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a { background-color: dimgray; } nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a { background-color: dimgray; } nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a { background-color: dimgray; } nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a { background-color: dimgray; } nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a { background-color: dimgray; } nav ul li:hover > a { color: #FAFAFA; } nav ul li ul li a { color: #FAFAFA; } nav ul li ul li a:hover { color: #333; background-color: #FAFAFA !important; } WICHTIG: Die Menüleiste soll mit dem Headerbild bündig abschließen Danke schonmal für die hoffentlich hilfreichen Antworten |
Sponsored Links |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. | Picasso | CSS | 36 | 03.01.2011 20:41 |
Grafik des Hauptmenüpunktes bei Aktivierung eines Links des Untermenüs verschwunden | makalus | CSS | 7 | 03.11.2010 10:36 |
Links funktionieren nicht | sammler0002 | CSS | 4 | 12.11.2009 21:30 |
[link] Links zur Webentwicklung | KaGe | Ressourcen | 5 | 16.12.2005 17:03 |