Style ohne Tabellen mit CSS

[AlexD]

Hallo,

ich bin grad dabei eine Seite zu erstellen....
Nun hab ich unter anderem den Tipp bekommen das Style so gut es geht ohne Tabellen über CSS zu realisieren. Ich hab mich daraufhin damit beschäftigt und jetzt stoße ich auf Probleme.

die überflüssigen Ränder im Mittelbereich sind nur zur Illustration um die Containergrösse besser sehen zu können.

Hauptproblem ist:

Ist es möglich die Container nach unten hin immer gleich abschließen zu lassen damit die Seite immer mit dem Footer abschließt bzw. die Login-Box mit dem Trennbalken?!

Zentrieren der Kopfgrafik 'Internet-Portal', liegt an der Digi-Clock.
Google-Suche 'mittig' in die Box setzen, auch hier sollte der DIV-Container am Balken abschließen.

Unterschliedliche Darstellung der Login-Box in FireFox und IE... der IE mach unterhalb des Submit-Buttons einen großen Abstand während FF und Opera hier bündig abschließen. Mit 'marigin-bottom' lässt sich kein einheitlicher Abstand erzwingen.


Hier mal die Links:


Aktuelle Seite:
http://startseite.dyndns.org


Hier noch die CSS, die sicher noch verbesserungsfähig ist ;


BODY {
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #CCCCCC;
background-color: #444440;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
color: #CCCCCC;
min-width: 41em;
}


a:link { COLOR: #CCCCCC; text-decoration:none; }
a:visited { COLOR: #CCCCCC; text-decoration:none; }
a:hover { COLOR: #990000; text-decoration:underline; }
a:active { COLOR: #CCCCCC; text-decoration:underline; }

#header {
width: 100%;
background: #E2E2E2;

}


#main{
width: 100%;

}

#foot{
clear:both;
text-align:center;
width: 100%;
}

div.topline{
height:40px;
background-color: none;
background:url(../img/balken.jpg);
background-repeat: reapeat-x;
}

div.topline_clock{
float:left;
height:40px;
width:200px;
background-color: none;
background:url(../img/head_clock.jpg);
background-repeat: no-repeat;;
}

div.line{
clear:both;
background-color: none;
background:url(../img/line_1.jpg);
background-repeat: reapeat-x;
}

div.left {
float:left;
border:1px solid;
border-color:#000000;
width:200px;

}

div.middle {
margin-left:220px;
margin-right:220px;
padding-top:10px;
border:1px solid;
border-color: #000000;

div.right {
float:right;
border:1px solid;
border-color:#000000;
width:200px;
}

div.topbox{
height:100%;
margin:5px;
paddin:2px;
border:1px solid;
border-color:#666666;
font-size:10px;
}

.hintergrund{
background-color: none;
background:url(../img/blackmetal.gif);
background-repeat: reapeat;
}

.contentbox{
border:1px solid;
border-color:#000000;
margin-top:0px;
margin-bottom:10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}


.tbl_kopf{
background-color:#000000;
font-weight:bold;
margin-top:2px;
margin-left: -3px;
margin-right: -3px;
padding-left:4px;
}

.input{
background-color: #000000;
padding-left:2px;
color: #CCCCCC;
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
}

.button {
background-color: #222222;
font-family: Helvetica,Arial,sans-serif;
font-size: 10px;
color: #CCCCCC;
padding-right: 4px;
padding-left: 4px;
padding-bottom: 0px;
padding-top: 2px;
}

.menuebox{
border-bottom:1px solid;
border-right:1px solid;
border-left:1px solid;
border-top:1px solid;
border-color:#999999;
margin-left:10px;
margin-right:10px;
margin-top: 15px;
padding-left: 5px;
padding-bottom:5px;
padding-top: 5px;
}

.legende{
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
font-weight:bold;
color: #999999;
}


Gruß
Alex

[Opendix]

Ist es möglich die Container nach unten hin immer gleich abschließen zu lassen damit die Seite immer mit dem Footer abschließt bzw. die Login-Box mit dem Trennbalken?!

http://www.alistapart.com/articles/fauxcolumns/


Zentrieren der Kopfgrafik 'Internet-Portal', liegt an der Digi-Clock.

Öhm.. ist den die nicht zentriert? :S

Bei den anderen kann ich dir leider nicht behilflich sein :(

Allgemein würde ich aber noch ein bisschen mehr Farbe in deine Seite einbringen.. jetzt sieht alles so dunkel und düster aus :S

[AlexD]

Hi,

also wenn ich das richtig verstanden hab, dann wird quasi einfach der entsprechende Hintergrund in dem darunterliegedem DIV als 'backgroundimage' gelegt (im Beispiel im Body quasi als darunter liegendes Blatt).

Da dieser Container, in meinem Fall 'header' und 'main' immer entsprechend lang der Inhalte sind wird auch in y-Richtung entsprechend aufgefüllt.
Klingt logisch.
Aber wie mach ich das wenn ich zwei Grafiken habe, also einmal link und rechts?!
Im eingeloggten Zustand sind die News ja nicht mehr da und werden links durch das Menü ersetzt. Ganz rechts je nach dem was der User dort anzeigen lassen möchte wird die Seite auch dynamisch gefüllt.

die Seite ist im Moment nach dem Muster aufgebaut:

<div id="header">
<div class="left"> Kalender </div>
<div class="middle"> Google</div>
<div class= "right"> Login-Box </div>
</div>

<div id="main">
<div class="left"> News/Menü wenn eingeloggt</div>
<div class="middle"> Content </div>
<div class= "right"> Content </div>
</div>

<div id="foot"> mein Footer... </div>

[reinhardlange]

Hi,

Du kannst ein Bild links bzw. rechts ausrichten, indem Du "float: left bzw. float: right" im CSS beim Bild hast. Andere Elemente fliessen (z.B. Text um das Bild. Muss mann aber sorgfältig machen, da es sonst zu einem Treppeneffekt (also mehrere Bilder sind dann versetzt angeordnet).

Um diesen Effekt zu vermeiden verwendet man "clear: left bzw. right oder both" - für das nächste Element. Aber auch hier aufpassen, wenn es falsch eingesetzt wird, dann kann auch ein Teil des Layouts zerschossen werden.

Du kannst dir mal http://www.muster-elektro.de ansehen - z.B. Menü-Punkt Referenzen / 1. Absatz - da kann man das schön sehen, wenn man das aktive Fenster verkleinert bzw. vergrößert.

Gruss Reinhard

[AlexD]

Hallo Reinhard,

das mit float/clear hab ich schon so einigermaßen gecheckt. Auf diese Art richte ich meine DIV's 'left' 'middle' 'right' aus, so damit ich den Tabelleneffekt bekomme. ;)

Mein gedankliches Problem ist nun, das ich in den 2 Haupt-DIVS 'header' und 'main' jeweils zwei Hintergrundbilder benötigen würde. Einmal links und einmal rechts. Darüber wüde ich dann die Container 'left' und 'right' legen, die von der breite jeweils fix sind (200px).

so hab ich den Lösungsansatz von Opendix zumindest verstanden...
oder bin ich da jetzt gedanklich auf dem Holzweg?!



P.S.: mit CSS ist das gleich ein Stück schwieriger als einfach nur Tabellen zu vergewaltigen. ;)

[reinhardlange]

Hallole,

hatte ich übersehen, dass Du im 1. Teil bereits float verwendet hattest.

Wäre es nicht machbar, wenn Du in den div -> header und -> main nochmal je 2 div nimmst, die dann jeweils die Hintergrundbilder haben?

Gruss Reinhard

ps: ich habe Stunden (bzw. auch Wochen) gebraucht um css einigermassen zu verstehen. Wenn man dann die Ergebisse sieht (und die Probs im IE6 auch gelöst hat), ist es viel einfacher als Tabellen-Layout (Tabelle in Tabelle in Tabelle ...).

... und wenn man später die nächste Seite bei Null anfängt und sich den "alten" css-Code ansieht -> schüttelt man nur den Kopf -> fängt wieder neu an und bemerkt, dass viele Dinge super einfach zu lösen sind.

Tipps zu css -> http://www.css4you.de

[AlexD]

Danke erst mal für den Link!

Hm, die zwei zusätzlichen divs wären kein Problem, mit dem Gedanken hab ich auch schon gespielt.
Aber ich denke die Lösen mein Problem nicht, denn wie bekomme ich die beiden dazu sich immer bis ans untere Ende der übergeordneten Div's auszudehnen?! Der Hintergrund soll sich dynamisch in der Höhe anpassen, so dass beide Spalten immer mit dem 'Footer' abschließen.

Wenn das klappen würde, dann könnte ich das auch in die aktuellen linken und rechten Div's einbauen und würde mir die zwei zusätzlichen sparen.

[reinhardlange]

Hi,

vielleicht hilft Dir das hier:

http://blog.html.it/layoutgala/

Sind sehr viele Layout-Beispiele mit CSS-Code

Gruss Reinhard

[AlexD]

Vielen Dank für die Links...

Ich werd da wohl auch ne ganze Zeit brauchen, bis ich da einigermaßen druchblicke.
Was ich ja echt nervig finde ist, wenn die Browser meinen, sie müssen das jeder unterschiedlich darstellen.... da kann man ja schon graue Haare bekommen.

z.B. 3 Form-Tags die ich mit Float nebeneinander positionieren möchte, der FireFox macht das, der IE setzt den mittleren immer um die Hälfte nach unten versetzt!
Warum und wieso ist mir schleierhaft?!
Bei 2 Div ist mir das auch schon passiert, konnte es damit beheben in dem ich das <p>-Element aus den Divs entfernt habe. Mir auch rätselhaft, da beide Divs absolut gleich aufgebaut waren.....

Learning by doing....

Aber die Scripte werden z.T. um einiges schlanker, was sich ja nur positiv auf die Ladezeiten auswirken kann. Darum bleib ich auch dabei und nehm Tabellen nur für Tabellen her!! ;)

[reinhardlange]

hallo Alex,

ich habe die Erfahrung gemacht, dass Firefox und IE7 sehr ähnlich sind. Der IE6 ist halt der "Ausreisser" - damit ich aber in Zukunft (der IE8 kommt ja auch bald) gerüstet bin, habe ich eine Browser-Weiche eingebaut. Ist zwar aufwendiger - auch in der Pflege - aber vermeidet diverse Hacks in ein und dem selben css-sheet.

... und wenn man in seinem logfile dann feststellt, dass kaum noch einer mit IE6 unterwegs ist - wie mittlerweile mit dem IE5 - kann man ja irgendwann die Funktion für den IE6 entfernen.

Übrigens unbedingt auch mit Safari (Apple-Browser) testen und ev. Opera/Netscape nicht vergessen (sind bei mir eigentlich gleich FF).

Gruss und frohes Schaffen

Reinhard

[AlexD]

Soo..... jetzt brauch ich wohl doch nochmal Hilfe. :(

der 'Start' der Seite steht soweit und funktioniert auch ganz ordentlich im IE7, Opera9.5 sowie Safari.

Aaaber, nach dem Einloggen..... der IE7 is immer der, der meint er müsse es anders machen als die Anderen.
Der Opera macht es schon zu 95% so wie ich mir das vorstelle, der FireFox macht mir den Hintergrund (main-div) nicht bis ganz nach unten. Buttons bei den 'Nachrichten' sind halb drin und halb draußen aus der Box (bei allen Browsern).
Die Linktabellen werden beim IE7 ganz unten dargestellt nicht wie beim FireFox/Opera.... sollten natürlich gleich zu sehen sein und nicht ganz unten plaziert werden.

Hier das System wie ich den 'main'-Teil aufgebaut hab:

<div id="main">
<div class="left"> hier das Menü</div>
<div class="right"> hier evtl. Wetter </div>
<div class="middle"> dynamischer Content mit <div> und evtl. <table>.. </div>
<div style="clear:both;"> footer </div>
</div>


Die Linktabellen werden in den 'middle'-Container geladen.
Tabellen im 'middle'-div setzt der IE7 immer ganz nach unten.... ?!
Hier handelt es sich um eine Tabelle die ebanfalls dynamisch zusammengestellt wird und dann in diesen Container eingesetzt wird.

Gerne gebe ich weitere Informationen.
Anbei auch die entsprechende CSS-Datei.

hier nochmal der Link:
http://privatwebarea.dyndns.org/entwicklung/startseite/

Um die beschriebenen Probleme zu sehen muss man sich einloggen.
Gerne geb ich die Daten per PN!!


also was ich bisher rausgefunden habe ist, dass der IE bei der Angabe der Tabellenbreite in % immer auf die gesamte Bildschirmbreite geht und nicht z.B. 100% des div-Containers in dem sich die Tabelle befindet. Dadurch setzt der IE die Tabellen immer nach unten.
Wie schaffe ich es nun eine Tabelle 100% der Containerbreite zu geben?!


Besten Gruß
Alex

[AlexD]

Niemand einen Tip für mich?!

Hier sind einfach mal die Login-Daten:

http://privatwebarea.dyndns.org/entwicklung/startseite/


Die Linktabellen sollten 100% der Breite des mittleren Containers haben (hab dem Container mal einen Rahmen gegeben). Bei 'User anzeigen' hab ich die 100% Tabellenbreite in der CSS angegeben, im FireFox/Opera/Safari wird das auch korrekt angezeigt, nur der IE7 macht so gar nicht was ich will!!

Leider ist der IE doch sehr weit verbreitet.... :-(

hab auch die aktuelle CSS mal mit angehängt.....


Konnte das Problem mitlerweile lösen... hat sich also erledigt!