Avatar billede nemlig Professor
08. januar 2021 - 22:48 Der er 2 kommentarer

CSS - absolut position af logo

Hejsa.
Jeg har en side, hvor jeg gerne vil have placeret et logo på en fast position.
Det virker, hvis jeg har denne html-kode:
<img class="logo" src="images/FDF.png" width="110px" />
og denne css-kode:
.logo {
    position: absolute;
    top: 20px;
    margin-left: 25px; 
}

Men jeg vil gerne have det hele defineret i min css, da jeg laver koden responsive, så det også vises pænt på mobiler.
Derfor har jeg min CSS-kode opdelt i flere afsnit - alt efter antal pixels i den benyttede browser.
Jeg havde forestillet mig, at jeg kunne definere bredden i min css sådan her:
.logo {
    position: absolute;
    top: 20px;
    margin-left: 25px;
    width:110px";
}
og udelade "width" parameteren af ovenstående html-kode. Men det virker ikke.
Og tilsvarende vil jeg i css-afsnittet til mobiltelefoner sætte width med en mindre værdi.
Nogen forslag til løsning?

URL: www.kalendersystem.dk/res/  (siden er ikke færdig og jeg mangler stadig en del tilpasninger i afsnittet til mobiltelefoner.

PS. Logoet vises pænt i gængse browsere på pc og iPad. Men på iPhone er logoet ikke transparent og der kommer en tynd border om alt grafik. Nogen forklaring på dette?
Avatar billede nemlig Professor
09. januar 2021 - 10:11 #1
Opdatering: Den sidste del med logoet, der ikke var transparent og der blev vist en tynd border, har jeg nu løst. Jeg havde overset en img{} med noget padding, baggrund og en border.
Men positioneringen driller mig stadig.
Avatar billede nemlig Professor
09. januar 2021 - 11:16 #2
Fixed: Google er også en hjælp, hvor jeg fandt inspiration til løsningen.
Jeg skulle såmænd bare definere denne her:
.logo img {
        width: 110px;
    }

Så kan jeg ændre width i css-koden til mobilos.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester