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

Hompage fixieren

M

markus miller

Neues Mitglied
Hallo,
wir bauen gerade eine Hompage und stecken fest. Wir wollen unsere Page fixieren, so das sich das Bild nicht ständig zusammenzieht, wenn wir das Fenster verkleinern. Es soll eine Feste Grösse beibehalten.


Hier ist unser HTML Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>



<title>Navigation</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>


  <ul id="Navigation">
    <li><a href="#Home"><font size="-1">Home</a></font></li>
    <li><a href="#Beispiel"><font size="-1">Music</a></font></li>
    <li><a href="#Beispiel"><font size="-1">Photos</a></font></li>
    <li><a href="#Beispiel"><font size="-1">Videos</a></font></li>
    <li><a href="#Beispiel"><font size="-1">Radio</a></font></li>
    <li><a href="#Beispiel"><font size="-1">Dj´s</a></font></li>
    <li><a href="#Beispiel"><font size="-1">Events</a></font></li>
    <li><a href="#Beispiel"><font size="-1">Pinnwand</a></font></li>

    </ul>

  <ul id="Balkenrechts">
  </ul>


  <ul id="Balkenlinks">
  </ul>











  </table>



</table>


</body>
</html>






Und hier ist unser CSS:

HTML: 
           body {


    font: normal 100.01% Arial;
    color: white; background-color: #FFFFFF;
  }

  ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 0px solid black;
    background-color: #8470FF;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.2em; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    padding: 0.1em 1em;
    text-decoration: none; font-weight: 300px;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white; background-color: #7B68EE;
  }

  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: 7B68EE;


  }


Gruss Markus und Daniel
 
Ergänze bei body in der css-Datei einfach "width:900px" die 900px kannst du natürlich durchen anderen Wert ersetzen. Wenn du die Seite dann noch in der MItte des Bildschirms haben willst, ergänze im body Teil noch dieses: "margin:0 auto"

HTML: 
body {
    width:900px;
    font: normal 100.01% Arial;     
    color: white; background-color: #FFFFFF;
    margin:0 auto;
}
P.s. Am Ende deines HTML-Codes sind zwei schließende <table> Tags.
 
Willkommen im Forum.

HTML-Elemente sollten nicht mehr zur Formatierung genutzt werden, sondern nur noch zur semantischen Auszeichnung. Das gilt hier für das font-Element. Besser:

HTML: 
<ul id="Navigation">
    <li><a href="#Home">Home</a></li>
    ...
    <li><a href="#Beispiel">Pinnwand</a></li>
</ul>

Dazu eine entsprechende CSS-Regel wie beispielsweise: #Navigation li { font-size: smaller; }
 
markus miller schrieb:
kann mir jetzt noch jemand sagen wie ich z balken links und rechts auf die seite bekomme?
Zum Vergrößern anklicken....

Zum Beispiel durch das CSS-Attribut border oder die Einbindung eines Hintergrundbildes. Solltest du hingegen Spalten meinen, dann muss das mit float: left formatiert werden. In jedem Falle wäre aber eine Strukturierung über div statt ul anzuraten. Es sein denn, du willlst tatsächlich zwei weitere Listen erstellen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben