Die Divs... :/

Moin.

Na ja, das Ganze ist ein wenig wirr, da ich nicht wirklich weiss, was wohin soll.
Ich gehe jetzt mal davon aus, dass du eine Homepage haben willst, die 1000px breit ist und in der Mitte liegt. Darin soll dann ein Head-Bereich enthalten sein unter dem dann links ein Menü ist, neben dem rechts der eigentliche Inhalt angezeigt wird. Darunter noch der Footer.

Aber was soll das cyane Teil und wohin damit?^^

Ansonsten würde das Design so anfangen:

layout.css

html, body { text-align:center; margin:0px; padding:0px; }
#mittig { margin:0px auto; width:1000px; text-align:left; }
#kopp { width:100%; }
#menu { float:left; width:20%; }
#inhalt { float:right; width:80%; }
#fuss { width:100%; }

index

// <html> und der ganze kram bis <body>
<div id="mittig">
    <div id="kopp">Kopfbereich</div>
    <div id="menu">Menü</div>
    <div id="inhalt">Inhalt</div>
    <div style="clear:both;"></div>
    <div id="fuss">Fussbereich</div>
</div>
// und der Rest vom Zeugs wie </html>, etc.

Man muss - das mal ans Anmerkung aufs padding, margin und natürlich auch border aufpassen. Eventuell passen dann Prozentangaben manchen Browsern nicht :slight_smile: weil dann z.B. ein Rahmen 80%+2px währe und das verträgt sich nicht mit 20%, da die Gesamtsumme dann bei 100%+2px liegen würde :smiley:

Kleiner Tipp von mir: Erspar dir erstmal den ganzen Kram mit Inhalt und kümmer dich erst um Hintergrundbilder, etc. wenn das Grundgerüst steht. Erst die Technik, dann das Aussehen :wink:

MfG
myPages

So das Layout ist jetzt einigermaßen so wie ich es mir vorgestellt hab. Und es funktionierd im Opera, FF und IE7 ziemlich gleich…^^

Die Box auf der linken Seite war für Google AdSense :wink:

Also das Basisbeispiel vom W3C nutzt absolute Positionierung,
um eine sehr solide und einfache Konstruktion zu erreichen.
Man sollte eben nur nicht jedes Element und dann auch noch
in ungeeigneten Einheiten wie px positionieren und dimensionieren.

Oft tut es eben einfach sowas:
body {margin-left: 12em; margin-right: 12em}
#menu1 {position: absolute; top:0; left: 0; width: 11em}
#menu2 {position: absolute; top:0; right: 0; width: 11em}

Oft paßt eben die (sinnvolle) Anordnung der Elemente im
HTML-Quelltext gar nicht zu float. Falsch ist dann aber die
Schlußfolgerung, die Anordnung im HTML-Quelltext zu ändern.
Richtig ist die Schlußfolgerung, dann eben float gar nicht zu
verwenden.

Da CSS nur Dekoration ist, ist das nicht wirklich wichtig, die
Anordnung und Reihenfolge im HTML-Quelltext ist von zentraler
Bedeutung, weil eine falsche Anordnung dort blödsinning und
unverständlich sein kann, da hat sich dann der Autor bereits
als unfähig erwiesen, wenn er das nicht auf die Reihe bekommt.
Zudem ist es ein wenig assozial anzunehmen, daß alle Leute die
Seite genauso angucken, wie man das als Autor gerade tut,
zeigt dann letztlich auch soziale Inkompetenz und Unfähigkeit,
mit Formaten wie (X)HTML und CSS überhaupt umzugehen, sollte
man dann wohl eher auch ganz lassen ;o)
Um den Eindruck zu vermeiden, guckt man sich eben an, wie
sinnvoll die Seite ohne CSS (und Skripte etc) ist, was man da
sieht, ist der eigentliche Inhalt, die Aussage an den Leser.

Hallo ich habe meinen Quelltext nochmal geschrieben und wollte jetzt fragen ob der erstmalsoweit korrekt ist. Ein Stylesheet hab ich jetzt noch nicht gemacht.

Schaut euch ma bitte an … THX

[code]

kommey.de - Startseite

<body>
    	<div id="kommey">

    	<div id="header">
    	<img src="img/header.png">
    	</div>

<div id="nav">
<ul="nav">
	<li><a href="index.html">Home</a></li>
</ul>
</div>

<div id="content">

<div id="part1">

<div id="box1">

<div id="box1_o">
<h2>&Uuml;berschirft</h2>
</div>

<div id="box1_t">
<p>Text</p>
</div>

</div>
</div>

<div id="part2">

<div id="box2">

<div id="box2_o">
<h2>&Uuml;berschrift</h2>
</div>

<div id="box2_t">
<p>Text</p>
</div>

</div>
</div>

<div id="footer">
<p>Text</p>
</div>

</div>
</div>

</body>
[/code]

Mfg Tobi

Da fehlt wohl eine h1-Überschrift, wozu sonst h2?

Dann fehlt der doctype. Zudem enthält der Quelltext Zeug, was
für HTML spezifisch ist, aber auch welches für XHTML, beides
in einem Dokument ist Unfug.

img braucht auch immer ein alt-Attribut als alternative
Textrepräsentation des Bildes, was also die Funktion des
Bildes repräsentiert. Wenn header.png ‘Text’ enthält, könnte es
genau dieser Text sein, andererseits könnte es dann auch gut
sein, daß man diesen Text dann einfach hinschreibt und erst
später per CSS durch header.png ersetzt, was dann im
(X)HTML-Quelltext gar nicht mehr auftaucht.
Dieser Text jedenfalls könnte sogar die aktuell fehlende
h1-Überschrift sein ;o)

Kann man per CSS für das Bild “alt” definieren?

lg Tobi

Nein, das kann man sicher nicht. Man kann allenfalls mit CSS
dafür sorgen, daß der Wert von alt auch immer zusätzlich
angezeigt wird ;o)

Anders herum - mit CSS als Hintergrundbild eingebundene
Bilder sind nach Voraussetzung dekorativ, enthalten also keine
Information, benötigen daher keinen Alternativtext.
Gleichwohl kann es technisch möglich sein, eine Textalternative
direkt im Bild unterzubringen, bei SVG etwa ist das sehr
fortgeschritten, einige andere Formate haben EXIF. Gibt
inzwischen sogar browser, die EXIF-Daten anzeigen können,
tun das aber wohl nicht für Hintergrundbilder. Andererseits
kann man mittels RDF gegebenenfalls in einer externen Datei
Meta-Daten zu jeglicher URI definieren…

Gewissermaßen ist der Wert von ‘alt’ der Inhalt des Bildes, hat
nichts mit Dekoration zu tun, daher auch nichts mit CSS.
Ohne sinnvollen Wert für ‘alt’ ist das Bild undefiniert und
sinnlos (und problematisch für jeglichen browser, besonders
wenn die Darstellung von Bildern deaktiviert ist).
Man könnte auch sagen, daß das Bild die Alternative zu dem
Wert von ‘alt’ ist, die dargestellt wird, wenn der browser das
Format des Bildes interpretiert. Aktuell ist es bei (X)HTML
meine ich nicht zwingend erforderlich, daß überhaupt irgendein
Bildformat interpretiert wird, da es sich ja um eine
Textauszeichnungssprache handelt, da wäre es merkwürdig,
sowas zu fordern ;o)