html Frage: Bild verlinken?

2 Antworten

Nicht die Verlinkung muß in das Bild, sondern das Bild in die Verlinkung

Ersetze Beispieltext durch das img....

<a ......><img class="..../></a>

Dann erscheint der Beispieltext über dem Logo.

Ich habe vergessen den kompletten Code zu geben:

   <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/logo_vilmie.png"}}" alt="" /></div>

Es geht dabei um html Bearbeitung in einem Magento Onlineshop

0
@Noooooa

lass den beispieltext weg. brauchst doch nicht. der link is das

objekt zwischen <a..> und </a>. wenn da n bild drin is, wird
des zum  link. wenn du text reinschreibst ist dieser der link.

wenn du nur das logo als link brauchst, dann lass den text weg. is
klar dass er den drüber schreibt - iwo muss er ja hin. kann sich ja
nicht in luft auflösen.

2
@DodgeRT

Das habe ich auch schon versucht, dann passiert aber einfach nichts. Das sind Markenbilder in einem "Slider", die sich automatisch weiter "blättern"

Vermute es hängt damit zusammen, das das Bild nicht einzeln steht

 

Der komplette Code, falls das hilft:

<h2 class="filter-title"><span class="content"><strong>Top Marken</strong></span></h2>
<div class="owl-top-narrow">
    <div id="brands-slider-demo-5" class="owl-carousel owl-theme">

        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/logo_vitakraft.png"}}" alt=""/></div>
        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/logo_vilmie.png"}}" alt="" /></div>
        <div class="item" style="padding-top:5px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/granatapet-logo-250.png"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/gimbi-logo-300x150.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/Logo_ALKOTE_1.png"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/logo_bunny.png"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/logo_terra-canis.png"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/logo_realNature.png"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img class="lazyOwl" data-src="{{media url="wysiwyg/logo_wolfsblut.png"}}" alt="" /></div>
            </div>
    <script type="text/javascript">
    jQuery(function($){
        $("#brands-slider-demo-5").owlCarousel({
            lazyLoad: true,
            itemsCustom: [ [0, 1], [320, 1], [480, 2], [640, 3], [768, 4], [992, 5], [1200, 6] ],
            responsiveRefreshRate: 50,
            slideSpeed: 200,
            paginationSpeed: 500,
            scrollPerPage: false,
            stopOnHover: true,
            rewindNav: true,
            rewindSpeed: 600,
            pagination: false,
            navigation: true,
            autoPlay: true,
            navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
        });
    });
    </script>

<script type="text/javascript">
jQuery(function($){
    $("#latest_news .owl-carousel").owlCarousel({
        lazyLoad: true,
        itemsCustom: [ [0, 1], [320, 1], [480, 1], [640, 2], [768, 2], [992, 2], [1200, 2] ],
        responsiveRefreshRate: 50,
        slideSpeed: 200,
        paginationSpeed: 500,
        scrollPerPage: false,
        stopOnHover: true,
        rewindNav: true,
        rewindSpeed: 600,
        pagination: false,
        navigation: true,
        autoPlay: true,
        navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
    });
});
</script>

0

CSS: Negativer Margin und positiver Padding kombinieren?

Hallo,

welchen Grund hat es, dass man negativen Margin und positiven Padding kombiniet?

Hier ein Beispielcode:

<div class="content">
    <div class="header"></div>
</div>
.content {
    padding: 20px;
    margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
}

.header {
    padding: 20px 20px 10px;
    margin: -20px -20px 20px;
}

...zur Frage

Bild in eBay Artikelbeschreibung einfügen?

Kann mir jemand sagen wie das funktionieren soll? Hab schon alles mögliche an HTML Codes ausprobiert , aber anstatt ein Bild sieht man dann den code! Was mach ich Falsch?

Hab es mit <img src=" versucht und mit <a href (bei bilderbob.de)

...zur Frage

text-decoration:none; Der Unterstrich bei Hyperlinks verschwindet trotzdem nicht?

Ich versuche verzweifelt den Unterstrich wegzubekommen bei meinen Hyperlinks.

CSS .links li { display: inline-block; margin: 0 10px; padding: 20px; padding-left: 200px; text-decoration: none; }

HTML

  • Haar
  • Körper
  • Im Ausverkauf
  • Bestseller
...zur Frage

Ich möchte ein div mit Bild in einem div zentrieren?

Das hier ist der Code in CSS:

Das ist der Code in HTML:

Nun die Frage: Wie schaffe ich es, das Bild zentriert anzeigen zulassen? Und nein das Bild in einen <img> Tag zu packen würde bei meiner Seite zu einem Problem führen. Ich danke euch :)

...zur Frage

HTML / CSS Div-Container bzw. ganze Seite horizontal zentrieren

Hallo...

ich hab ein größeres Problem mit meiner Website. Ich bin noch am Anfang und hab direkt zu Beginn festgestellt, dass viele Websiten zenriert ausgerichtet sind. Sowas wollte ich auch machen, hab gegoogelt, gf durchgeblättert aber noch nichts Brauchbares gefunden.

Ich hab eine Seite aufgeteilt in body und dann einen Div-Container, der alles umschließt (heißt bei mir id="drumrum"). So. Dann wollte ich da weitere Div-Container einfügen, die da heißen sollen kopf, navi, inhalt und footer. Soweit OK, alle möglichen Formatierungsoptionen mit CSS klappen soweit, aber mit der horizontalen Zentrierung komm ich garnicht weiter.

Ich hab schon ausprobiert, margin auf 0px auto zu setzen, text-align:center usw. zu benutzen, aber nichts funktioniert. Damit ihr wisst, wie mein Doctype aussieht:

Hab schon irgendwo gelesen, dass man da vielleicht noch was dran ändern muss, weiß aber nicht genau, was ;)

Hier ist meine CSS-Datei, als Code eingefügt:

/*formate.css*/

drumrum {

width:1000px;
float:left;
margin:0 auto;
text-align:left;

}

kopf {

border-top-left-radius:10px;
border-top-right-radius:10px;
float:left;
width:980px;
height:150px;
border-width:1px;
margin-left:auto;
margin-right:auto;
background-image:url('img/banner.png');
font-weight:bold;
font-size:30pt;
padding-left:10px;
padding-right:10px;

}

navi {

float:left;
width:980px;
border-width:1px;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#00CC00;
font-size:14pt;

}

inhalt {

width:980px;
float:left;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#CCCCCC;
font-size:14pt;

}

footer {

width:980px;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#FFFFFF;
text-align:center;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

} body { background-color:#008800; text-align:center; } * { font-family:Times New Roman; } a:hover { text-color:#00DD66; font-weight:bold; } a:visited { text-color:#FF00EE; } a { text-color:#0022FF; }

Das wäre dann mein momentanes CSS für meine Seite. Wenn mal jemand drübergucken könnte und eine Idee kennt, wie ich "alles" waagerecht in die Mitte krieg, danke schonmal.

Und bitte verlinkt nicht auf eine gf-Seite, leider hat bislang von all den genannten Antworten keine Möglichkeit funktioniert. Vielleicht liegt es ja auch wirklich am Doctype.

Liebe Grüße, HugaTV

...zur Frage

Wie zentriert man in HTML/CSS ein mehrspaltiges Layout?

Hallo an alle,

ich habe eben mit HTML & CSS ein zweispaltiges Layout erstellt, dieses lässt sich allerdings nicht in die Mitte der Website zentrieren!

Weiß jemand, wie das funktioniert? Habe ich etwas vergessen?

Normalerweise klappt das ja mit dieser Anweisung:

margin {0 auto;}

Das tut es aber nicht, der Text "klebt" nach wie vor am linken Rand.

Hier die entsprechenden Code-Schnipsel:

HTML

<div class="spalten">
    <div class="clearfix">  
        <div class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
        <div class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
    </div>  
</div>

CSS

.left
{
    float: left;
    width: 20%;
    margin-right: 20px;
}

.clearfix:before,
.clearfix:after
{
    content: " ";
    display: table;
}

.clearfix:after
{
    clear: both;
}

.clearfix
{
    *zoom: 1;
}

Dankeschön!
Die hilfreichste Antwort zeichne ich wie immer aus.

VG,
Savix

...zur Frage

Was möchtest Du wissen?