Center werkt niet goed

Yarown · 22 mei 2015

Hallo Helpmij,

Ik wil mijn header in het midden hebben.

Wanneer ik hem op 'left' zet gaat hij naar links.
http://i.imgur.com/YfVYFC1.jpg
Wanneer ik hem op 'right' zet dan gaat hij naar rechts.
http://i.imgur.com/HQDo00f.jpg
Wanneer ik hem op 'center' zet gaat hij verticaal staan?!?!
http://i.imgur.com/b6S6WYi.jpg

(sorry de foto's waren te groot om te uploaden)
Ik snap er eventjes helemaal niks meer van na de hele avond zitten zoeken...

Heeft misschien een van jullie experts een idee?

Met vriendelijke groet,
Peter

ciske de rat · 22 mei 2015

ooit gehoord van

position Specifies the type of positioning for an element
absolute
fixed
relative
static
inherit

PHP:

position: absolute;
       left: 50 px;
       top: 100px;
       width: 110px;
       height: 90px;

PHP:

{
    position: absolute;
    padding-left: 10px;
    padding-top: 10px;
}

zijn zat voor beelden test maar eens wat uit

http://www.w3schools.com/css/css_positioning.asphelemooie link en een showtje

bron · 23 mei 2015

Hoi,
Misschien is dit niet wat je zoekt, of wel. Met deze css kun je een horizontaal menu centreren onafhankelijk van het aantal <li> items dat in het menu zit. Het maakt dus niet uit hoeveel items je in het menu hebt. Centreren gaat lukken.

Code:

<nav id="menu1">
  <ul class="menu">
    <li><a href="#">Tekst 1</a></li>
    <li><a href="#">Tekst 2</a></li>
    <li><a href="#">Tekst 3</a></li>
  </ul>
</nav>

#menu1 ul, #menu1 li, #menu1 a {
   margin: 0;
   padding: 0;
}

#menu1 {
   width: 100%;
   text-align: center;
   overflow: hidden;
}

#menu1 .menu,
#menu1 .menu ul {
   list-style: none;
   position: relative;
}

#menu1 .menu li,
#menu1 .menu a {
   display: block;
   position: relative;
}

#menu1 .menu {
   float: left;
   left: 50%;
   top: 0;
   text-align: center;
}

#menu1 .menu > li {
   float: left;
   right: 50%;
   position: relative;
   text-align: center;
}

#menu1 .menu a,
#menu1 .menu a:hover,
#menu1 .menu a:focus,
#menu1 .menu a:active {
   text-decoration: none;
}

#menu1 .menu a {
   font: normal 18px helvetica, sans-serif;
   background-color: #ff0;
   color: #666;
   padding: 5px 10px;
}

*** edit: css iets gewijzigd.

Suc6.

Yarown · 23 mei 2015

Hallo Bron,

Bedankt voor uw antwoord.
Ik heb het een beetje kunnen aanpassen maar ik krijg het niet hoe ik het wil hebben...
Hier onder de link naar mijn bestand.

EDIT :
Ondertussen heb ik het zover dat ik ze wel allebei op 50% heb, maar dat het 70& naar rechts lijkt.
Zit een stukje links wat niet van de header is, en ik kan de fout niet vinden.

Met vriendelijke groet,
Peter

Link naar mapje met CSS, Script en Html bestand (rar) : https://www.dropbox.com/s/dq06clj4ddiugv5/cssmenu.rar?dl=0

bron · 23 mei 2015

Hallo Yarown,

In de bijlage zitten de aangepaste bestanden.

Suc6

*** aanvulling:
google fonts in de <head> gezet. Zie site van google.
scripts boven </body> gezet. Daar horen ze.
html van menu gestructureerd. Dan kun je foutjes er makkelijk uithalen.

Yarown · 23 mei 2015

bron zei:
Hallo Yarown,

In de bijlage zitten de aangepaste bestanden.

Suc6

*** aanvulling:
google fonts in de <head> gezet. Zie site van google.
scripts boven </body> gezet. Daar horen ze.
html van menu gestructureerd. Dan kun je foutjes er makkelijk uithalen.

Hallo Bron,

Ik krijg hem nu verticaal in het midden.
Helaas lukt het me niet horizontaal want dan krijg ik hem weer rond de 70%

Gr,

P.s. Bedankt voor de juiste google fonts ( en me scripts te verplaatsen ).

bron · 24 mei 2015

Hallo, ik heb alleen het menu in een pagina gezet. Zowel het horizontale dropdown menu (voor pc's) als het verticale menu (voor smartphones) werken oke. Als ik de browser smaller maak zie ik het smartphone menu bij < 768 pixels.

Er kunnen verschillende oorzaken zijn, bijvoorbeeld
Het menu krijgt door andere elementen te weinig breedte, daardoor komen menu-items onder elkaar.
Ergens anders in de stylesheet staat bij een <li> float: none die ook de <li> in het menu beinvloedt.

Suc6.

Draine · 21 jun 2015

het is me gelukt!

Dit is jou css maar dan aangepast.

de #css menu heeft een vaste grote gekregen waardoor je hem beter kunt positioneren... als je nu menu items toevoegd hoef je aleen de #cssmenu ul { width: 400px;} aan te passen ik hoop dat dit naar je wens is?

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu ul {
width: 400px;
margin: 0 auto;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}

Center werkt niet goed

Yarown

Gebruiker

ciske de rat

Verenigingslid

bron

Moderator

Yarown

Gebruiker

bron

Moderator

Bijlagen

Yarown

Gebruiker

bron

Moderator

Draine

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy