Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Design ohne/wenig Tabellen mit CSS
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Design ohne/wenig Tabellen mit CSS

Pages: [1]

geschrieben von AlexD am 02.07.2008 - 14:59
Hallo ich scho wieder..

auf den Tip von Danny bezüglich Style mit CSS hab ich nun damit beschäftigt.
Mein erster Gedanke war echt: 'kein Problem, das ist gleich erledigt'.
Pustekuchen, ich hab jetzt versucht in einer Testdatei das Style via CSS nachzubilden ohne großen Inhalt.
Dank Google, SlefHTML dem Forum hier schaut es schon annähernd so aus.

Nun möchte ich gerne von Euch wissen, ob ich auf dem richtigen Weg bin... denn es soll schon so gut wie möglich sein bevor ich die komplette Seite umarbeite.
Die Struktur der CSS ist sicher noch ned wirklich optimal...

Ein paar Dinge gefallen mir nicht so.
- wie schafft man es, dass zwei Container immer gleich lang (nach unten) sind und dann mit dem 'Footer' bzw. 'Zwischenbalken' abschließen?!
- die Kopf-Grafik 'Internet-Portal' wird durch das DIV mit dem Hintergrund der Uhr nicht mehr mittig auf der Gesamt breite angezeigt.
- die Login-Box sieht beim IE7 besch... aus, warum macht der IE so große Abstände zum Rand??? Ist die gleiche Formatierung wie bei der Kalender-Box FireFox2/3 und Opera 9.5 stellen es gleich dar
Die beiden Boxen Kalender und Login sollten halt so gut es geht gleich sein.


Hier mal die beiden Links:
Mit Tabellen realisiert: http://startseite.dyndns.org/
Style-Schema über CSS: http://startseite.dyndns.org/test.php

hier die dazugehörige CSS:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
BODY {
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #CCCCCC;
background-color: #666666;
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: 98%;
	background:	#E2E2E2;

}


#main{
	width: 98%;

}

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

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: none;
}

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;
    border:1px solid;
    border-color:#000000;
}

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

div.topbox{
    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;
}

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


Gruß
Alex

geschrieben von okley am 12.07.2008 - 11:30
Hey AlexD

Zu deiner ersten Frage mit dem abschliessenden Footer Balken:

http://www.ground.cz/luci/css/my3cols.html

Da siehst du ein Beispiel wo der Footer sich automatisch an das höchste Element anschliesst. Also der Footer Div Positioniert sich dynamisch nach dem höchsten Element.
Wenn du willst dass alle Spalten, in deinem Fall zwei, gleich hoch sind und diese Höhe fix gesetzt ist, könntest du deinen Footer ja absolute positionieren. z.B. mit der top Eigenschaft in CSS.

Soweit ich das sehe ist bei mir (FF, Opera) die Kopf Grafik zentriert.

Das Loginform hat im IE die Abstände oben und unten etwas zu gross.
Der Abstand unten kommt evtl. von dem p Element wo der Button drinne ist, nimm da mal ein div Element mit padding:0 und margin:0. Und für die in der CSS class login verwende die Regel margin:0 padding:0.

Meld dich mal wenn du neue Ergebnisse oder Fragen hast ;)

geschrieben von AlexD am 13.07.2008 - 18:39
Hallo okley,

vielen dank für die Tips!

Hab in der Zwischenzeit ein wenig weiter gearbeitet und nun mehr im Box-Style. Heißt der beiderseitige Abschluss zum Footer ist nicht mehr so relevant.

Ist noch einiges zum umschreiben auf CSS....

Das Problem mit den Boxen beim Login hab ich nun auch mehr in den Griff bekommen. Der IE7 macht bei <form>-Tags automatisch so große Abstände bzw. Absätze die man aber mit 'margin:0px' eleminieren kann.

Ich hab nun das Problem, eine Tabelle 100% der Breite eines Containers zu geben.
Es geht um den mittleren div-Container im eingeloggten Zustand. Hier werden dann die persönlichen Link-Tabellen des Users geladen.
Wenn ich bei der Tabelle 'width:100%' angebe, setzt der IE die Tabellen ganz nach unten weil er immer 100% der Bildschirmbreite nimmt.

Und beim FireFox/Safari die Hintergrundfarbe des <div id="main"> wird nicht bis ganz nach unten gezeichnet. Opera und IE machen das wiederum.

Auch die Buttons sind noch nicht so wie sie sein sollten...

Um Dir einen Einblick zu verschaffen müsstest Du Dich einloggen. Du bekommst gerne per PN die Daten.
http://privatwebarea.dyndns.org/ent....tartseite/

Gruß
Alex

geschrieben von AlexD am 20.07.2008 - 21:52
So... das Problem hat sich mitlerweile erledigt.

Lag wohl an der CSS.... nachdem ich die CSS-Datei validierte hat's auch geklappt. ;)


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.