Kode hjemmeside-Hjelp med plassering av linker

[Iris_L]

Jeg holder på med å kode en hjemmeside, men jeg kommer ikke lenger enn dette: http://dyrepraten.com/nyundulater

 

Er det noen her som ser hva som kan være feilen med linkene?

 

Siden skal se omtrent slik ut: http://i11.tinypic.com/2vhtzxg.png

 

Her er litt css'en:

 

menu 
{ 
   float: right; 
   position: absolute; 
   bottom: 0.13em; 
   left: -2em; 
} 
#menu ul 
{ 
   list-style-type: none; 
} 

#menu a 
{ 
   padding-top: 5em; 
   display: block; 
} 
#menu #home { background: url(hjem.png) no-repeat top;} 
#menu #home:hover{ background: url(hjem2.png) no-repeat top;} 
#menu #profiles { background: url(Profiler.png) no-repeat top;} 
#menu #profiles:hover { background: url(profiler2.png) no-repeat top;} 
#menu #pictures { background: url(linker.png) no-repeat top;} 
#menu #pictures:hover { background: url(linker2.png) no-repeat top;} 
#menu #links { background: url(gjestebok.png) no-repeat top;} 
#menu #links:hover { background: url(gjestebok2.png) no-repeat top;} 

#menu li 
{ 
float: left; 
height: 29px; 
width: 120px; 
overflow: hidden; 
}

Endret 16. januar 2007 av Iris_L

[Drømmemannen]

Du vet at menybildene dine er 41 punkter høye, mens du har sagt at li-elementene skal være 29 punkter høye?

 

Grunnen til at profiler-knappen forsvinner er at du har satt bildeadresssen til Profiler.png i steden for profiler.png.

Endret 16. januar 2007 av balletryne

[Iris_L]

Tusen takk!

 

Nå har jeg det nesten slik som jeg vil ha det, men jeg sliter dog med noe annet også. Som dere kanaksje ser så kommer linkbildene høyere opp i Opera, mens de er perfekte i IE. Ellers så skulle jeg ønske at de (linkbildene) kunne stått litt tettere, men jeg får det ikke til.

[Drømmemannen]

Prøv å bruke display:inline på li-elementene i steden for float. Du må også justere på margin og padding til li-elementene.

[Iris_L]

Da jeg brukte display:inline på li-elementene i steden for float, så ble det bare rot, og så har jeg ikke margin og padding på li-elementene.. Har dette:

 

#menu li
{
float: left;
height: 41px;
width: 127px;
overflow: hidden;
}

[Drømmemannen]

Grunnen til avstanden er bredden du har satt på li-elementene. li-elementene går kant i kant såvidt jeg kan se. Sett på noen sterke bakgrunnsfarger så får du se hvor og hvordan elementene ligger. li-elementer har forhåndsdefinert padding/margin. Se hva som skjer hvis du setter disse til 0.

Endret 16. januar 2007 av balletryne

[Iris_L]

Sånn da eller?

 

#menu li

{

float: left;

height: 0px;

width: 0px;

overflow: hidden;

}

[Drømmemannen]

Nei. Slik:

 

#menu li
{
   float: left;
   height: 41px;
   width: 127px;
   margin: 0;
   padding: 0;
}

[Iris_L]

Åjjaaaa.. Da forsår jeg hva du mente

 

Nå ble det slik da: http://dyrepraten.com/nyundulater Ser iallefall hvor brede dem er..

[Drømmemannen]

Ved å legge på overflow:hidden igjen så forsvinner menyteksten ihvertfall. Liten glipp i forslaget mitt.

[Drømmemannen]

Jeg tror det blir enklere hvis du bytter ut bakgrunnsbildet i #header med bakgrunnsbildet i #pix, og så sett display:hidden på #pix. Da får du bare ett bakgrunnsbilde på hele headeren. Da blir menyen eneste opptegnede element inne i #header og dermed enklere å plassere. Dvs noe slikt i CSS (bare ment å erstatte de elementene som er angitt):

 

...

#header
{
   background: url( header.gif );
   height: 218px;
}

#pic
{
   display: none;
}

#menu
{
}

#menu ul
{
   margin: 0;
   padding-left: 0;
   padding-top: 174px;
}

#menu li
{
   list-style-type: none;
   float: left;
   height: 41px;
   width: 127px;
   overflow:hidden;
}

...

Endret 16. januar 2007 av balletryne

[Iris_L]

Jeg prøvde det du sa, men nå ser det slik ut http://dyrepraten.com/nyundulater/index.html

 

Vanskelige greier dette her for en n00b som meg

 

 

EDIT: Redigerte tilbake igjen, og la på overflow:hidden. Det ble da ganske fint, men det fungerer ikke helt bra i Opera enda..

Endret 16. januar 2007 av Iris_L

[Drømmemannen]

Forslaget mitt fungerte ganske bra i Opera hos meg.

[Iris_L]

Med style.css slik?:

 

body
{
   background: #7ba8e6;
}
#content
{
   width: 730px;
   margin: 0 auto;
   border-left: solid 1px black;
   border-right: solid 1px black;
   border-bottom: solid 1px black;
   background: #73adb1;
}

#header
{
  background: url( header.gif );
  height: 218px;
}

#pic
{
  display: none;
}

#pic h1
{
   height: 2.3em;
   width: 14em;
   overflow: hidden;
   float: right;
}

#pic h1 a 
{
   display: block;
   padding-top: 10em;
}

.topleft{ background: url(topleft2.gif) no-repeat top left; }
.topright{ background: url(topright2.gif) no-repeat top right; }
.left{ background: url(left.gif) repeat-y left;}
.right{ background: url(right.gif) repeat-y right;}
.bottomleft{ background: url(bottomleft.gif) no-repeat bottom left; }
.bottomright{ background: url(bottomright.gif) no-repeat bottom right; }


#menu
{
   float: right;
   position: absolute;
   bottom: 0.13em;
   left: -2em;
}

#menu ul
{
  margin: 0;
  padding-left: 0;
  padding-top: 174px;
}

#menu a
{
   padding-top: 5em;
   display: block;
}
#menu #hjem { background: url(hjem.gif) no-repeat top;}
#menu #hjem:hover{ background: url(hjem2.gif) no-repeat top;}
#menu #profiler { background: url(profiler.gif) no-repeat top;}
#menu #profiler:hover{ background: url(profiler2.gif) no-repeat top;}
#menu #linker { background: url(linker.gif) no-repeat top;}
#menu #linker:hover { background: url(linker2.gif) no-repeat top;}
#menu #gjestebok { background: url(gjestebok.gif) no-repeat top;}
#menu #gjestebok:hover { background: url(gjestebok2.gif) no-repeat top;}

#menu li
{
  list-style-type: none;
  float: left;
  height: 41px;
  width: 127px;
  overflow:hidden;
}

#innercontent
{
   padding: 0.5em;
   line-height: 1.2em;
}
h3 {text-align: center;}

#footer
{
   background: #87b3d0 url(footerpic.gif) no-repeat bottom;
   height: 31px;
   margin: 0 0.5em 0 0.5em;
}

[Drømmemannen]

Nesten. Min #menu {} var tom, som tilsvarer fjernet.

Endret 16. januar 2007 av balletryne

[Iris_L]

Åh.. Jeg trodde at det var en liten feil jeg Men nå fungerer det som plommen i egget! Tusen hjertelig takk for din tålmodighet ved å hjelpe en fortapt sjel