XHTMLforum - Komplexes CSS Layout - kann man das so machen? Browserproble

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Komplexes CSS Layout - kann man das so machen? Browserproble (http://xhtmlforum.de/showthread.php?t=34599)

Komplexes CSS Layout - kann man das so machen? Browserproble

Hallo,
bin ein Neuling und hab natürlich auch gleich ein konkretes Neulingsproblem.
Ich brauche ein CSS-Layout als Vorlage für ein CMS. Von der Stuktur her soll es so aussehen:
http://chapter1.de/img/CSS_Konzept.gif
bzw. oberhalb und unterhalb von der Navi muss nochmal ein kleines DIV hin.

Kann mir vielleicht mal jemand sagen, wie ich das am Besten aufbaue?
Momentan versuche ich es damit:
#frame (Rahmen um alles, 780px)
#container1 mit 4 Divs, alle "float:right" (top-Div (Platzhalter über dem Content), logo-Div, content-Div, Visual-Div)
#container2 ("float:right") mit 3 DIVS: blackbar (float:left), homemenu (position:absolute) und menu (wird vom CMS absolut positioniert, aber ich wüsste gerne, wie man es im template an diese stelle bekommt, ausser mit position:absolute).

Kann man das so machen oder gibt es da klügere Lösungen? Bin neu auf dem CSS-Gebiet.

Mein Problem sind laut browsercam der Explorer5.2/MacOSX und Opera/MacOSX. Bei beiden verschiebt es den linken container UNTER den rechten, also container1 halblinks unter
container2. Opera verschluckt zudem auch unter Windows die mainnav. Unter Explorer 4.0/Win98 verschiebt es den content nach oben und schiebt den Banner darunter.
Wenn jemand von den Profis hier a.) einen Kommentar zum Aufbau und b.) eine Idee hat, wie man die Browserprobs löst, würde ich mich sehr freuen! Ich denke mal, irgendwie wird das "frame-DIV" zu schmal und dann zerschießt es das Layout. Mache ich es aber breiter, stimmt der Abstand zwischen dem blackbar und dem Banner/Visual nicht mehr.
Gibts nicht ne Möglichkeit 7 Spalten nebeneinander zu positionieren, wobei die linken 3 Spalten 2 "Rows" haben (Content, Logo und Banner/Visual), dann 3 Spalten mit 1 Row (blackbar und spacer links und rechts davon), dann 1 oder 2 Spalten mit 3 Rows (2 Navigationen)? CSS ist so anders als Tabellenlayout...

Wenns jemand interessiert, poste ich auch gerne meinen kompletten Code, möchte nur nicht gleich mit so einem kilometerlanegen Bitte-Hilfe-Posting hier im Forum einsteigen... :roll:
Grüße, Jense

Re: Komplexes CSS Layout - kann man das so machen? Browserpr

Zitat:

Zitat von jensemuc

Wenns jemand interessiert, poste ich auch gerne meinen kompletten Code, möchte nur nicht gleich mit so einem kilometerlanegen Bitte-Hilfe-Posting hier im Forum einsteigen... :roll:
Grüße, Jense

Moinsen,

wenn Du den Code auf das runterbrichst, was im Screenshot zu sehen ist, ist es sicherlich nicht kilometerlang, aber leichter für andere sich damit zu beschäftigen. Ansonsten ein Tipp: http://intensivstation.ch/css/template.php

HAllo mazzo,
danke schonmal für den Link, das sind schonmal super beispiele.
Und hier ist mein Code (nur das nötige)

Code:

<head>

<style type="text/css">

        body, textarea {

        margin-top:20px;

        margin-left:50px;

     }     

     



/* CSS Layout

----------------------------------------------- */

#frame {

        width:790px;

        }

        

#top {

        height: 80px;

        float:right;

        width: 420px;  

        }



#logo {

        width: 178px;

        height: 80px;

        float:right;

            background-image:url(res/e2_logo.gif);

           background-repeat: no-repeat;

        }



#container1 {

        height: 580px;

        width: 600px;

        }

        

#main {

           height: 370px;

           width: 420px;

           border: 1px solid #D7D7D7;

        float: right;

        overflow: auto;

           }        



#spacer {

        height: 400px;

           width: 2px;

           float: right;

        }



#banner {

        height: 400px;

           width: 178px;

        text-align:center;

           float: right;

        }



#blackbar {

        height: 500px;

           width: 8px;

        float:left;

        background-image:url(res/blackbar.gif);

        background-repeat: repeat-y;

        }        



#container2 {

        height: 400px;

           width: 185px;

           float: right;

        }        



#homenav {

        position:absolute;

        top:80px;

        right:140;

        height: 30px;

           width: 180px;

        }         



#mainnav {

        height: auto;

           width: auto;

           float: left;

        }         



.pagetitle {

        margin: 10px;

        }   

.content {

        margin: 10px;

        }  



</style>

</head>





/* HTML

----------------------------------------------- */



<body>

<div id="frame">

<div id="container2">

<div id="blackbar">

</div>

<div id="mainnav">

</div>

<div id="homenav">

</div>

</div>

<div id="container1">     

<div id="logo">

</div> 

<div id="top">

</div>

<div id="banner">Visual/Intro/Banner</div>

<div id="main">

     <div class="pagetitle">Pagetitle</div> 

     <div class="content">Content</div> 

</div>

</div>

</div>





<br clear="all" />

</p>

</body>

</html>

Wie gesagt, CSS-Novize, bitte nicht auslachen... Das ist alles ein bisschen nach dem Trial and Error-Prinzip entstanden.
Danke!
Gruß,
Jens

folgendes ist wirklich dahin-gehackt und sicherlich optimierungsfähig, vor allem die Schachtelung in "top" ist auf die Schnelle geschehen und gefällt mir noch nicht. Wenn in "top" nur ne Grafik rein soll ist das als Hintergrundbild machbar und dann mit padding-top auf das darin/darunterliegende DIV anzupassen. Nur grob getestet in IE6 und Opera7.54.

Code:

<html>

<head> 

<title>TEST </title>

<style type="text/css"> 

*{

        margin: 0;

        padding: 0;

}

body        {

        text-align: center;

        font-family: "Verdana", "Arial", sans-serif;

        font-size: 100.01%;

        line-height: 1.45; /*keine Einheiten, da diese sonst kaskadieren*/

        background-color: #CCCCCC;

        color: #000000;

        height: 100%;

        text-align: center;

}



#frame { 

   width:790px; 

   background-color: #AAAAAA;

   margin: auto;

   } 

    

#top { 

   float:left; 

   width: 420px;  

   background-color: #DDDDDD;

   padding-top: 80px;

   /*BG-Image mit background-repeat: no-repeat einsetzen*/

   } 



#logobanner { 

   width: 178px; 

   height: 480px; 

   float:left; 

   background-image:url(res/e2_logo.gif); 

   background-repeat: no-repeat; 

   background-color: #BBBBBB;

   } 



#container2 { 

   height: 400px; 

   width: 185px; 

   float: left; 

   background-color: #FFFFFF;

         border-left: 8px solid #000000; /*Wahlweise als border-right am container1*/

   }    

#main { 

   height: 370px; 

   width: 100%; 

   overflow: auto;

   background-color: #ABDCEF;

   } 

#pagetitle { /*jetzt als ID*/

         background-color: #AABBFF;

   width: 100%;

   /*margin entfernt, wenn drumrumliegendes DIV nen border braucht, 

   kannst Du den auch direkt den beiden DIVS pagetitle und content verpassen*/

   border: 1px dotted #FFFF00;

   border-bottom: none;

   }    

#content { /*jetzt als ID*/

   width: 100%;

   background-color: #FF00FF;

   border: 1px dotted #FFFF00;

   border-top: none;

   }  



</style> 

</head> 



<body> 

<div id="frame">

        <div id="top">top

                <div id="main">

                        <div id="pagetitle">Pagetitle</div>

                  <div id="content">Content</div>

          </div>

        </div> 

        <div id="logobanner">logo, darunter Banner m&ouml;glich</div> 

        <div id="container2">

                container2 f&uuml;r Navi

                Hier kann man auch 2 weitere DIVS einbauen, wenn die Navi so unterteilt werden muss, das geht aber auch mit z.B. 2 Listen

                eine f&uuml;r die &quot;mainnav&quot; und eine f&uuml;r die &quot;pagenav&quot;

        </div> 

</div> 

</body> 

</html>

Schau mal rein, ich hab einiges ausgemistet und zur Verständlichkeit immer BG-Farben angebeben, einige Kommentare findest Du im CSS.
Wichtig ist, DIVs immer eine Breite mitzugeben. Wenn Du Hintergrundbilder benutzt ist eine BG-Farbe für das entsprechende DIV auch sinnvoll, es gibt ja auch langsame Internet-Verbindungen...

Desweiteren hab ich global alle paddings und margins auf 0 gesetzt (abweichende Anpassungen geschehen dann im entsprechednen Bereich) und den von ulle oder toschi (?) favorisierten body-style eingegeben. Der Kommt jedenfalls aus diesem Forum.

Ebenfalls bedenkenswert ist eine relative Breite (in %), einzelne DIVs, die an Grafiken angepasst sind, kannst Du darin ja fix machen.

Absolut genial! Bin begeistert. Vielen, vielen Dank für die komplette Code-Bearbeitung und die Tipps! Da wurschtelt man ne halbe Ewigkeit rum, und wenn einem dann jemand zeigt wie es geht, ist das ein sensationeller Aha-Effekt. Auch das Problem mit dem schwarzen Balken ist sehr elegant gelöst!

Also: Es schaut schon fast perfekt aus, läuft in allen modernen Browsern gut. Die DHTML-HauptNavigation, die im Opera immer komplett ausgefallen ist, habe ich ausgetauscht gegen ein standardmäßiges-grafisches Menü (das ganze ist ja ein Template für ein Typo3 CMS)

Jetzt habe ich noch genau ein Problem:
1. Firefox 1.0.1: Irgendwie rendert der das main-Div und das content DIV falsch. Effekte: - border rechts wird verschluckt
- Text läuft auf über 100% Breite -> overflow:auto erzeugt einen scrollbar (siehe Bild1)
http://www.chapter1.de/img/e2_ss_firefox.jpg

In Opera und IE6 schauts super aus:
http://www.chapter1.de/img/e2_ss_opera.jpg

Das content-DIV ist übrigens container für ein weiteres DIV, das als auswechselbares Content-Template vom CMS eingefügt wird.
In der ausgegebenen Seite sieht der Quelltext so aus:

Code:

     <div id="main">

         <div id="pagetitle">[img]typo3temp/GB/8ebbb9ceda.png[/img]</div>

        <div id="content">



<div id="contentsection">

        <div id="colNormal">

        

                <a name="3"></a>

                

                        <div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Subpage 1</h1>

[img]clear.gif[/img]

</div>

                

                        

                

                        <p class="bodytext">Lets test the second page!!</p>

                

                        

        

                </div>

</div>

</div>

     </div>

Ich werde noch ein wenig rumprobieren und die Intensivstation-TPLs nochmal unter die Lupe nehmen. Und nochmal Danke!
Gruß,
Jens

Freut mich, das ich Dir helfen konnte. :D

Genaues kann ich Dir zu Deinem aktuellen Prob nicht sagen wenn der Code nicht vorliegt (ich hab hier z.Z. eh keinen FF zum testen), aber overflow: auto erzeugt natürlich scrollbars wenn die Breite oder Höhe "überläuft", das ist ja der Sinn dieser Formatierung. Letzlich solltest Du nochmal genau die Breiten der DIVs berechnen und überprüfen, ob das zum äusseren passt. Es gibt im Archiv sicher haufenweise Problembeschreibungen und Lösungen wie mit sowas umzugehen ist.

Eventuell hilft es Dir das "Problem-DIV" mal um einiges schmaler zu machen und dann schrittweise zu beobachten wie sich der Border und der overflow verhält.