Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Få en div i mitten av sidan

Skapad av torchi12, 2010-08-15 23:13 i Webbutveckling & Programmering

2 721
17 inlägg
0 poäng
torchi12
Visningsbild
Hjälte 547 inlägg
2010-08-15 23:13
0
Med mitten av sidan menar jag då båda vertikalt och horisontellt.

Någon som kan hjälpa mig?

<div id='output' style="position:relative;top:50%;">
</div>
</center>

men då hamnar den i mitten horisontellt, tar jag väck <center> så hamnar den i mitten vertikalt.

Crazy Loop - Crazy Loop

Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2010-08-15 23:17
0
Svar till torchi12 [Gå till post]:
<div id='output' style="
position: relative;
top: 50%;
margin-left: auto;
margin-right: auto;">
</div>


Jag gillar inte intern-css, men pröva det ;o

Herp

Direktlänk Svara på inlägg Gästbok
Skicka
torchi12
Visningsbild
Hjälte 547 inlägg
Trådskapare
2010-08-15 23:23
0

Svar till csols [Gå till post]:

Det funkade inte heller =(

Crazy Loop - Crazy Loop

Direktlänk Svara på inlägg Gästbok
Skicka
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2010-08-15 23:28
0

Svar till torchi12 [Gå till post]:
Well, så gör iallafall jag för att få en div centrerad... ;o Prova att lägga css-koden i headern eller, allra helst, i ett css-dokument så blir det nog bättre (Y) :P

Herp

Direktlänk Svara på inlägg Gästbok
Skicka
torchi12
Visningsbild
Hjälte 547 inlägg
Trådskapare
2010-08-15 23:31
0

Svar till csols [Gå till post]:

Funkar inte


Crazy Loop - Crazy Loop

Direktlänk Svara på inlägg Gästbok
Skicka
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2010-08-15 23:36
0
Svar till torchi12 [Gå till post]:
Jag är inte säker på det här, men pröva följande:
<div id="output" style="
top:0;
bottom:0;
left: 0;
right: 0;
margin: auto;">
</div>

Anyhowz, ska sova tidigt inför arbetet som väntar imorgon, så hänvisar dig till google:
http://www.google.se/search?hl=sv&client=firefox-a&hs=EXl&rls=org.mozilla:sv-SE:official&&sa=X&ei=WF1oTMI6j5o4sODVuQU&ved=0CCQQBSgA&q=centrera+div+horisontellt+och+vertikalt&spell=1



Tillägg av csols 2010-08-15 23:37

3:e länken på google kollade jag på nyss. Mitt ex. ska enligt ts där fungera bra i firefox. Dock var det år 2005 :p

Herp

Direktlänk Svara på inlägg Gästbok
Skicka
Recovery
Visningsbild
P 29 Stockholm Hjälte 160 inlägg
2010-08-15 23:47
0
Svar till torchi12 [Gå till post]:


Svar till csols [Gå till post]:


<div (whatever) style="width:880px; margin: 0 auto;">

Tadaaa.

Krig är skapta för blodig vinst.

Direktlänk Svara på inlägg Gästbok
Skicka
Rojk
Visningsbild
P 36 Huddinge "Rojk" 3 576 inlägg
2010-08-15 23:48
0
margin: 0 auto; är svaret.

Damn you Recovery.

Exactly which part of B flat you don't understand!?

Direktlänk Svara på inlägg Gästbok
Skicka
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2010-08-15 23:49
0

Svar till Recovery [Gå till post]:
Varför "width: 880px;"?

Herp

Direktlänk Svara på inlägg Gästbok
Skicka
Recovery
Visningsbild
P 29 Stockholm Hjälte 160 inlägg
2010-08-15 23:50
0

Svar till csols [Gå till post]:
För att logiken säger att du inte kan centrera element som är 100% breda. De täcker liksom allt per automatik. Du måste definiera bredd.

Krig är skapta för blodig vinst.

Direktlänk Svara på inlägg Gästbok
Skicka
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2010-08-15 23:51
0

Svar till Recovery [Gå till post]:
Men han sa aldrig att han ville ha en 880px bred div? :s

Herp

Direktlänk Svara på inlägg Gästbok
Skicka
Recovery
Visningsbild
P 29 Stockholm Hjälte 160 inlägg
2010-08-15 23:52
0

Svar till csols [Gå till post]:
Det är väl inte dagis heller, han får ju ändra till den bredd han vill ha. Kan han skilja på divar och centertaggar fattar han väl pixelmetrics.

Krig är skapta för blodig vinst.

Direktlänk Svara på inlägg Gästbok
Skicka
torchi12
Visningsbild
Hjälte 547 inlägg
Trådskapare
2010-08-16 00:02
0


Det funkade ju inte?
Jag vill ha diven i mitten båda horisontelt och veritkalt av sidan.
Jag testade och lägga typ 200px i width och då flyttades den lite mot höger men inte i mitten, och den rördes inte alls verikalt.

Crazy Loop - Crazy Loop

Direktlänk Svara på inlägg Gästbok
Skicka
Recovery
Visningsbild
P 29 Stockholm Hjälte 160 inlägg
2010-08-16 00:08
0

Svar till torchi12 [Gå till post]:
Ok, jag tror att det här är riktigt jävla fult egentligen, men jag kodar med tables så ärligt talat skiter jag i det. Ponera att du har en 200x200 px ruta som ska centreras horisontellt och vertikalt;

<div yada style="position:absolute; (kanske fixed, vad et jag) top:50%; left:50%; margin-left: -100px; margin-top: -100px; width:200px; height:200px;">

Dela bredden i två alltså. Margin 0 auto är ju bättre för centrering, men det gäller inte vertikalt. Vertikal positionering är väl ett helvete rent allmänt om man inte använder de gamla goda verktygen.

Krig är skapta för blodig vinst.

Direktlänk Svara på inlägg Gästbok
Skicka
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2010-08-16 08:06
0

Svar till Recovery [Gå till post]:
Med andra ord exakt som dom skrev i den länken jag skickade;
http://www.daft.t.se/konferans/showpost.asp?id=10617 Wei.




Svar till torchi12 [Gå till post]:
Gör som Recovery sa (i sin senaste post), men lägg din div i div:en som du vill ha centrerad.
Visa spoiler
Usch.

Jag kom ihåg att jag fixade det genom att placera diven inuti en annan div. Den yttre diven positioneras absolut med top och left på 50%, margin-top -(hälften av divens höjd), och margin-left -(hälften av divens bredd). Du måste således ge den yttre diven en bredd och en höjd.

Så här:

<div style="width:610px; height:560px; position:absolute; top:50%; margin-top:-280px; left:50%; margin-left:-305px">


Herp

Direktlänk Svara på inlägg Gästbok
Skicka
Anonymmedlem
Visningsbild
Bitter 9001 inlägg
2010-08-16 08:09
0
Du ska inte positionera element i mitten av höjdled. Websidor fungerar inte på det sättet.

Låt läsaren rendera sidan rätt istället, att placera saker i mitten vertikalt är tekniker från 1999.
Direktlänk Svara på inlägg Gästbok
Skicka
Gabbev
Visningsbild
P 29 Lindome Hjälte 4 inlägg
2010-08-16 13:29
0
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
En bra guide med många lösningar.
Hoppas du hittar något som fungerar för dig.
Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Datorer & IT » Webbutveckling & Programmering » Få en div i mitten av sidan

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons