Probleme mit Seitenlayout!

Status
Nicht offen für weitere Antworten.
D

dreamer2007

Mitglied
Hallo Leute,

ich habe da mal eine Frage an CSS-Profis!

Ich möchte gerne ein Layout entsprechend dem angehängten Bild realisieren. Allerdings muss ich sagen ist mir CSS immernoch ein Buch mit sieben Siegeln. Zwar bekomme ich manchmal mein gewünschtes Ergebnis hin schau dann aber meine Seite mit einem anderen Brower an und das Layout sieht wieder ganz anders aus! Besonders Microsofts freie Interpretation der CSS Dateien, welche selbst unter den einzelnen IE Version zu anderen Ergebnissen führt, lässt mich schier verzweifeln.

Jetzt möchte ich euch mal fragen wie ihr das umsetzen würdet um eine möglichst große Browerkompatibilität zu erreichen.

Für eure Hilfe oder Hinweise wäre ich echt dankbar...


Gruß,

Dreamer
 

Anhänge

  • einteilung.JPG
    einteilung.JPG
    20,3 KB · Aufrufe: 29
Hi,

nicht verzagen, sondern Maik fragen :-)

Also, grundsätzlich bietet sich hier ein zweispaltiges Layout mittels der float-Eigenschaft an.

Die linke Spalte nimmt die Boxen "Header", "Menü1", "Menü2", sowie den "Inhaltsbereich" in sich auf, wobei "Menü2" ebenfalls vom Inhalt rechts umflossen wird, und in der rechten Spalte werden "Logo" und "Bild" eingebettet.

Unter den beiden Spalten folgt zum Abschluß die "Fußzeile".

Und wie lautet nun dein bisheriger Quellcode?

mfg Maik
 
Vielen Dank schonmal.. der bisherige Code sah so aus:

CSS:

Code: 
html {
	background-image:url(../images/bg_outer_repeat.jpg);
	background-repeat:repeat;
	padding:0;
}
body {
	background-image:url(../images/bg_metall.jpg);
	background-repeat:repeat-x;
	margin:0;
}
#outerframe{
	position:relative;
	background-image:url(../images/bg_inner_repeat.jpg);
	background-repeat:repeat;
	width: 900px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
}
#frame1 {
	position:relative;
	background-image:url(../images/bg_main.jpg);
	background-repeat:no-repeat;
	width:725px;
  	float:left;
}
#frame2 {
	position:relative;
	background-image:url(../images/bg_repeat.png);
	background-repeat:repeat;
	width: 175px;
	float: left;
}

#header {
	background-image:url(../images/bg_header.jpg);
	background-color:##636464;
	position relative;
	width: 725px;
	height: 80px;
}
#menu1 {
	background-color:##636464;
	position:relative;
	width: 725px;
	height: 30px;
	background-color: #000000;
	font-family: tahoma, verdana, arial;
	font-size: 1em;
	text-align: left;
	text-decoration: none;
	color: #722A2B;
}
#menu2 {
	float:left;
	width: 150px;
	height: 300px;
	font-family: tahoma, verdana, arial;
	text-align: left;
	text-decoration: none;
}
#content {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#CCCCCC;
	background-image:url(../images/bg_main.jpg);
	position: relative;
	background-repeat:no-repeat;
	width: 665px;
	padding-left: 30px;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 25px;
	min-height:600px;
	top: 0px;
}

#content .componentheading {
	font-size:14px;
}
#content .contentheading {
	font-size:13px;
}
#content a {
	text-decoration: none;
}
#content.contentheading {
	font-size:13px;
}
#content.contentheading {
	font-size:13px;
}


#logo {
	background-image:url(../images/bg_logo.jpg);
	background-repeat:no-repeat;
	background-color:#000000;
	width: 175px;
	height: 175px;
}
#sideani {
position:relative;
top: 0px;
	background-image:url(../images/bg_ani.jpg);
	float:right;
	background-color:#999999;
	width: 175px;
	height: 500px;  
}
#footer {
	background-color:#000000;
	height:25px;
	float:right;
	width: 900px;
	color: #C76100;
}
div.clear {
clear: left;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}

und HTML dann so:

HTML: 
<body>
<div id="outerframe">
  <div id="frame1">
      <div id="header"></div>
      <div id="menu1"></div>
      <div id="content">
           <div id="menu2"></div>
      </div>
      <div id="frame2">
           <div id="logo"></div>
           <div id="sideani"></div>
      </div>
      <div class="clear">&nbsp;</div>
      <div id="footer"></div>
</div>
</body>

Mag auch totaler Käse sein was ich da gemacht habe... :rolleyes:

Magst du mir mal ein Beispiel zu deiner Lösung geben?


Gruß

Dreamer
 
Bitte schön:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_dreamer2007</title>

<style type="text/css">
<!--
div#outerframe {
width:900px;
margin:0 auto;
}

div#leftCol {
float:left;
width:725px;
}

div#rightCol {
float:right;
width:175px;
}

#header {
height:80px;
}

#menu1 {
background-color:#636464;
height:30px;
color:#722A2B;
}

#menu2 {
float:left;
width:150px;
height:300px;
}

#content {
margin-left:160px;
padding: 30px 30px 25px 30px;
min-height:600px;
height:auto !important;
height:600px;
}

#logo {
height:175px;
}

#sideani {
height:500px;
}

#footer {
background-color:#000000;
height:25px;
clear:both;
color:#C76100;
}
-->
</style>

</head>
<body>

<div id="outerframe">
     <div id="leftCol">
          <div id="header">header</div>
          <div id="menu1">menu1</div>
          <div id="menu2">menu2</div>
          <div id="content">content</div>
     </div>
     <div id="rightCol">
          <div id="logo">logo</div>
          <div id="sideani">sideani</div>
     </div>
     <div id="footer">footer</div>
</div>

</body>
</html>
mfg Maik
 
Vielen Dank...
hat schonmal geholfen! Allerdings passt sich die Größe des outerframe nicht an die maximale Höhe des leftCol an, wodurch im Firefox an der Stelle keine hintergrundfarbe mehr zu sehen ist. Der IE zeigts komischerweise an.
Noch eine Idee dazu?

Gruß

dreamer
 
Falls du von diesem Block sprichst:

Code: 
#menu2 {
float:left;
width:150px;
height:300px;
}

mach daraus:

Code: 
#menu2 {
float:left;
width:150px;
min-height:300px; /* Mindesthöhe in modernen Browser */
height:auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
height:300px; /* "Mindesthöhe" in IE */
}
mfg Maik
 
Eingentlch meinte ich tatsächlich outerframe, der mit einer Hintergrundfarbe belegt ist und sich nicht automatisch der Höhe seiner inneren DIVs anpasst sondern klein bleibt.
Angenommen content geht über die Höhe der Hindesthöhe hinaus, so sollte doch eigentlich das Elterndiv auch in der Höhe verändern, oder? Kanns mir daher nicht wirklich erklären.
 
Dann zeig mal bitte deine aktuelle Fassung des Quellcodes, oder nenn den Link zur Seite, denn mit meinem eingangs vorgestellten Quellcode tauchen bei mir keine deratigen Probleme im Firefox auf.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück