[HTML/CSS]Div/Bilder ausrichten

Vince · 10. August 2012

Hallo zusammen,

Ich bin gerade total verzweifelt und suche letzte Rettung hier^^
Ich habe einen normalen Div Container.

HTML:

Code

<div class="technik"> 
<div id="technik_inhalt"> 
 Inhalt 
</div> 
</div>

Dazu die CSS Deklaration:

Code

.technik { background-image:url(images/technik.png); 
background-repeat:no-repeat; 
width:215px; 
height:277px; 
position:absolute; 
right: 470px; 
top:520px;
}


#technik_inhalt {
width:200px;
height:215px;
margin-top:55px;
margin-left:10px;
color:white;
font-family:Tahoma;
font-size:10px;
}

Alles anzeigen

Leider wird der Div Container nur bei mir an der richtigen Stelle angezeigt.
Wenn ich das an anderen Computern mit anderer Auflösung/Browser anschaue, ist der immer total verschoben und irgendwo auf der rechten Seite.
Ich weiss, es ist bissl noobig, alles mit margin/padding etc. zu machen.

Aber wie mach ich das anders?^^
Die position:absolute ist doch auch nicht immer nötig oder doch?

Hier noch 2 Bilder.

Ihr seht, es ist nicht alles falsch, was mich irgendwie verwundert

Bei mir:

Bei anderen:

Ich hoffe, ihr könnt mir dabei helfen.

Gruss
Vince

TechnoLover · 10. August 2012

ich habe genau das selbe Problem.

Fabelwesen · 10. August 2012

Ich weiß zwar nicht ob das richtig ist, aber wenn deine Buttons extra abgespeichert sind, dann einfach per center in die Mitte rücken?

//Edit: Bitte korregiert mich, falls das Falsch ist! Bin selbst noch Anfänger in html & css

LeijaT · 10. August 2012

Gerade dein position : absolut sorgt dafür, dass kleinere Auflösungen das Bild anders präsentieren, wenn du nicht alles (nach <body> bis </body>) in einen zentrierten DIV-Container packst.

Vince · 10. August 2012

Also soll ich einfach den ganzen Body in einen Div packen und zentrieren?

Gruss
Vince

LeijaT · 10. August 2012

Quasi, nur eben nicht den Body selbst, sondern alles INNERHALB des body-tags

Vince · 10. August 2012

Also

Code

<body>
<div id="inhalt">
<img src="Button.png">
etc.
</div>
</body>

So war deine Überlegung?
Bin momentan nicht zu Hause und kann es erst am Abend testen.

Gruss
Vince

LeijaT · 10. August 2012

Korrekt.
und #inhalt zentrierst du dann.

Vince · 10. August 2012

sowas wie float:middle gibts ja net.
Wie zentrier ich den?

Oder soll ich schlicht per <center></center> machen?

Gruss
Vince

LeijaT · 10. August 2012

Nein, <center> ist kein valider CSS-Begriff.

text-align + vertical-align reichen da vollkommen aus. Alternativ empfiehlt es sich, dir ggf die Arbeit mit Grid-Layouts ans Herz zu legen (http://www.960.gs) - erleichtert dir die Formatierung deines Layouts enorm, sobald du dich erstmal daran gewöhnt hast.

Vince · 10. August 2012

Schau ich mir gerne mal an.

Aber wie richte ich jetzt meine Buttons aus?
Die sind jetzt alle auf der Linken Seite untereinander.
Mit margin-left etc. funktioniert das gar nicht...

EDIT: http://infinity-hosting.ch/

Gruss
Vince

4#Future · 10. August 2012

LOL

Das Du das Problem nicht selbst siehst wundert mich.

Du verwendest position: absolute in der CSS Datei
und legst dann die Position von oben und rechts mit
Pixeln statt Prozent fest.

-> MEGA-SCHWACHSINN

Je nach unterschiedlicher Monitorauflösung werden
Deine Container dann natürlich verschoben.

Lösung:

Deine Angaben per Prozentangaben lösen.
UND IMMER von der Mitte ausgehend positionieren!

Wenn Du mehr wissen willst, musst Du mich direkt anschreiben.

Vince · 10. August 2012

Danke für die Hilfe.
Funktioniert wunderbar

Gruss
Vince

xGreekz7x · 10. August 2012

mach am anfang :

</div>

Dann machste in der CSS:

#main-page {
width: 1100px;
margin:0 auto;
}

Dann solltest du das ganze nur noch positionieren

4#Future · 10. August 2012

Das Problem wurde per TeamViewer und Teamspeak gelöst.

Zitat

<div id="main-page"></div>

Dann machste in der CSS:

#main-page {
width: 1100px;
margin:0 auto;
}

Welch absoluter Blödsinn...

Es geht nicht darum ein Element in der Mitte
auszurichten, sondern Elemte an alle Monitor
Auflösungen anzupassen.

Dass geht nur mit Prozentanweisungen der
äußeren Elemente für die jeweilgen Container.

xGreekz7x · 10. August 2012

Okay dann es hier geschlossen werden

LeijaT · 11. August 2012

Zitat von 4#Future

Das Problem wurde per TeamViewer und Teamspeak gelöst.

Welch absoluter Blödsinn...

Es geht nicht darum ein Element in der Mitte
auszurichten, sondern Elemte an alle Monitor
Auflösungen anzupassen.

Dass geht nur mit Prozentanweisungen der
äußeren Elemente für die jeweilgen Container.

Alles anzeigen

Das ist nicht ganz richtig, so leid es mir tut. In der Webanwendungsentwicklung ist es üblich, wie Greekz7x und ich schon erwähnten, den content obligatorisch zu zentrieren. Dadurch ist sichergestellt, dass - egal bei welcher Desktopauflösung und Browserfenstergröße - der Content immer mittig ist. Der Rest wird durch Gridlayouts realisiert. Prozentangaben lohnen sich bei den heutigen Standards nur noch auf Seiten, die - wie beispielsweise Foren - von der Größe des Layouts variieren müssen/sollen, sobald sich die Browserfenstergröße ändert.

Das musste ich noch loswerden, freut mich, dass du es geschafft hast Vince.

4#Future · 11. August 2012

LeijaT

Bevor Du postet, solltest Du Dir mal meinen Beitrag aufmerksam durchlesen.
Dort habe ich erwähnt, das dies mit dem genannten Problem nichts zu tun hat.

Dass man Objekte heutzutage zentriert, ist optisch nunmal nicht unüblich.

Alles andere, was Du von Dir gegeben hast, ist mal wieder völliger Quatsch.

Prozentangaben hier im Forum mögen sich vielleicht auf Breite des Contents
auswirken, aber diese ist auch nicht in der Position absolute deklariert, sondern zentral positioniert.

Das Problem dort lag aber darin, dass einige Container einfach durch die absolute
Position gegeben waren und sich dann, je nach Auflösung, verschoben haben.

Das habe ich angepasst.
Und dazu brauche ich das Element mit margin nicht in der Mitte zentieren.

In Zukunft einfach richtig lesen, dann passt's schon

LeijaT · 11. August 2012

Bevor sich das hier in die nächste sinnlose Diskussion entwickelt, für die mir meine Zeit viel zu schade ist, verkneife ich mir meinen nächsten Kommentar einfach und sage "dito".

breadfish.de 11. März 2022