✔ Banner + drei Spalten, alles zentriert, in firefox und ie unterschiedlich

Status
Nicht offen für weitere Antworten.
W

Warhamster

Mitglied
Moin.

Habe da ein Problem und weiß leider nicht mehr weiter.

Ich habe einen 750px breiten Banner welchen ich horizontal zentriert auf der Seite anzeigen lassen möchte. Des Weiteren möchte ich zwei Spalten haben welche links und rechts mit dem Banner in einer Linie abschließen. Zwischen diesen Spalten soll mittig ein Contentbereich zur Verfügung stehen.
Das Ganze soll mit div-Tags realisiert werden.

Leider werden die Sachen aber nicht so angezeigt, wie ich mir das vorstelle und ich weiß leider nicht warum. Der IE und Firefox verhalten sich auch noch anders.

Hier klicken um zu sehen wie es in Firefox aussieht.

Hier klicken um zu sehen wie es im Internetexplorer aussieht.

Wie man sieht sind leichte Verrückungen drin und es wird nicht alles richtig ausgerichtet. Ansonsten sind die Elemente aber im Browser zentriert. So wie ich es haben möchte. Bloß diese leichten Verschiebungen, dass die beiden äußeren Spalten nicht mit dem Banner rechts und links abschließen.


Mein Stylesheet:
PHP: 
*
{
    background-color:#FFFFFF;
    color:#000000;
    border-width:0px;
    padding:0px;
    margin:0;
}

body
{
	font-size:11px;
	font-family:sans-serif;
	font-weight:normal;
	text-align:center;
}
div
{
    text-align:left;
}
a
{
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
}
a, a:link, a:visited
{
	color:#000000;
}

a:hover, a:active, a:focus
{
	color:#FFCC00;
}

.menu, .newsworthy, .content, .header
{
    position:absolute;
    left:50%;
}

.menu, .newsworthy, .content
{
    top:100px;
}

.menu, .newsworthy
{
    width:130px;
    padding:0px 10px;
	border-style:none dotted;
	border-color:#FFCC00;
	border-width:1px;
}

.header
{
    width:750px;
    margin-left:-375px;
}

.menu
{
    margin-left:-364px;
}

.newsworthy
{
    margin-left:223px;
}

.content
{
    width:420px;
    margin-left: -210px;
    background-color:#F4F4F4;
    overflow:hidden;
}

Meine HTML-Seite:
PHP: 
<?xml version="1.0"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="en">
    <head>
        <title>AMC Bremerhaven</title>
        <meta name="generator" content="Vereinsseite des AMC Bremerhaven. Der AMC Bremerhaven ist ein Verein für alle am Modellrennsport interessierten Personen. Genauer beschäftigen sich die Mitglieder mit Slotcars und RC Cars im Maßstab 1:10." />
        <meta name="keywords" content="Slotcar, RC Car, Verein" />
        <meta name="generator" content="PHP Designer 2005" />
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <div class="header">
            <img src="img/banner.gif" alt="AMC Bremerhaven Banner" />
        </div>
        <div class="menu">
            <a href="">Link 1</a><br />
            <a href="">Link 2</a><br />
            <a href="">Link 3</a><br />
            <a href="">Link 4</a>
        </div>
        <div class="newsworthy">
           Aktuelle Dinge sollen hier später einmal stehen.
        </div>
        <div class="content">
           Seiteninhalte wie Bilder und Texte ... jasdlfksdajflsjaojweiojfisajlfjisdoföjsajdfisdjofsojifjiosfjoisigfsuogsdhoigsodgjisdfjlksdljfsdlfjlksadfsdghdsahgpisdgljfsadjfpäisjdfödsjfoisjdafoijsdafjdsijfosajifjpisdfdsaljkfjhsdkgjsadlkgjsdlöjsdlfjlösdfjösl asdf asdf asdf sadf sadfsda fsdf sdajf sadhf sadjfsd fjsd fsdf hsakg sjkgh sadgh sjkgsda gjsdh glskg hsag slakjgh skjgh sgh sl gjsdjig shdug dshgjks hglg sdhg jkshg sdjgh dsjkgds hgjshg jks
        </div>
    </body>
</html>


Bereits jetzt vielen Dank.

Mit freundlichen Grüßen,
Marcel
 
CSS-Vorlage für ein dreispaltiges Layout:

HTML: 
<!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">
<title></title>

<style type="text/css">
<!--
div.mainBox
{
width: 750px;
margin: 0 auto;
border: 1px solid #000000;
}

div.header
{
height: 100px;
background: #fafafa;
}

div.leftCol
{
float: left;
width: 130px;
background: #00afff;
}

div.centerCol
{
margin: 0 135px 0 135px;
background: #efefef;
}

div.rightCol
{
float: right;
width: 130px;
background: #00afff;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
-->
</style>

</head>
<body>

<div class="mainBox">

     <div class="header">header</div>

     <div class="leftCol">leftCol</div>

     <div class="rightCol">rightCol</div>

     <div class="centerCol">centerCol</div>

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

</div>

</body>
</html>
  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Moin.

Danke, das schaut ja super aus. :)

Nun hätte ich noch zwei Fragen.

Empfiehlt es sich eher, den Banner im header div als Backgroundimage zu verwenden oder sollte ich ihn mit dem img-Tag einbinden?


Des Weiteren gibt es noch ein kleines Problem.
Wenn ich im centerCol Teil ein viel zu langes Wort eingebe, dann wird das schöne Layout zerschossen. Habe hier den Code mal als Beispiel angegeben.

PHP: 
<!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"> <title></title> <style type="text/css"> 
<!-- 
div.mainBox { width: 750px; margin: 0 auto; border: 1px solid #000000; } 
div.header { height: 100px; background: #fafafa; } 
div.leftCol { float: left; width: 130px; background: #00afff; }
div.centerCol { margin: 0 135px 0 135px; background: #efefef; } 
div.rightCol { float: right; width: 130px; background: #00afff; } 
div.clear { clear: both; height: 0; font-size: 0; margin: 0; padding: 0; } 
--> 
</style> 
</head> 
<body> 
<div class="mainBox">  
<div class="header">header</div>  
<div class="leftCol">leftCol</div>  
<div class="rightCol">rightCol</div>  
<div class="centerCol">sdfjlkasdjflkdsajlsjdglsjadgöhisdhigdslgsjkgljksgjdhsljkgsjhgkjsgjsgljsgklösklgsjlkglksagjsglksdlögjsdgksgjklsagkskjlgjskglksagjksoigisjgisdkl</div>  
<div class="clear"></div> 
</div> 
</body> 
</html>

Seht ihr da eine Möglichkeit das zu umgehen?
Ich habe im centerCol bereits overflow:hidden; ausprobiert, aber so richtig will das nicht. :(
Habe gerade den Beitrag im Forum eingestellt gehabt, da sehe ich, dass das lange Wort im centerCol zwei Leerzeichen aufweist. Die gehören da nicht rein, werden scheinbar vom Forum automatisch gesetzt.

Danke.

Beste Grüße,
Marcel
 
Zuletzt bearbeitet:
Bei so einer langen Zeichenfolge (ohne Leerzeichen) wird wohl jedes CSS-Layout zerschossen ;-]

Mit der CSS-Eigenschaft white-space kann der Zeilenumbruch innerhalb eines Elements festgelegt werden, dies funktioniert aber nur bei Wörtern mit Leerzeichen.
 
Alles klar.

Dann muss man das wohl serverseitig programmieren.
Hatte zwar gedacht, dass es da andere Lösungen gibt aber was solls. :)

Danke.
 
Da deine Eingangsfrage bzgl. des 3-spaltigen CSS-Layouts im FireFox und IE beantwortet (respektive gelöst) ist, kannst du das Thema als 'Erledigt' markieren. Vielen Dank ;)
 
Kleiner Nachtrag:
Warhamster hat gesagt.:
... Empfiehlt es sich eher, den Banner im header div als Backgroundimage zu verwenden oder sollte ich ihn mit dem img-Tag einbinden? ...
Zum Vergrößern anklicken....
Ich rate dir den Banner als Hintergrundbild unterzubringen. Praktischerweise könntest du statt des Header-DIVs ein H1-Element mit der Seitenüberschrift "AMC Bremerhaven" und dort auch dein Banner als Hintergrundbild einsetzen. Das hat den Vorteil, dass Suchmaschinen und textorientierte Browser eine Seitenüberschrift erkennen können.
Also z.B.:
HTML: 
...
        <div class="mainBox">
          <h1>AMC Bremerhaven</h1>
          <div class="leftCol">leftCol</div>  
          <div class="rightCol">rightCol</div>  
          <div class="centerCol"> Fülltext </div>
          <div class="clear"></div> 
        </div>
CSS (der DIV.header-Selektor wird nur gegen den folgenden H1-Selektor ausgetauscht):
Code: 
h1 {
       	height: 100px;
       	margin: 0;
       	padding: 0;
       	text-indent: -9999px;
       	background: #ffc url(header.png) no-repeat scroll center;
 }
Die große Texteinrückung über die text-indent-Eigenschaft verschiebt den H1-Text aus dem Viewport, so dass bei CSS-Anwendung nur noch die Hintergrundgrafik (hier header.png benannt) zu sehen ist.

Zum "überlangen Text" im centerCol-DIV möchte ich noch hinzufügen, dass du dir einfach darüber im klaren sein musst, dass dieser Block eine Breite von (750 - 2*135)px = 480px hat und größere Bilder und u.U. auch pre-formatierter Text das Layout stören.
Ein so langes Wort, wie du es oben eingesetzt hast, gibt es warscheinlich in keiner natürlichen Sprache. :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück