horizontale Navi mit zentrierten Bildern

Questionmark

Hallo,

mich treiben mal wieder 2 kleinere Probleme zur Weißglut, da ich einfach den Fehler nicht finden kann...

Es geht hierum: http://idadi.id.ohost.de/test/

Problem 1: Sowohl das i-Symbol als auch der Text sind 2 Grafiken mit unterschiedlicher Höhe, die exakt auf ihren Inhalt zugeschnitten worden sind (also an Randunterschieden liegt das Problem mMn nicht). Jetzt klebt das Symbol oben in der Box und der Text ist zentriert. Ich hätte aber gerne beides zentriert - will aber irgendwie nicht klappen....

Problem 2: Eigentlich wollte ich die Liste mir display:inline horizontal anordnen, aber auch da gehen meine Vorstellungen nicht mit der Interpretation des Browsers konform. Wahrscheinlich ordne ich Eigenschaften, den falschen Elementen zu, aber ich find den Bock einfach nicht

Ich bedanke mich schon mal bei den fleißigen Helfern

synaptic

also ich würd der navi ne feste breite geben, den bildern das height und width-attribut wegnehmen und zwei eigene css-klassen dafür schreiben und die bilder entweder auch entsprechend einzeln positionieren oder die dinger nochma in nem span mit display:block; wrappen und dieses span-tag dann mittig positionieren.

Macrosdesign

HTML

<body>
<div id="central">
<div id="navi">
<ul>
<li>
<a href="#">
<img class="menueimage" border="0" alt="Infozeichen" src="images/bild-ausrufezeichen.png" style="margin-top: 10px; float: left;"/>
<img class="menueimage" border="0" alt="Informationen" src="images/text-info.png" style="margin-top: 20px;"/>
</a>
</li>
<li>
<a href="#">Punkt 2</a>
</li>
</ul>
</div>
</div>
</body>
</html>

Alles anzeigen

das hab ich mit firebug so gemacht und das geht...mal so auf die schnelle

ps: vergessen zu clearen und is wohl eher ne scheiss methode aber sie klappt war auch mit firebug in 1 min getestet

Questionmark

Danke schon mal für eure Antworten. Hab jetzt mal einen Misch daraus gebildet und die einzelnen Grafiken jeweils zu einer Grafik zusammengefügt.

Mein Problem jetzt: Irgendwie wir das Bild nicht als zu dem Link gehörend eingestuft - der Rahmen fehlt.

Ich hab es jetzt nicht hochgeladen, sofern noch jemandem vielleicht eine Lösung zum ursprünglichen Problem einfällt, daher ein Screenshot und der Text:

[Blockierte Grafik: http://s11b.directupload.net/images/081229/temp/zicjfnsq.jpg]

HTML

<ul id="navi">
                <li><a href="#">test<img src="images/info.png" alt="Informationen"></a></li>
                <li>Punkt 2</li>
            </ul>

Code

ul#navi {
    margin:55px auto 0 auto;
    width:950px;
    border: 1px solid red;
    }

ul#navi li {
    display: inline;


    }

ul#navi a, ul#navi span {
    border: 1px solid #d0931d;    
    }

Alles anzeigen

Danke

orientiert habe ich mich hieran: http://de.selfhtml.org/css/layouts/na….htm#horizontal

sejuma

Wie wär's damit?

Code

ul#navi {
    margin:55px auto 0 auto;
    width:950px;
    border: 1px solid red;
    }

ul#navi li {
float: left;


    }

ul#navi a, ul#navi span {
    border: 1px solid #d0931d;    
    }


a.info:link {
background: url(text-info.png);
display: block;
width: 154px;
height: 19px;
color: green;
text-decoration: none;
}

Alles anzeigen

Code

<ul id="navi">
                <li><a class="info" href="#">test</a></li>
               <li><a class="info" href="#">test</a></li>
            </ul>

Siehe auch Link-Buttons

Questionmark

Danke!

Hab das Ganze jetzt so ähnlich wie sejuma gelöst

Tags