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

Hintergrundbild und Ausdehnung

S

sancho2412

Neues Mitglied
Hallo,
ich arbeite gerade an meiner ersten Homepage.
Ich habe eine externe css-Style-Datei eingebunden.
Im allgemeinen Besteht die Seite aus drei Spalten und einer Kopf- und Fußzeile.

Als Hintergrundbild habe ich ein jpg Bild verwendet. Dieses Bild visualisiert die drei Spalten (dunkel - hell - dunkel).

Nun möchte ich erstens: Das Bild soll immer komplett gestreckt werden, sowohl waagerech als auch senkrecht.

Zweitens: Die drei Spalten sollen auf die Ausdehnung angepasst werden.

Mein Willkommenseite sieht so aus:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<!-- BEGIN: head -->
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Willkommen[Gast]</title>

<!-- Style einbinden -->
<link rel="stylesheet" type="text/css"
href="style.css">
</head>

<!-- BEGIN: body -->
<body>

<!-- Kopfzeile einbinden -->
<?php include("kopfzeile.shtml"); ?> 

<!-- Navigationsmenü einbinden -->
<?php include("navigation.shtml"); ?> 



<!-- BEGIN: Inhalt -->
<div id="Inhalt">
  <h2>Willkommen</h2>
    <p>Das ist der Gastzugang</p>
    
<!-- END: Inhalt -->
</div>


<?php include("../fusszeile.php"); ?> 

</body>
</html>
Die Kopfzeile sieht so aus:

HTML: 
<div id="Kopfzeile">
<h1>Internetauftritt von Daniel</h1>
</div>
und die Fußzeile so:

HTML: 
<p id="Fusszeile">
<!-- Laufschrift als Fusszeile einbinden -->
<marquee scrollamount="3" scrolldelay="1">
  <b>Die Seite ist noch im Aufbau</b>
</marquee>
</p>
und das Navigationsmenü so:
HTML: 
<!-- Navigationsmenüeinträe erstellen -->
<ul id="Navigation">
  <li><a href="willkommen.php">Willkommen</a></li>
  <li><a href="gast.php">Gastzugang</a></li>
  <li><a href="contactform.php">Kontakt</a></li>
</ul>
Die css-Datei sieht so aus:

HTML: 
 body {
    MARGIN-TOP: 10px;
    BACKGROUND: #154D72 url(backgrounds/background.jpg) repeat-x top;
    MARGIN-BOTTOM: 10px; 
    COLOR: #333333;
    TEXT-ALIGN: justify;
    font-family: Verdana, Arial, Helvetica, sans-serif;
  }

  div#Kopfzeile h1{
    BACKGROUND: #154D72 url(backgrounds/background_kopfzeile.jpg) repeat-x top;
    border-width: medium;
    border-style: ridge;
    border-color: white;
    color: white;
    font-size: 1.5em;
    margin: 0 0 1.0em 0; padding: 0.7em;
    text-align: center;
  }

  ul#Navigation {
    BACKGROUND: #154D72 url(backgrounds/background_nav.jpg) repeat-x top;
    border-width: medium;
    border-style: ridge;
    border-color: white;
    font-size: 0.83em;
    float: left;
    width: 21%;
    margin: 0 0 1.2em;
    padding: 0;
    background-color: gray;
    background-repeat: no-repeat;
    line-height: 2em;
    display: block;
    color: #0d2474;
    text-decoration: none;
    text-align: center;    
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: black; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    color: white;
      border-width: medium;
    border-style: ridge;
    border-color: white;
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.5em; padding: 0;
    background-color: gray;
  }
  
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
      align: justify;
      color: white;
    margin: 0 12em 1em 18em;
    width: 52%;
    padding: 0 1em;
  }

  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    BACKGROUND: #154D72 url(backgrounds/background_fusszeile.jpg) repeat-x top;
    border-width: medium;
    border-style: ridge;
    border-color: white;
    color: white;
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #006600;
  }
Wie bekomme ich es jetzt hin, dass sich das Hinzergrundbild immer streckt und dass sich zum Beispiel die Breite des Navigationsmenüs dynamisch anpasst?
 
Mach das Ohne so ein doofes Bild.. Und wenn, dann nimm für jede Spalte ein einzelnes.. Wenn das Bild verzerrt wird, sieht das ja nicht mehr schön aus.
 
Sorry aber so eine Antwort habe ich schon erwartet, welche mir keinerlei Informationen darüber gibt, ob es geht oder nicht!
Wollte das Bild eig mit anhängen baer es geht leider nicht....
Das Bild sieht so aus, dass eine zerrung keinen Einfluss auf die darstellung hat, da es einfach ein schwarzes Bild ist, welches in der Mitte helle wird....

Wie kann ich den dann zumindest die NAvigationsbar immer auf eine bestimmte Breite festlegen (z.B. immer 10% des angezeigten Bildschirms?)
 
Hallo.

Ich würde der Navigationsbar immer eine feste Breite geben.
Bei einer prozentualen Breite kann es schnell mal passieren das das Menü unleserlich wird.

Ansonsten verstehe ich deine Frage nicht. Du hast in deinem CSS doch schon eine Breite von 21% festgelegt.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben