Avatar billede NanoGeek Seniormester
24. maj 2017 - 13:26 Der er 4 kommentarer og
1 løsning

Menu (ul & li) driller

Hej med jer..
Jeg har givet lidt op på den her menu...
Den skal gerne virke lidt mere responsive end den gør nu..
Den skal være centreret på skærmen og blive mindre og mindre i takt med opløsningen bliver lavere...

HTML:
<div style="clear:both"></div>
    <ul id="menu">
        <li><a class="link-1" href="#">Forside</a></li>
        <li><a class="link-1" href="#">Portfolio</a></li>
        <li><a class="link-1" href="#">Om mig</a></li>
        <li><a class="link-1" href="#">Kontakt</a></li>
    </ul>
    <div style="clear:both"></div>
</div><!--end header -->

CSS:
ul#menu li a {
    font-size: 25px;
    color: #676666;
    text-decoration: none;
}

#menu {
      background: #ffffff;
      width:1024px;
      text-align: center;
      padding-top: 45px;
      padding-bottom: 20px;
      float: middle;
      margin:0 auto;
list-style:none;
}

ul#menu {
    list-style: none;
    padding-top: 45px;
    position:relative;
    left:15%; 
}

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    list-style:none;
}


.link-1 {
  transition: 0.3s ease;
  background: #ffffff;
  color: #00000;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #ea5394;
  border-bottom: 4px solid #ea5394;
  padding: 20px 0;
  margin: 0 20px;
}

.link-1:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}

Er der en af jer der lige hurtigt kan spotte en dum opbygning/fejl? :-)
Avatar billede NielsErikP Mester
25. maj 2017 - 22:51 #1
Hej...
Du kunne ligge din menu ind i en div..så give den id'en #menu..
så skal du have den menu centreret i forhold til den omkring liggende container(div)..Som jeg går ud fra, ud fra  det udpluk af html koden du her har sendt..Er Header
Avatar billede NanoGeek Seniormester
30. maj 2017 - 10:26 #2
Jeg har lavet denne div nu:

<div style="clear:both" id="menu"></div>


<div id="menu">
    <ul id="menu">
        <li><a class="link-1" href="#">Forside</a></li>
        <li><a class="link-1" href="#">Portfolio</a></li>
        <li><a class="link-1" href="#">Om mig</a></li>
        <li><a class="link-1" href="#">Kontakt</a></li>
    </ul>
    </div>
    <div style="clear:both"></div>
</div><!--end header -->

Men hvad er koden til center?
Avatar billede claes57 Ekspert
30. maj 2017 - 10:47 #3
Avatar billede NanoGeek Seniormester
30. maj 2017 - 11:07 #4
Måske det er lettere at se problemet her:
http://girlblog.key.to
(Den viderestiller til dansk domæne)
Avatar billede NielsErikP Mester
30. maj 2017 - 17:27 #5
Det du skal gøre er at sætte en Width på din div #menu... F.eks 100px
så centrerer du den i forhold til width'en på den omkring liggende div på f.eks 500px..


css:   
#omkringLiggende_div {
      Width :  500px;
}
#menu {
        Width: 100px;
        margin : auto;  / det skulle så være denne der centrer din #menu div i forhold til din #omkringLiggende_div
}


<div id="#omkringLiggende_div"  >
                 
                <div id="#menu">    Menu Div'en </div>

</div>



Og så skal du i øvrigt lige gennemgå din kode .., når du skaber en tom comtainer (div)... så starter du <div>.. så skal du også huske at afslutte denne container(div) med </div> for at koden ikke render løbsk... det gælder i øvrigt alle andre html tags også..nr du starter..så skal du huske at afslutte ..
Håber du akn bruge det :-)
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

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