2014-02-22, 12:53
  #1
Medlem
Towans avatar
Hallihallå!

Jag har sett flertalet hemsidor som har en navbar och header högst uppe på sidan, som är synlig hela tiden, även om man scrollar ner på innehållet.

Hur går man till väga för att få till en sån?
Citera
2014-02-22, 13:12
  #2
Medlem
Du menar som Flashback har?

position: fixed;

Sedan kan du alltid förfina till det med js.
Citera
2014-02-22, 18:21
  #3
Medlem
wallchars avatar
de e lite krångligt att få till de om de ska bli snyggt o man har en position fixed, om man inte vet hur man ska göra..

HTML-kod:
#menu{
width:100%; /* för att du har display:inline-block; */
height:auto; /* för att knapparna kommer besluta höjden */
background:#ccc; /* för att kunna se diven innan du börja styla den */
display:inline-block; /* annars kommer inte menyn anpassa sig höjdmässigt */
position:fixed; /* för att menyn alltid ska hålla sig högst upp */
top:0; /* för att menyn kan lägga sig fel på mobila enheter annars */
left:0; /* för att menyn kan lägga sig fel på mobila enheter annars */
}

#menu a{
width:auto; /* bara för att */
height:auto; /* bara för att */
padding:15px; /* detta beslutar bredd/höjd på knapparna */
text-decoration:none; /* för att understruken text är fult */
color:#ff6600; /* för att blåa knappar är fult */
display:block; /* för att knapparna ska ta åt sig värdet från "padding" */
float:left; /* för att knapparna ska lägga sig bredvid varandra */
}

<div id='menu'>
<a href='hem.html'>hem</a>
<a href='omoss.html'>om oss</a>
</div>
__________________
Senast redigerad av wallchar 2014-02-22 kl. 18:25.
Citera
2014-02-22, 22:21
  #4
Medlem
Snarkens avatar
Citat:
Ursprungligen postat av wallchar
de e lite krångligt att få till de om de ska bli snyggt o man har en position fixed, om man inte vet hur man ska göra..

HTML-kod:
#menu{
width:100%; /* för att du har display:inline-block; */
height:auto; /* för att knapparna kommer besluta höjden */
background:#ccc; /* för att kunna se diven innan du börja styla den */
display:inline-block; /* annars kommer inte menyn anpassa sig höjdmässigt */
position:fixed; /* för att menyn alltid ska hålla sig högst upp */
top:0; /* för att menyn kan lägga sig fel på mobila enheter annars */
left:0; /* för att menyn kan lägga sig fel på mobila enheter annars */
}

#menu a{
width:auto; /* bara för att */
height:auto; /* bara för att */
padding:15px; /* detta beslutar bredd/höjd på knapparna */
text-decoration:none; /* för att understruken text är fult */
color:#ff6600; /* för att blåa knappar är fult */
display:block; /* för att knapparna ska ta åt sig värdet från "padding" */
float:left; /* för att knapparna ska lägga sig bredvid varandra */
}

<div id='menu'>
<a href='hem.html'>hem</a>
<a href='omoss.html'>om oss</a>
</div>
En del missförstånd och onödiga regler där.
  • inline-block behövs inte för att den ska "anpassa sig höjdmässigt", vad som nu menas med det. 100% width (eller 0 för både left och right) behövs även om man har block, då positionerade element kollapsar. Att ange top är bra för alla enheter (och fixed positioning har allmänt svajigt stöd på mobila OS).
  • Width och height är alltid auto by default, så det behöver bara anges när man vill skriva över en tidigare regel.
  • Floatade element är block by default.
Citera
2014-02-22, 23:21
  #5
Medlem
wallchars avatar
Citat:
Ursprungligen postat av Snarken
En del missförstånd och onödiga regler där.
  • inline-block behövs inte för att den ska "anpassa sig höjdmässigt", vad som nu menas med det. 100% width (eller 0 för både left och right) behövs även om man har block, då positionerade element kollapsar. Att ange top är bra för alla enheter (och fixed positioning har allmänt svajigt stöd på mobila OS).
  • Width och height är alltid auto by default, så det behöver bara anges när man vill skriva över en tidigare regel.
  • Floatade element är block by default.

Måste ha tänkt fel.. Men när du har element med float på child så brukar inte parent vilja "följa med".. och blir height:0 om du inte angivit annat.. Width och height har jag alltid angett sen jag börja koda, så de är väl rent "säkerhets"-tänk från min sida.. att floats är block by default viste jag inte.. Men har lärt mig en del av ditt inlägg nu iaf, och rensat koden utifrån det du nämnt ovan Tack
Citera
2014-02-23, 10:06
  #6
Medlem
Snarkens avatar
Citat:
Ursprungligen postat av wallchar
Måste ha tänkt fel.. Men när du har element med float på child så brukar inte parent vilja "följa med".. och blir height:0 om du inte angivit annat.. Width och height har jag alltid angett sen jag börja koda, så de är väl rent "säkerhets"-tänk från min sida.. att floats är block by default viste jag inte.. Men har lärt mig en del av ditt inlägg nu iaf, och rensat koden utifrån det du nämnt ovan Tack
Får erkänna att jag inte tänkte på de floatade barnen, men height auto hjälper ändå inte (och det är det som sagt by default). Overflow hidden eller en s.k. clearfix på föräldern löser det problemet.
Citera

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in