• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild positionieren

T

Tytomik

Neues Mitglied
Hallo,
ich möchte mein Layout immer von der Mitte des Browserfenster ausgehen lassen, also das es auch beim zoomen zur mitte kleiner oder größer wird und die ränder immer gleich groß sind.
Meine Idee ist, Mein Bild(Layout) mit CSS immer bei 50% des Fensters zu plazieren und es dann mit der hälfte der Bildgröße zu subtrahieren. Allerdings weiß ich nicht wie mal mit CSS, prozentuales und pixel Ausrichtung verbinden kann.

Ich hoffe ihr versteht mein problem! Danke !

Code: 
<div id="layout"><img src="Layout.jpg"  alt="layout"></div> 

<script type="text/javascript">
document.getElementById('layout').style.left=50 +'%' - 540 +'px';[B]​ // hier mein Problem[/B]
</script>
 
Mit CSS zentriert man horizontal so:

Code: 
width: 500px;
margin: 0;

Einzig bei vertikaler Zentierung müsste man ggfs. auf absolute Positionierung zurückgreifen. Aber es gibt Alternativen:
CSS: horizontale und vertikale Zentrierung
Horizontale und vertikale Zentrierung mit CSS

Allerdings weiß ich nicht wirklich was Du mit "zoomen" meinst?! Meinst Du damit den Browser-eigenen Zoom? Der ist abhängig von den Einstellungen des Nutzers entweder ein Textzoom oder ein Objekte-Zoom. Beides kann man nur mit relativen Maßen für Schriftgrößen und Breiten "abfangen". Aber ob das der Art Zoom ist den Du meinst ..?
 
Wenn ich das richtig Verstanden habe möchtest du das dein Design immer in der Mitte ist, egal bei welcher Bildschirmauflösung. (Wie z.B. bei Youtube)
Ich habe das so gelöst:
HTML: 
<center>
<div class="center_div">
INHALT
</div>
</center>
und dann mit CSS:
Code: 
.center_div {
width:1000px;
text-align:left;
}
"width" entscheidet dann wie breit das Fenster in der Mitte ist. "text-align" sorgt dafür das der Text innerhalb des Fensters links ist, da er durch das center in der Mitte wäre.
MfG Music!
 
Bei deinem Beispiel sehe ich keinen Grund wieso der Browser dieses <div> zentrieren sollte?! Du setzt einfach nur eine feste Breite und sagst unnötigerweise, dass inline-Elemente (und Texte) linksbündig sein sollen. Das passt vielleicht bei älteren IE-Versionen, heutzutage würde ich auf so etwas verzichten.

Außerdem passt man Webseiten nicht an Auflösungen an.
 
Bei deinem Beispiel sehe ich keinen Grund wieso der Browser dieses <div> zentrieren sollte?!
Zum Vergrößern anklicken....
Dafür sorgt das center Tag.

Das passt vielleicht bei älteren IE-Versionen, heutzutage würde ich auf so etwas verzichten.
Zum Vergrößern anklicken....
Das Funktioniert mit Firefox 16.0.2 (auf Windows 7) und sollte auch bei andern Browsern Problemlos funktionieren.

Du setzt einfach nur eine feste Breite und sagst unnötigerweise, dass inline-Elemente (und Texte) linksbündig sein sollen.
Zum Vergrößern anklicken....
Kann es sein das du das Center Tag übersehen hast?

Außerdem passt man Webseiten nicht an Auflösungen an.
Zum Vergrößern anklicken....
Das verstehe ich jetzt nicht ganz!? So gut wie jede Website ist an verschiedene Auflösungen angepasst. (Beispiel wie vorhin schon genannt Youtube)
 
<center> habe ich tatsächlich übersehen. Muss dazu allerdings sagen, dass es seit Jahren bereits nicht genutzt werden sollte. Es handelt sich dabei um ein Relikt aus alten Zeiten als CSS noch nicht weit verbreitet war. Das Browser das heutzutage noch erkennen ist gut Glück - irgendwann hört das auf. Denn Zentrierung ist Gestaltung und somit Aufgabe von CSS - nicht von HTML.
 
Ich geb zu die beste Lösung ist es nicht, aber es erfüllt seinen Zweck.
<center< wird nach wie vor oft für das zentrieren von Texten verwendet, ich denke nicht das dieses Tag in Zukunft nicht mehr/falsch interpretiert wird.
 
Oft? Ich habe es in diesem Jahrtausend noch nie verwendet und kenne auch keine Seite wo das noch aktiv genutzt wird Oo
 
Also ich habe das jetzt auf die weiße gemacht:
Code: 
<IMG class="hintergrund" src="hintergrund.jpg" alt="hintergrund">

<style type="text/css">
IMG.hintergrund {
    display: block;   
    margin-left: auto;
    margin-right: auto }
}
</style>

Das funktioniert auch, allerdings nicht bei Internet Explorer wieso?
 
Hier hast Du mehrere Schreibfehler eingebaut:

Code: 
<style type="text/css">
IMG.hintergrund {
    display: block;   
    margin-left: auto;
    margin-right: auto }
}
</style>

Korrekt:

Code: 
<style type="text/css">
img.hintergrund {
    display: block;   
    margin-left: auto;
    margin-right: auto;
}
</style>

Abgesehen davon sollte dieser CSS-Code zwischen <head> und </head> stehen, nicht mitten im HTML-Dokument.

Und wenn Du das Bild zentriert haben willst, solltest Du auch eine feste Breite angeben. Also:

Code: 
<style type="text/css">
img.hintergrund {
    display: block;   
    margin-left: auto;
    margin-right: auto;
    width: 240px;
}
</style>

Musst Du natürlich an deine Maße anpassen.
 
Ich habe das jetzt hinbekommen, allerdings wenn ich auf diese Art Bilder zentriere, sind sie immer untereinander und ich kann keine Höhe festlegen!
Ich habe es so gemacht:
HTML: 
<div id="bild1"></div><div id="bild2"><img class="bild2" src="bild1.png" alt="bild2"></div>
<div id="bild3"></div><div id="bild4><img class="bild4" src="bild3.png" alt="bild4"></div>
Code: 
<style type="text/css">


* {
margin:0;
padding:0;
}


html, body {
height: 100%;
width: 100%;
}
#bild1 {
float: left;
}


#bild2{
margin: 0 auto;
position: relative;
height: 35px;
width: 245px;
clear: left;
}



#bild3 {
float: left;
}


#bild4{
margin: 0 auto;
position: relative;
height: 35px;
width: 245px;
clear: left;


}
</style>
Ich hätte sie gerne nebeneinander.
 
Du hast hier einen HTML-Fehler eingebaut:

Tytomik schrieb:
HTML: 
<div id="bild3"></div><div id="bild4><img class="bild4" src="bild3.png" alt="bild4"></div>
Zum Vergrößern anklicken....

Fällt es dir auf? ;)

Wenn Du mehrere Bilder nebeneinander haben und insgesamt zentrieren willst, musst Du wie schon gesagt ein umgebendes Element festlegen und diesem die o.g. Werte geben. Also z.B.:

HTML: 
<style type="text/css">
ul.hintergrund {
    display: block;   
    margin-left: auto;
    margin-right: auto;
    width: 640px;
}
</style>

Und als HTML beispielsweise eine <ul>-Liste der Du o.g. Klasse gibst. Darin dann pro <li> eines der <img>-Bilder. Ggfs. musst Du die <li> und die Bilder dann noch mit "display: inline;" und/oder "float: left;" versehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben