får ikke frem bildene...

får ikke frem bildene...

Innleggav srb » ons 16.06.2010 23:56

I denne språkmenyen skal det ligge flagg - hadde jeg tenkt...Får bare ikke frem flaggene!
Dette er en meny som jeg har brukt i "block" før, med andre elementer, men det skal da vel ikke ha noe å gjøre at jeg nå bruker den i "inline" visning.
HTML:
Kode: Merk alt
<ul id="meny">
     <li id="menynor"><a href="index.html">nor</a></li>
     <li id="menyeng"><a href="engindex.html">eng</a></li>
     <li id="menyger"><a href="gerindex.html">ger</a></li></ul>
</div>


CSS:
Kode: Merk alt
#meny{
   position:absolute;
   left: 635px;
   list-style: none;
   top:95px;
   width: 150px;
   height: 100px;
}

#meny li, #meny li a{
   font-family:Geneva, Arial, Helvetica, sans-serif;
   font-size:10px;
   display:inline;
   width: 80px;
   height: 100px;
   margin-left:10px;
}


# menynor{
background-image::url(../foto/norskflagg.png);
background-repeat:no-repeat;
}

# menyeng{
background:url(../foto/engelskflagg.png);
background-repeat:no-repeat;
}

# menyger{
background:url(../foto/tyskflagg.png);
background-repeat:no-repeat;
}
medlem i 193 måneder
 

Re: får ikke frem bildene...

Innleggav myPhone » tor 17.06.2010 1:00

fjern mellomrommet mellom # og id.. altså "#menynor" og ikke "# menynor"

i tillegg har du en kolon for mye her:

Kode: Merk alt
background-image::url(../foto/norskflagg.png);


videre kan du alltids endre det til

Kode: Merk alt
background:url(../foto/norskflagg.png) no-repeat;


ellers så funket koden her (når jeg testet med egne bilde-filer).

vet videre ikke om du med vilje legger inn margin left på både li og anchor? blir jo margin-left x 2

Brukerens avatar
medlem i 192 måneder
 

Re: får ikke frem bildene...

Innleggav srb » tor 17.06.2010 10:46

takk for svar.
Har kommet et stykke lengere, men det er fortsatt noe som jeg ikke finner ut av:

her ser du at "flagg" og "meny"
ikke ligger over for hverandre.
Det burde de vel gjøre det er det som er meningen.
Aller helst skulle jeg hatt klikkbare flagg, men jeg sliter...

Bilde

Slik ser dette ut ved preview:
Bilde

HTML:
Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Toftemo turiststasjon</title>
 <link type="text/css" rel="stylesheet" href="toftemoturist.css" />
</head>
<body>
 <div id="indexSide">
 <div id="duerHer">Du er her: Toftemo turiststasjon > <b>Hovedside</b></div>
<div id="iguanLink"><a href="http://www.iguan.no">web: iguan design</a></div>
  <div id="rettigheter"><p>© Toftemo Turiststasjon - 2662 Dovre tel.: +47 61 24 00 45 <a href="mailto:post@toftemo.no"> - post@toftemo.no</a></p>
  </div>
  <ul id="nav">
  <li><a href="#">Hovedside</a></li>
   <li><a href="#">Overnatting</a>
   <ul>
    <li><a href="#">Hotell</a></li>
    <li><a href="#">Hytte</a></li>
    <li><a href="#">Karavan</a></li>
    <li class="noBorder"><a href="#">Anneks</a></li>
   </ul>
  </li>
 <li><a href="#">Kafé</a></li>
<li><a href="#">Aktiviteter</a></li>
<li><a href="#">Selskap og møter</a></li>
<li><a href="#">Priser</a></li>
<li class="noBorder"><a href="#">Kontakt</a></li>
</ul>
 <div id="textbox"><h2>Velkommen <br/>til Toftemo Turiststasjon</h2>
   <br/>Aenean commodo ligula eget dolor. Aenean massa.<br >
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculupxs mus. <br />Donec.
Donec vitae sapien ut libero venenatis faucibus. <br>Aenean commodo ligula eget dolor. Aenean massa.<br /><br >
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculupxs mus. <br />Donec.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculupxs mus. <br />Donec.
Donec vitae sapien ut libero venenatis faucibus. <br/>Aenean commodo ligula eget dolor. Aenean massa.<br >
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculupxs mus. <br /></div>
<div id="bgfoto">
</div>
</div>
<div id="flagg"></div>
<ul id="meny">
     <li id="menynor"><a href="mixepultermicrofoneroglydrom.html">nor</a></li>
     <li id="menyeng"><a href="relasjoner.html">eng</a></li>
<li id="menyger"><a href="kontakt.html">ger</a></li></ul>
  </body>
</html>




CSS:
Kode: Merk alt
#flagg{
   position:absolute;
   background-image:url(../stuff/designelement/flagg.png);
   background-repeat:no-repeat;
   left: 750px;
   list-style: none;
   top:150px;
   width: 112px;
   height: 20px;
}
   
#meny{
   position:absolute;
   display:inline;
   left:696px;
   top:155px;
   width: 150px;
   height: 30px;
}

#meny li a span{
     display:none;
   
}

#meny li, #meny li a{
   font-family:Geneva, Arial, Helvetica, sans-serif;
   font-size:10px;
   display:inline;
   width: 150px;
   margin-left:10px;
   margin-top: 5px;
}


#menynor{
background-repeat:no-repeat;
}

#menyeng{
background-repeat:no-repeat;
}

#menyger{
background-repeat:no-repeat;
}

medlem i 193 måneder
 

Re: får ikke frem bildene...

Innleggav myPhone » tor 17.06.2010 11:00

foreslår du ikke bruker absolute positions, med mindre du er absolutt nødt. bruk heller noe sånt:
Kode: Merk alt
ul{padding:0;margin:0;overflow:hidden;}
li{background:url(flag);float:left;display:block;height:x;width:x;}
li a{display:block; height:x;width:x;}


erstatt x med riktig høyde og bredde.

og hvis du må bruke absolute, så sett parent som har relative position for å holde sakene innenfor rammen

legg evt ut noe på nettet så jeg kan se på det der... (lag en mappe som heter test på domenet eller noe sånt)

Brukerens avatar
medlem i 192 måneder
 

Re: får ikke frem bildene...

Innleggav srb » lør 19.06.2010 12:59

Takk for tilbakemeldinger...
har ikke kommet frem til noen løsning enda!
medlem i 193 måneder
 


Returner til XHTML/HTML



Hvem er i Forumene

Registrerte brukere: Ingen registrerte brukere