Hallo

Ich bin gerade dran, meine Vereinhomepage neu zu gestalten.

Nun habe ich in der Navigation ein .png-File als Button.

Homepage: http://jublagrosswangen.ch/cssseite/test_css.html

Der grosse ,,News'' Button möchte ich jetzt in der Mitte des grünen ,,Rahmen'' haben.

Ich arbeite mit CSS und mit <div>'s

Kann mir da jemand etwas Hilfe leisten?

Danke

???

Bitte was?

Wo ist auf der Seite ein großer PNG Button?

Und wie meinst mitte des grünen Rahmens? Mitte von der Breite? Höhe?

Edit: Ist dein großer PNG Button einfach nur Orange?

Edit2: Hab ihn gefunden! Mach mal aus dem Pfad button/news.png anstatt button\news.png

Bearbeitet 4. August 201015 j von Snipes83

Also nochmals, war vorhin ein bisschen schnell gegangen.

Auf der Seite: http://jublagrosswangen.ch/cssseite/test_css.html sieht man oben links in der Navigation in schwarzer grosser Schrift ,,News''.

Dieses ,,News'' ist ein .png-File. Dieses ,,News'' möchte ich jetzt ca. 1 - 2 cm. nach rechts verschieben. Aber ich bringe das nicht hin.

Auf der Seite: http://jublagrosswangen.ch/cssseite/test_css.html sieht man oben links in der Navigation in schwarzer grosser Schrift ,,News''.

Nein, sieht man nicht (zumindest nicht im Firefox). Dein Image Pfad ist falsch. Du hast den Slash falschrum. Es muss blabla/image.png heißen.

Geht es rein um denn News Button und alle anderen Links werden so beibehalten oder werden die auch zu PNG-Buttons?

Generell kannst du alle Elemente ne ID mitgeben. Also beim DIV zum Besipiel:

<div id="test">

und diese ID kannst du dann im CSS nutzen, auch bei Bildern.

Dann sind Margin und Padding deine Freunde!

So, hab den Pfad angepasst.

Also später werden dann alle Links zu .png-Files.

also dann schreibe ich z.B. <div id=test><img.....></div> oder?

und dann im Stylesheet? einfach einen #test eintrag?

Habs hingekriegt mit Margin Pading.

Danke vielmals.

also dann schreibe ich z.B. <div id=test><img.....></div> oder?

und dann im Stylesheet? einfach einen #test eintrag?

Ja und Nein! Du kannst dem <img> tag selbst auch ne id mitgeben.

Also <img id="tollesBild">.

Und dann im css

#tollesBild{

margin-left:20px

}

Aber wenn alle links zu nem PNG-Button werden, dann würde ich diese alle in ein DIV packen.

Also <div id="bilder">

<img1...>

<img2...>

</div>

somit musst du nicht für jedes Bild einzeln den Abstand angeben sondern ein einziges mal für dein DIV.

hallo Bumi

was macht deine Band?

nu wo ich die .ch adresse sehe, weis ich das du es bist :cool:

Habs hingekriegt mit Margin Pading.

Danke vielmals.

Jupp passt. 2 Anmerkungen noch:

Bastel deinen A-Link nicht um das ganze div! Da wirst sonst noch Probleme bekommen. Hau den A-link ins Div mit rein, also nur um das <img>!

Da du den Border beim Image auf 0 gesetzt hast, gehe ich davon aus das du keine Border bei den Bilder willst. Nun müsstest du ja jedesmal Border=0 angeben. Stattdessen kannst du im CSS nen .img{border:none}

mitaufnehmen. Dies gilt dann automatisch für alle images die kommen werden!

Wenn sonst noch fragen auf kommen: nur zu!

Grüße Snipes83

Mal ne ganz andere Frage... wieso bastelst du dir die Homepage nicht mit joomla oder ähnliches?

Mal ne ganz andere Frage... wieso bastelst du dir die Homepage nicht mit joomla oder ähnliches?

vorläufig nicht. Ich bin noch in der Ausbildung, und joomla ist für mich etwas zu kompliziert. vielleicht später dann.

Aber wenn alle links zu nem PNG-Button werden, dann würde ich diese alle in ein DIV packen.

Also <div id="bilder">

<img1...>

<img2...>

</div>

Nein. Eine Navigation packt man besser in eine Liste. Um einen Zeilenumbruch zu erreichen verwendet man auch nicht <p></p> :upps Dir stehen mit CSS viele Möglichkeiten offen, nutze sie auch!

Nein. Eine Navigation packt man besser in eine Liste. Um einen Zeilenumbruch zu erreichen verwendet man auch nicht <p></p> :upps Dir stehen mit CSS viele Möglichkeiten offen, nutze sie auch!

zum Beispiel??

zum Beispiel??

Eine Navigation packt man besser in eine Liste.

In etwa so:

<ul id="navigation">

    <li><a href="willkommen.html">Willkommen</a></li>

    <li><a href="ueberuns.html">Über uns</a></li>

    <li><a href="kontakt.html">Kontakt</a></li>

</ul>