Photoshop-Cafe.de :: Dein Photoshop-Forum - Meine Homepage Meine neue Website

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)

- Lounge (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=15)

- -

Meine neue Website (https://www.photoshop-cafe.de/forum/showthread.php?t=16854)

Zitat:

Zitat von kgs-photos (Beitrag 266443)

Den Streifen sehe ich im aktuellen Opera aber auch,

Also ich habe soeben Opera gecheckt, meiner ist aktuell.. Gemäss Update-Verzeichnis ist 12.10 die aktuellste Version und ich habe eben auch noch einmal geschaut, aber ich sehe beim besten Willen keinen Streifen.
Falls du wirklich einen hast, dann läge es doch nicht nur an Firefox. Überprüf' doch noch einmal deine Version. :)
Holger verwendet auch den Opera, ich denke, er hätte sonst auch etwas gesagt.

Die Seite ist ja echt gut gelungen und sieht auch ansprechend aus. Und die Tierchen sind ja sowas von knuffig.... :)

Was den Streifen angeht.. ich hab mal mit Firebug nachgesehen und das hier gemacht:

#kopfbereich {
margin-bottom: -4px;

Dort sind -3px deklariert. Bei -4px verschwindet der Streifen im Firefox.

Zitat:

Falls du wirklich einen hast, dann läge es doch nicht nur an Firefox.

Doch.. das kann durchaus sein da die Interpretation verschiedener Browser auch leicht verschieden sein kann. Ich erlebe das sehr oft.

Zitat:

Zitat von uwe367 (Beitrag 266454)

Dort sind -3px deklariert. Bei -4px verschwindet der Streifen im Firefox.

Ja klar!
Aber warum sollte hier überhaupt ein negativer margin nötig sein???
Hier liegen zwei DIVs direkt übereinander, per Star-Selector wurden margin und padding auf 0 gesetzt.
Daher begreife ich nicht einmal die Notwendigkeit der -3px???

Zitat:

Zitat von dorftrottel (Beitrag 266451)

... Update-Verzeichnis ist 12.10 die aktuellste Version und ich habe eben auch noch einmal geschaut, aber ich sehe beim besten Willen keinen Streifen.

Danke.
Ich hatte noch 12.02, aber jetzt mit 12.10 sieht das bei mir so aus:

https://www.photoshop-cafe.de/bildupload/pics/sonst/1352834132_knuff.jpg

Ganz einfach Jenny. Schau dir mal an wo der Wrapper beginnt. Der beginnt unter dem Headbereich, also im Contentbereich. Eigentlich sollte der Wrapper das alles umschließende DIV sein in dem sich die anderen DIV´s befinden. Dann braucht man auch nicht mit negativen margins zu arbeiten. Ich denke daß hier das Hauptproblem liegt da es hier kein alles umschließendens DIV gibt und da können Browser schonmal Probleme machen.

Zitat:

Zitat von uwe367 (Beitrag 266459)

Eigentlich sollte der Wrapper das alles umschließende DIV sein in dem sich die anderen DIV´s befinden.

Sicher, das ist mir auch klar! Und mein Hauptverdächtiger ist auch das "position" im #wrapper, aber dennoch: Warum laufen diese beide DIVs 3-4px auseinander?

An alle: Habt ihr eure Ansicht alle auf 100% (Strg+0 in den meisten Browsern)?

Zitat:

Warum laufen diese beide DIVs 3-4px auseinander?

Und genau an diesem Punkt sind Browser sehr empfindlich, das ist jedenfalls meine Erfahrung. Hat man kein umschließendes DIV, so interpretieren die Browser teilweise was sie wollen, nur nicht das was man will. Der eine stellts richtig dar, der andere haut dir einen Abstand rein obwohl keiner deklariert ist.

Ich denke das liegt an den unterschiedlichen Standarts der Browser, es gibt ja, meines Wissens nach, keine "Norm" wie die Darstellung zu erfolgen hat.

Zitat:

Zitat von uwe367 (Beitrag 266462)

es gibt ja, meines Wissens nach, keine "Norm" wie die Darstellung zu erfolgen hat.

Korrekt! Deshalb ist hier ja das +*Hacken auch offiziell erlaubt! :emo_biggr

@goliath:
Also versuch mal, einen Aussenrum-Wrapper zu etablieren.
MMn kannst du die Breite auch auf 980px erhöhen, denn unter 1024px fährt heutzutage kein Mensch mehr!
(Und wer's dennoch tut, der hat eine gewisse Strafe verdient...:bleh:)

Hier mal ein einfaches Beispiel eines zweispaltigen Layouts nach der Faux Columns Regel:

HMTL

Code:

<body>



   <!-- Begin Wrapper -->

   <div id="wrapper">

   

         <!-- Begin Header -->

         <div id="header"></div>

                 <!-- End Header -->

                 

                 <!-- Begin Navigation -->

         <div id="navigation"></div>

                 <!-- End Navigation -->

                 

         <!-- Begin Faux Columns -->

                 <div id="faux">

                 

                       <!-- Begin Left Column -->

                       <div id="leftcolumn">

                 

                             

                 

                       </div>

                       <!-- End Left Column -->

                 

                       <!-- Begin Right Column -->

                       <div id="rightcolumn">

                      

                       

                           <div class="clear"></div>

                           

                       </div>

                       <!-- End Right Column -->

                           

                   <div class="clear"></div>

                           

         </div>           

         <!-- End Faux Columns --> 

                 

   </div>

   <!-- End Wrapper -->

</body>

CSS:

Code:

* { padding: 0; margin: 0; }



body {

 font-family: Arial, Helvetica, sans-serif;

 font-size: 13px;

}

#wrapper {

        margin: 0 auto;

        width: 1000px;

}

#faux {

        margin-bottom: 10px;

        overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */

        width: 1000px;

        background-image: url();

}

#header {

        color: #333;

        width: 1000px;

        padding: 0px;

        height: 230px;

        margin: 10px 0px 0px 0px;

        background: #D1DBDB;

        background-image: url();

}

#navigation {

        color: #333;

        padding: 0px;

        margin: 0px 0px 0px 0px;

        background: #ABBEBE;

        width: 1000px;

        background-image: url();

}

#leftcolumn {

        display: inline;

        color: #333;

        margin: 10px 0 0 10px;

        padding: 0px;

        width: 170px;

        float: left;

}

#rightcolumn {

        float: right;

        color: #333;

        margin: 10px;

        padding: 0px;

        width: 790px;

        display: inline;

        position: relative;

}

.clear { clear: both; background: none; }

Ich habe den Abstand jetzt erstmal auf -4px gesetzt, wenn es jetzt funktioniert, wäre das Leck erst mal geflickt. Ansonsten muss ich mal ein bißchen rumprobieren. Bei der Breite, habe ich bewußt 800px gewählt, ich dachte da mehr an Smartphones und Co. Jetzt noch die Breite zu ändern ist eine Schweinearbeit. Nicht wegen des Css, sondern wegen der Grafiken, die alle angepaßt werden müssen. Das ist mal was für ein verregnetes Wochenende. Würde mich jetzt noch mal interessieren, ob es bei euch funktioniert, denn wie gesagt in meinem Firefox sehe ich nichts.

Gruß Alexander