Neue Icons an Header-Bereich setzen

[sinankurt]

Hallo liebe HTML-Forum-User,

ich weiß, ich stelle zu viele Fragen und öffne zu viele Threads. Doch bitte versteht mich, ich bin auf eure Hilfe angewiesen. Ich bin auch dabei aus einem Buch HTML zu lernen

Dieses mal geht es um das setzen von .png Icons. Ich habe 4 Bilder von Sozialen Netzwerken, die ich an den markierten Bereich setzen möchte. Sie sollten senkrecht im markierten Bereich verlaufen. Also vom Anfang nach unten 4 Icons.

Doch wichtig ist, dass man sie auch bei jedem sieht. Also das sie wie bei anderen Blogs auch, bei jeder Auflösung normal unverändert sichtbar sind. Ist das möglich? Wie und Wo muss ich die "img src" setzen, damit diese Bilder dort im markierten Bereich erscheienn? Für eure Hilfe wäre ich sehr dankbar und froh.

Guten Abend, Kurt


PS: Webseite: www.quartel.de



Uploaded with ImageShack.us

 

[ins030]

kommst du denn an allen Stellen deines HTML ran?

z.B. könntest du nach dem
<div id="header">
<!-- hier --> was einbinden?

 

[sinankurt]

Ja, habe alle sheets vor mir, sind aber eben in .php

Soll ich direkt nach dem Header was einbinden? Ich dachte, ich muss was mit der CSS machen? :/

 

[ins030]

hehe ja in einer .php Seite kann man auch html und CSS einbinden.

OK, fangen wir langsam an (in der Ruhe liegt die Kraft)

Nach dem ..

<div id="header">

<div id="icons"> A</div>

einbinden

+++++++++++++++++++++
CSS
+++++++++++++++++++++

#icons{
position:absolute;
margin-top:50px;
height:20px;
width:20px;
margin-left:777px;
}

 

[sinankurt]

Ok, habe alles so gemacht wie du es geschrieben hast.

Doch nun erscheinen die Icons bei jedem Browser an eienm anderen Ort. Also nicht an der Stelle an der ich es haben wollte. was machen wir jetzt?

 

[ins030]

dort wo der Tag eingebunden ist
<div id="header">

gehe also von der Header.php oder so aus
ggf. Header.tpl <--öffnen mit dem editor

 

[sinankurt]

Ich habe es unter <div id="header"> in der header.php gesetzt. Jedoch erscheinen die Icons bei jedem Browser an eienm anderen Ort. Also nicht an der Stelle an der ich es haben wollte. Kannst auch unter quartel.de nachschauen :S

 

[ins030]

jup.. du hast den css code vergessen

stylesheet öffnen und da wo platz ist einbinden


#icons{
position:absolute;
margin-top:50px;
height:20px;
width:20px;
margin-left:777px;
}

 

[ins030]

So nun haben wir erst einmal die Icons an einer Stelle...

meine Frage dazu... Sollen die Icons immer rechts obens ein, egal bei welcher Auflösung und egal wie weiß ich die Webseite runter/hoch Scrolle?

 

[sinankurt]

Nein, den CSS Code habe ich aucb eingefügt. Dennoch ändert sich die Position bei allen Browsern immer, und die Icons sind nicht an der gewünschten Stelle, und nicht horizontal.

EDIT: Nö, sollten ganz normal fest oben rechts sein, wie bei dem Bild. Ich würde sie gerne so wie auf "politikgott.de" haben, so, dass sie immer sichtbar für jeden sind, also für jeden browser und auflösung.

 

[ins030]

Na dann css Updaten


Auzug aus der Politikgott.de

div#icons {
position: absolute;
color: #ffffff;
z-index: 2;
top: 60px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
height: 80px;
width: 20px;
left: 800px;
}

 

[sinankurt]

ja, aber ich möchte es aber im markierten bereich haben :S

 

[ins030]

Hast du es denn so eingebunden?

 

[sinankurt]

Nein, weil es sind doch die Werte für die Icons von Politikgott? Ich will ja die markierte Stelle haben :S

 

[ins030]

ja aber zunächst will ich doch sehen ob es geht..
Da wir ja schon einmal diese Probleme hatten

Also bitte 1:1 wie ich geschrieben habe.. einbinden
ist ja nur eine kleine Sache

 

[sinankurt]

Ok, habe es genauso eingebunden. Du kannst es dir ja auf der Webseite anschauen. Wie gehts weiter?

 

[ins030]

Hi,

id="header" ist bei dir nicht definiert

Bitte noch in der CSS einbauen


#header{
width:960px;
margin:0 auto;
padding-top:8px;
position: relative;
}

diese Werte sind optional .. also einbinden/testen und hoffen das es auf Anhieb gut aussieht

 

[sinankurt]

Ok, jetzt erscheinen sie in allen Browsern gleich. Doch: Sie erscheinen nicht in allen Auflösungen gleich, wie z.B. die linken Icons auf politikgott.de

Und, sie stehen nicht genau dort, wo ich sie haben möchte. Wo und wie kann ich die Positionierung nun bestimmen? Danke ins030 :-)

 

[sinankurt]

Hat jemand eine Idee, wie ich dieses Problem lösen kann?

 

[ins030]

Hi, was genau meinst du? du willst die Icons auch an der gleichen position?

Spiele einfach mal mit den Werten


margin-top:50px; <---- auf 200 px zB
margin-left:777px; <---- auf 0px zB