zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bitte um Hilfe zu flexiblem layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.09.2010, 17:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2006
Beiträge: 62
thorpi befindet sich auf einem aufstrebenden Ast
Standard bitte um Hilfe zu flexiblem layout

Hallo Forum,
ich habe ein flexibles Layout gebastelt - Total Validator sagt 0 Fehler - und es klappt im FF3.6.8, IE 7 und 8 (und mit ganz kleinem Fehler IE 6) sowie Opera10.61.
Chrome und Safari haben ein Problem: mein rechter Rand wird nach innen geschoben und verkürzt den Inhalt-div.
Kann mir bitte jemand helfen, das Problem zu lösen?
Mein CSS (normal):
Code:
body  { font: 100.01% Arial, Verdana, Helvetica, sans-serif;
        background: #e7fcef;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #000000; }

body, html { height: 100%; }

#container { width: 90%;
             background: url(images/bg_content.jpg) top left repeat-y;
             margin: 0 auto;
             border: 1px solid #000000;
             text-align: left;
             overflow: hidden;
             border: 2px solid #00f;
             min-width: 1024px; }

#header { width: 100%;
          position: static;
          background: url(images/header_neu.jpg) top left no-repeat;
          padding: 0;
          height: 130px;
          text-align: right;
          overflow: hidden;
          margin-right: 40px;
          z-index: 1; }

#bild { position: static;
        z-index: 2; }

#header h1 { margin: 0;
             padding: 40px 0 0 50px;
             visibility: hidden; }

#navigation { position: relative;
              margin-top: -86px;
              margin-bottom: 10px;
              height: 70px;
              z-index: 9;
              text-align: right; }

#navigation ul { position: static;
                 height: 70px;
                 list-style: none;
                 margin: 0px 45px 0 0;
                 padding: 0;
                 z-index: 10;  }

#navigation ul li { position: static;
                    width: 100px;
                    height: 70px;
                    display: block;
                    float: right;
                    list-style: none;
                    margin: 0;
                    margin-right: 5px;
                    padding: 0;
                    background: #ff0;
                    line-height: 70px;
                    border: 1px solid 090;
                    z-index: 11; }

#navigation ul li a { display: block;
                      float: left;
                      width: 100px;
                      height: 70px;
                      margin: 0 0 0 1px;
                      padding: 3px 10px;
                      text-align: center;
                      background: #eee;
                      color: #000;
                      text-decoration: none;
                      position: static;
                      left: 15px;
                      line-height: 70px;
                      z-index: 12; }


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

#navigation ul li a.active,
#navigation ul li a.active:hover { color: #fff;
                                   background: #000;
                                   font-weight: bold; }

#navigation ul li a span { display:block; }

#sidebar { float: left;
           width: 365px;
           background: url(images/bg_links.jpg) top left repeat-y;
           padding: 1em 1em 0 1em; }


#left { padding: 0 2em 0 3.5em; }

#sidebar #left h2 { font-size: 0.9em;
                    font-weight: bold;
                    padding-left: 15px;
                    display: inline; }

#sidebar #left p.holz { margin-top: 3px;
                        margin-left: 50px;
                        font-style: italic;
                        color: #090; }

#content { position: static;
           margin-left: 365px;
           margin: 0px 0px -20px 365px;
           padding: 0 2em 0 0;
           background: #cef6dd url(images/rand_rechts.jpg) top right repeat-y;
           overflow: hidden; }

#content h1 { font-size: 1.2em;
              margin-top: 1em; }
#content h2 { font-size: 1em; }

#footer { height: 40px;
          padding: 0 0 0 10px; 
          background: url(images/bg_footer.jpg) no-repeat;
          text-align: left; }

#footerbild { position:relative;
              width: 709px;
              float: right;
              background: url(images/footer_rechts.jpg) top right no-repeat; }

#impressum { position: absolute;
             margin-top: -140px;
             margin-left: 80px;
             font-size: 0.8em;
             text-align: left; }

#footer p { margin: 0;
            padding: 10px 0; }

#footerright { width: 100%;
               height: 40px;
               margin-top: 0px;
               text-align: right;
               background: url(images/footer_rechts.jpg) top right no-repeat; }
und IE:
Code:
#content { postion: static;
                margin-bottom: 0px;
                padding-bottom: 10px; }
zu sehen und vergleichen ist das ganze hier
Vielen Dank für Eure Hilfe
thorpi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.09.2010, 17:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

overflow:hidden ohne Breite mit Margins neben einem Float gehört zu den Dingen, die man nicht machen sollte, wenn man browserübergreifend konsistente Darstellung will.
Nimm overflow weg bei #content.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.09.2010, 18:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2006
Beiträge: 62
thorpi befindet sich auf einem aufstrebenden Ast
Standard

Hallo fricca, danke schon mal.
Safari packt es jetzt, Chrome noch nicht.
Jetzt gibt es dafür bei den anderen noch kleine weiße Stellen ohne Inhalt - aber die könnte ich vielleicht auch noch wegbekommen (durch probieren, denke ich).
Oder ich muss eben auf den Rand mit Schatten verzichten - dann muss ich nicht so viel mit den divs und bild links und rechts fummeln?
Gruß
thorpi
Mit Zitat antworten
  #4 (permalink)  
Alt 02.09.2010, 18:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von thorpi Beitrag anzeigen
Jetzt gibt es dafür bei den anderen noch kleine weiße Stellen ohne Inhalt - aber die könnte ich vielleicht auch noch wegbekommen (durch probieren, denke ich).
Suchfunktion: "collapsing margins"
Mit Zitat antworten
  #5 (permalink)  
Alt 02.09.2010, 18:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2006
Beiträge: 62
thorpi befindet sich auf einem aufstrebenden Ast
Standard

Das hab ich mir ausgedruckt und werde es mir zu Gemüte führen.
Aber ob das für den Chrome hilft weiß ich erst mal nicht. Chrome-Besucher machen auf meiner Seite ca. 3% aus - kann ich vielleicht vernachlässigen. Aber ist einer dabei, der etwas von mir will - pustekuchen.
Trotzdem erst mal Danke.
thorpi
Mit Zitat antworten
  #6 (permalink)  
Alt 02.09.2010, 19:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Was ist denn in Chrome? Ich sehe kein Problem -- zumindest kein anderes als in FF und Safari.
Wenn du immer noch den rechten Abstand haben solltest dann leer mal den Cache.
Mit Zitat antworten
  #7 (permalink)  
Alt 02.09.2010, 19:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2006
Beiträge: 62
thorpi befindet sich auf einem aufstrebenden Ast
Standard

Das wars - nach Cache leeren ist es bei Chrom genau wie bei den anderen.
Nun werde ich das mit den margins austüfteln.
Danke - wenn ich es geschafft habe melde ich mich noch mal.
Mit Zitat antworten
  #8 (permalink)  
Alt 03.09.2010, 16:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.09.2006
Beiträge: 62
thorpi befindet sich auf einem aufstrebenden Ast
Blinzeln

Problem gelöst:

Hinweis von fricca zum overflow,
Code:
* { margin: 0; padding: 0; }
eingefügt und dem content ein negatives margin-top von 3px gegeben und alles passt bestens.
Vielen Dank nochmal
thorpi
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauch Hilfe - mein Layout zerreißts beim Zoomen Sakul CSS 3 18.03.2011 05:35
Bitte um Layout hilfe gunnar_hst CSS 0 20.06.2010 15:57
Layout selbst coden - Hilfe ! kgsbm CSS 3 25.03.2008 20:25
Brauche Hilfe beim 2-Spaltigen Layout Kaimane CSS 1 15.08.2007 01:10
Hilfe 3 Spaltiges Layout mit 100% höhe sydios CSS 12 15.06.2007 04:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:25 Uhr.