Banner + drei Spalten, alles zentriert, in firefox und ie unterschiedlich @ tutorials.de: Tutorials, Forum & Hilfe

Warhamster · 21.10.05 01:38

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-Code:


*

{

    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-Code:


<?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

Maik · 21.10.05 06:22

CSS-Vorlage für ein dreispaltiges Layout:

HTML-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">
<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

Warhamster · 22.10.05 02:01

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-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"> <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

Maik · 22.10.05 04:19

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.

Warhamster · 22.10.05 10:50

Alles klar.

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

Danke.

Maik · 22.10.05 11:03

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

***hela*** · 22.10.05 14:34

Kleiner Nachtrag:

Zitat von Warhamster

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

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-Code:

...
        <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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

3 Spalten - Mittlere mit fester Breite und zentriert

Drei-Spalten-Layout mit CSS

Drei Spalten Layout

Nach drei Spalten neue Zeile anfangen. Für Smilies

Drei unterschiedlich große Links

E-Mail:

Abonnieren Abbestellen