HTML/CSS: Hjelp

[Ludvig86]

Hei alle og God Jul! 
 

Jeg driver med en hjemmeside til ett band. Og nå prøver jeg å få en liste oppå ett bilde. Slik at bildet blir som en bakgrunn for listen med turnèdatoer. 
Hvordan gjør man dette? Må jeg bare prøve meg frem med «margin» på hvert element? Eller er det en lettere måte?

// Takk for innspill!

Endret 26. desember 2022 av Ludvig86

[Gjest Slettet-x7D6du0Hjb]

Hei Ludvig86! 

Det er mange måter å gjøre dette på.

En måte du kan gjøre dette på er ved å lage en div for bildet og en for teksten du ønsker å ha over bildet. Så setter du "position: absolute" på teksten og styler så teksten. 

Har du eventuelt noe kode du har skrevet alt så vi får se hva du har jobbet med? 

[Ludvig86]

  Omnia vincit amor skrev (På 26.12.2022 den 0.06):

Hei Ludvig86! 

Det er mange måter å gjøre dette på.

En måte du kan gjøre dette på er ved å lage en div for bildet og en for teksten du ønsker å ha over bildet. Så setter du "position: absolute" på teksten og styler så teksten. 

Har du eventuelt noe kode du har skrevet alt så vi får se hva du har jobbet med? 

Ekspander  

Hei, og takk for svar! 

Det jeg har er dette. Plakaten er sensurert for øyeblikket, men jeg er ute etter at teksten dukker opp som en liste under den rosa logoen som såvidt synes. (Jeg har valgt gul tekst foreløpig, for å se hva som skjer) 

Men det virker som det bare blir gjetting på tallene og innstillingene. Hvertfall for min del 😂

 

 

[Gjest Slettet-x7D6du0Hjb]

  Ludvig86 skrev (På 26.12.2022 den 0.24):

 

 

Ekspander  

Jeg ser at div'en "plakat" ikke er lukket. Hva om du lukker den rett etter <img> taggen? 

Tenker også at det ikke er nødvendig med 4 forskjellige klasser for de forskjellige punktene. Om du ønsker å style de hver for seg er det jo greit men om du ønsker å style de sammen funker det bedre med kun en klasse  men kanskje du har en grunn for å gjøre det på den måten. 

Om du ønsker å skyve på teksten siden det er til høyre kan du i grunnen bruke en margin ja. Marginer fungerer også med minus, så hvis du ønsker å dra teksten til venstre kan du skrive margin-left: -50px f.eks. 

  Ludvig86 skrev (På 26.12.2022 den 0.24):

Men det virker som det bare blir gjetting på tallene og innstillingene. Hvertfall for min del 😂

 

Ekspander  

Det er i grunnen det som er så greit med CSS. Du kan bokstavelig talt leke deg til resultatet. Ta fra og legge til. Går man over til mer avansert programmering så vil jo en feil gjøre at du får en feilmelding  

Skrev det ikke i første post men har du vurdert å bruke wordpress? Om du skal ha en liten nettside for bandet så kan det være mye enklere å bygge det med det framfor å skrive det med html / css. Og det er jo et gratis cms. Men veldig gøy at du prøver deg fram. Det å lære seg html / css kan være delen av inngangsbilletten som utvikler på sikt om du ønsker det.  

Endret 26. desember 2022 av Slettet-x7D6du0Hjb

[Ludvig86]

Takk for flott innspill! Jeg skal se på dette. Du hører nok fra meg 😄

[Gjest Slettet-x7D6du0Hjb]

  Ludvig86 skrev (På 26.12.2022 den 0.35):

Takk for flott innspill! Jeg skal se på dette. Du hører nok fra meg 😄

Ekspander  

Bare gøy å hjelpe til der jeg kan

Om du skulle trenge mer hjelp utover det jeg svarer på her kan du ta en titt på W3schools.com. Og husk at google er din beste venn  

https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp

Lykke til!

[Ludvig86]

  Omnia vincit amor skrev (På 26.12.2022 den 0.27):

Tenker også at det ikke er nødvendig med 4 forskjellige klasser for de forskjellige punktene. Om du ønsker å style de hver for seg er det jo greit men om du ønsker å style de sammen funker det bedre med kun en klasse  men kanskje du har en grunn for å gjøre det på den måten. 

Ekspander  

Tanken var å kunne kjøre <style> på hver enkelt ja. Jeg prøver meg frem og ser hvordan det blir seende ut med tiden. 

 

  Omnia vincit amor skrev (På 26.12.2022 den 0.27):

Skrev det ikke i første post men har du vurdert å bruke wordpress? Om du skal ha en liten nettside for bandet så kan det være mye enklere å bygge det med det framfor å skrive det med html / css. Og det er jo et gratis cms. Men veldig gøy at du prøver deg fram. Det å lære seg html / css kan være delen av inngangsbilletten som utvikler på sikt om du ønsker det.  

Ekspander  

Jeg begynte faktisk å prøve å sette meg inni det, men kom ikke særlig langt. Ble for tungvindt å i det hele tatt komme i gang 😂. 
I starten brukte jeg Squarespace, siden det er veldig mye "klikk og dra" og veldig enkelt i bruk, men det ble fort dyrt, så jeg ville lære meg koding selv. Og ettersom jeg falt ned i dette kaninhullet så har det bare ballet på seg med timesvis av YouTube-videoer og til og med kjøpt kurs via nett, så har blitt helt "hekta" på å lære meg dette. 

Bruker til stadig Google og W3schools.com som oppslagsverk, men noen ganger er det rett og slett greit å kunne ha noen å spørre om ett spesifikt problem jeg ikke finner svar på, på nett. når jeg føler at alt egentlig er riktig, men ikke funker. Siden jeg er temmelig fersk i "gamet" så kan det vere en liten bagatell jeg ikke ser som en "tag" som ikke er lukket, eller ett manglende kolon. 

Så jeg setter stor pris på at noen i det hele tatt svarer 😄, selv om jeg prøver å ha en høy terskel for å legge ut nye innlegg, da jeg aller helst vil finne ut av det selv. Det er vel der mesteparten av læringen ligger. 

//

[Ludvig86]

Usikker på at jeg skal starte en ny tråd for hvert spørsmål, så jeg spør bare her igjen. 
 

Jeg har denne koden som navigasjon 

<header>

<div>

<ul class="navbar">

<li class="hvem"></li><a href="#">Hvem</a></li>

<li class="hvor"></li><a href="hvor.html">Hvor / Når</a></li>

<li class="media"></li><a href="#">Media</a></li>

<li class="kontakt"></li><a href=mailto:post@mail.no>Kontakt / BOOKING</a></li>

</li>

</ul>

</div>

</header>

Jeg vil gjerne endre farge på den ene linken som heter "kontakt". Men jeg klarer ikke å få tak i den i CSS-skjemaet. Uansett hva jeg prøver så endrer den ikke farge. Må sier at jeg er litt usikker på hvordan jeg velger ".class"er inne i CSS skjemaet. 

Jeg såg for meg at det var så enkelt som .kontakt {...} men det skjer ikke noe. Jeg har prøvd følgende uten hell: 

.kontakt{...} 

.navbar .kontakt {...} 

.navbar .kontakt a {...}

Er det noe annet? Hva gjør jeg feil her? 

//

Endret 26. desember 2022 av Ludvig86

[Gjest Slettet-x7D6du0Hjb]

  Ludvig86 skrev (På 26.12.2022 den 21.37):

Usikker på at jeg skal starte en ny tråd for hvert spørsmål, så jeg spør bare her igjen. 
 

Jeg har denne koden som navigasjon 

<header>

<div>

<ul class="navbar">

<li class="hvem"></li><a href="#">Hvem</a></li>

<li class="hvor"></li><a href="hvor.html">Hvor / Når</a></li>

<li class="media"></li><a href="#">Media</a></li>

<li class="kontakt"></li><a href=mailto:post@mail.no>Kontakt / BOOKING</a></li>

</li>

</ul>

</div>

</header>

Jeg vil gjerne endre farge på den ene linken som heter "kontakt". Men jeg klarer ikke å få tak i den i CSS-skjemaet. Uansett hva jeg prøver så endrer den ikke farge. Må sier at jeg er litt usikker på hvordan jeg velger ".class"er inne i CSS skjemaet. 

Jeg såg for meg at det var så enkelt som .kontakt {...} men det skjer ikke noe. Jeg har prøvd følgende uten hell: 

.kontakt{...} 

.navbar .kontakt {...} 

.navbar .kontakt a {...}

Er det noe annet? Hva gjør jeg feil her? 

//

Ekspander  

Fint om du kan legge koden din i en kode boks så blir det faktisk litt lettere å se hva du har gjort. Da blir også koden riktig med spacing osv.. 

Da blir det slik: 

<header>

<div>

<ul class="navbar">

<li class="hvem"></li><a href="#">Hvem</a></li>

<li class="hvor"></li><a href="hvor.html">Hvor / Når</a></li>

<li class="media"></li><a href="#">Media</a></li>

<li class="kontakt"></li><a href=mailto:post@mail.no>Kontakt / BOOKING</a></li>

</li>

</ul>

</div>

</header>

 

Nå til selve spørsmålet. Bruker du inspect med chrome/firefox osv? Jeg har selv opplevd at firefox for en eller annen grunn klarer å treffe mye bedre på dette.. 

Om du ikke har brukt inspect/devtools i chrome/firefox før så høyreklikker du på siden og velger inspect. Så får du opp et vindu hvor du kan redigere/kopiere koden. Høyreklikk på elementet du leter etter og trykk copy > copy selector. 

 

Jeg tror løsningen blir dette: div > ul.navbar > li.kontakt

  Ludvig86 skrev (På 26.12.2022 den 21.37):

Usikker på at jeg skal starte en ny tråd for hvert spørsmål, så jeg spør bare her igjen. 

Ekspander  

Jeg tror det er like greit at du poster i denne tråden, men om du vil kan du selvsagt lage en ny tråd og. 

Endret 26. desember 2022 av Slettet-x7D6du0Hjb

[:utakt]

Syns det ser ut som det er litt mange </li> i den koden over. Men jeg er på mobil, så det er mulig jeg blingser litt. 

[0laf]

  Ludvig86 skrev (På 26.12.2022 den 21.37):

Jeg vil gjerne endre farge på den ene linken som heter "kontakt". Men jeg klarer ikke å få tak i den i CSS-skjemaet. Uansett hva jeg prøver så endrer den ikke farge...

Ekspander  

Det er fordi lenken din ikke ligger i en liste, du har avsluttet det elementet, og har nå helt ugyldig HTML.

 

<header>
  <div>
    <ul class="navbar">
      <li class="hvem">
        <a href="#">Hvem</a>
      </li>
      <li class="hvor">
        <a href="hvor.html">Hvor / Når</a>
      </li>
      <li class="media">
        <a href="#">Media</a>
      </li>
      <li class="kontakt">
        <a href=mailto:post@mail.no>Kontakt / BOOKING</a>
      </li>
    </ul>
  </div>
</header>

Legge altså merke til at <li> åpner et element, og </li> lukker det samme elementet.

Når du nå skal endre stiler for "kontakt", så gjøres det med

 

.kontakt {font-size : 10px} // LI elementet
.kontakt a {color : red} // A elementet

 

[Gjest Slettet-x7D6du0Hjb]

  Ludvig86 skrev (På 26.12.2022 den 13.08):

Jeg begynte faktisk å prøve å sette meg inni det, men kom ikke særlig langt. Ble for tungvindt å i det hele tatt komme i gang 😂. 
I starten brukte jeg Squarespace, siden det er veldig mye "klikk og dra" og veldig enkelt i bruk, men det ble fort dyrt, så jeg ville lære meg koding selv. Og ettersom jeg falt ned i dette kaninhullet så har det bare ballet på seg med timesvis av YouTube-videoer og til og med kjøpt kurs via nett, så har blitt helt "hekta" på å lære meg dette. 

Ekspander  

Har forståelse for hva du sitter med. Vi begynte alle samme sted. Om du er en person som har en god hukommelse og klarer å se hva du gjør etterhvert så skal det nok ikke være så vanskelig med tiden. Viktig å huske på at dersom du skal skrive CSS fra hånd så må du også huske på optimalisering for mobiler.. Ellers vil det se veldig dårlig ut på mobil... Men det tror jeg du skal få finne ut av på egenhånd om du ikke alt har begynt å se på det

[Ludvig86]

Takk for tipset! 

Jeg bruker Chrome og "devtools". "Copy Selector" var jeg ikke kjent med, så takk for det tipset! 

Jeg limte inn det jeg fikk kopiert og koden min ble da slik: 
 

body > header > div > ul > a:nth-child(8)

Når jeg fullførte og la til fargen så ble den slik og det fungerte
 

body > header > div > ul > a:nth-child(8)
{color:gold;}

Er det mulig å forenkle den koden, eller er det greit at den bare står slik? 
 

[Gjest Slettet-x7D6du0Hjb]

  Ludvig86 skrev (På 26.12.2022 den 22.07):

Er det mulig å forenkle den koden, eller er det greit at den bare står slik? 

Ekspander  

Det er nok mulig å forenkle koden ja. Men om ikke du skal gjøre noe spesifikk så hadde jeg ikke brydd meg så mye i grunnen

  0laf skrev (På 26.12.2022 den 22.04):

Det er fordi lenken din ikke ligger i en liste, du har avsluttet det elementet, og har nå helt ugyldig HTML.

Ekspander  

La ikke merke til dette selv men det er korrekt. 

Endret 26. desember 2022 av Slettet-x7D6du0Hjb

[0laf]

  Ludvig86 skrev (På 26.12.2022 den 22.07):

Er det mulig å forenkle den koden, eller er det greit at den bare står slik? 

Ekspander  

nth-child funker her, fordi nettleseren forsøker å rette opp i feilene dine, og du får en liste med <a> elementer som direkte "children" av <ul>, som er ugyldig HTML.

Gjør det slik som det står ovenfor, ta bort de overflødige </li> elementene, og pass på at du får lenkene INNI listen, ikke utenfor.

https://jsfiddle.net/4x8rbc17/

Endret 26. desember 2022 av 0laf

[Ludvig86]

  0laf skrev (På 26.12.2022 den 22.04):

Det er fordi lenken din ikke ligger i en liste, du har avsluttet det elementet, og har nå helt ugyldig HTML.

 

<header>
  <div>
    <ul class="navbar">
      <li class="hvem">
        <a href="#">Hvem</a>
      </li>
      <li class="hvor">
        <a href="hvor.html">Hvor / Når</a>
      </li>
      <li class="media">
        <a href="#">Media</a>
      </li>
      <li class="kontakt">
        <a href=mailto:post@mail.no>Kontakt / BOOKING</a>
      </li>
    </ul>
  </div>
</header>

Legge altså merke til at <li> åpner et element, og </li> lukker det samme elementet.

Når du nå skal endre stiler for "kontakt", så gjøres det med

 

.kontakt {font-size : 10px} // LI elementet
.kontakt a {color : red} // A elementet

 

Ekspander  

Takk for innspill go gode tips! 

Men jeg ser det ikke. Hva er det du ser som jeg ikke ser? 

<li class="kontakt"></li><a href=mailto:post@komus.no>Kontakt / BOOKING</a></li>

Den er vel imellom en <li> og en </li> slik de andre over? (<li class""> i dette tilfellet)

[Ludvig86]

  0laf skrev (På 26.12.2022 den 22.10):

nth-child funker her, fordi nettleseren forsøker å rette opp i feilene dine, og du får en liste med <a> elementer som direkte "children" av <ul>, som er ugyldig HTML.

Gjør det slik som det står ovenfor, ta bort de overflødige </li> elementene, og pass på at du får lenkene INNI listen, ikke utenfor.

https://jsfiddle.net/4x8rbc17/

Ekspander  

Tusen takk! Der såg jeg det! at jeg har </li> etter hvert element. De skal bort, er det riktig? 

[0laf]

  Ludvig86 skrev (På 26.12.2022 den 22.15):

Men jeg ser det ikke. Hva er det du ser som jeg ikke ser? 

<li class="kontakt"></li><a href=mailto:post@komus.no>Kontakt / BOOKING</a></li>

 

Ekspander  

Ser du ikke at du har to </li>, og at den ene står foran lenken din, og dermed lukker listen.

Det andre </li> elementet, det som står til slutt, blir fjernet av nettleseren din, fordi det er ugyldig, så ender du opp med :
 

<ul>
    <li class="kontakt"></li>
    <a href=mailto:post@komus.no>Kontakt / BOOKING</a>
</ul>

Som åpenbart ikke er gyldig, ettersom et <a> element ikke kan stå direkte inne i et <ul> element

 

Endret 26. desember 2022 av 0laf

[0laf]

  Ludvig86 skrev (På 26.12.2022 den 22.17):

Tusen takk! Der såg jeg det! at jeg har </li> etter hvert element. De skal bort, er det riktig? 

Ekspander  

Korrekt.

Du kan lime koden din i W3C sin validator, for å se at det du skriver faktisk er gyldig HTML

https://validator.w3.org/#validate_by_input

[Ludvig86]

  0laf skrev (På 26.12.2022 den 22.19):

Korrekt.

Du kan lime koden din i W3C sin validator, for å se at det du skriver faktisk er gyldig HTML

https://validator.w3.org/#validate_by_input

Ekspander  

Se der ja! Den låg faktisk i bakhodet, at den fantes, men har hele tiden stolt på at VS Code sa i fra om noe var galt 😄

Fikk frem en liste med feil som var på lengde med ønskelisten til barna 😄