kostenloser Webspace werbefrei: lima-city

Ein Div um eine ganze Website

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

bewegen charakter code container effekt element erzeugen fehler grund header http inhalt layout legen navigation problem rahmen tag umgehen zweiten container
  1. Autor dieses Themas

    kalinawalsjakoff

    Kostenloser Webspace von kalinawalsjakoff

    kalinawalsjakoff hat kostenlosen Webspace.

    16:38, 15.10.2009
    Also mein tag/problem">problem ist folgendes:

    Ich möchte ein DIV um eine ganze Website legen, nämlich um folgende: http://dsa-charaktere.de um die Breite der Seite auf einen von mir definierten Wert zu begrenzen. Der Code meiner aktuellen Seite sieht wie folgt aus:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Eine kurze Beschreibung der Seite">
<meta name="author" content="Kalina Walsjakoff">
<meta name="robots" content="index, follow">
<meta name="editor" content="html-editor phase 5">
<title>Meine DSA Charaktere</title>
<style type="text/css">
<!--
body {
 background: #f5f5dc;
}
p#Fusszeile  {
   clear: both;
   font-size: 8pt;
   margin: 15pt;
   padding: 20pt;
   border: 3px ridge silver;
   background-color: #f5f5ac;
   color: #0000ff;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
   }
div#Inhalt h1 {
   font-size: 20 pt;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
}
div#widmung p {
   font-size:10pt;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
}
div#Inhalt h2 {
   font-size: 18 pt;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
}
div#Inhalt p {
   font-size: 12pt;
   color: #000000;
   text-align: left;
   font-family: Verdana, Arial, sans-serif;
   padding: 10px;
}
ul#Navigation {
   float: left;
   width: 100px;
   margin: 15pt;
   padding: 20pt;
   background-color: #f5f5ac;
   border: 3px ridge silver

}
ul#Navigation li {
    font-family: Verdana, Arial, sans-serif;
    font-size: 14pt;
    list-style: none;
    margin: 5px;
    padding: 0;
    text-align: center;
  }
ul#Navigation a {
    padding: 0.2em;
    display: block;
  }
ul#Navigation a:link {
    color: #0000ff;
  }
ul#Navigation a:visited {
    color: red;
  }
ul#Navigation a:hover {
    color: #00FF7F;
  }
ul#Navigation a:active {
    color: white;
  }
div#header {
    text-align: center;
    margin: 0 auto;
    width: 800px;
    height: 125px;
    padding: 0;
    border: 3px ridge silver;

=-->
</style>
</head>
<body>


<div id="header" >
<img src="Eine Grafik (als Kopfgrafik" alt="" border="0" width="800" height="125">

</div>
<br>
<br>

</div><ul id="Navigation">
<li><a href="iSeite1.php">Seite1</a></li>
<li><a href="Seite2.php">Seite2</a></li>
<li><a href="Seite3.php">Seite3</a></li>

</ul>
<div id="Inhalt">
<h2>Überschrift</h2>

<p>Content</p>

</div>

<p id="Fusszeile"> Content für die Fußzeile</p>


</body>
</html>


    (um es übersichtlicher zu halten habe ich mal den Inhalt stark verkürzt)

    Jetzt hatte ich unter dem einleitenden Body-tag ein neues Div begonnen und wollte das vor dem abschließenden Body-tag beenden. Hatte ich auch gemacht, dem DIV eine ID zugewiesen und im CSS weiter oben eine fixe breite und einen Rahmen eingefügt (den Rahmen um zu sehen wie sich das ganze ding auf die Seite auswirkt.

    Das Problem dabei war, daß der Container nur noch einen zweiten Rahmen mit der von mir definierten Größe um die obere Grafik gelegt.

    Hier der Code mit dem was ich da geändert hatte

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Eine kurze Beschreibung der Seite">
<meta name="author" content="Kalina Walsjakoff">
<meta name="robots" content="index, follow">
<meta name="editor" content="html-editor phase 5">
<title>Meine DSA Charaktere</title>
<style type="text/css">
<!--
body {
 background: #f5f5dc;
}
p#Fusszeile  {
   clear: both;
   font-size: 8pt;
   margin: 15pt;
   padding: 20pt;
   border: 3px ridge silver;
   background-color: #f5f5ac;
   color: #0000ff;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
   }
div#Inhalt h1 {
   font-size: 20 pt;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
}
div#widmung p {
   font-size:10pt;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
}
div#Inhalt h2 {
   font-size: 18 pt;
   text-align: center;
   font-family: Verdana, Arial, sans-serif;
}
div#Inhalt p {
   font-size: 12pt;
   color: #000000;
   text-align: left;
   font-family: Verdana, Arial, sans-serif;
   padding: 10px;
}
ul#Navigation {
   float: left;
   width: 100px;
   margin: 15pt;
   padding: 20pt;
   background-color: #f5f5ac;
   border: 3px ridge silver

}
ul#Navigation li {
    font-family: Verdana, Arial, sans-serif;
    font-size: 14pt;
    list-style: none;
    margin: 5px;
    padding: 0;
    text-align: center;
  }
ul#Navigation a {
    padding: 0.2em;
    display: block;
  }
ul#Navigation a:link {
    color: #0000ff;
  }
ul#Navigation a:visited {
    color: red;
  }
ul#Navigation a:hover {
    color: #00FF7F;
  }
ul#Navigation a:active {
    color: white;
  }
div#header {
    text-align: center;
    margin: 0 auto;
    width: 800px;
    height: 125px;
    padding: 0;
    border: 3px ridge silver;
   }
div#rahmen  {
  width: 1000 px
  margin: margin: 0 auto;
  border: 3px ridge silver; 
    }
=-->
</style>
</head>
<body>
<div id="Rahmen"

<div id="header" >
<img src="Eine Grafik (als Kopfgrafik" alt="" border="0" width="800" height="125">

</div>
<br>
<br>

</div><ul id="Navigation">
<li><a href="iSeite1.php">Seite1</a></li>
<li><a href="Seite2.php">Seite2</a></li>
<li><a href="Seite3.php">Seite3</a></li>

</ul>
<div id="Inhalt">
<h2>Überschrift</h2>

<p>Content</p>

</div>

<p id="Fusszeile"> Content für die Fußzeile</p>

</div>
</body>
</html>


    Was habe ich verkehrt gemacht oder wie kann ich den Code überzeugen, daß er mir den Rahmen um die gesamte Seite macht?

    Beitrag zuletzt geändert: 15.10.2009 16:39:46 von kalinawalsjakoff

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. e********l

    16:44, 15.10.2009
    Naja, ist eigentlich ganz simpel.

    Dein Container den du um alles herum gesetzt hast legt sich wie du schon sagtest nur um deinen Header. Der Grund hierfür ist deine Navigation die gefloatet ist. Du musst um diesen Effekt zu umgehen ein weiteres Div um Navigation und Content legen. So kann sich der Rahmen um den Header und den zusätzlichen inneren DIV legen. Denn das float wirkt dann nur auf die Inhalte des zweiten Container Divs.

    //edit: Ergänzung: Elemente die gefloatet wurden bewegen sich außerhalb des Layouts und erzeugen somit keine automatische Höhe für andere Elemente!

    Beitrag zuletzt geändert: 15.10.2009 16:46:13 von evil-devil

  4. qap2

    Kostenloser Webspace von qap2

    qap2 hat kostenlosen Webspace.

    16:46, 15.10.2009
    Mögliche Fehler:
    <div id="Rahmen"

    wird der Tag nicht mit > abgeschlossen

    und im CSS-Abschnitt
    width:1000px

    fehlt ein Semikolon ;

    Probiers mal aus ;)
  5. Autor dieses Themas

    kalinawalsjakoff

    Kostenloser Webspace von kalinawalsjakoff

    kalinawalsjakoff hat kostenlosen Webspace.

    16:48, 15.10.2009
    hmmm das hier im code vergessene Semikolon hatte ich (zumindestens denke ich) im Quelltext meiner Seite drinnen. Wenn die geschlossene eckige Klammer fehlt, brauch ich da überhaupt noch einen abschlußtag für diesen container?

    Edit:

    Deinen Vorschlag hab ich mal ausgetestet und das Problemchen besteht immer noch


    evil-devil schrieb: Naja, ist eigentlich ganz simpel.

    Dein Container den du um alles herum gesetzt hast legt sich wie du schon sagtest nur um deinen Header. Der Grund hierfür ist deine Navigation die gefloatet ist. Du musst um diesen Effekt zu umgehen ein weiteres Div um Navigation und Content legen. So kann sich der Rahmen um den Header und den zusätzlichen inneren DIV legen. Denn das float wirkt dann nur auf die Inhalte des zweiten Container Divs.

    //edit: Ergänzung: Elemente die gefloatet wurden bewegen sich außerhalb des Layouts und erzeugen somit keine automatische Höhe für andere Elemente!


    reicht das wenn ich da um den content und die navigation ein ganz normales div lege oder sollte da irgendwas im Style-Sheet zusätzlich definiert werden?


    Beitrag zuletzt geändert: 15.10.2009 16:53:01 von kalinawalsjakoff

  6. e********l

    16:53, 15.10.2009
    Yay, Fehler gefunden ^^

    bei
    </div><ul id="Navigation">

    Nimm da mal das schließende div weg. Dann geht es.

    //edit: und aus id="Rahmen" muss id="rahmen" werden.

    //edit 2: Für den Zusatzcontainer reicht prinzipiell ein einfaches DIV. ich setze das aber generell mit Styles um mehr Gestaltungsfreiheit zu haben. Zb. kann ich das DIV Element als Anker für absolute Elemente missbrauchen.

    Beitrag zuletzt geändert: 15.10.2009 16:55:15 von evil-devil
  7. Autor dieses Themas

    kalinawalsjakoff

    Kostenloser Webspace von kalinawalsjakoff

    kalinawalsjakoff hat kostenlosen Webspace.

    17:02, 15.10.2009
    Ah ich danke dir evil-devil..... habe die Seite neu hochgeladen und jetzt funktioniert das ganze :)

    Thema kann geschlossen werden.

  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!