Avatar billede ka-rina Nybegynder
22. september 2011 - 10:35 Der er 11 kommentarer

Indsætte billede før tekst med CSS

Hej med jer,

Jeg er lidt newbie i CSS, men sidder og roder med en skabelon hvor jeg i stedet for at indsætte et billede som baggrund, skal have det indsat som "forgrund" - altså helt almindeligt, umiddelbart før en tekst. Jeg har 3 overskrifter.

Koden ser således ud.Hvad skal jeg ændre. Billederne har samme placering som nu, de skal bare ikke ind som baggrund men altså i "forgrunden" - come on guys? Hjæææælp :-)


.box-text h2 {
            overflow:visible;
            padding-left:33px;
            background-repeat:no-repeat;
            background-position:left -5px;
            font-size:18px;
           
        }
            .title-icon2 .box-text h2 { background-image:url(images/icon01.gif);}
            .title-icon2 .box-text h2 { background-image:url(images/icon02.gif);}
            .title-icon3 .box-text h2 { background-image:url(images/icon03.gif);}
Avatar billede majbom Novice
22. september 2011 - 10:49 #1
så skal det ikke ind som background-image - det skal ind med img-tags i html-koden...
Avatar billede ka-rina Nybegynder
22. september 2011 - 12:15 #2
Er det eneste mulighed?
Avatar billede tobrukDk Novice
22. september 2011 - 12:30 #3
kan man se din html kode?
Avatar billede ka-rina Nybegynder
22. september 2011 - 12:37 #4
function widget($args, $instance) {       
        extract( $args );
        $title = apply_filters('widget_title', $instance['title']);
                $txt1 = apply_filters('widget_txt1', $instance['txt1']);
                $txt2 = apply_filters('widget_txt2', $instance['txt2']);
                $txt3 = apply_filters('widget_txt3', $instance['txt3']);
        ?>
             
        <?php
            if($txt2=="" && $txt3==""){
                $class='w-full';
            } else {}
        ?>
              <?php echo $before_widget; ?>
                          <div class="top-box">
                            <?php if($title!=""){ ?>
                            <div class="box-text <?php echo $class; ?>">
                                <h2><?php echo $title; ?></h2>
                                <p><?php echo $txt1; ?></p>
                            </div><!-- end 'with title' -->
                            <?php } else { ?>
                            <div class="box-text <?php echo $class; ?>">
                                <p><?php echo $txt1; ?></p>
                            </div><!-- end 'without title' -->
                            <?php } ?>
                               
                            <?php if($txt2!="" && $txt3!=""){ ?>
                                <div class="box-button">
                                    <a href="<?php echo $txt3; ?>" class="button"><?php echo $txt2; ?></a>
                                </div><!-- end 'button' -->
                            <?php } ?>
                        </div>
              <?php echo $after_widget; ?>
        <?php
    }
Avatar billede majbom Novice
22. september 2011 - 15:03 #5
<div class="box-text <?php echo $class; ?>">
  <img src="images/icon0.jpg" alt="">
  <h2><?php echo $title; ?></h2>
  <p><?php echo $txt1; ?></p>
</div><!-- end 'with title' -->


?
Avatar billede ka-rina Nybegynder
23. september 2011 - 09:35 #6
Det er ikke helt skævt. Men nu får jeg altså det samme billede ved alle tre overskrifter?
Avatar billede majbom Novice
23. september 2011 - 11:08 #7
ja du skal selvfølgelig ændre stien...
Avatar billede ka-rina Nybegynder
23. september 2011 - 11:53 #8
Det er klart, men når jeg kun indsætter den præcis som du har gjort, så giver den et billede ved alle tre overskrifter, det er ikke fordi jeg har indsat den tre steder. Så jeg kan ikke lige umiddelbart ændre stien.

So sorry at jeg er lidt bagud.
Avatar billede majbom Novice
23. september 2011 - 12:19 #9
hvordan bestemmer du på den anden måde hvilke billeder der skal bruges?
Avatar billede ka-rina Nybegynder
23. september 2011 - 12:22 #10
Som du kan se i nedenstående gøres det i CSSén

.box-text h2 {
            overflow:visible;
            padding-left:33px;
            background-repeat:no-repeat;
            background-position:left -5px;
            font-size:18px;
           
        }
            .title-icon2 .box-text h2 { background-image:url(images/icon01.gif);}
            .title-icon2 .box-text h2 { background-image:url(images/icon02.gif);}
            .title-icon3 .box-text h2 { background-image:url(images/icon03.gif);}
Avatar billede majbom Novice
23. september 2011 - 13:47 #11
ja den er jeg med på, men jeg kan ikke se hvor $class kommer fra - er den en del af args-arrayet?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester