html/css hjälp med en meny :)

2012-03-06 03:13

Permalänk

pHANTAZOM

Avstängd

Registrerad: Jun 2011

●

html/css hjälp med en meny :)

Hej, Jag håller på med en ny sida i html/css och håller på med en meny, men jag vet inet hur jag ska göra den...

det jag vill göra med menyn är att den ska vara på botten av webbläsaren(alltså inte sidan) och den ska följa med webbläsaren så när man scrollar ner så ska den följa med.

det jag har tänkt mig med menyn är att det ska vara en "hover" yta på den också så när man håller på resp. knapp så ska den byta färg elr någe liknande.

Fall någon kan peka mig i rätt riktning eller kanske visa ett exemplar .

Visa signatur

//pHANTAZOM

Rapportera Redigera

Citera flera Citera

2012-03-06 06:10

Permalänk

elius

Medlem

Plats: Hästveda
Registrerad: Apr 2006

●

Du kan ju prova det här. Bara att ändra lite värden så att menyn hamnar i bottnen istället för till höger.

Visa signatur

Intel i7 2600K @ 4.5GHz | GeForce GTX 680 | ASUS P8P67 PRO | Corsair Dominator 16GB 1600MHz | Samsung 830 256GB

Rapportera Redigera

Citera flera Citera

2012-03-06 11:00

Permalänk

BlueEyes

Medlem

Plats: Västerås
Registrerad: Jun 2005

●

Det du letar efter är CSS property:

position: static

Ovan så tar vi ur elementet ur flödet och positionerar det relativt med "fönstret".

Nedan så säger vi till att det ska befinna sig 0 pixel från left och 0 från botten.
left: 0
bottom 0

och för att täcka hela fönstrets width:
width: 100%

Men nyckeln är alltså position property.

Det finns lite matnyttigt här:
https://developer.mozilla.org/en/CSS/position

Lycka till.

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-03-06 14:06

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Skrivet av BlueEyes:

Det du letar efter är CSS property:

position: static

Gå till inlägget

Det är snarare position: fixed som önskas; static är det element har per default.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2012-03-06 14:21

Permalänk

BlueEyes

Medlem

Plats: Västerås
Registrerad: Jun 2005

●

Skrivet av You:

Det är snarare position: fixed som önskas; static är det element har per default.

Gå till inlägget

Du har helt rätt

Menade fixed men skrev static

Goofade lite där

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-03-06 14:23

Permalänk

KeVVa

Medlem ★

Plats: Bålsta
Registrerad: Nov 2010

●

CSS

body {
margin: 0;
padding: 0;
}

#menuwrapper {
position: Absolute;
bottom: 0px;
}

Så skulle jag göra Sen får du ändra width attributer (t ex. till 100%

#menuwrapper {
position: Absolute;
bottom: 0px;
width: 100%;
height: 64px;
border: #000 1px dashed;
background: #686868;
}

Visa signatur

~. Citera så jag hittar tillbaka .~

Rapportera Redigera

Citera flera Citera

2012-03-06 14:24

Permalänk

BlueEyes

Medlem

Plats: Västerås
Registrerad: Jun 2005

●

Skrivet av 19KeVVa93:

CSS

body {
margin: 0;
padding: 0;
}

#menuwrapper {
position: Absolute;
bottom: 0px;
}

Så skulle jag göra Sen får du ändra width attributer (t ex. till 100%

#menuwrapper {
position: Absolute;
bottom: 0px;
width: 100%;
height: 64px;
border: #000 1px dashed;
background: #686868;
}

Gå till inlägget

Det fungerar ända tills man börjar scrolla dokumentet då stannar menyn på den position du ställt in.

Därför bör man köra fixed i detta fallet.

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-03-06 14:26

Permalänk

KeVVa

Medlem ★

Plats: Bålsta
Registrerad: Nov 2010

●

Skrivet av BlueEyes:

Det fungerar ända tills man börjar scrolla dokumentet då stannar menyn på den position du ställt in.

Därför bör man köra fixed i detta fallet.

Gå till inlägget

Förlåt, jag menade självklart Fixed. haha xD Stressigt när man lyssnar på läraren samtidigt som man skriver.

Men ja det ska vara position: fixed;
och sen bottom: 0; för att få den längst ned på sidan

Visa signatur

~. Citera så jag hittar tillbaka .~

Rapportera Redigera

Citera flera Citera

2012-03-06 14:28

Permalänk

BlueEyes

Medlem

Plats: Västerås
Registrerad: Jun 2005

●

Skrivet av 19KeVVa93:

Förlåt, jag menade självklart Fixed. haha xD Stressigt när man lyssnar på läraren samtidigt som man skriver.

Men ja det ska vara position: fixed;
och sen bottom: 0; för att få den längst ned på sidan

Gå till inlägget

Jag gjorde ett tokigt inlägg ovan som You rättade i know the feeling.

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-03-06 14:52

Permalänk

Frexuz

Medlem

Registrerad: Jun 2005

●

Ett tips för alla som kör absolute/fixed element som ska vara 100% breda:

Använd detta istället för att köra width: 100%.

.selector {
  position: absolute;
  left: 0;
  right: 0;
}

Detta gör det fritt fram att även sätta padding på samma element, annars kommer elementet få bredden 100% + paddingen.

Rapportera Redigera

Citera flera Citera

2012-03-06 15:15

Permalänk

jakob.ee.

Medlem

Plats: Varberg
Registrerad: Aug 2011

●

läs här! http://webdesignskolan.se/css-meny/css_meny.php där står flera olika sätt där läste jag när jag gjorde hemsidor.. och det finns mer mer du kan kolla i vänster kolumnen tex effekter osv..

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-03-06 15:42

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Skrivet av jakob.ee.:

läs här! http://webdesignskolan.se/css-meny/css_meny.php där står flera olika sätt där läste jag när jag gjorde hemsidor.. och det finns mer mer du kan kolla i vänster kolumnen tex effekter osv..

Gå till inlägget

Läs inte där! Webdesignskolan är utdaterad och felaktig.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

html/css hjälp med en meny :)

html/css hjälp med en meny :)

Externa nyheter

Spelnyheter från FZ