Övriga diskussioner

kodning-behöver lite hjälp

2016-01-11 09:27 #0 av: twoodblue

Hej, har nyligen börjat koda och behöver lite hjälp med min webbsida. Innehållet har ett mått på 1300px och ska vara centrerad (så att bakgrundsbilden syns tydligt bakom, på höger och vänster sida om själva innehållet).

Skriver jag in position absolute, så fäster sig innehållet till vänster om webbläsaren. men tar jag relative, så hamnar den i mitten.

varför kan jag inte använda absolute? Såg att flera sidor använde sig av relative.  Varför?

    position: absolute;
   
    width: 1300px
    height: 1000px
    background: #FFF none repeat scroll 0% 0%
    text-align: center
    padding: 0px
    padding-top: 0px
    padding-right: 0px
    padding-bottom: 0px
    padding-left: 0px
    margin: 0px auto
    margin-top: 0px
    margin-right: auto
    margin-bottom: 0px
    margin-left: auto

Anmäl
2016-03-16 13:54 #1 av: cookies

Såvida man inte är superduktig på scripta med mera, så vill man inte använda absolut positionering. Nu för tiden så vill vi jobba med "responsiv design". Absolut positionering är som att spika fast det på ett staket. Sidan kommer se bra ut på 1 skärm, utan zoomning :)

Använd relative, punkt slut! :) Jag skulle gjort följande med antingen ett element eller id

something{

    margin: 0 auto;
    width: 80%;
    padding: 2em;

}

Med ditt:

margin: 0px auto
    margin-top: 0px
    margin-right: auto
    margin-bottom: 0px
    margin-left: auto

så sätter du först din margin rätt, sedan så sätter du den en gång till. Margin kan fungera:
Margin: x1;
Margin: v1 v2;
Margin: y1 y2 y3 y4;

x1 är samma värde för alla sidor.

v1 är top+bottom, i samma värde. Båda får samma.
v2 är left och right, båda får samma värde.

i Y så är det: top right bottom left; Där man sätter värde för varje sida. Samma gäller för padding. Hoppas jag inte krånglade till det för mycket.


Anmäl
2016-06-26 22:33 #2 av: twoodblue

tack för tipset =)

Anmäl
2016-06-27 01:53 #3 av: Florrpan

Det #1 säger är fel och helt galet påstått. Position: absolut används väldigt ofta i design och fungerar väldigt bra när det kommer till responsivt.


Grejen är att den bärande kontainern alltid borde vara relativ, det är default för alla element, sen kan du positionera element med absolut innanför dennes kontainer med hjälp av t.ex "left 0px; top: 0px;". Du Kan göra väldigt många kreativa saker med "absolut" då det svävar ovanför innehållet. T.ex göra prislappar, pratbubblor mm som sticker ut lite.

Skrev ett litet exempel så du kan se.
https://jsfiddle.net/ovf8zv4f/1/

Läs mer om positionering här:
http://html.net/tutorials/css/lesson14.php

Lycka till!

Anmäl
2016-06-27 22:41 #4 av: twoodblue

okej, tack =)

Anmäl
2016-06-28 02:07 #5 av: cookies

#3 Lär mig gärna mer om absolut positionering. Har aldrig haft något flyt med det, så har du någon länk eller något som kan ge mig ett bra use case för det så är jag mer än tacksam :)


Anmäl
2016-06-28 02:13 #6 av: Florrpan

#5 Det hänger på hur kreativ du är.  Men som du ser i mitt exempel så är det möjligt att göra dom till vad som helst, navigationsknappar, vanliga knappar, text som "står ut", slide-in menyer, "kryssa ner popup" -knapp eller helt enkelt visuella alternativ. Allt beror på hur du designar din hemsida.

Denna slider har 4st trähörn som jag gjorde med absolut position
http://www.gastagard.se/

Anmäl
2016-06-28 07:28 #7 av: cookies

#6 Ser det nu, snyggt nog så skalar det också! Är det något speciellt eller ska de bara skala? Har alltid fått statiska saker med absolut, som och all som är "i" åkter utanför eller blir för litet när man zoomar. Spelar det någon roll om det absoluta ligger i ett relativt element eller inte?


Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.