HTML/CSS Menyn hoppar ner vid första öppning

Permalänk
Medlem

HTML/CSS Menyn hoppar ner vid första öppning

Hejsan folket!

Så, jag håller på med en personlig hemsida och har ett litet problem jag verkligen inte kan förstå vad som orsakar det.
Det lättaste sättet att förklara är att ni själva går in på hemsidan.

http://solomontv.se/

Det ni lär kolla efter är menyn när ni går in på länken och dess position.
Tryck sedan antingen F5/någon annan länk så ser ni att menyn hoppar upp i sin rätta position.

Har ingen som helst aning vad som orsakar detta.
Någon av er kanske har?

CSS:

/* body */ body { background-color: #191919; } /* container */ #container { margin: auto; background-color: #f2f2f2; -moz-border-radius: 15px; border-radius: 15px; width: 1000px; height: 800px; } #header { width: 970px; height: 100px; font-size: 48px; font-family: "tekton pro"; padding: 24px; float: left; } .menu { float: right; text-decoration: none; margin: 0 auto; } .menu a { text-decoration: none; margin-right: 10px; list-style: none; display: inline-block; color: #191919; padding: 24px 24px 0px 0px; margin: 0px 24px 0px 0px; font-family: tahoma; font-size: 14px; } /* Main */ #main { width: 512px; height: auto; margin: 24px; float: left; } #livestream { width: 960px; height: auto; margin: 24px; border: 0px solid black; float: left; } .picture { width: 130px; height: 130px; border: 1px solid black; float: left; } .quote { background-color: #1fabfb; width: 488px; height: 105px; float: left; margin-top: 8px; } .quote2 { background-color: #1fabfb; width: 524px; height: 125px; float: left; margin-top: 8px; margin-bottom: 15px; } .quote2 a { text-decoration: underline; color: white; } .p { padding: 10px; margin-top: 0px; font-family: tahoma; font-size: 14px; color: white; } .p2 { padding: 5px; margin-top: 0px; font-family: tahoma; font-size: 12px; color: white; } .topic { font-family: "Microsoft Yi Baiti"; font-size: 30px; margin-top: 0px; margin-left: 17px; float: left; } #youtube { width: 488px; height: auto; float: left; margin-top: 44px; } #right { width: 380px; height: auto; margin: 24px; float: right; }

Index

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>solomontv.se</title> <link rel="stylesheet" href="css/main.css" type="text/css" /> </head> <body> <div id="container"> <div id="header">solomontv.se <div class="menu"> <a href="?p=">START</a> <a href="?p=about">ABOUT</a> <a href="?p=gear">GEAR</a> <a href="?p=livestream">LIVESTREAM</a> <a href="?p=links">LINKS</a> <a href="?p=contact">CONTACT</a> </div> </div> <?php if(file_exists($_GET['p'].".php")){ include($_GET['p'].".php"); } else { if(empty($_GET['p']) OR $_GET['p'] == ""){ include("start.php"); } else { include("404.php"); } } ?> </div> </body> </html>

Visa signatur

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop

Permalänk
Medlem

Det ser likadant ut för mig när jag uppdaterar.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Permalänk
Medlem

Jag ser då inget. Kör senaste versionen av Chrome.

Visa signatur

| i7 920 | UD5 | 6GB | 3TB | Intel SSD 80GB | Antec P182 |
http://webbutveckla.nu - Blogg om webbutveckling

Permalänk
Medlem

Hm...

Första gången jag går in på sidan

Efter att man trycker F5/Trycker på en annan länk

Visa signatur

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop

Permalänk
Medlem
Skrivet av solomon:

Troligen så är det Internet Explorer som ställer till det.
Att sätta bredd i pixlar på många element är något jag skulle undvika, speciellt om du kanske inte har full koll på boxmodellen som CSS använder sig av.
Prova istället att designa sidan genom att sätta bredden i % istället, det brukar fungera bra för det mesta. Bredden på "container" kan du låta bli att ändra om du vill, nackdelen är att personer som visar sidan på en skärm mindre än 1000 pixlar på bredden måste scrolla för att se den.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Permalänk
Medlem
Skrivet av ToJa92:

Troligen så är det Internet Explorer som ställer till det.
Att sätta bredd i pixlar på många element är något jag skulle undvika, speciellt om du kanske inte har full koll på boxmodellen som CSS använder sig av.
Prova istället att designa sidan genom att sätta bredden i % istället, det brukar fungera bra för det mesta. Bredden på "container" kan du låta bli att ändra om du vill, nackdelen är att personer som visar sidan på en skärm mindre än 1000 pixlar på bredden måste scrolla för att se den.

Jag är inte direkt ny till webbdesign.
Jag använder dessutom inte IE.

Och för den delen så är det INGEN som använder en upplösning under 1000px längre.
T.om min mobil kan se sidan bra.

Att specifiera en längd och/eller höjd av en box med pixlar är mycket bättre enligt mig än att bestämma en storlek i procent.
Det är fortfarande inte svaret på min fråga vilket som.

Visa signatur

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop

Permalänk
Medlem
Skrivet av solomon:

Jag använder dessutom inte IE.

Jag såg bara scrollbaren och antog att du använde IE. Vad använder du för webbläsare då?

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Permalänk
Proffsmoddare

Det är din float right som ställer till med problemet.
Inte att den är float right, men det elementet
Det du bör göra är att lägga in salomon texten i en egen div. Sedan hade jag satt float left på båda elementen och speca inte width på någon av dem
Om du behöver göra en IE fix kan du göra det med * / ie style

Visa signatur

Älskar modding, PC gaming och det händer ibland att jag skär mig i fingrarna.
Webbplats: https://zeuligan.com
----------------------------------------------------
https://youtube.com/zeuligan | https://twitter.com/zeuligan | https://facebook.com/zeuligan | https://twitch.tv/zeuligan | https://instagram.com/zeuligan

Permalänk
Medlem
Skrivet av solomon:

Jag är inte direkt ny till webbdesign.
Jag använder dessutom inte IE.

Och för den delen så är det INGEN som använder en upplösning under 1000px längre.
T.om min mobil kan se sidan bra.

Att specifiera en längd och/eller höjd av en box med pixlar är mycket bättre enligt mig än att bestämma en storlek i procent.
Det är fortfarande inte svaret på min fråga vilket som.

Antar att du pratar om bredd här, och i så fall har du fel. Om du vill att en sida ska fungera bra för enheter med olika storlek och upplösning bör du ha en flexibel design.

Permalänk
Medlem
Skrivet av crake:

Antar att du pratar om bredd här, och i så fall har du fel. Om du vill att en sida ska fungera bra för enheter med olika storlek och upplösning bör du ha en flexibel design.

Men om jag inte gör en hemsida som är designad för telefoner/tablets så spelar det ju ingen roll att jag har en specifierad storlek, eller hur?

Skrivet av ToJa92:

Jag såg bara scrollbaren och antog att du använde IE. Vad använder du för webbläsare då?

"Scroll saken" är Twitter.

Skrivet av Macaper:

Det är din float right som ställer till med problemet.
Inte att den är float right, men det elementet
Det du bör göra är att lägga in salomon texten i en egen div. Sedan hade jag satt float left på båda elementen och speca inte width på någon av dem
Om du behöver göra en IE fix kan du göra det med * / ie style

Tror jag löste det hela genom att göra en ny div för enbart texten där jag la floaten istället.
Allt ser bra ut nu i alla fall.

#header { width: 970px; height: 100px; padding: 24px; } #headertext { font-size: 48px; font-family: "tekton pro"; float: left; }

Visa signatur

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop