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

Problem bei Bilder Position.

H

Heizung

Neues Mitglied
Da ihr mir hier nahegelegt habt ich solle liebe mit CSS und mit Bildern arbeiten habe ich mich mal drangesetzt.
Nun habe ich 4 Probleme.
http://random92.bplaced.de/filemanager/Muell/bug3.png
1. Wieso ist der "footer" über der Navigation?? Unter dem Footer sind noch 2-3 Links.
2. Wieso wiederholt sich der Footer??
3. Wie setzte ich mein Layout nachher Zentriert? <body align="center>??
4. Wie mache ich es das der Content Bereich sich automatscih erweitert damit ich unendlich viel schreiben kann ohne dauernt neues Bild einzufügen.

Werde den CSS Code nachher noch in eine .CSS Datei packen aber so habe ich besseren Überlick :D

Code: 
<style "text/css">
#header
 {
  position: absolute;
  background-image: url(images/header.png);
  width: 805px;
  height: 163px;
 }
 
#content
 {
  position: absolute;
  background-image: url(images/content.png);
  width: 805px;
  height: 111px;
  top: 163px;
 }
 
#footer
 {
  position: absolute;
  background-image: url(images/footer.png);
  width: 805px;
  height: 111px;
  top: 268px;
 }
 
#menu
 {
  position:absolute;
  background: ;
  width: 300px;
  top: 150px;
 }
</style>

<html>
 <head>
  <title>
   Snooze
  </title>
 </head>
 <body>
 
  <!-- Header -->
   <div id="header">
   </div>
  <!-- Header -->
  
  <!-- Content -->
   <div id="content">
    <p>  </p>
   </div>
  <!-- Content -->
  
  <!-- Menu -->
   <div id="menu">
    <ul>
     <li><a href="index.html"> Home </a>
     <li><a href="grafiken.html"> Grafiken </a>
     <li><a href="teeworlds.html"> Teeworlds </a>
     <li><a href="trackmania.html"> Trackmania </a>
     <li><a href="racinglive.html"> Racing Live </a>
     <li><a href="diablo2.html"> Diablo 2 </a>
     <li><a href="partner.html"> Partner </a>
     <li><a href="kontakt.php"> Kontakt </a>
     <li><a href="impressum.html"> Impressum </a>
    </ul>
   </div>

  <!-- Menu -->
  
  <!-- Footer -->
   <div id="footer">
   </div>
  <!-- Footer -->
  
 </body>
</html>
 
Heizung schrieb:
1. Wieso ist der "footer" über der Navigation?? Unter dem Footer sind noch 2-3 Links.
Zum Vergrößern anklicken....
Ein Link zur Seite ist für die Helfenden immer angenehmer, als Screenshots und Code. Je einfacher die Hilfestellung, desto besser fallen die Antworten aus.

3. Wie setzte ich mein Layout nachher Zentriert? <body align="center>??
Zum Vergrößern anklicken....
Sicher nicht, denn das ist HTML. HTML ist aber nur für die Semantik da, nicht für das Aussehen. Nutze also CSS. Ein Block-Element zentriert man mit "margin:0 auto;".

4. Wie mache ich es das der Content Bereich sich automatscih erweitert damit ich unendlich viel schreiben kann ohne dauernt neues Bild einzufügen.
Zum Vergrößern anklicken....
Indem Du ihm keine feste Höhe gibst. Hintergrundbilder können sich ja wiederholen.
 
Warum arbeitest Du mit absoluter Positionierung?
Nimm die mal raus, da gibts keinen Grund dafür.
Du nimmst damit die Elemente aus dem Textfluss, und da fangen die Probleme an.

Der Footer "wiederholt" sich, weil das Element 111px hoch sein soll, die Hintergrundgrafik aber nur 73px hoch ist.

Warum machst Du alles mit <div>, obwohl Du doch nichts zu gruppieren hast? <div> wird nur verwendet, um Gruppen auszuzeichnen. Aber klar, Dir fehlt ja auch der Inhalt. Du solltest als Anfänger beim Inhalt anfangen, nicht beim Layout.
 
So nun habe ich es geschafft :D sogut wie.
Alles sieht so aus wie ich es möchte.
(Navi background wird noch unsichtbar habe es nur zum besseren erkennen gefärbt)
Nur weiß ich nicht wie ich den Text so hinbekomme das der weiter rechts ist und nicht über den aussenrand geht (rechts)
Wenn ich jetzt wieder mit div arbeite geht das i.wie nicht.

Vorschau
http://random92.bplaced.de/hello/
 
Also, das Menü kannst du mit in den Content nehmen, dann machst du einen DIV für das Menü und einen DIV für den wirklichen Inhalt der Seite. Um die Seite mittig zu positionieren kannst du alles in einen Div packen und dem folgende Attribute geben:

Code: 
width:990px;
margin:0 auto;
min-height:396px;

min-height= Höhe des Headers + Mindesthöhe des Contents + Höhe des Footers
Damit die Mindesthöhe auch vom Internet Explorer akzeptiert wird, arbeitest du mit Conditional Comments und fügst einen Fix für IE 5 + 6 ein, da diese "min-height" nicht kennen, aber "height" bei denen genauso wirkt.

Wenn du das hast, sehen wir weiter.
 
Heizung schrieb:
So nun habe ich es geschafft :D sogut wie.
Zum Vergrößern anklicken....
Naja, das Grundgerüst fürHTML-Dateienstimmt zum Beispiel noch nicht. Der style-Bereich muss in den head. Besser noch wäre, ihn in ein externes Stylesheet zu packen.
Außerdem fehlt der Doctye.
Und die Semantik stimmt immer noch nicht.

Alles sieht so aus wie ich es möchte.
Zum Vergrößern anklicken....
Das ist nur die halbe Miete. Die Semantik ist die andere Hälfte.

Nur weiß ich nicht wie ich den Text so hinbekomme das der weiter rechts ist und nicht über den aussenrand geht (rechts)
Zum Vergrößern anklicken....
1. Das div um das Menü entfernen. <div> ist dazu da, mehrere Elemente zu gruppieren. Du hast nur eine Liste da drin, also keine Gruppe. Die Liste packst Du VOR den Content und gibst ihm ein "float".
2. Schon ist es nebeneinander. Um das umfließen unter dem Menü zu vermeiden, was kommt, wenn Du mehr COntent hast, dem Content noch ein margin in die entsprechende Richtung geben.
3. Falls der Content kürzer ist, als das Menü, musst Du zudem mit "clear" arbeiten.

Wenn ich jetzt wieder mit div arbeite geht das i.wie nicht.
Zum Vergrößern anklicken....
Layout hat auch nichts mit <div> zu tun. Die meisten Deiner divs sind sowieso falsch.
Aber richtig wissen kann man das erst, wenn der Inhalt da ist.

Für Anfänger ist es immer leichter, diese Reihenfolge einzuhalten:
1. Inhalt
2. Semantik
3. Layout
 
Ohmann CSS ist doch blöde :D

http://random92.bplaced.de/hello/

So nun weiß ich nurnicht wie ich den Inhaltsbereich wo nachher Text ist nach oben bekomme :/
Ansonsten sollte nun alles richtig sein.
Navigation mache ich nachher noch schöner :D
Und den CSS Code räum ich vllt nochmal auf ^^

Code: 
#header
 {
  background-image: url(images/header.png);
  width: 990px;
  height: 186px;
 }
 
#content
 {
  background-image: url(images/content.png);
  width: 990px;
  height: 116px;
 }
 
#footer
 {
    clear: both;
    width: 990px;
    height: 94px;
    margin: 0;
    padding: 30px 0 25px 0;
    background: url(images/footer.png) no-repeat left top;            
    color: #000000;    
    text-align: center;    
 }

#main
 {
    float: left;
    background: url(images/content.png);
    width: 990px;
    padding: 0; margin: 0 0 0 0px;
 }

ul#navigation
 {
  width: 100px;
  margin: 2em;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
 }
ul#navigation li
 {
  margin: 0;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid #ccc;
 }

ul#navigation li a
 {
  display: block;
  height: 22px;
  width: 100px;
  padding-top: 4px;
  background: ;
  text-decoration: none;
  color: #eaeaea;
 }

ul#navigation li a:hover
 {
  background-color: ;
 }

#logo
 {
  position: absolute;
  background-image: url(images/logo.png);
  width: 200px;
  height: 200px;
  top: 150px;
 }
 
#center
 {
  width:990px;
  margin:0 auto;
  min-height:396px;
 }
 
p#inhalt
 {
  position: relative;
  width: 700px;
  margin: 0 0 0 200px;
 }
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
  <link rel="stylesheet" href="css.css" type="text/css" />
   <title>
    Snooze
   </title>
 </head>
 <body bgcolor="#2f2f2f">
  <div id="center">
  <div id="header">
  </div>
  <div id="main">
   <ul id="navigation">
    <li><a href="index.html"> Home </a>
    <li><a href="grafiken.html"> Grafiken </a>
    <li><a href="teeworlds.html"> Teeworlds </a>
    <li><a href="trackmania.html"> Trackmania </a>
    <li><a href="racinglive.html"> Racing Live </a>
    <li><a href="diablo2.html"> Diablo 2 </a>
    <li><a href="partner.html"> Partner </a>
    <li><a href="kontakt.php"> Kontakt </a>
    <li><a href="impressum.html"> Impressum </a>
   </ul>
   <p id="inhalt"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer </p>
  </div>
  <div id="footer">
   <p>
    © 2010 <strong>Snooze</strong>
    &nbsp;|&nbsp;
    Design by : <a href="http://www.snooze.de.tp">Snooze</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <a href="index.html">Home</a>&nbsp;|&nbsp;
     <a href="kontakt.php">Kontakt</a>&nbsp;|&nbsp;
     <a href="impressum.html">Impressum</a>
   </p>            
  </div>
  </div>
 </body>
</html>
 
Zuletzt bearbeitet:
Habs auch so geschafft :D
Sitzt nun alles richtig.
Vllt nochmal Grafiken verbessern aber ansonsten k.
Thx für eure Hilfe ^^
www.snooze.de.tp
Scheiß bplaced ist wieder down ey :/
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben