Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: 100% Breite von div-boxen

  1. #1
    König(in)
    Registriert seit
    27.01.2007
    Beiträge
    1.059
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 100% Breite von div-boxen

    Hallo,


    habe folgendes Problem:
    Ich habe eine Webseite gemacht, bei der sich der Header über die ganze Breite der Seite ausdehnen soll und sich auch anpassen soll, bei einer geringeren Auflösung.

    Soweit kein Problem, nur dummerweise besteht dieser header nicht nur aus einem div, sondern gleich aus 4. Einer oben, der den oberen Teil des Bildes enthält, einer links unten, der einen kleinen Teil des Bildes enthält, der in der mitte unten, der eine Newsbox enthält und noch einer rechts unten, der die Navigation enthält.

    Hierbei soll sich der obere div anpassen und der unten rechts.

    Die Probleme sind:

    -IE 6 zeigt es falsch an. (Grund: Interpretiert min-width falsch und width+border stimmt nicht, ist aber kein problem, wird durch hacks gelöst)

    -IE 7 zeigt es falsch an. (Grund: Ebenfalls width+border falsch, wird auch durch hacks gelöst)

    -FF zeigt es richtig an, aber nur bei 1280*1024, was ich mal als Maximalgröße des Bildes genommen habe. Wenn man das Fenster verkleinert, oder wenn man von Anfang an eine kleinere Auflösung hat, verkleinert sich nur der obere Teil des Bildes, der Teil unten rechts bleibt gleich. Ich vermute, dass es daran liegt, dass der Teil sich auf 100% ausdehnt, allerdings die zwei divs auf der linken Seite nicht beachtet.

    Ich weiß nicht wie ich es lösen soll. Eine Lösung (nur für FF) wäre, einfach im body "overflow:hidden" anzugeben, dann würde es richtig angezeigt werden. Allerdings könnte man dann ja auch nicht mehr vertikal scrollen.


    Hier der Link:

    http://www.gamling.kilu3.de/template1/index.html


    Hier die CSS Datei:

    Code:
    body {
                 max-width:1280;
                 }
    
    #navi_oben {
                 position:absolute;
                 top:0px;
                 right:0px;
                 background-image:url(../images/navi_oben.png);
                 width:360px;
                 height:38px;
                 }
    
    #header {
                 position:absolute;
                 top:38px;
                 left:0px;
                 right:0px;
                 margin:0px;
                 padding:0px;
                 background-image:url(../images/header.png);
                 background-repeat:no-repeat;
                 width:1278px;
                 max-width:100%;
                 height:120px;
                 border-top:1px solid black;
                 border-left:1px solid black;
                 border-right:1px solid black;
                 overflow:hidden;
                 }
    
    #unten_links {
                  position:absolute;
                  top:158px;
                  left:0px;
                  background-image:url(../images/unten_links.png);
                  width:71px;
                  height:144px;
                  border-left:1px solid black;
                  border-bottom:1px solid black;
                  }
    
    #news_aussen {
                  position:absolute;
                  top:158px;
                  left:72px;
                  background-image:url(../images/news.png);
                  background-repeat:no-repeat;
                  width:247px;
                  border-left:1px solid #000000;
                  border-top:1px solid #000000;
                  border-bottom:1px solid #000000;
                  border-right:1px solid #000000;
                  height:575px;
                  }
    
    #news_innen {
                  position:absolute;
                  left:1px;
                  top:1px;
                  border:1px solid #5a5a5a;
                  width:240px;
                  padding-left:3px;
                  height:571px;
                  }
    
    #header_unten {
                   position:absolute;
                   top:159px;
                   left:321px;
                   background-image:url(../images/header_unten.png);
                   background-repeat:no-repeat;
                   width:959px;
                   max-width:100%;
                   height:144px;
                   overflow:hidden;
                   }
    
    #content {
                   position:absolute;
                   top:302px;
                   left:321px;
                   }
    
    #news_head {
                  margin:0px;
                  background-image:url(../images/news_icon.png);
                  background-repeat:no-repeat;
                  padding-left:16px;
                  font-size:17px;
                  font-family:times, verdana, arial;
                  font-style:italic;
                  color:#da6434;
                  padding-top:0px;
                  padding-bottom:4px;
                  }
    
    .strich {
                  margin:0px;
                  padding:0px;
                  border:0px;
                  padding-bottom:4px;
                  }

    Vielen Dank für eure hilfe schonmal

    mfG

    Gamling
    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 !!!!!
    In meinem Webdesign-Blog! gibt es Hilfe zu Webdesign-Fragen und dem Betrieb von Websites!
    Webdesign preiswert aus Lörrach

  2. #2
    phpfan
    Gast

    Standard

    Der IE interpretiert min- und max-width nicht falsch, sondern garnicht.

    html, body { width: 100%; }

  3. #3
    König(in)
    Themenstarter

    Registriert seit
    27.01.2007
    Beiträge
    1.059
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    danke erstmal, mal schauen...

    garnicht, ist ja auch falsch ;D


    //edit: geht nicht, der untere kasten bleibt groß.
    In meinem Webdesign-Blog! gibt es Hilfe zu Webdesign-Fragen und dem Betrieb von Websites!
    Webdesign preiswert aus Lörrach

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

    Standard

    Ich kann dein Problem nicht so richtig nachvollziehen.
    Vermutlich willst du den linken und News-Teil fix haben.
    Deine Navi ist ja momentan noch keine, das wäre auch noch zu lösen.

    Wie sehe es denn so aus?
    width body und header nur 100%
    Für die drei unteren Divs verwendest du Breitenangaben, die insgesamt 100% ergeben. Kann zwar dazu führen, dass sich die Grafiken wiederholen, wäre aber mal auszuprobieren.

    Auf absolute Positionierung verzichten, statt dessen mit %-margin-Werten arbeiten.

  5. #5
    König(in)
    Themenstarter

    Registriert seit
    27.01.2007
    Beiträge
    1.059
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Für die drei unteren Divs verwendest du Breitenangaben, die insgesamt 100% ergeben. Kann zwar dazu führen, dass sich die Grafiken wiederholen, wäre aber mal auszuprobieren.
    Das Problem ist: die beiden linken divs sollen ja feste Breiten haben. Irgendwie bräuchte ich etwas dass mir 100%-Breite div links-breite div mitte für den rechten div ausgibt...

    Gamling

    //edit: möglichst ohne javascript halt...
    In meinem Webdesign-Blog! gibt es Hilfe zu Webdesign-Fragen und dem Betrieb von Websites!
    Webdesign preiswert aus Lörrach

  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

    Ist mir nichts bekannt, es sei denn man prüft mit Javascript die Bildschirmauflösung ab. Aber das soll ja nicht sein.
    Was spricht denn groß dagegen, den beiden div's keine Prozent-Breiten zu geben?

  7. #7
    König(in)
    Themenstarter

    Registriert seit
    27.01.2007
    Beiträge
    1.059
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hast du dir die seite mal angeschaut? Sie haben Hintergrundbilder...
    In meinem Webdesign-Blog! gibt es Hilfe zu Webdesign-Fragen und dem Betrieb von Websites!
    Webdesign preiswert aus Lörrach

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

    Standard

    Es ist zwar etwas verpönt, weil es zu Verpixelungen und Qualitätsverlusten kommen kann, wäre aber evtl. eine Lösung:
    Du verzichtest auf die Hintergrundbilder und fügst die Teile wieder zu einem Bild zusammen bzw. nimmst das Original.
    Dieses fügst du als image ein. Width- und height-Angaben in Prozent statt in Pixel. Damit passt es sich unterschiedlichen Auflösungen an.
    Die News-Spalte positionierst du über z-index über das Image. Bleibt möglicherweise noch das Problem mit dem oberen Background der News-Spalte.

    Wäre zumindest mal einen Versuch wert.

    Alternative: Verwende für das Layout eine fixe Seitenbreite.

  9. #9
    König(in)
    Themenstarter

    Registriert seit
    27.01.2007
    Beiträge
    1.059
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Die erst Möglichkeit versteh ich nicht so ganz.

    Meinst du einfach den gesamten header zusammenfügen und den Rest drüber?

    Die zweite Möglichkeit ist mir klar. :P


    Hm, also ich weiß nicht. Bist du dir ganz sicher, dass man es nicht irgendwie so lösen kann?

    Ich werd auf jeden Fall da noch rumprobieren, wenns nicht klappt nehm ich ne fixe Breite...


    HA Idee: Meinst du es würde gehen, wenn man das ganze auf 1024*768 Pixel optimiert und zentriert und dann mit z-index hinter den ganzen Kram nochmal den Header macht, so dass bei höherer Auflösung rechts und links nichts frei bleibt? Also ich glaub das dürfte gehen...

    mfG

    Gamling

    PS: Übrigens danke für deine Bemühungen
    In meinem Webdesign-Blog! gibt es Hilfe zu Webdesign-Fragen und dem Betrieb von Websites!
    Webdesign preiswert aus Lörrach

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

    Standard

    So etwa:
    Code:
    <div>
    [img]header.gif[/img]
    </div>
    <div style="position&#58;absolute;
                  top&#58;15%;
                  left&#58;72px;
                  background-image&#58;url&#40;../images/news.png&#41;;
                  background-repeat&#58;no-repeat;
                  width&#58;247px;
                  border&#58;1px solid #000000;
                  height&#58;575px;">news</div>
    <div style="margin-left&#58; 330px;">content</div>
    Die Prozentwerte für das img im Verhältnis der Pixelwerte berechnen.

    Wenngleich die News-Spalte dann "mitwandert". Wenn du allerdings Pixelwert für top nimmst, wird's noch schlimmer.

    Bei fixer Breite müsst du nur zentrieren. Links und rechts davon bleibt es leer bei höherer Auflösung. Also alles dann in einen div mit width 1024px packen.

Ähnliche Themen

  1. IE7 Hintergrundproblem in DIV Boxen
    Von Uwe1234 im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 28.05.2008, 21:36
  2. Rauschende Boxen!?
    Von Grinf4ce im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 13.10.2007, 16:59
  3. div boxen problem
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.09.2007, 23:16
  4. <div> Boxen anpassen
    Von webnewcomer im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 25.02.2006, 23:49
  5. css Boxen durcheinander
    Von Tony im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 24.11.2005, 16:00

Stichworte

Berechtigungen

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