Html Problem bzgl Titelbild mittig ausrichten.

Mauli999 · 16.01.13, 20:24

Also erstmal meine Problembeschreibung:

Wir haben ein Projekt für die nächsten Wochen in dem wir eine Web Seite erstellen müssen zu nem bestimmten Thema, jetzt hab ich mir zu erstmal die Roh Form gebastelt und mein Kollege hängt an den Designs.

Der Aufbau ist halt Titelbild was festgesetzt ist, an dem unten rechts noch ein Button für die Navigationsseite ist.
darunter halt maincontent und am ende noch ein Button fürs Impressum der auch festgesetzt ist und mittig ist.

alles unterhalb des Titelbilds ist mittig ausgerichtet und passt sich auch automatisch den Gegebenheiten an, nur das Titelbild spackt rum. Im Moment sitzt alles perfekt mittig, aber sobald man halt auf nen größeren Bildschirm wechselt oder halt nur ran/raus zoomt versetzt es sich halt..

Der Html Code:

Css Code:

Ich hab jetzt die ganze Zeit nach dem Fehler gesucht und das eig genauso gemacht wie im maincontent, bzw im container aber es klappt einfach nicht das automatisch anzupassen..

wäre schön wenn jemand den fehler finden würde.. ^^

greetz

ps. falls ich irgendwas falsch gemacht habe beim Post, bitte verzeiht es mir und weist mich drauf hin, ist immerhin mein erster Post^^

Exe777 · 17.01.13, 07:10

also wenn ich das jetzt richtig verstanden habe willst du dein Titelbild immer an der gleichen position über dem Main-Content haben. Sprich es soll sich auch mitbewegen wenn der Main-Content sich verändert, also eine andere Auflösung benutzt wird oder was auch immer^^

wenn das der fall ist versuch es doch mal damit

Code:

<html>
 <head>
  <link href="main.css" rel="Stylesheet" type="text/css" />
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="HeaderTest.png" width="902" height="150">
   </div>
   <div id="main-content">
   </div>
  </div>
 </body>
</html>

das soll jetzt erst mal ein Ansatz sein^^

achso der Wrapper dient nur dafür das sich alles in einem div-Container befindet und somit hast du dann alles immer an der richtigen stelle (wenn du im CSS alles richtig machst^^)
im CSS gibst du im Wrapper an das er sich immer mittig halten soll
das ganze machst du nicht mit

text-align:center;

sondern mit

margin-right: auto;
margin-left: auto;

Mauli999 · 17.01.13, 15:58

Erst einmal Danke für die Antwort,
das ich das mit den beiden margins machen muss wusste ich, nur habe ich das auch zig mal ausprobiert und auch andere Sachen und so ist das mit dem Text-align da stehen geblieben.

Aufjedenfall so ausprobiert aber es geht nicht, einen Container der alles im Body umschließt hab ich auch schon und wenn ich das titelbild in den container bei tue dann ist alles durcheinander^^

Mauli999 · 17.01.13, 16:14

Gut Danke Jedenfalls für den Tipp, hab das jetzt soweit hin gekriegt das alles mittig bleibt

Top Danke

also nur mit
margin-right: auto;
margin-left: auto;
hab ichs nicht hin gekriegt, musste noch die breite darin komisch anpassen auf 1248px, aber jetzt bleibts da wo es bleiben soll

Exe777 · 18.01.13, 06:45

ich hab ja auch nur geschrieben es soll ein ansatz sein^^ den rest musst du selber rausfinden^^
und wenn die elemente sich noch nicht an richtiger stelle befinden dann probier es mal mit

Code:

-position (z.B. position: relative;)
-float (z.B. float:left;)

wie gesagt^^ nur Ansätze^^ will dir ja nicht die ganze arbeit abnehmen^^