nicht angemeldet
Ist dieses CSS Layout in Ordnung?!?
Hallöchen!
Dank dieses Forums mache ich gerade meine ersten Schritte in CSS und bin mal mit dem Grundlayout fertig.
Da ich nur den IE zum Testen habe, wende ich mich an euch um eventuelle Darstellungs/Coding Fehler zu finden.
Derzeit kämpfe ich zwar noch damit die Seite zu zentrieren ohne das mir das Layout zerfällt, aber sonst wird an dem Code nichts mehr verändert (außer ihr könnt mir noch Tipps geben)...
Würde mich über Hilfe freuen...
Lg.
Lukas
P.S.: Habe auch mal eine Version online gestellt zwecks Browserkompatibilität!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Camps4You - Englisch Camps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="logoleiste">
<ul>
<li><a href="#" class="logo" title="Zur Startseite von Camps4You"></a></li>
<li><a href="#" class="camps4you" title="Camps4You"></a></li>
<li><a href="#" class="reiseziele" title="Reiseziele"></a></li>
<li><a href="#" class="kursdaten" title="Kursdaten & Preise"></a></li>
<li><a href="#" class="preis" title="Im Preis inkludiert"></a></li>
<li><a href="#" class="eltern" title="Für Eltern"></a></li>
<li><a href="#" class="bilder" title="Bildergalerie"></a></li>
</ul>
</div>
<div class="navigation">
<ul >
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
<li><a href="#">test 6</a></li>
</ul>
<div class="navigation2">
<ul>
<li><a href="#" title="Online Buchen">Online Buchen</a></li>
<li><a href="#" title="Kontakt/Info">Kontakt / Info</a></li>
<li><a href="#" title="Broschüre bestellen">Broschüre bestellen</a></li>
<li><a href="#" title="Für Lehrer/innen">Für Lehrer/innen</a></li>
</ul>
</div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
--------------------------------------------------------------
CSS:
html, body {
margin:0px;
padding:0px;
border-style:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.grundlayout {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.logoleiste {
width:800px;
position:relative;
}
.logoleiste ul {
list-style-type:none;
margin:0px;
padding:0px;
}
.logoleiste ul li {
display:inline;
}
.logoleiste ul li a {
background-repeat: no-repeat;
float: left;
}
li .logo {
background-image:url(Bilder/Logoleiste.gif);
width: 800px;
height: 97px;
}
li .camps4you {
background-image:url(Bilder/Camps4You.gif);
width:150px;
height:60px;
}
li .camps4you:hover {
background-image:url(Bilder/Camps4You_roll.gif);
width:150px;
height:60px;
}
li .reiseziele {
background-image:url(Bilder/reiseziele.gif);
width:95px;
height:60px;
}
li .reiseziele:hover {
background-image:url(Bilder/reiseziele_roll.gif);
width:95px;
height:60px;
}
li .kursdaten {
background-image:url(Bilder/kursdaten.gif);
width:169px;
height:35px;
}
li .kursdaten:hover {
background-image:url(Bilder/kursdaten_roll.gif);
width:169px;
height:35px;
}
li .preis {
background-image:url(Bilder/preis.gif);
width:148px;
height:35px;
}
li .preis:hover {
background-image:url(Bilder/preis_roll.gif);
width:148px;
height:35px;
}
li .eltern {
background-image:url(Bilder/eltern.gif);
width:106px;
height:35px;
}
li .eltern:hover {
background-image:url(Bilder/eltern_roll.gif);
width:106px;
height:35px;
}
li .bilder {
background-image:url(Bilder/bilder.gif);
width:132px;
height:60px;
}
li .bilder:hover {
background-image:url(Bilder/bilder_roll.gif);
width:132px;
height:60px;
}
.navigation {
position:absolute;
top:157px;
width:150px;
height:398px;
text-align: left;
float:left;
background-image:url(Bilder/navigation.gif);
background-repeat:no-repeat;
}
.navigation ul {
list-style-type:disc;
margin:20px;
}
.navigation ul a {
color:#000000;
text-decoration:none;
}
.navigation ul a:hover {
color:#FFFFFF;
text-decoration:none;
}
.navigation2 {
position:absolute;
top:290px;
left: 0;
width:140px;
}
.navigation2 ul {
list-style-type:none;
line-height:25px;
padding:5px;
margin:0px;
font-weight: bold;
}
.navigation2 ul a {
color:#FFFFFF;
text-decoration:none;
}
.navigation2 ul a:hover {
color:#000000;
text-decoration:none;
}
.main {
position:absolute;
top:157px;
left:150px;
width:650px;
height:398px;
float:right;
overflow: scroll;
}
.footer {
background-color:#6699CC;
position:absolute;
width:800px;
height:25px;
top: 555px;
left: 0;
}
-
Was mir auffällt:
Die oberen Links sind nicht anklickbar, wenn man CSS deaktiviert und sind unsichtbar, wenn man das anzeigen von Bildern abschaltet. Das ist nicht OK.
Ansonsten scheint mir die Webseite ganz OK zu sein...
-
Die oberen Links sind nicht anklickbar, wenn man CSS deaktiviert und sind unsichtbar, wenn man das anzeigen von Bildern abschaltet. Das ist nicht OK.
Danke für den Wink mit dem Zaunpfahl *g*:
An die deaktivierungvon Bildern/CSS hab ich nicht gedacht...Lg.
Lukas
-
-
Hi,
Derzeit kämpfe ich zwar noch damit die Seite zu zentrieren ohne das mir das Layout zerfällt, aber sonst wird an dem Code nichts mehr verändert (außer ihr könnt mir noch Tipps geben)...
aber sicher doch. Das fängt damit an, daß mein Grüner Hintergrund sich mit Deinen blauen Elementen arg beißt. Beim erstmaligen Hovern der oberen Links erscheinen dann zunächst häßliche weiße Flächen. Im Firefox habe ich dann noch einen seltsamen Scrollbalken, der aber funktionslos ist - sowas kenne ich eigentlich nur vom IE. (?)
Ganz übel wird's bei Schriftvergrößerung: Deine Menüs solltest Du wirklich nicht so unpassend absolut positionieren.
<div class="logoleiste">
<ul>
<li><a href="#" class="logo" title="Zur Startseite von Camps4You"></a></li>Du verwendest hier überall Klassen für Elemente, die Du jedoch gar nicht klassifizieren willst.
Und bist Du sicher, daß diese DIVs hier alle nötig sind?<li><a href="#" title="Online Buchen">Online Buchen</a></li>
wozu diese title? Wenn ich die Schrift nicht lesen kann, vergrößere ich sie und warte nicht auf die Anzeige des Tooltips...
font-size: 12px;
...zum Glück nutze ich ja auch nicht den IE. ;-)
width:800px;
Sehr ungünstig. Das gibt einen horizontalen Scrollbalken, wenn das Fenster bei 800px-Auflösung nicht maximiert ist oder wenn vetikal zu scrollen ist. Außerdem paßt der Seiteninhalt kaum noch auf eine DIN-A-4-Seite.
.main {
overflow: scroll;
}ach da kommt der "Geisterbalken" her. Ich würde grundsätzlich auf unschöne seiteninterne Scrollbalken (also auch overflow:auto) verzichten.
freundliche Grüße
Ingo-
Hallo!
Erst einmal danke für die Zeit die du dir genommen hat (natürlich auch Danke an alle anderen).
Was deine Anmerkungen betrifft so sind mir leider ein paar Fragen übergeblieben und ich würde mich freuen, wenn mir jemand etwas Licht in mein Hrin leiten kann...»»Im Firefox habe ich dann noch einen seltsamen Scrollbalken, der aber funktionslos ist - sowas kenne ich eigentlich nur vom IE. (?)
Ups - ist noch vom testen übergeblieben --> schon weg *g*
Ganz übel wird's bei Schriftvergrößerung: Deine Menüs solltest Du wirklich nicht so unpassend absolut positionieren.
Nachdem ich an die Hintergrundgrafik angewiesen bin habe ich hier ein großes Problem - wenn die Schrift vergrößert wird passt sie weder in meine roten Balken der Hintergrundgrafik und der Absatz vergrößert sich, was die Position der einzelnen Elemente im HG negativ beeinflusst.
Kann ich hier irgendwie die Absatzgröße (abhängig von der derzeit verwendeten Schriftgröße) beeinflussen oder soll ich jetzt jedes einzelne Listenelement positionieren?!?<div class="logoleiste">
<ul>
<li><a href="#" class="logo" title="Zur Startseite von Camps4You"></a></li>
Du verwendest hier überall Klassen für Elemente, die Du jedoch gar nicht klassifizieren willst.Hab alles in ID's geändert (bin mir aber nicht sicher ob das das war was du mir vorschlagen wolltest?!?
Und bist Du sicher, daß diese DIVs hier alle nötig sind?
Nein *g*
<li><a href="#" title="Online Buchen">Online Buchen</a></li>
wozu diese title? Wenn ich die Schrift nicht lesen kann, vergrößere ich sie und warte nicht auf die Anzeige des Tooltips...Denke, dass aber nicht jeder diese Funktion nutzt und ich sehr oft Leute beobachtet habe die sich der Tooltips bedienen...
width:800px;
Sehr ungünstig. Das gibt einen horizontalen Scrollbalken, wenn das Fenster bei 800px-Auflösung nicht maximiert ist oder wenn vetikal zu scrollen ist. Außerdem paßt der Seiteninhalt kaum noch auf eine DIN-A-4-Seite.Was ist den die optimale Breite für eine 800er Auflösung?!?
Liebe Grüße
Lukas
-
Hi,
Ganz übel wird's bei Schriftvergrößerung: Deine Menüs solltest Du wirklich nicht so unpassend absolut positionieren.
Nachdem ich an die Hintergrundgrafik angewiesen bin habe ich hier ein großes Problem - wenn die Schrift vergrößert wird passt sie weder in meine roten Balken der Hintergrundgrafik und der Absatz vergrößert sich, was die Position der einzelnen Elemente im HG negativ beeinflusst.
Kann ich hier irgendwie die Absatzgröße (abhängig von der derzeit verwendeten Schriftgröße) beeinflussen oder soll ich jetzt jedes einzelne Listenelement positionieren?!?weder noch.
Die Farbigen Balken für die Navigation haben nichts in dem Bild http://www.schaufler.cc/C4Y/Bilder/navigation.gif zu suchen.
Du könntest a) jeden Balken mit Linktext als einzelne Grafik einbinden oder b) nur Hintergrundfarben für die Links angeben und evtl. die geschwungene Abgrenzung als Grafik darüber legen (was freilich recht kompliziert wäre).Hab alles in ID's geändert (bin mir aber nicht sicher ob das das war was du mir vorschlagen wolltest?!?
Ja.
<li><a href="#" title="Online Buchen">Online Buchen</a></li>
wozu diese title? Wenn ich die Schrift nicht lesen kann, vergrößere ich sie und warte nicht auf die Anzeige des Tooltips...Denke, dass aber nicht jeder diese Funktion nutzt und ich sehr oft Leute beobachtet habe die sich der Tooltips bedienen...
Aber derselbe Text ist doch bereits deutlich zu lesen. Wozu diese unnötge Redundanz?
Was ist den die optimale Breite für eine 800er Auflösung?!?
Etwa 760 bis 780px. Das paßt i.d.R. auch für den Ausdruck selbst bei großzügigen Randeinstellungen. Oder eben keine feste Breite. Nur sind eben 800px denkbar ungünstig: für 800er-Fensterbreite zu breit und für 1024er-Fensterbreite schon zuviel verschenkt.
freundliche Grüße
Ingo
-
-
-
Hallo
Als ich die Seite anschaute, habe ich spontan gedacht, das muesstest Du auch in Firefox und Opera noch testen, kehre hierher zurueck und lese:
Da ich nur den IE zum Testen habe, wende ich mich an euch um eventuelle Darstellungs/Coding Fehler zu finden.
Sorry, aber ich denke, Du kommst nicht darumherum mindestens in Firefox und Opera selbst zu testen. (z.B. 'Logoleiste' blickt beim drueberfahren im Firefox beim ersten mal, ausserdem hat die navigation eine Scrollleiste die nicht gebraucht wird.)
So ganz nebenbei: es ist sowieso schon hoechste Zeit, dass man generell den IE fuer den persoenlichen Gebrauch langsam verschrotten sollte. Installier dir mal anstaendige Browser. Du wirst nicht enttaeuscht sein! (So ganz nebenbei: ich _liebe_ meinen Opera-Browser...)
Gruss
Louis