Grafik mittig und ohne zwischenraum zum oberen rand

[Garret]

Hallo,

Ich habe ein dummes problem.
Und zwar ist mein wunsch eigenlich ziehmlich simpel:
Ich will eine Grafik horizontal mittig, und vertikal mit einem 0px abstand zum oberen rand einbauen.

Das ganze sollte halt natürlich auch flexibel für verschiedene auflösungen funktionieren.

Ich hab schon so viel probiert, mit Tabellen, und unzählichen css kombinationen.
Entweder schaff ich es, die grafik mittig darzustellen, aber mit einen abstand zum oberen rand, oder ich schaffe es (mit style="position:absolute; top:0px;") die grafik perfekt ohne rand an den oberen rand zu bewegen, aber dann ist die verdammte grafik immer linksbündig -_-

so schwer kann das doch garnicht zu lösen sein ..

mfg,
Garret

[Tim]

Hallo

mit style="position:absolute; top:0px;" die grafik perfekt ohne rand an den oberen rand zu bewegen, aber dann ist die verdammte grafik immer linksbündig

wie wäre es denn mit (style="position:absolute; top:0px;" align="middle")

Gruß Tim

[Garret]

<img src="../inc/header.jpg" style="position:absolute; top:0px;" align="middle">

Nein, bleibt immernoch Linksbündig :-(

[Hopsel]

Hi Garret!

Ein Blick in die FAQ hätte genügt: Wie zentriere ich Elemente mit CSS?.

Von dort kommst du auf folgenden Code:

#zentriert {  
  position:absolute;  
  top:50%;  
  left:50%;  
  width:30em;  
  height:20em;  
  margin-left:-15em;  
  margin-top:-10em;  
}

Du positionierst also ein Element bei 50% der Fensterbreite und rückst es duch margin-left um die Hälfte seiner Breite nach links, sodass seine Mitte jetzt auch in der Mitte des Anzeigebereichs liegt.

MfG H☼psel

[Garret]

Super, damit hat es geklappt!

<img style="position:absolute; top:0px; left:50%; margin-left:-497.5px;" src="../inc/header.jpg" width="995">

Natürlich kommt auf der webseite noch mehr, aber das soll halt die header grafik sein, die eben jenes framese ausfüllen soll.

Nur wollts sich halt net so perfekt ausrichten wie ichs wollte^^

Danke nochmals!

[Struppi]

Super, damit hat es geklappt!

<img style="position:absolute; top:0px; left:50%; margin-left:-497.5px;" src="../inc/header.jpg" width="995">

Wieso eigentlich position:absolute?
Du kannst, wenn du das Bild in ein Blockelement umwandelst mit margin zentrieren. Wobei ich in deinem Fall das Bild als Hintergrundbild eines Bereiches definieren würde und dann kannst du mit center dieses einfach zentrieren.

Struppi.

[Gunther]

Hallo,

Ich will eine Grafik horizontal mittig, und vertikal mit einem 0px abstand zum oberen rand einbauen.

Das ganze sollte halt natürlich auch flexibel für verschiedene auflösungen funktionieren.

Ich hab schon so viel probiert, mit Tabellen, und unzählichen css kombinationen.

In deiner CSS-Datei (oder auch im <style> Abschnitt deiner HTML Datei)

  
.zentriertes_image {  
display: block;  
margin: 0 auto;  
padding: 0;  
}  

und im HTML Teil

  
<img class="zentriertes_image" src="[Pfad zur Datei]" width="[Breite]" ...>  

so schwer kann das doch garnicht zu lösen sein ..

Allerdings wird deine Seite ja kaum nur aus dem einen Image bestehen?
Was die Integration in andere Inhalte/ Elemente angeht, müsstest du schon noch etwas mehr Informationen rausrücken.

Gruß Gunther

[Detlef G.]

Hallo Garret

Entweder schaff ich es, die grafik mittig darzustellen, aber mit einen abstand zum oberen rand,

Hast du dabei bedacht, dass body und selbst html bereits ein margin oder padding haben können?

Abhilfe schafft da, diesen selbst zu definieren.

html, body {  
 margin-top:0;  
 padding-top:0;  
}  

Auf Wiederlesen
Detlef