Ergebnis 1 bis 6 von 6

Thema: horizontale Navi mit zentrierten Bildern

  1. #1
    Meister(in)
    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard horizontale Navi mit zentrierten Bildern

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!


  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: horizontale Navi mit zentrierten Bildern

    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.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Macrosdesign
    Gast

    Standard AW: horizontale Navi mit zentrierten Bildern

    HTML-Code:
    <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>
    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
    Geändert von Macrosdesign (29.12.2008 um 10:53 Uhr)

  4. #4
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: horizontale Navi mit zentrierten Bildern

    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:



    HTML-Code:
    <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;    
        }
    Danke

    orientiert habe ich mich hieran: http://de.selfhtml.org/css/layouts/n...htm#horizontal
    Geändert von Questionmark (29.12.2008 um 11:35 Uhr)


  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: horizontale Navi mit zentrierten Bildern

    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;
    }
    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

  6. #6
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: horizontale Navi mit zentrierten Bildern

    Danke!

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


Ähnliche Themen

  1. seite so zentrierten
    Von 1k2jkjk3 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 18.04.2008, 23:31
  2. Horizontale Navi aufklappbar!
    Von CroweHammer im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 25.06.2007, 20:59
  3. Horizontale Scrollbalken
    Von aizn im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 21.02.2006, 17:38
  4. horizontale Bildlaufleiste?!
    Von Flaah im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 28.08.2005, 13:19
  5. Horizontale Navigation -- Problem ?
    Von Captain Cupra im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 27.06.2004, 13:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •