zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Website mit rand rechts und links

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.05.2015, 17:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard 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>
und mein CSS Quellcode:

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;
}
Bei einigen Bildschrimen ist es schon zentriert allerdings nicht bei allen bei manchen ist es dann alles nach rechts geruscht oder nach links geruscht

WICHTIG: Die Menüleiste soll mit dem Headerbild bündig abschließen

Danke schonmal für die hoffentlich hilfreichen Antworten
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.05.2015, 20:39
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ich versteh den Problem nicht ganz, da in deinem Code alles schon vorhanden ist.
Du brauchst letztrlich nur
Code:
body{
margin: 0 xx;
}
Wobei xx der von dir gewünschte Abstand ist

Nachtrag: Ach, und einen Doctype solltest du deinem Dokument noch gönnen, sonst wird das nichts.
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:20 Uhr.