Permalänk
Medlem

Logotyp

Hej alla!

Nu är det så att min hemsida nästan är klar. På startpage har jag en drop-meny och över den, alltså allra högst upp vill jag placera min logotyp (image).
Får dock inte till det riktigt. Jag la bilden inom en div.
Hur ska css se ut?
Någon som kan hjälpa till?:)

Permalänk
Medlem

<img src="/sökväg/till/bild"> för HTML5. Ingen CSS behövs.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem

@LemonIllusion:
så trodde jag också!
Men då tar den enormt mycket plats och jag måste scrolla ner för att se min drop-meny. Fast bilden är inte stor alls!:/

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:
så trodde jag också!
Men då tar den enormt mycket plats och jag måste scrolla ner för att se min drop-meny. Fast bilden är inte stor alls!:/

Om bilden blir så stor är den så stor. Det är så det fungerar. Vill du göra den mindre sätter du storlek med CSS (eller skalar ner den i ett bildbehandlingsprogram). Width för bredd och height för höjd. Sätter du den ena skalas den andra så att bilden behåller sitt förhållande.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem

@LemonIllusion:
yes. har gjort det flera gånger. ändå tar den så otroligt mycket plats. btw så är det utan bakgrund.
har du några tips?

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:
så trodde jag också!
Men då tar den enormt mycket plats och jag måste scrolla ner för att se min drop-meny. Fast bilden är inte stor alls!:/

Hur stor är bilden? Hur ser nuvarande kod ut? Bifoga gärna en bild på hur du menar.

Det du vill göra är att placera bilden i din header, d.v.s strax ovanför menyn, detta gör att ordna genom att sätta in bilden i <header></header> taggarna (förutsatt att du använder dig utav HTML5).

<header> <img src="dinbild.png"/> </header> <menu> Din meny här. </menu>

Bilden får inte vara alls nå stor, gärna under 50px på höjden. Vill du få in den i meny-raden utan att behöva krångla så kan du slänga in bilden inom <menu></menu> taggarna, eller om du använder en div så går det lika bra.
Tänk på storleken bara, 50px kanske är för mycket för din sida, eller för lite. Det beror helt på hur du valt att designa den!

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:
yes. har gjort det flera gånger. ändå tar den så otroligt mycket plats. btw så är det utan bakgrund.
har du några tips?

Det är så man gör för att sätta storlek på bilder. Finns inte mer att tipsa om direkt.
https://jsfiddle.net/pu9apms7/

Det är nog dags att du klistrar in den relevanta koden nu. Använd [code][/code]-taggar!

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem

@Pamudas:
@LemonIllusion:

så här ser min kod ut just för bilden:

<header>

<img ID"Hard" src="Pictures/hard.png" />

</header>
sen börjar meny...

<body class="startpage">
<center>
<nav ID="meny">
<ul>
<li><a href="homepage.aspx">Startsidan</a></li>
<li><a href="#">Kosttillskott</a>
<ul>
osv.

Vad jag än skriver i CSS blir det aldrig rätt. Den hamnar antigen helt perfekt under menyn eller tar all plats övers så menyn åker till botten. haha

Permalänk
Medlem
Skrivet av AF0101:

@Pamudas:
@LemonIllusion:

så här ser min kod ut just för bilden:

<header>

<img ID"Hard" src="Pictures/hard.png" />

</header>
sen börjar meny...

<body class="startpage">
<center>
<nav ID="meny">
<ul>
<li><a href="homepage.aspx">Startsidan</a></li>
<li><a href="#">Kosttillskott</a>
<ul>
osv.

Vad jag än skriver i CSS blir det aldrig rätt. Den hamnar antigen helt perfekt under menyn eller tar all plats övers så menyn åker till botten. haha

Du saknar likhetstecken för bildens id-attribut.
<img id="Hard" src="Pictures/hard.png" />

Bifoga din CSS också och återigen, använd [code][/code]-taggar!

EDIT: En bild på hur du vill att slutresultatet ska se ut är bra också.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem

@LemonIllusion:

jag har tyvärr inte bilder just nu på det.
här är CSS koden ,

#Hard{ width: 100%; height: 300px; text-align: center; }

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:

jag har tyvärr inte bilder just nu på det.
här är CSS koden ,

#Hard{ width: 100%; height: 300px; text-align: center; }

Inte så konstigt om du satt att bilden ska vara 300px hög.

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB

Permalänk
Medlem

@Pamudas:

detta är diven!

Skulle jag sätta själva bilden på 50px säger vi, som jag gjorde, skulle den bli pytttteeeeeeliten!

Permalänk
Medlem

<header> <div ID="Hard"> <img src="Pictures/logotyp.png" /> </div> </header>

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:

jag har tyvärr inte bilder just nu på det.
här är CSS koden ,

#Hard{ width: 100%; height: 300px; text-align: center; }

text-align: center gör inget på bilder. Man lägger det på föräldern för att centrera dess barn.
I övrigt ger det du skrev exakt väntat resultat. Bilden tar upp 100% av förälderns bredd och är 300px hög. På vilket sätt var inte det vad du ville ha?

Dessutom såg jag nu att du har din header utanför body. Allt "synligt" innehåll ska vara inuti body och metainnehåll ska vara i head.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem

Såhär ser min CSS ut..

#Image1 { border: 0px #000000 solid; left: 0; top: 0; width: 100%; height: 100%;

Edit: Annars kan du väl köra

<a href="adress"><img="sökväg till bild" width="50%" height="50%"></a>

?

Visa signatur

| X570 | R5-3600 | 960 EVO M.2 + 860 1Tb | 16Gb XMP3200 | RTX-2070 |
| I7-6700 | 64Gb PC4-2666 | 34Tb | TrueNas 13 |
| Yamaha HTR-4065 | Argos Audio Alto 5 MK2 | SystemOne W100B + SW10 |
| iPhone 15 Pro 128Gb |

Permalänk
Medlem

@LemonIllusion:
tack!!
Det jag menar är allt bilden hamnar som jag vill över menyn alltså överst på min page MEN tar upp för mycket plats runtomkring alltså åker menyn när och jag måste då scrolla ner till den

Permalänk
Medlem
Skrivet av Nevil:

Såhär ser min CSS ut..

#Image1 { border: 0px #000000 solid; left: 0; top: 0; width: 100%; height: 100%;

0px bred border?
left och top-värden på ett icke-positionerat element?
Hur är något av det här relevant för tråden?

Skrivet av AF0101:

@LemonIllusion:
tack!!
Det jag menar är allt bilden hamnar som jag vill över menyn alltså överst på min page MEN tar upp för mycket plats runtomkring alltså åker menyn när och jag måste då scrolla ner till den

Du vill alltså ha en mindre bild som inte är mindre? Det är tyvärr omöjligt, så jag antar att det inte är vad du menar. Rita en bild eller uttryck dig så man förstår.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem
Skrivet av LemonIllusion:

0px bred border?
left och top-värden på ett icke-positionerat element?
Hur är något av det här relevant för tråden?

Han körde väl css ? Sådär ser de ut i min ..

Visa signatur

| X570 | R5-3600 | 960 EVO M.2 + 860 1Tb | 16Gb XMP3200 | RTX-2070 |
| I7-6700 | 64Gb PC4-2666 | 34Tb | TrueNas 13 |
| Yamaha HTR-4065 | Argos Audio Alto 5 MK2 | SystemOne W100B + SW10 |
| iPhone 15 Pro 128Gb |

Permalänk
Medlem

@LemonIllusion:

Här är bilden på hur det blir!! Förstår du nu? Den tar så himla mycket plats. vill att den ska sitta tätt vid menyn och toppen.
http://imgur.com/pLPpkGZ

Permalänk
Medlem
Skrivet av Nevil:

Han körde väl css ? Sådär ser de ut i min ..

I din vadå? Vad säger att TS är ute efter samma effekt som du?

Skrivet av AF0101:

@LemonIllusion:

Här är bilden på hur det blir!! Förstår du nu? Den tar så himla mycket plats. vill att den ska sitta tätt vid menyn och toppen.
http://imgur.com/pLPpkGZ

Använd inspektionsverktyget (om det finns i edge, dra ner chrome eller ff annars) och ta reda på vilket element som tar upp all plats. Det ser i alla fall inte ut att vara bilden som tar upp hela det där utrymmet.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:

Här är bilden på hur det blir!! Förstår du nu? Den tar så himla mycket plats. vill att den ska sitta tätt vid menyn och toppen.
http://imgur.com/pLPpkGZ

Ja det är som du har skrivit att det ska vara? En div som tar upp 300px i höjd kommer putta ner allt annat under den. Minska storleken på "Hard" (som du dessutom skrev är bildens ID, och inte div:ens?) så kommer allt annat komma upp.
Ser ingen anledning till att du ens sätter höjden/bredden på din div, då den per automatik kommer att vara på auto, d.v.s. anpassa sig efter sitt innehåll - din bilds storlek.

<body class="startpage"> <header> <img id="Hard" src="Pictures/hard.png" /> </header> <menu id="meny"> <ul> <li><a href="homepage.aspx">Startsidan</a></li> <li><a href="#">Kosttillskott</a></li> </ul> </menu >

Prova detta istället. Sen ser jag inte varför du valt att ge body en klass, när du endast ska ha 1 body.

Skrivet av Nevil:

Han körde väl css ? Sådär ser de ut i min ..

Kolla igenom ditt inlägg igen. Det är helt ointressant för TS vad just du har i din fil.

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB

Permalänk
Medlem

@Pamudas:

Provade det du la upp, men då försvinner allt även menyn haha alltså åååh, verkar som en sjukt lätt grej men jag får inte till det.
Förstår inte grejen. Sätter jag inget på diven blir det ännu större utrymme. Konstigt.

Permalänk
Medlem
Skrivet av AF0101:

@Pamudas:

Provade det du la upp, men då försvinner allt även menyn haha alltså åååh, verkar som en sjukt lätt grej men jag får inte till det.
Förstår inte grejen. Sätter jag inget på diven blir det ännu större utrymme. Konstigt.

Det var endast ett exempel på hur det ska kunna se ut. Vill du implementera det själv så måste andra ändringar göras, såsom ändra i din CSS m.m. Prova först att ta bort storleken på din div och placera in <header> i din body, ovanför menyn.

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB

Permalänk
Medlem
Skrivet av AF0101:

@Pamudas:

Provade det du la upp, men då försvinner allt även menyn haha alltså åååh, verkar som en sjukt lätt grej men jag får inte till det.
Förstår inte grejen. Sätter jag inget på diven blir det ännu större utrymme. Konstigt.

ALLTID när du inte förstår varför något blir som det blir ska du använda inspektionsverktyget. Det visar dig vilket element som tar vilken plats och även vad som är padding, margin, border.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem

@LemonIllusion:

Vart hittar jag det verktyget?
Tack för hjälpen!

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:

Vart hittar jag det verktyget?
Tack för hjälpen!

Jag använder inte Edge och har ingen dator med W10 installerat för tillfället, men i Chrome och FF finns det längst ner i högerklicksmenyn.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem
Skrivet av AF0101:

@LemonIllusion:

Vart hittar jag det verktyget?
Tack för hjälpen!

Högerklicka på valfri plats, välj "Granska Element".
I fliken "DOM Explorer" trycker du in CTRL+SHIFT+I för att kunna se hur stor del av sidan som det valda elementet tar upp.
Du klickar då på ett element - exempel finns nedan i spoiler-tagen, och ser på sidan hur stor plats det tar upp.

Dold text
Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB

Permalänk
Medlem

@AF0101:

1. Du kan trycka på "F12"för att få fram utvecklarkonsolen.
2. Du kan högerklicka och "Inspektera".

Jobbar du med html filer direkt på datorn eller har du uppe allt på en server?

Visa signatur

| Stationär: 6900 XT, 5800X3D | Laptop: Asus UX32A | Nas: Synology DS1813+ | Smarthem: Homey |

Permalänk
Medlem

@Pamudas:
Tack så mycket!!!!

Permalänk
Medlem

@Lolpold:

Jag kör i Visual Studio!!