Ergebnis 1 bis 7 von 7

Thema: Div-Problem

  1. #1
    HTML Newbie
    Registriert seit
    02.11.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div-Problem

    Hallo,
    versuche gerade eine Seite die ich mithilfe von Photoshop designed habe zu verwirklichen.
    Im großen und ganzen sollte diese so aussehen:



    Habe nun versucht die einzelne Elemente in Div-Container zu verschachteln, was im oberen Teil (Nav+Header) der Seite auch gut funktionierte.

    Jetzt sieht es also folgendermaßen aus:


    Wie ihr aber wahrscheinlich seht habe ich dort 2 Probleme. Erstens Will ich dass der Content mind. die restliche Seite des Browserfensters ausfüllt. Habe dass schon mit 100% height versucht, aber will irgednwie nicht funktioneren. Das zweite Problem wäre der Rand zwischen Header und Content..Lässt sich dass irgendwie mit margin beheben? Wenn ja, wie?

    Hier noch mein Quelltext:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>FMG - Unikat</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <center>
    <div class="container1">
    <div class="nav">
    <div class="header">
    </div>
    </div>
    </div>
    <div class="container2">
    <div class="content">
    <p>Inhalt</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>
    </center>
    </body>
    </html>

    Und mein CSS-File:

    .container1 {
    width:100;
    height:400px;
    background-image:url(images/bg.gif);
    background-repeat:repeat-x;
    }
    .nav {
    width:980px;
    height:120px;
    }
    .header {
    background-image:url(images/header.gif);
    background-repeat:no-repeat;
    width:980px;
    height:280px;
    position:absolute;
    top:120px;
    left:auto;
    }
    .container2 {
    background-color:#E9E9E9;
    width:100;
    height:auto;
    }
    .content {
    background-color:#FFF;
    width:980px;
    height:auto;
    }


    Könnt ihr mir helfen?

    Viele Dank schonmal..
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div-Problem

    Hier fehlt eine Maßeinheit beim width-Wert:
    .container1 {
    width:100;
    height:400px;
    background-image:url(images/bg.gif);
    background-repeat:repeat-x;
    }
    Wenn es 100% sein sollen, dann fehlt ein Bezugspunkt, worauf sich diese beziehen.
    Definiere dann also noch für html und body 100% Breite.

    Wozu und warum verwendest du absolute Positionierungen?

    Die margin-Angaben für body solltest du per CSS hinterlegen.
    Der center-Tag ist veraltet. Zentriere besser so: http://www.ohne-css.gehts-gar.net/0001.php

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    02.11.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div-Problem

    Wie ist das gemeint mit dem Bezugspunkt?
    Ich habe ja im Prinzip 2 Divs mit einer 100%igen Breite, einmal der im oberen Teil, sprich Navi+Header, der in der Höhe bis 400px reichen sollte. Und anschließend sollte der zweite Div (container2) ab 400px bis auto bzw. mind. Fensterrand reichen. Wie kann ich den "Bezugspunkt" herstellen?


    Danke schonmal!

    Gruß

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Div-Problem

    der bezugspunkt ist dabei ein eltern-element, am besten schreibste im css sowas wie:
    Code:
    body{
    height:101%;
    width:100%;
    padding:0;
    margin:0;
    border:0;
    }
    so haste den bezugspunkt und direkt eiune browser-nullung (die hilft dabei wenn elemente eigentlich eigene abstände out of the box haben)
    dann is
    Code:
     position:absolute;
    totaler humbug, wenn man damit nicht umzugehen weiß.
    lass des alles mal raus und benutze lediglich padding und margin zum positionieren.
    willst elemente neben einander haben, dann mach
    Code:
     float:left;
    oder
    Code:
    float:right;
    und sobald du mit floaten fertig bist machste nen br und gibst dem ding nen
    Code:
     clear:both;
    mit.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    02.11.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div-Problem

    Okay, habe mein komplettes Konzept nochmals überarbeitet.
    Hier das aktuelle:

    HTML:

    <body>
    <center>
    <div id="container">
    <div id="nav"></div>
    <div id="header"></div>
    <div id="content">aaaaaaa</div>
    </div>
    </center>
    </body>
    CSS:

    body {
    margin:0px;
    background-image:url(images/bg.gif);
    background-repeat:repeat-x;
    background-color:#E9E9E9;
    }
    #container {
    width:100%;
    height:400px;
    }
    #nav {
    width:980px;
    height:120px;
    }
    #header {
    background-image:url(images/header.gif);
    width:980px;
    height:280px;
    }
    #content {
    background-color:#FFF;
    width:980px;
    height:100%;
    }
    Meine beiden (hoffentlich letzten) Probleme sind nun folgende:
    1. Das Center-Attribut lässt sich irgendwie nicht ersetzen? Ich habe es schon mit der margin-Lösung versucht, es will aber irgendwie nicht.
    2. Zudem will mein eigentlicher Contentdiv, der die Hintergrundfarbe weiß hat nicht komplett bis zum unteren Fensterrand reichen, obwohl er auf 100% Höhe gesetzt ist. Browserabhängig ist dieser Abstand unterschiedlich groß.

    Wäre nett wenn ihr mir nochmals helfen könnt!

    Liebe Grüße

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div-Problem

    Du brauchst center nicht zu ersetzen, sondern kannst es löschen.
    Definiere dafür
    Code:
    #container { 
    width:980px;
    margin: 0 auto;
    }

    Zu 2:
    Das bekommst du so nicht hin.
    Die 100% richten sich am Elternelement aus. Somit musst du noch hinterlegen:
    Code:
    html, body {height: 100%;}
    Damit wird die Seite jedoch höher als 100% weil noch die Höhen von nav und header hinzukommen.
    CSS kann keine px von Prozentwerten subtrahieren.

    Versuch's insgesamt mal so (ungetestet):

    Code:
    html {
    height: 100%;
    width: 100%;
    }
    
    body {
    margin:0px;
    background-image:url(images/bg.gif); 
    background-repeat:repeat-x; 
    background-color:#E9E9E9;
    height: 100%;
    width: 100%;
    }
    #container { 
    width: 980px;
    margin: 0 auto;
    min-height: 100%;
    background: #fff;
    }
    
    #nav {
    height:120px;
    }
    #header {
    background-image:url(images/header.gif); 
    width:980px;
    height:280px;
    }
    Auf content kannst du prinzipiell auch noch verzichten. Dessen Inhalt kannst du direkt in container schreiben.

    Code:
    <body>
    
    <div id="container">
    <div id="nav"></div>
    <div id="header"></div>
    Inhalt
    </div><!--Ende #container-->
    
    </body>
    Du siehst: Weniger ist mehr!

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    02.11.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div-Problem

    Hat funktioniert!
    Musste noch im nav-Div den bg.gif neu definieren, da der weiße Content-Hintergrund im Nav überlappte. Jetzt funktionierts!

    Viele Dank,
    Gruß

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •