Wie Bannergröße in CSS an nav-Bereich anpassen?

    Hallo.


    Ich bin dabei eine Webseite mit 3-Spalten Layout zu machen und habe nun ein Problem wo ich nicht weiterkomme. Es geht um folgendes:


    Auf der linken Seite " nav " habe ich einen Webebanner von einem Partnerprogramm eingesetzt, in HTML mit < a href="http:// ................


    Das funktioniert auch einbandfrei, aber das Problem ist dass der Werbebanner eine Größe von 250x250px hat und somit in den mittigen Bereich "section " ragt. Wie kann ich den Banner auf die Spaltengröße die meine nav hat, ( 230px ) anpassen.


    Habe es in CSS versucht mir dem Befehl: nav a { width: 230px } , aber das funktioniert nicht.


    Weiß jemand eine Lösung?


    Vielen Dank im voraus

    Also ragt der Banner in den Inhalt rein?


    Ich würde an deiner Stelle den navigationsbereich größer machen oder den Banner (nicht mit Css) sondern mit einem Bildberarbeitungsprogramm verkleinern .
    Anderseits macht man Banner eher nicht zur Navigation sondern in einer anderen "box" unter dem Inhalt zwischen Inhalt und footer oder vielleicht rechts oder links neben den Inhalt ?


    Also wie gesagt mit einem Bildbearbeitungsprogamm geht ,dass ganz einfach (z.B. Gimp) und dann einfach mit foto-hochladen.net oder img-box.de hochladen :D

    Vielen Dank für Deine Antwort.


    Ja, er ragt leider in den Inhalt hinein.


    Ich weiß dass man Banner eigentlich nicht im Navigationsbereich macht, aber ich möchte dort einen kurzen Text mit den Hinweis auf die Webseite des Partnerprogrammes machen, denn in den Bereich Inhalt passen die Banner nicht ( anderes Thema ) und zwischen Inhalt und footer habe ich bereits einen anderen Banner eingesetzt und dort soll auch nur ein Banner hin, sonst wird es zu überladen.


    An Gimp habe ich auch schon gedacht, aber wie bekomme ich den Banner in Gimp, da ich nicht weiß wie ich ihn in einer Datei speichern soll, da ich von dem Partnerprogramm ja nur den Code habe den ich in HTML einsetzen muss.


    Müsste man wahrscheinlich normal wissen, aber ich bin noch ziemlicher Anfänger.

    Bin auch nur Anfänger in Sachen CSS, aber ich mache das so.

    CSS
    #nav img{
 max-height:30px;
}


    Hab es nie mit width getestet, sollte aber das gleiche Ergebnis rauskommen - der Browser verkleinert das img ohne es zu verzerren.

    Das Bild ( Banner ) ist in HTML mit


    < a href="http:// ................


    nicht mit img.


    Habe es jetzt in CSS mit
    #nav a{
    max-height:30px;
    }
    versucht, aber es ändert sich leider nichts.
    Mache ich etwas falsch?

    a ist ein inline-Element, deshalb kann man ihm keine Breite oder Höhe geben ;) Gib dem Ding mal die ID "banner" und probier dann:

    CSS
    #banner {
display: block;
width: 230px;
}


    lg

    cottton:


    Habe div um <a> versucht, aber geht auch nicht.


    @Laura:


    Ich habe jetzt in HTML über dem Banner < a href="`http://...... folgendermaßen die id eingegeben: <a href="id banner" >


    und in css wie Du geschrieben hast:


    #banner {
    display: block;
    width: 230px;
    }


    Der Banner verändert sich jedoch nicht. Habe ich vielleicht die id in HTML falsch eingegeben?


    Aber ich habe jetzt das Problem gelöst, indem ich in css bei section die margin-left: von 230px auf 250px geändert habe. Jetzt schließt der Banner exakt ab. :thumbup: Obwohl im HTML Seminar gelehrt wird, das in section die margin-left: immer kleiner sein soll als in nav.


    Ich bin froh dass jetzt alles passt, aber leider weiß ich immer noch nicht ob und wie man die Größe eines Banners ändern kann. ?(


    Ich bräuchte auch noch Hilfe wie man Bilder im Durchlauf rotieren lassen kann, aber dafür denke ich ist es besser ein neues Thema zu eröffnen.


    Lg.

    Hallo Laura.


    Super, jetzt hat es funktioniert.


    Ich konnte bisher nur einfache id vergeben, wie z.B. <div id="wrapper">, aber noch nicht in einem Link oder Code einsetzen.


    Jetzt habe ich wieder etwas gelernt. :) Vielen herzlichen Dank.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden