# Bild mittig setzten



## perle93 (10. Dezember 2010)

Hallo, ich würde gerne mit meinem vorhandenem Code das Logo Bildschirmunabhängig immer in der Mitte platzieren. Nun ist es so, das ich in dem Code mehr als nur ein Div habe, aber seht selbst.
Mit "align=center habe ich es probiert, aber klappte nicht wie gewünscht.


```
<a style="position:absolute; top: 350px; left: 250px;" href="http://www.mmm/seiten/news.htm" onmouseover="window.document.images[0].src = 'bilder/mmm_kontur.png'" onmouseout="window.document.images[0].src = 'bilder/mmm.png'">
<img src="bilder/mmm.png" border="0"  width="780" height="100"></a>
```

Vielen Dank


----------



## perle93 (10. Dezember 2010)

Noch eine Frage zu "Anker" Verlinkungen. Ich würde gerne eine Grafik nutzen, wie oben auch als mouseover mit einer Verlinkung auf einen Text. Ich finde nun einiges bei google, etc., aber ich bekomme es nicht hin, weil mir immer nur der erste Teil angezeigt wird, also wohin der Anker gehen soll, z.B. oben. Oben ist ja nun vielleicht für HTML klar definiert und die Seite springt nach oben, ich würde gerne auf eine bestimmte px Höhe den Link setzen, oder auf das Textfeld. Muss ich dem Textfeld einen Namen geben?

Danke euch


----------



## zenturio (11. Dezember 2010)

perle93 hat gesagt.:


> Hallo, ich würde gerne mit meinem vorhandenem Code das Logo Bildschirmunabhängig immer in der Mitte platzieren. Nun ist es so, das ich in dem Code mehr als nur ein Div habe, aber seht selbst.


Wo? Dort? Oder doch woanders? :suspekt:



perle93 hat gesagt.:


> Mit "align=center habe ich es probiert, aber klappte nicht wie gewünscht.
> 
> 
> ```
> ...


Wundert es dich wirklich, bei deinen absoluten Positionsangaben? :suspekt:


----------



## flankenkiller (11. Dezember 2010)

... denn sie wissen nicht, was sie tun ;-)


----------



## perle93 (11. Dezember 2010)

Ja, die absolute Position soll ja nicht mehr sein, daher die Änderung... deswegen frage ich ja hier.


----------



## hela (11. Dezember 2010)

Also nochmal die Fragen, die eigentlich schon gestellt wurden:


perle93 hat gesagt.:


> Hallo, ich würde gerne mit meinem vorhandenem Code das Logo Bildschirmunabhängig immer in der Mitte platzieren.


Wovon die Mitte?


perle93 hat gesagt.:


> Nun ist es so, das ich in dem Code mehr als nur ein Div habe, aber seht selbst.


Welches DIV meinst du? In deinem Beitrag sehe ich kein DIV.


perle93 hat gesagt.:


> Mit "align=center habe ich es probiert, aber klappte nicht wie gewünscht.


Wo bitte hast du das versucht?


----------



## perle93 (11. Dezember 2010)

ich möchte gerne das Logo Bildschirmunabhängig immer in der Mitte haben. Also auf einem 15" in der Mitte so auch beim 30" Bildschirm. Ah, da war kein Div, stimmt,-) Und probiert habe ich es bei mir auf der Seite, aber es klappte nicht, deswegen frage ich hier... Ich muss die absolute ja ändern in ein center, oder was anderes. Weiss nicht genau in was ich es ändern muss und wo im Code.


----------



## iBirne (11. Dezember 2010)

CSS Code

position: absolute;
width: BREITE VOM DIV px;
height: HÖHE VOM DIV px;
left: 50%;
top: 50%;
margin-left: - HALBE BREITE VOM DIV px;
margin-top: - HALBE HÖHE VOM DIV px;

Sollte normalerweise funktionieren. 
Die großgeschriebenen Werte müssen natürlich durch die Pixelangaben ersetzt werden.


----------



## perle93 (12. Dezember 2010)

danke dir, das sieht schon gut aus, aber er geht nicht von oben runter auf die Mitte. Der Code sieht nun so aus.




```
<a style="position:position: absolute;width: 780px;height: 100px;left: 50%;top: 50%;margin-left: 125px;margin-top: 175px;" href="http://www.mm/seiten/news.htm" onmouseover="window.document.images[0].src = 'bilder/mm_kontur.png'" onmouseout="window.document.images[0].src = 'bilder/mm.png'"><img src="bilder/mm.png" border="0"  width="780" height="100"></a>
```


----------



## sonntagsprediger (12. Dezember 2010)

Dabei hast du eine Vorgabe erhalten, in die du lediglich die *passenden* Werte einzusetzen hattest.

Die margin-Angaben erhalten zum einen bei dieser Positionstechnik immer ein negatives Vorzeichen, um die Box im Viewport nach links und oben zu verrücken, denn die Angabe "50%" bezieht sich auf den oberen und linken Boxenrand, womit sie "außermittig"  im Vewport sitzt, und die beiden Werte betragen immer die Hälfte von der Boxenbreite und -höhe.


```
position:position: absolute; /* ein position: ist hier zuviel */
width: 780px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -390px; /* neg. Hälfte von width:780px */
margin-top: -50px; /* neg. Hälfte von height:100px */
```

Siehe hierzu auch das passende Beispiel http://d-graff.de/selfhtml/center1.html .


----------



## perle93 (12. Dezember 2010)

Habe das nun so eingegeben



```
<a style="position:position: absolute;width: 780px;height: 100px;left: 50%;top: 50%;margin-left: -390px;margin-top: -50px;" href="http://www.spillmannechsle.ch/seiten/news.htm" onmouseover="window.document.images[0].src = 'bilder/spillmannechsle_kontur.png'" onmouseout="window.document.images[0].src = 'bilder/spillmannechsle.png'"><img src="bilder/spillmannechsle.png" border="0"  width="780" height="100"></a>
```

Das Bild verschwindet immer weiter oben links aus dem Fenster... Was habe ich übersehen?


----------



## iBirne (12. Dezember 2010)

Du hast auch immer noch zwei mal "position" in dem CSS-Code. Nimm mal ein position raus


----------



## perle93 (12. Dezember 2010)

ah, die Position,-)) danke habe es übersehen,-) klappt!


----------



## Dr Dau (13. Dezember 2010)

Hallo!



perle93 hat gesagt.:


> Noch eine Frage zu "Anker" Verlinkungen. [...] Muss ich dem Textfeld einen Namen geben?


Für HTML einen Namen bzw. für XHTML eine ID (zumindest der IE5.5 kommt bei HTML auch mit ID klar).

```
<a href="#ziel">hier klicken um zum Ziel zu kommen</a><br>
<a href="#anders_ziel">hier klicken um zum anderen Ziel zu kommen</a><br>
ganz<br>
viel<br>
Text<br>
<div name="ziel">foo</div>
noch<br>
mehr<br>
Text<br>
<p id="anders_ziel">bar</p>
```
Um auf der sicheren Seite zu sein solltest Du nur das Alphabet, die Zahlen 0-9, und als Sonderzeichen den Unterstrich (_), den Bindestrich (-) und den Punkt (.) verwenden.
Andere Zeichen sind zwar teilweise auch erlaubt (je nach dem ob HTML oder XHTML), allerdings halten sich manche Browser ja bekannterweise nicht an jeden Standard. 

Eigentlich sollten die Browser auch zwischen Gross- und Kleinschreibung unterscheiden..... eigentlich. 
Um auch hier auf der sicheren Seite zu sein, benutze ich grundsätzlich die durchgängige Kleinschreibung.
Viel wichtiger sind halt aussagekräftige Ankernamen (was mit den o.g. Zeichen durchaus machbar ist), damit man selbst den Überblick behält. 
Der Ankername darf natürlich nur einmalig vorkommen, da der Browser sonst nicht weiss welcher Anker gemeint ist. 

Wenn sich das Ziel zu nahe am Seitenende befindet, wird es natürlich nicht an den oberen Rand "geschoben".
Abhilfe können z.B. (viele) Leerzeilen schaffen.

Damit die Leute nicht jedesmal hochscrollen müssen, solltest Du bei den Zielen auch noch einen Anker setzen, der an den Seitenanfang verweist:

```
<a href="#top">nach oben</a>
```
Ist zwar (soweit ich weiss) kein offizieller Standard, sollte jedoch auf grund des langjährigen allgemeinen Gebrauchs von allen Browsern "verstanden" werden.

Ob Du bei den a-Elementen nun Text oder Grafiken verwendest, bleibt Dir überlassen.

Gruss Dr Dau


----------



## perle93 (13. Dezember 2010)

Was ich genau brauche beim Anker ist, dass ich von einer verlinkten Grafik weiter unten auf der Seite einen Textblock erreichen möchte. ich muss mir deinen Beitrag allerdings noch genauer lesen, danke erstmal


----------



## perle93 (14. Dezember 2010)

ich werde einfach das Bild nach unten schieben, also nicht Top, sondern down, oder wie heißt es dann, wenn ich an den untersten Rand möchte?


----------



## iBirne (14. Dezember 2010)

Das ganze heißt "bottom"


----------



## perle93 (18. Dezember 2010)

super, danke dir!


----------

