Permalänk
Medlem

CSS Centrera box

Jag skulle vilja centrera EN av mina boxar, har googlat men kan inte hitta rätt kod.
Vet någon vad koden är?

Visa signatur

Kom ihåg att ALLTID citera mig om du vill ha svar!

|CPU: Intel Core i7 4790K Kyld av: Corsair H80 GPU: ASUS GTX 970 4GB Chassi: Phanteks Enthoo Evolv MOBO: MSI Z97M Gaming Nätagg: XFX 750W Silver SSD: Kingston 120GB SSDNow V300 HDD: Samsung Spinpoint F3 1TB 7200RPM + 1TB|

Permalänk
Skrivet av FobbanN:

Jag skulle vilja centrera EN av mina boxar, har googlat men kan inte hitta rätt kod.
Vet någon vad koden är?

#boxen { margin:auto; }

Finns flera sätt att skriva det.

EDIT: Detta skrivs alltså i CSS-filen, och "#boxen" är ID:t på boxen.

Visa signatur
Permalänk
Medlem
Skrivet av Kebabhyvlarn:

#boxen { margin:auto; }

Finns flera sätt att skriva det.

EDIT: Detta skrivs alltså i CSS-filen, och "#boxen" är ID:t på boxen.

Får det dock inte att funka -_- Jag kan detta igentligen men idag är inte riktigt min dag tydligen ^^

Min box kod är följande:

#info{ position: absolute; top: 225; /*left: 25%;*/ Margin:auto; color: #FFFFFF; background-color: darkgray; border: 5px solid white; width: 800px; height: 400px; border-radius: 20px; }

Men kanske

position: absolute; top: 225;

inte fungerar ihop med det?

EDIT: Om det hjälper så är detta hemsidan och det är då "Info" boxen jag vill centrera.

Visa signatur

Kom ihåg att ALLTID citera mig om du vill ha svar!

|CPU: Intel Core i7 4790K Kyld av: Corsair H80 GPU: ASUS GTX 970 4GB Chassi: Phanteks Enthoo Evolv MOBO: MSI Z97M Gaming Nätagg: XFX 750W Silver SSD: Kingston 120GB SSDNow V300 HDD: Samsung Spinpoint F3 1TB 7200RPM + 1TB|

Permalänk
Skrivet av FobbanN:

Får det dock inte att funka -_- Jag kan detta igentligen men idag är inte riktigt min dag tydligen ^^

Min box kod är följande:

#info{ position: absolute; top: 225; /*left: 25%;*/ Margin:auto; color: #FFFFFF; background-color: darkgray; border: 5px solid white; width: 800px; height: 400px; border-radius: 20px; }

Men kanske

position: absolute; top: 225;

inte fungerar ihop med det?

Nej jag tror inte det. Testa utan

Visa signatur
Permalänk
Medlem
Skrivet av Kebabhyvlarn:

Nej jag tror inte det. Testa utan

Ja nu flög den till mitten, dock så måste jag "putta" ner den, du vet möjligtvis inte om det går att göra position "dynamic" eller något sånt och sedan lägga till en top: ; till?

Visa signatur

Kom ihåg att ALLTID citera mig om du vill ha svar!

|CPU: Intel Core i7 4790K Kyld av: Corsair H80 GPU: ASUS GTX 970 4GB Chassi: Phanteks Enthoo Evolv MOBO: MSI Z97M Gaming Nätagg: XFX 750W Silver SSD: Kingston 120GB SSDNow V300 HDD: Samsung Spinpoint F3 1TB 7200RPM + 1TB|

Permalänk
99:e percentilen
Skrivet av FobbanN:

Ja nu flög den till mitten, dock så måste jag "putta" ner den, du vet möjligtvis inte om det går att göra position "dynamic" eller något sånt och sedan lägga till en top: ; till?

#boxen { position: relative; top: 200px; }

När jag centrerar gör jag så här:

#boxen { margin: 0 auto 0 auto; }

Lycka till!

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Inaktiv

margin: 225px auto 0 auto?
Varför ska du putta ner den?

Permalänk
Medlem
Skrivet av Alling:

#boxen { position: relative; top: 200px; }

När jag centrerar gör jag så här:

#boxen { margin: 0 auto 0 auto; }

Lycka till!

Skrivet av Kebabhyvlarn:

Nej jag tror inte det. Testa utan

Nu har jag löst det! Koden blev:

position: relative; top: 20; Margin:auto;

Tack alla!

Skrivet av anon150287:

margin: 225px auto 0 auto?
Varför ska du putta ner den?

Så det blir snyggare, gillar inte att kanterna klumas ihop.

Visa signatur

Kom ihåg att ALLTID citera mig om du vill ha svar!

|CPU: Intel Core i7 4790K Kyld av: Corsair H80 GPU: ASUS GTX 970 4GB Chassi: Phanteks Enthoo Evolv MOBO: MSI Z97M Gaming Nätagg: XFX 750W Silver SSD: Kingston 120GB SSDNow V300 HDD: Samsung Spinpoint F3 1TB 7200RPM + 1TB|

Permalänk
Medlem

Jag känner att det är på sin plats med ett förtydligande.

Vill du ha mer förståelse för "position" så läs denna utmärkta artikel:
http://www.alistapart.com/articles/css-positioning-101/

Den lärde mig ett och annat. och jag fick ett bättre hum om position.

Lycka till.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem

Varför håller du på med massa positionings? Mycket lättare att ha containers som du har margins till. Om du börjar absolute positionera element så har dem aldrig någonting att "luta" sig mot, och andra element kan inte "luta" sig mot dem. Menar inte att vara elak, men sättet du har kodat din sida på är väldigt fulkodat och inte funktionellt överhuvudtaget. Jag ser t ex inte hela sidan på min MacBook utan får scrolla i sidled. Du använder massa inline element för att få fet och centrerad text, man gör helt enkelt inte så längre utan du ska göra allt sådant i css'en. Använd listor till menyn (ul->li). Positionera inte dem med  ... Och framförallt, Strukturera din kod! Det är helt omöjligt att få en översikt över vad som hänger ihop på din sida, för allting står huller om buller. Använd indenteringar, snälla.. Såhär ska det se ut:

<div id="parent-div"> <div class="child-div"> Innehåll i child-div. <span class="child-of-child">Här händer det grejer!</span> </div> </div>

Om du tycker det är jobbigt, när du gör lite större koder så kan du även använda kommentarer för att visa vad det är som tar slut var. Så efter ett block av kod så kan du lägga in <!-- /parent-div --> för att enkelt se att det är där den tar slut. Hoppas det hjälper någonting. Läs på lite mer och gör om koden från början.

Visa signatur

P6T SE - i7 930 @ 4GHz - 12GB XMS3 1600 MHz - Unlocked HD6950 CF @ 900/1325 - X25-V 40GB x2 RAID 0 - 2 TB Samsung F3 - Tesla 1000w - Define r2

450D | 50/1.8 II | 20/1.8 | 18-55 3.5/5.6 IS
Carlssonmedia.se

Permalänk
Medlem
Skrivet av mYrAns:

Varför håller du på med massa positionings? Mycket lättare att ha containers som du har margins till. Om du börjar absolute positionera element så har dem aldrig någonting att "luta" sig mot, och andra element kan inte "luta" sig mot dem. Menar inte att vara elak, men sättet du har kodat din sida på är väldigt fulkodat och inte funktionellt överhuvudtaget. Jag ser t ex inte hela sidan på min MacBook utan får scrolla i sidled. Du använder massa inline element för att få fet och centrerad text, man gör helt enkelt inte så längre utan du ska göra allt sådant i css'en. Använd listor till menyn (ul->li). Positionera inte dem med  ... Och framförallt, Strukturera din kod! Det är helt omöjligt att få en översikt över vad som hänger ihop på din sida, för allting står huller om buller. Använd indenteringar, snälla.. Såhär ska det se ut:

<div id="parent-div"> <div class="child-div"> Innehåll i child-div. <span class="child-of-child">Här händer det grejer!</span> </div> </div>

Om du tycker det är jobbigt, när du gör lite större koder så kan du även använda kommentarer för att visa vad det är som tar slut var. Så efter ett block av kod så kan du lägga in <!-- /parent-div --> för att enkelt se att det är där den tar slut. Hoppas det hjälper någonting. Läs på lite mer och gör om koden från början.

Nu kanske vi inte ska kasta sten i glashus va ?

"Margin" ska inte användas för sådan positioning som OP är ute efter utan för att "justera" innehåll.

Du bör också läsa lite om CSS och även på länken jag postade ovan.

Besökte din website och det är inget fel på ditt självförtroende måste jag säga om man läser "Om".
Men man är aldrig fulllärd och det bör man kanske komma ihåg.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem
Skrivet av BlueEyes:

Nu kanske vi inte ska kasta sten i glashus va ?

"Margin" ska inte användas för sådan positioning som OP är ute efter utan för att "justera" innehåll.

Du bör också läsa lite om CSS och även på länken jag postade ovan.

Besökte din website och det är inget fel på ditt självförtroende måste jag säga om man läser "Om".
Men man är aldrig fulllärd och det bör man kanske komma ihåg.

Att marginjustera containers är ett mycket effektivt sätt att positionera och det är bara det jag vill förmedla till TS Absolut, men om jag anser mig kunna hjälpa TS så kommer jag ju skriva min mening även om det kanske är negativt, det hade jag uppskattat när jag va nybörjare.

Visa signatur

P6T SE - i7 930 @ 4GHz - 12GB XMS3 1600 MHz - Unlocked HD6950 CF @ 900/1325 - X25-V 40GB x2 RAID 0 - 2 TB Samsung F3 - Tesla 1000w - Define r2

450D | 50/1.8 II | 20/1.8 | 18-55 3.5/5.6 IS
Carlssonmedia.se

Permalänk
Medlem

JAJA Jag fick ett PM igår och det löste allt. Problem solved.

Visa signatur

Kom ihåg att ALLTID citera mig om du vill ha svar!

|CPU: Intel Core i7 4790K Kyld av: Corsair H80 GPU: ASUS GTX 970 4GB Chassi: Phanteks Enthoo Evolv MOBO: MSI Z97M Gaming Nätagg: XFX 750W Silver SSD: Kingston 120GB SSDNow V300 HDD: Samsung Spinpoint F3 1TB 7200RPM + 1TB|