meine ersten Schritte im CSS
0 0 
Götz
0
meine ersten Schritte im CSS
Hallo,
tabellenloses Design ...
meine ersten Schritte ...
Was ich von Euch wissen wollen würde, wäre:
Ist der Anfang zumindest mal in die richtige Richtung? Vom CSS her, oder sollte ich einen ganz anderen Weg einschlagen?
Ich habe mich das erste mal in das tabellenlose Layout gewagt, und früher nur hier und da bei meinen Tabellen mit ein wenig CSS gearbeitet.
Also hier mal der Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS</title>
<style type="text/css">
body{
text-align:center;
font:Georgia, "Times New Roman", Times, serif;
font-size:20px;
}
#container{
margin:5px auto;
width:800px;
}
#header{
height:100px;
border:1px solid #000000;
}
#navigation{
margin-top:5px;
margin-left:-20px;
width:840px;
height:50px;
border:1px solid #000000;
}
#content{
margin-top:10px;
width:500px;
height:500px;
border:1px solid #000000;
float:left;
}
#menu{
margin-left:550px;
margin-top:40px;
width:200px;
height:350px;
border:1px solid #000000;
}
#footer{
clear:left;
margin-top:5px;
margin-left:-20px;
height:20px;
border:1px solid #000000;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Mein Header</div>
<div id="navigation">Navi Leiste</div>
<div id="content">Content</div>
<div id="menu">dyn Menü</div>
<div id="footer">mein Footer</div>
</div>
</body>
</html>
Vielleicht ist es Euch möglich mir Tips zu geben, was wichtig ist usw.
Vielen Dank im Vorraus
f34rless
-
hi,
Ist der Anfang zumindest mal in die richtige Richtung? Vom CSS her, oder sollte ich einen ganz anderen Weg einschlagen?
Um beurteilen zu können, ob du die genutzten Techniken auch sinnvoll angewandt hast, wäre es erforderlich zu wissen, was du erreichen möchtest.
<div id="container">
<div id="header">Mein Header</div>
<div id="navigation">Navi Leiste</div>
<div id="content">Content</div>
<div id="menu">dyn Menü</div>
<div id="footer">mein Footer</div>
</div>Das sieht auf jeden Fall schon mal nach Div-Suppe aus.
Bitte mache nicht den Fehler, zu denken bei der Umstellung vom Tabellen- auf ein CSS-Layout müsse man "einfach alles in Divs packen", und dann formatieren.
Gutes CSS setzt immer auf strukturell sinnvollem HTML auf.Also nutze die HTML-Elemente, die die Struktur deiner Inhalte bestmöglich darzustellen in der Lage sind.
Eine Navigation ist eine Liste von Links,
Textabsätze werden mit P ausgezeichnet, Überschriften mit H1 bis H6, etc.Div selbst ist vollkommen aussagefrei, und sollte zum Gruppieren von Elementen dienen - aber nicht als Inhaltsträger.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Ich habe mir nochmals den Teil hier im SELFHTML CSS Layouts durchgelsen, und bin dabei bei auf wichtige Hinweise gestossen, die ich beim ersten mal möglicherweise überlesen habe.
Ich werde versuchen dies umzusetzen. Das dabei am Anfang nicht alles perfekt sein kann, ist mir aber auch klar.
Ich fange eben gerade an mich in das Formatieren mit CSS einzuarbeiten. Dabei baue ich auf dieses Forum und auf eure Unterstützung.
f34rless
-
-
Hallo f34rless,
Ist der Anfang zumindest mal in die richtige Richtung? Vom CSS her, oder sollte ich einen ganz anderen Weg einschlagen? [...]
Du kannst Dirauf jeden Fall mal das SELFHTML-Kapitel CSS-basierte Layouts durchlesen. Ich würde nicht unbedingt mit Pixelangaben arbeiten sondern eher mit em, wie auch im SELFHTML-Beispiel, siehe dazu auch die Anmerkung zu relativen Größen.
Ansonsten sieht dein Code ja aufgeräumt aus, die CSS-Angaben sollte man natürlich auslagern.Grüße aus Karlsruhe,
Götz--
Losung für Dienstag, 30. Mai 2006
Nun, unser Gott, wir danken dir und rühmen deinen herrlichen Namen. (1. Chronik 29,13)
Gott hat Christus von den Toten auferweckt und eingesetzt zu seiner Rechten im Himmel über alle Reiche, Gewalt, Macht, Herrschaft und alles, was sonst einen Namen hat, nicht allein in dieser Welt, sondern auch in der zukünftigen. (Epheser 1,20-21)
(Losungslink)-
Hallo Götz.
Ansonsten sieht dein Code ja aufgeräumt aus, die CSS-Angaben sollte man natürlich auslagern.
In der Entwicklungsphase ist es dagegen sehr vorteilhaft, wenn sich sämtliche Angaben zu CSS und JS noch im eigentlichen Dokument befinden, da man sich und anderen damit das ständige Hin- und Herwechseln zwischen den Dateien erspart.
Einen schönen Dienstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
-
-
Hallo,
tabellenloses Design ...
... soll ja angeblich verschiedene Vorteile haben.
Zusammmen mit der 'semantisch' richtigen Verwendung von HTML soll
es weniger Einschränkungen bzw. mehr Barrierefreiheit mit sich
bringen, dabei könnte u.U. versucht werden auf diesen (allerdings
als div erstmal auch nicht unbedingt störenden) container zu
verzichten und/oder die betr. Eigenschaften vielleicht vorsichtiger
oder flexibler umzusetzen als mit "width:800px;":#container{
margin:5px auto;
width:800px;
}Grüsse
Cyx23