CSS grobe layoutanordnung

so ich fang jetzt an das design so anzulegen dass nur noch die contentsachen in tabellen eingebaut werden und das layout selbst mit divs aufbaun.

meine frage

die grundstruktur sieht so aus dass die seite zentriert ist (1005 pixel breite) und sich links und rechts davon derhintergrund je nach der auflösung verlängert (wer 640 x 480 nutzt ist selbst schuld :smiley:)

der bereich in der mitte ist jetzt 3 spaltig

das mit den 3 spalten krieg ich hin aber wie ordne ich jetzt das ganze zentriert an ohne schon wieder mit verschachteln anzufangen.

margin: 0 auto;
width: 1005;

wird bei mir trotzdem in volle breite gezogen

oder muss das ganze 5 spaltig angelegt werden und bei den außenliegenden divs die breite nicht festlegen?

width:1005px;
die einheit ist bei CSS wichtig.

thx

neues problem ^^

wie kann ich bilder in einer reihe nebeneinander ohne zwischenraum anordnen
z.B. für buttons.

hab den zwischenraum nicht wegbekommen und wollte nicht für alles ne einzelne div anlegen

Nebeneinander, also horizontal, sollte eigentlich ausreichen, wenn du jedes img-tag tatsächlich nebeneinander anreist, Bsp.:

Dann darf da aber auch kein Leerfeld/Zeilenumbruch zwischen sein.
Allerdings würde ich nicht darauf vertrauen, dass es in jedem Browser so angezeigt wird.
Habs nur mit dem FF3 getestet.

mfg Balmung

danke funzt auch mit IE
der IE scheint auch allgemein räume dazwischenzusetzen wenn man bei den div tags zeilenumbrüche macht.

nächste sache die ich nicht verstehe :ps:

[code]

[/code]

3 bilder wobei 2 am jeweiligen rand und ein größeres sich in der mitte befinden soll.
es setzt aber das rechte bild quasi in der nächsten zeile hin (also genau soviel zu tief, wie es hoch ist)
alle bilder haben die gleiche höhe, wenn ich das mittlere weglasse werden die anderen richtig gesetzt.
beim internet explorer ist auch das mittlere bild im gegensatz zu FF zu weit rechts.

oder geh ich da vom aufbau her schon falsch ran?

float führt gegebenenfalls bei ausreichend vorhandenem Platz
dazu, daß der nachfolgende Inhalt neben dem Element angeordnet
wird, nicht auch der vorhergehende.

Da ein div ein Blockelement ist, beginnt das dann immer mit
einer neuen Zeile, wenn man nichts anderes angibt oder daraus
etwa per CSS ein inzeiliges macht.

Achso, Zeilenumbruch ist sogenannter ‘whitespace’, das ist
gleichbedeutend mit einem Leerzeichen, wenn es im Quelltext
auftaucht. Mehrere Zeichen vom Typ ‘whitespace’ werden
allerdings vor der Ausgabe zu einem Leerzeichen komprimiert.
Will man kein Leerzeichen in der Ausgabe haben, sollte man auch
kein ‘whitespace’ einfügen, wie bereits erläutert.

Bei Bilder ist das so, wenn die Elemente direkt nebeneinander
stehen, ohne ‘whitespace’ dazwischen, ist das ähnlich wie bei
Buchstaben eines Wortes, das wird von browsern nicht getrennt.
Selbst jene, die Wörter trennen können, tun das nur bei solchen,
die sie erkennen. Da das bei Bildern nicht der Fall ist, bleiben die
dann zusammen.

edit

[code]

blub
blub
blub
[/code]

wie muss ich die maße angeben, damit die einzelnen elemente ne feste größe haben (also das hintergrundbild komplett angezeigt wird und sich nicht den zeilen im Vordergrund anpasst)?

Höhe heißt ‘height’, dann sollte sich das auch auswirken.

Du gibst da ja Pixelgraphik als Hintergrund an, das paßt sich
von der Größe her gar nicht an den Inhalt an, das wird allenfalls
wiederholt.

Vektorgraphik (SVG) als CSS-Hintergrundgraphik kann sich der
Größe des Elementes anpassen (kann man etwa mit Opera
begutachten).

Wenn ein Element Text enhält, so ist es meist natürlich sinnvoll,
daß sich seine Größe anpaßt. Bei fester Größe kann man dann
noch overflow: auto angeben, sonst kann das böse enden.
Per CSS kann man auch angeben, daß sich das Hintergrundbild
beim (sc)rollen nicht mitbewegt, paßt dann auch besser, wenn
sich das nicht wiederholen soll.

Empfehlenswer wäre so ein Aufbau:

<div style="height: 20px; width: 100%" >
   <span style="height: 20px; width: 50px; float: left; background-image: url(left.png);">LOLOLOL</span>
   <span style="height: 20px; width: 50px; float: right; background-image: url(right.png);">LOLOLOL</span>
   <span style="height: 20px; width: auto; margin-left: 50px; clear: none; background-image: url(center.png);">LOLOLOL</span>
</div>

so in etwa hats zumindest bei mir gut funktioniert… wenn du den mittleren dynamisch it abstufungen rechts und links machen willst, musst du nur rechts und links ein IMG-Setzen, und in der mitte kannst du das center.png wiederholen lassen :wink:

thx :slight_smile: das mit dem buchstabendreher bei height war schon das ganze problem an der sache.

allerdings stehich grad wieder vor nem problem
nach dieser zeile mit den 3 Feldern kommt ne neue div mit nem querbalken der vom nächsten bereich abgrenzt.
baue ich das bild mit <img… usw ein wird der balken auch so wie er soll unter den 3 vorherigen Feldern auf voller länge angezeigt.

nutz ich das bild jedoch nur als hintergrund und lege für die div height und width mit den werten des bildes fest, wird der balken im Hintergrund der oberen 3 felder angezeigt (quasi die zeile drüber) und nicht unter ihnen.

wie muss das angegeben werden damit der balken an der richtigen stelle positioniert wird, aber trotzdem nur hintergrund des blocks ist?

[code]

blub
blub
blub
blub
[/code]

versuch ich da die div mit dem inhalt blub zu entfernen, die ja da keine direkte Funktion hat ist die nächste div nicht mehr darunter, sondern als hintergrund der ersten 3 divs

das löst zwar das problem,
aber es tut sich dabei etwas anderes auf

ich hab auf der seite einen bereich von 1004 px zentriert wo alles drin ist, links und rechts wird der hintergrund je nach auflösung erweitert.

in diesem bereich habe ich 3 spalten ( eine links gefloatet, dann der content mit margin: 0 auto und eine spalte rechts gefloatet).

wenn ich an der stelle eben clear: left einbaue, werden meine 3 spalten nicht mehr nebeneinander angezeigt, sondern der content zuerst und darunter erst die linke und rechte spalte.

(das ganze nur bei FF und Opera, IE zeigt es so an wie es sein sollte)

hatte jetzt iwo gelesen dass clear teilweise unterschiedlich interpretiert werden kann

edit:

hat sich erledigt,

musste nur den mittleren bereich relative positionieren und die seitenspalten dann absolut hinsetzen

danke nochmal :slight_smile:

Ich hoffe du weißt wofür clear zuständig ist: css4you.de/clear.html

!

(sorry wegen Spam)