Text und Hintergrund aneinander ausrichten

volli69 · 09.02.2009

Vorab: Habe mich der Suche bedient. Da ich in CSS aber nicht sonderlich firm bin, finde ich mich nur schwer zurecht.

Ich habe folgendes Problem:

1. Hintergrundbild: bg.png welches sich horizontal wiederholt
2. Ein weiteres Bild (center.png) soll zentriert werden
3. Text (Navigation und Haupttext) sollen dem Punkt 2. ausgerichtet werden.

kleeaar · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

was genau willst du jetzt wissen?
Wie man divs horizontal und vertikal vermittelt?
oder willst du generell wissen wie man divs positioniert?

Grüße

volli69 · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

mein problem ist, ich bekome das center.png zentriert, so dass es bei jeder auflösung zentriert ist. allerdings bekomme ich das mit der navigation und dem haupttext nicht hin.

kleeaar · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

also wenn du horizontal zentrieren willst, dann kannst du das so machen

Code:

#div{
width:die Bildbreite;
position:absolute;
left:50%;
margin-left:-dieHälfterdeinesContainersinpixeln;
}

in diesen Container packst du jetzt deinen Inhalt(die anderen Container...) dann sollte alles zentriert sein... zumindest horizontal...
zum vertikalen zentrieren könntest du dir das anschauen...

Vertical Centering in CSS

Grüße

volli69 · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

ich check das mit "in diesen container packst du ...", versuch mich aber mal da durchzuwühlen.

trotzdem erstmal DANKE

Herr_D · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

1. BG für den body

2. einfaches Bild mit margin:auto (bzw. text-align:center für den body)

3. versteh ich nicht... wonach soll sich der Text ausrichten?

..ansonsten guck dir mal meine Signatur an

volli69 · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

Herr_D schrieb:
3. versteh ich nicht... wonach soll sich der Text ausrichten?

Dann saug mal die kompletten infos auf, dann kapierst auch du es

afr0kalypse · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

ich frag mal ins blaue...
zu 3.

navi und haupttext sollen also zentriert werden, so wie center.png?
dann wären sie wohl nach 2. ausgerichtet...
schau mal nach margin:0 auto; und text-align:center;

ps: je detaillierter man etwas erklärt, desto einfacher ist es (meistens) auch verständlich

volli69 · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

ich dachte mit dem bild das ich angehängt habe, wäre das einigermassen verständlich.

navi und haupttext sollen jedenfalls am center.png ausgerichtet werden. dieses befindet sich zentriert. die navigation ist rechtsbündig im center.png, der haupttext linksbündig. aber das bild sagt hier eigentlich alles aus.

danke

stb_87 · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

Ich schicke meinem Arzt auch immer ein Bild, auf dem ich zeige, wo mir etwas weh tut...

Hast du schon etwas Quelltext zur Hand?

Der hilft mehr als irgendein bescheidenes Bild.

PS: Bitte nicht frech werden, solche Leute werden hier gerne ignoriert

Real_Thunder · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

volli69 schrieb:
Dann saug mal die kompletten infos auf, dann kapierst auch du es

Was ist das denn für ein Ton! (Achtung, ist keine Frage, siehe Ausrufezeichen!)
Ich weiss ja nicht, aber Du willst doch was wissen... seit wann geht der Knochen zum Hund...

afr0kalypse · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

hauptfenster (center.png) mit position:absolute und dann zentrieren.
die untergeordneten elemente als blockelemente anlegen mit float:left und display:block.

cebito · 09.02.2009

AW: Text und Hintergrund aneinander ausrichten

Für jemand der nix versteht biste ganz schön frech, eigentlich sollte man gar nicht antworten, aber was solls. Kann halt das ewige Gejammer net hören...

Hier mal die Möglichkeit mit dem umschließenden div, geht natürlich auch anders und ließe sich auch zentrieren wie es kleeaar erklärt:

Code:

<body style="margin:0; padding:0; background-image:streifen.png; background-repeat:repeat-x;">
<div style="margin:0 auto; width:900px; background-image:url(center.png); background-repeat:no-repeat;">
  <div style="margin:0; margin-top:250px; width:900px;">Raum für den Inhalt des header</div>  <!-- margin-top wie die Höhe vom center.png -->
  <div style="margin:0; width:900px;">
      <div style="margin:0; width:200px; float:right;">Raum für die Navi</div>
      <div style="margin:0; width:auto;">Raum für den Inhalt der Seite</div>
  </div>
</div>
</body>

css auslagern wirst ja wohl allein können.