• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsleiste gleichmäßig verteilen

Hacker28

Neues Mitglied
Hey Leute,
ich bin neu hier im Forum, weil ich beim schreiben einer Website einfach nicht mehr weiter weiß :-(
Neben dem oben genannten Thema hab ich noch einige Fragen, bei denen Ihr mir hoffentlich weiterhelfen könnt.
1. Wie verteile ich die Navigationsleiste horizontal gleichmäßig?
2. Wenn ich das Fenster verkleinere, verschiebt sich alles. Woran könnte das liegen?
3. Könnt ihr mir Tipps geben, wie die Website moderner und frischer aussieht? Die Website soll eine Person
repräsentieren. Sie soll aktuelle Beiträge enthalten (Beruf ist Journalist) und man soll sich mit der Person in
Verbindung setzen können.
LG Hacker28

HTML:
<html>
<head>
<title></title>
<meta name="author" content="---">
<link rel="stylesheet" href="format.css" type="text/css">
</head>
<body>
  <div id="logo">
    <h1>Sportjournalismus XXXXXX</h1>
    <h3><i>Slogan</i></h3>
    <hr color="#FFFFFF">
  </div>
  <div id="navigation">
     <ul id="navi">
       <li><a href="#">START</a></li>
       <li>|</li>
       <li><a href="#">AKTUELLE&nbsp;BEITRÄGE</a></li>
       <li>|</li>
       <li><a href="#">STECKBRIEF</a></li>
       <li>|</li>
       <li><a href="#">KONTAKT</a></li>
       <li>|</li>
       <li><a href="#">IMPRESSUM</a></li>

     </ul>
    <hr color="#FFFFFF">
  </div>
  <div id="haupt">
   <p>testing</p>
</div>
</body>
</html>

Code:
body {
     margin-left: 15%;
     margin-right: 15%;
     margin-top: 5%;
     margin-bottom: 5%;
     height: 100%;
     font-family: Courier New, Courier, Verdana;

     background: -moz-linear-gradient(bottom,#2F0000,#DF0000);                                               /* Firefox */
     background: -webkit-gradient(linear,left top,left bottom,from(#2F0000),to(#DF0000));                    /* Chrome, Safari */
     filter: progid:DXImageTransform.Microsoft.gradient(start Colorstr='#2F0000',endColorstr='#DF0000');    /* Internet Explorer */

     background-repeat: no-repeat;
     background-attachment: fixed;

     }

#logo {
      height: 15%;
      text-align: center;
      color: #FFFFFF;
      }

h1 {
   font-size: 250%;
   font-weight: bold;
   }

#navigation {
            background-color: ;
            height: 5%;
            margin: 0;
            padding: 0;
            text-align: justify;
            color: #FFFFFF;
            font-size: 120%;
            }

#navigation ul {
            margin: 2%;
            padding: 0;
               }

#navigation li {
               list-style: none;
               margin: 0;
               padding: 0;
               }

#navi li {
         display: inline;
         list-style-type: none;
         margin: 0;
         padding: 4px 0;
         }

#navigation a {
              text-decoration: none;
              font-weight: bold;
              color: #FFFFFF;
              }

#navigation a:hover {
                    color: #BFBFBF;
                    }

#haupt {
       background-color: #009090;
       height: 80%;
       }
 
Zuletzt bearbeitet:
Zurück
Oben