zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Komplexes CSS Layout - kann man das so machen? Browserproble

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.03.2005, 12:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2005
Beiträge: 6
jensemuc befindet sich auf einem aufstrebenden Ast
Standard 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:

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...
Grüße, Jense
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.03.2005, 14:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard 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...
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.03.2005, 14:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2005
Beiträge: 6
jensemuc befindet sich auf einem aufstrebenden Ast
Standard Code

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
Mit Zitat antworten
  #4 (permalink)  
Alt 02.03.2005, 16:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.03.2005, 23:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2005
Beiträge: 6
jensemuc befindet sich auf einem aufstrebenden Ast
Standard

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)


In Opera und IE6 schauts super aus:


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
Mit Zitat antworten
  #6 (permalink)  
Alt 03.03.2005, 09:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Freut mich, das ich Dir helfen konnte.

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.
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
Tool in CSS Layout einbauen chris_54 CSS 10 07.11.2013 21:23
Job zu vergeben. HTML Layout -> CSS Layout tabstop Offtopic 0 12.05.2008 18:55
css layout problem fz21z CSS 0 30.01.2008 22:41
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04
Layout: Tabelle -> CSS | ohne Schönheitsfehler? Knickedi CSS 20 05.08.2006 02:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:29 Uhr.