Centrera div i div (horisontellt och vertikalt)

Trädvy Permalänk
Medlem
Registrerad
Jan 2017

Centrera div i div (horisontellt och vertikalt)

Hej alla!

Som topicen lyder behöver jag hjälp med hur man centrerar en div(2) i en annan div(1). Mer konkret, har jag skapat en header med hjälp av en div(1), och i den headern vill jag centrera en annan div(2). Jag vill alltså (ännu mer konkret) att centrum av den div(2), ska vara i centrum på div(1).

Jag har så klart googlat detta, och jag har förstått att andra har haft bekymmer med det också. Jag förstår också att det finns lite olika ”lösningar” på problemet, men jag tycker inte att jag får någon av dem att bli bra. Min bifogade kod innehåller en lösning från stackoverflow som tycks se fint ut (se bild), det är alltså den blåa rutan som är centrerade i den gröna. Men om jag ändrar width på #center hamnar den utanför centrum, om jag inte ändrar margin också vill säga. Och det är gärna detta jag vill slippa, att ”manuellt” passa in div:en i centrum.

Denna ”grej” jag vill göra, att centrera en div i en annan div, verkar ju så enkelt om man pratar om det, och jag blir så irriterad av att det verkar vara så besvärligt att genomföra (men det är väl bara jag som är en noob).

Mitt slutresultat ska EGENTLIGEN vara att jag ska göra en meny bestående av 4 knappar vilka ska vara bredvid varandra horisontellt i div:en. Dessa knappar ska vara centrerade på horisontellt och vertikalt i headern. Men jag tänkte att jag måste lära mig krypa innan jag börjar gå…

Har ni någon lösning på mitt problem?

CSS

body { background-color:red; margin:0; } #centerf { background-color:green; height:400px; position:relative; } #center { position: absolute; width: 300px; height: 200px; top: 50%; left: 50%; margin: -100px 0 0 -150px; background: blue; }

HTML

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="olle" /> <title>This is my testpage</title> </head> <body> <div id="centerf"> <div id="center"> </div> </div> </body> </html>

http://www.bilddump.se/bilder/20170125083446-194.16.175.140.j...

Trädvy Permalänk
Medlem
Plats
Piteå
Registrerad
Okt 2004

CPU: AMD Ryzen 1700x @ 3.8GHz || Mem: 16GB Corsair LPX 3000mhz || Mobo: Asus x370 Prime || GPU: EVGA Geforce GTX1070 SC || SSD: WD black 500GB m2 || OS: Linux Mint/Win 10 || Monitor: Dell 43" 4K P4317Q

Citera om du vill ha svar :)

Trädvy Permalänk
Medlem
Registrerad
Okt 2004

Använd flex box, lagts till i CSS3 och stöds av alla moderna browsers.

jsfiddle exempel: https://jsfiddle.net/7f4oa2aa/

Ny CSS:

body { background-color:red; margin:0; } #centerf { background-color:green; height:400px; display: flex; align-items: center; justify-content: center; } #center { width: 300px; height: 200px; background: blue; }

mer info:
https://stackoverflow.com/questions/2743989/how-to-vertically...

Trädvy Permalänk
Medlem
Registrerad
Jul 2013

translate transform -50% kanske är något för dig

ex. http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Trädvy Permalänk
Medlem
Plats
Skellefteå
Registrerad
Feb 2007

Flexbox är det moderna sättet att göra detta på

Trädvy Permalänk
Medlem
Registrerad
Jan 2017

Tacksam förs respons hörni!

Ska testa så fort jag kommer hem, återkommer med resultat!

Trädvy Permalänk
Medlem
Plats
skåne
Registrerad
Jun 2004
Skrivet av ibrakadabra:

Tacksam förs respons hörni!

Ska testa så fort jag kommer hem, återkommer med resultat!

Flex som sagt.
Tagga gärna upp menyer med
<nav><ul><li>
Så blir det tydligare vad som är vad om du får mycket kod. Lätt struktur att jobba med när man gör tex menyer

Skickades från m.sweclockers.com

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

CSS3 "Flexbox":
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Se vilka webbläsare som stödjer flexbox här:
http://caniuse.com/#search=flexbox

Trädvy Permalänk
Medlem
Registrerad
Jan 2017

Hej alla!

Löste mitt "div-problem" med följande kod istället.

position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);

Jag förmodar att den inte är lika modern/smidig som flexboxlösningen, men den fungerar för tillfället i alla fall :). Nu har jag en annan fråga:

Jag designar min websida idag på min laptop med skärmupplösning 1366 * 768 (tror jag att det är). Jag vet så klart om att det finns skärmar med mycket bättre/högre upplösning idag, varför jag gärna hade velat veta hur min hemsida ser ut med högre skärmupplösning. Jag inbillade mig att jag själv kunde "visualisera" detta genom att gå in på min hemsida, och zooma ut, alltså hålla in ctrl och scrolla. Men vad jag har förstått det som, blir inte det samma effekt som om upplösningen skulle vara högre (eller hur?). Jag vill alltså se hur min hemsida hade sett ut på högre upplösning, tex 2560x1440 eller 1920x1080.

Går detta att lösa på något sätt?

Tack!

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Aug 2010

@ibrakadabra:
De flesta moderna webbläsare har verktyg för att simulera olika upplösningar, kallas "responsive design mode" eller liknande.

Såhär gör du i Firefox, Chrome, Safari, Internet Explorer (se sektionen Display), Edge (se sektionen Display).

Du får gärna citera eller nämna mig (@ToJa92) om du svarar på något jag skrivit.

Trädvy Permalänk
Medlem
Registrerad
Jan 2013
Skrivet av ibrakadabra:

Hej alla!

Löste mitt "div-problem" med följande kod istället.

position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);

Jag förmodar att den inte är lika modern/smidig som flexboxlösningen, men den fungerar för tillfället i alla fall :). Nu har jag en annan fråga:

Jag designar min websida idag på min laptop med skärmupplösning 1366 * 768 (tror jag att det är). Jag vet så klart om att det finns skärmar med mycket bättre/högre upplösning idag, varför jag gärna hade velat veta hur min hemsida ser ut med högre skärmupplösning. Jag inbillade mig att jag själv kunde "visualisera" detta genom att gå in på min hemsida, och zooma ut, alltså hålla in ctrl och scrolla. Men vad jag har förstått det som, blir inte det samma effekt som om upplösningen skulle vara högre (eller hur?). Jag vill alltså se hur min hemsida hade sett ut på högre upplösning, tex 2560x1440 eller 1920x1080.

Går detta att lösa på något sätt?

Tack!

Jo det blir som att zooma ut, sålänge förhållandet på upplösningen är samma, alltså 16:9.

En lätt sak jag tycker för att centrera en div i en annan är margin-left: auto; och margin-right:auto; Tycker det var det smidigaste sättet när jag satt å gjorde sådant

Trädvy Permalänk
Medlem
Registrerad
Jan 2017

Hej!

Tack för tipsen! Det såg väldigt illa ut när upplösningen blev mindre, haha . Så är det när man är nybörjare. Jag har en annan fråga:

Vad jag har förstått det som kan man inte skapa ett id till en <img>. I min hemsida har jag en bild vars egenskaper jag har ändrat med hjälp av img { } i css-filen. Nu har jag lagt till en annan bild som också påverkas av css-filen, även fast jag nu inte vill att den ska påverkas av samma inställning. Jag förstår det som att det blir lite vanskligt att ändra img i css-filen, eftersom alla bilder som du lägger in kommer att påverkas av inställningen (har jag rätt?).

Jag har också förstått det som att man då istället kan lägga sin bild i en container och ändra den vägen.

Så jag har alltså lagt min andra bild inom en <div> för att på så sätt ändra den vägen, men den tycks fortfarande påverkas av css-filen. Jag antar att detta är "korrekt" så att säga? Och för att lösa problemet att img { } inte påverkar alla bilder jag lägger in hädanefter, bör jag lägga min första bild inom <div> också, eller?

Tusen tack för alla svar!

Trädvy Permalänk
Medlem
Plats
skåne
Registrerad
Jun 2004
Skrivet av ibrakadabra:

Hej!

Tack för tipsen! Det såg väldigt illa ut när upplösningen blev mindre, haha . Så är det när man är nybörjare. Jag har en annan fråga:

Vad jag har förstått det som kan man inte skapa ett id till en <img>. I min hemsida har jag en bild vars egenskaper jag har ändrat med hjälp av img { } i css-filen. Nu har jag lagt till en annan bild som också påverkas av css-filen, även fast jag nu inte vill att den ska påverkas av samma inställning. Jag förstår det som att det blir lite vanskligt att ändra img i css-filen, eftersom alla bilder som du lägger in kommer att påverkas av inställningen (har jag rätt?).

Jag har också förstått det som att man då istället kan lägga sin bild i en container och ändra den vägen.

Så jag har alltså lagt min andra bild inom en <div> för att på så sätt ändra den vägen, men den tycks fortfarande påverkas av css-filen. Jag antar att detta är "korrekt" så att säga? Och för att lösa problemet att img { } inte påverkar alla bilder jag lägger in hädanefter, bör jag lägga min första bild inom <div> också, eller?

Tusen tack för alla svar!

Du kan skapa id och class till alla element
Om vill ge alla bilder med en speciell klass ett visst utseende kan du skriva:
Img.className{}

Skickades från m.sweclockers.com

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Trädvy Permalänk
Medlem
Registrerad
Jan 2017
Skrivet av kundun:

Du kan skapa id och class till alla element
Om vill ge alla bilder med en speciell klass ett visst utseende kan du skriva:
Img.className{}

Skickades från m.sweclockers.com

Är det sant?

Jag har provat med: <img id="bild" src=....

men det har inte fungerat. Och det bekräftar följande post på stackoverflow också, http://stackoverflow.com/questions/5134681/css-how-to-change-..., därav min fråga.

Gör jag något fel?

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Maj 2003

Det den där länken säger är att du "inte kan" ändra src på en img med hjälp av css, dock är det ingenting som säger att du inte kan ha ett ID på den. Säker på att du skriver din selector rätt för att den faktiskt ska gå mot ett ID?

*edit*
Ta upp utvecklarverktygen i din webbläsare, markera ditt bildelement med ID och se vad den faktiskt får för styling. Det är möjligt att det är något som overridear din styling.

Stationär: FD Define Nano S, AMD R5 1600, Biostar X370GTN, G-Skill Ripjaws V 16GB 3600Mhz @ 3200Mhz CL16, Radeon RX 570, Samsung 850 EVO 1TB, Corsair SF450, Arctic Freezer 33
HTPC: In-Win BP671, AMD Athlon 5350, Asus AM1I-A, Geforce GT 710, 4GB 1600Mhz, Corsair Force LS 60GB, One for all UCR7960 (+ Flirc)
NAS: HP Proliant N54L, 2x WD Red 2TB (Raid 1), WD Green 2TB, FreeNAS 11

Trädvy Permalänk
Medlem
Registrerad
Jan 2017
Skrivet av Peking:

Det den där länken säger är att du "inte kan" ändra src på en img med hjälp av css, dock är det ingenting som säger att du inte kan ha ett ID på den. Säker på att du skriver din selector rätt för att den faktiskt ska gå mot ett ID?

*edit*
Ta upp utvecklarverktygen i din webbläsare, markera ditt bildelement med ID och se vad den faktiskt får för styling. Det är möjligt att det är något som overridear din styling.

Jaha, oj då, my bad.

Hmm, ja, selectorn skrivs väl med # och namnet på idn?.

Men kan det vara så att den andra bilden påverkas av att jag först har en "generell" selector för alla IMGs som är typ:

img { kod }

och att den påverkar min andra img som har ett ID?

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

Du kan enkelt kontrollera flera bilders css-attribut med hjälp av en klass. En klass får användas på flera element samtidigt. Varje unikt id skall endast förekomma en gång per dokument och ett id styr alltid över en klass.

HTML

<!-- Första bilden får en röd ram via class="bilder" --> <img src="#" alt="Min bild" class="bilder" /> <!-- Andra bilden får en grön ram via id="bild" som skriver över färgen från class="bilder" --> <img src="#" alt="Min bild" id="bild" class="bilder" />

CSS

.bilder { border: 1px solid red; } #bild { border-color: green; }

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Maj 2003
Skrivet av ibrakadabra:

Jaha, oj då, my bad.

Hmm, ja, selectorn skrivs väl med # och namnet på idn?.

Men kan det vara så att den andra bilden påverkas av att jag först har en "generell" selector för alla IMGs som är typ:

img { kod }

och att den påverkar min andra img som har ett ID?

Se kevvs svar. Jag höll på att skriva ihop ett svar men han hann före. Ett tips är att använda utvecklarverktyget i webbläsaren för att se vad dina element faktiskt får för styling och om det är något som overrideas (om cssen blir överstruken).

Stationär: FD Define Nano S, AMD R5 1600, Biostar X370GTN, G-Skill Ripjaws V 16GB 3600Mhz @ 3200Mhz CL16, Radeon RX 570, Samsung 850 EVO 1TB, Corsair SF450, Arctic Freezer 33
HTPC: In-Win BP671, AMD Athlon 5350, Asus AM1I-A, Geforce GT 710, 4GB 1600Mhz, Corsair Force LS 60GB, One for all UCR7960 (+ Flirc)
NAS: HP Proliant N54L, 2x WD Red 2TB (Raid 1), WD Green 2TB, FreeNAS 11

Trädvy Permalänk
Medlem
Registrerad
Jan 2017
Skrivet av kevvs:

Du kan enkelt kontrollera flera bilders css-attribut med hjälp av en klass. En klass får användas på flera element samtidigt. Varje unikt id skall endast förekomma en gång per dokument och ett id styr alltid över en klass.

HTML

<!-- Första bilden får en röd ram via class="bilder" --> <img src="#" alt="Min bild" class="bilder" /> <!-- Andra bilden får en grön ram via id="bild" som skriver över färgen från class="bilder" --> <img src="#" alt="Min bild" id="bild" class="bilder" />

CSS

.bilder { border: 1px solid red; } #bild { border-color: green; }

Skrivet av Peking:

Se kevvs svar. Jag höll på att skriva ihop ett svar men han hann före. Ett tips är att använda utvecklarverktyget i webbläsaren för att se vad dina element faktiskt får för styling och om det är något som overrideas (om cssen blir överstruken).

Hej!

Ahh, okej! Men om jag vill att 2 bilder ska ha 2 olika attribut är det väl rimligt att använda 2 olika klasser, eller 2 olika ID's, eller hur?

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

Personligen använder jag i regel bara id på element som är viktiga för struktur så som div och section eller för att använda tillsammans med JavaScript/jQuery.

I ditt fall så skall du använda två eller flera olika klasser. Om det inte är speciellt många attribut som skall ändras så kan du göra exempelvis så här:

.bilder600x400 { width: 600px; height: 400px; margin: 10px; border: 1px solid red; } .bilder300x300 { width: 300px; height: 300px; }

Tackvare att .bilder300x300 ligger efter .bilder600x400 i css så skriver den sistnämna över den första klassens width och height. Vad jag försöker visa dig är att du bara behöver skapa nya klasser för att ändra/lägga till attribut. Allt som inte skall ändras skall ej stå med i den extra klassen.

Trädvy Permalänk
Medlem
Registrerad
Jan 2017
Skrivet av kevvs:

Personligen använder jag i regel bara id på element som är viktiga för struktur så som div och section eller för att använda tillsammans med JavaScript/jQuery.

I ditt fall så skall du använda två eller flera olika klasser. Om det inte är speciellt många attribut som skall ändras så kan du göra exempelvis så här:

.bilder600x400 { width: 600px; height: 400px; margin: 10px; border: 1px solid red; } .bilder300x300 { width: 300px; height: 300px; }

Tackvare att .bilder300x300 ligger efter .bilder600x400 i css så skriver den sistnämna över den första klassens width och height. Vad jag försöker visa dig är att du bara behöver skapa nya klasser för att ändra/lägga till attribut. Allt som inte skall ändras skall ej stå med i den extra klassen.

Hej!

Okej, ska testa detta när jag kommer hem idag.

Men jag förstår inte riktigt koden ovan ändå.

.bilder600x400 och .bilder300x300 är väl 2 olika klasser som bör peka på 2 olika bilder? Hur kan .bilder300x300 få attributen "margin: 10px; border: 1px solid red;" (för jag antar att den får de attributen av .bilder600x400) Alltså hur kan de känna av varandra när de är 2 olika klasser?

Ursäkta om frågan är dum

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Maj 2003
Skrivet av ibrakadabra:

Hej!

Okej, ska testa detta när jag kommer hem idag.

Men jag förstår inte riktigt koden ovan ändå.

.bilder600x400 och .bilder300x300 är väl 2 olika klasser som bör peka på 2 olika bilder? Hur kan .bilder300x300 få attributen "margin: 10px; border: 1px solid red;" (för jag antar att den får de attributen av .bilder600x400) Alltså hur kan de känna av varandra när de är 2 olika klasser?

Ursäkta om frågan är dum

Han menar att ena bilden använder båda klasserna. Klassen bilder300x300 overridear storleksattributen från bilder600x400, men får ändå med sig margin och border från den sistnämnda klassen.

Stationär: FD Define Nano S, AMD R5 1600, Biostar X370GTN, G-Skill Ripjaws V 16GB 3600Mhz @ 3200Mhz CL16, Radeon RX 570, Samsung 850 EVO 1TB, Corsair SF450, Arctic Freezer 33
HTPC: In-Win BP671, AMD Athlon 5350, Asus AM1I-A, Geforce GT 710, 4GB 1600Mhz, Corsair Force LS 60GB, One for all UCR7960 (+ Flirc)
NAS: HP Proliant N54L, 2x WD Red 2TB (Raid 1), WD Green 2TB, FreeNAS 11

Trädvy Permalänk
Medlem
Registrerad
Jul 2013

Du kan ju även sätta flera klasser på ett element.
Bara göra mellanslag mellan klassnamnen.
Ex. <img class="bild stor" />
.bild { border... etc }
.stor { width... etc }

Trädvy Permalänk
Medlem
Registrerad
Jan 2017

Hej på er!

Tack för ert engagemang.

Jag har lyckats att ge bilderna varsin klass nu, och jag har till och med lyckats att få dem hamna bredvid varandra, centrerat på skärmen. Återkommer nästa gång jag stöter på patrull.

Tusen tack igen, vad fan hade man gjort utan internet?

Trädvy Permalänk
Medlem
Registrerad
Jan 2017

Hej igen!

Jag har börjat att titta lite på php då jag kommer behöva fixa ett formulär, som ska skickas till en mail, och jag har förstått att detta görs via php.

Jag har då fått installera en webserver (heter det så?) på min dator, Wampserver. Och i foldern localhost, kan jag lägga till php-script för att sedan köra dem via webläsaren.

Jag har en liten fundering kring detta:

Brukar man blanda sin php-kod med sin html-kod? Eller är det som med CSS att den (php) bör ligga i en separat fil.

Jag skapade från början en html-fil med standardtaggar (html,head,body etc), och en simpel rad med php-kod, och sedan lade jag den i min localhost på webservern. När jag skulle köra html-filen i min webläsare, märkte jag att php-koden inte exekverades. Då testade jag att ändra namn på html-filen så att den slutade med .php istället. Och då fungerade det - är det så alltså att så fort man har ett stycke php-kod i sin html-kod, så måste filen sluta med php? För det verkar ju som att php-filen förstår html-kod utan att den slutar med .html i alla fall.

Aahhh, vad rörigt detta blev, men jag känner att jag måste få lite klarhet i detta.

Trädvy Permalänk
Medlem
Plats
skåne
Registrerad
Jun 2004

Jo precis, du byter till .php när du har php-kod i filen.
Vill du hålla din html lite renare från php-kod så kan du alltid lägga php i egna filer och bara includa den i html-filen. tex <?php include('minfil.php'); ?>

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Trädvy Permalänk
Medlem
Registrerad
Jan 2017
Skrivet av kundun:

Jo precis, du byter till .php när du har php-kod i filen.
Vill du hålla din html lite renare från php-kod så kan du alltid lägga php i egna filer och bara includa den i html-filen. tex <?php include('minfil.php'); ?>

Okej, tack!

Jag har fler frågor, se nedan om ni orkar :):

Håller på och försöker lära mig PHP. Just nu sitter jag med W3schools tutorial, och det har dykt upp en fråga i samband med en av deras kod-snippets. Följande:

<html> <body> <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>"> Name: <input type="text" name="fname"> <input type="submit"> </form> <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { // collect value of input field $name = $_REQUEST['fname']; if (empty($name)) { echo "Name is empty"; } else { echo $name; } } ?> </body> </html>

Jag förstår koden, men ändå inte. Det jag blir fundersam över är hur php-koden förstår att den
ska hämta information från formen. Det jag tycker fattas är liksom en funktion i formen, som php-koden
kallar på eller viceversa. Det enda som relaterar mellan formen och php-koden är ju typ $_SERVER? eller?

Kan någon förklara?

Trädvy Permalänk
Medlem
Plats
Malmö
Registrerad
Maj 2004

@ibrakadabra: har du tagit reda på vad

<?php echo $_SERVER['PHP_SELF'];?>

skriver ut för något?

Trädvy Permalänk
Medlem
Registrerad
Jan 2017

@thulin82:

Hej!

"$_SERVER['PHP_SELF'] Returns the filename of the currently executing script"

Är det detta du menar?

Ärligt talat, jag vill inte kalla mig dålig på engelska. Men just den meningen... vad menar man med 'filename'? Kan man förklara de orden på något annat sätt?

Om det inte är ovan som du tänker på @thulin82, vad menar du annars?

Trädvy Permalänk
Medlem
Plats
Malmö
Registrerad
Maj 2004

@ibrakadabra: det innebär att om du kör ovan script i en fil som heter form.php, så returnerar php-utskriften strängen "form.php"

det betyder att när du klickar på submit-knappen i form:en så skickas resultatet i form av en POST till sig själv, denna POST tas sedan om hand av den nedre php-delen