HTML/CSS: Hjelp

Ludvig86 · 26. desember 2022

Omnia vincit amor skrev (30 minutter siden):

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

Har søttet flere timer, fra morgen til kveld hele julen og bare "kodet". Prøvd og feilet. Har blitt helt oppslukt, og tiden bare renner ifra.
Jeg begynte nok i feil ende, slik jeg har forstått det, at man gjør lurt i å begynne på mobil-versjonen før man gjør "desktop"-versjonen, men den tid den...sorg. 😄

Har så vidt begynt å snuse på med @Media Queries til formålet, men nå er jeg så godt i gang at jeg får hoppe på det til slutt.

Endret 26. desember 2022 av Ludvig86

26. desember 2022

Ludvig86 skrev (36 minutter siden):

Har søttet flere timer, fra morgen til kveld hele julen og bare "kodet". Prøvd og feilet. Har blitt helt oppslukt, og tiden bare renner ifra.
Jeg begynte nok i feil ende, slik jeg har forstått det, at man gjør lurt i å begynne på mobil-versjonen før man gjør "desktop"-versjonen, men den tid den...sorg. 😄

Har så vidt begynt å snuse på med @Media Queries til formålet, men nå er jeg så godt i gang at jeg får hoppe på det til slutt.

Det beste er å gjøre det fra start ja. Det kan ta latterlig mye tid om du må finjustere til slutt. Men så lærer du jo også det til neste gang slik at du ikke gjør det på ny.

Veldig gøy å høre om entusiasmen du sitter med. Det er alltid gøy å finne noe man liker og holde på med. Kanskje du har funnet deg en framtidig karriere? Uansett koselig å hjelpe til der man kan. Kos med nye nerder og 😉

Endret 26. desember 2022 av Slettet-x7D6du0Hjb

Ludvig86 · 27. desember 2022

Omnia vincit amor skrev (11 timer siden):

Det beste er å gjøre det fra start ja. Det kan ta latterlig mye tid om du må finjustere til slutt. Men så lærer du jo også det til neste gang slik at du ikke gjør det på ny.

Veldig gøy å høre om entusiasmen du sitter med. Det er alltid gøy å finne noe man liker og holde på med. Kanskje du har funnet deg en framtidig karriere? Uansett koselig å hjelpe til der man kan. Kos med nye nerder og 😉

Hehe! Ja kanskje det? Er egentlig utdannet rørlegger, men har virkelig fått interessen for dette. Får se hvor langt det går.

Men når det gjelder "styles.cc". Bruker man ett dokument for hele hjemmesiden? Eller har man ett dokument for hver side innenfor hjemmesiden?

27. desember 2022

Ludvig86 skrev (5 timer siden):

Men når det gjelder "styles.cc". Bruker man ett dokument for hele hjemmesiden? Eller har man ett dokument for hver side innenfor hjemmesiden?

Store nettsider bruker nok flere filer for ulike ting. Det er ofte en css fil for f.eks mobil optimalisering og en annen for styling av resten av siden. Det gjør det mer oversiktlig.

Filene blir forøvrig style.css, men du kan i utgangspunktet kalle det hva du vil så lenge det inkluderer css på slutten.

Ludvig86 · 27. desember 2022

Omnia vincit amor skrev (2 timer siden):

Store nettsider bruker nok flere filer for ulike ting. Det er ofte en css fil for f.eks mobil optimalisering og en annen for styling av resten av siden. Det gjør det mer oversiktlig.

Filene blir forøvrig style.css, men du kan i utgangspunktet kalle det hva du vil så lenge det inkluderer css på slutten.

Takk for svar!

Jeg har så og si samme layout på de få sidene jeg har på den siden jeg jobber med nå, så jeg bruker bare ett .CSS dokument på denne nettsiden. Fungerer greit hittil 😄

Ludvig86 · 27. desember 2022

Finnes det noen platformer som gjør at man kan redigere kodene sine "on the go" ? Eller kan man kun gjøre dette på maskin?

Endret 27. desember 2022 av Ludvig86

bjorning9 · 31. desember 2022

Ludvig86 skrev (På 26.12.2022 den 0.40):

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!

Med margin setter du avstanden til et annet element, med padding forlenger du størrelsen på elementet som f.eks med en bakgrunn på tekst.

Phoinix · 12. mars 2023

Hei,

håper det går fint at jeg "kupper" denne tråden, tenkte det kunne være en grei tråd å fortsette på for HTML/CSS og kanskje hjelp til javascript.

Jeg har meldt meg på Scrimba front end developer path (eget tempo) hvor jeg nå skal lage en passordgenerator. Jeg har en "mal"/side på Figma å gå ut fra så jeg har et design å jobbe etter.

Det jeg lurer på er hvorfor kommer teksten (paragraf) under neste paragraf? Jeg har plassert den under under knappen og linebreak/<hr>-attributen (?), men den kommer fortsatt etter forrige paragraf-attribut.

Har prøvd å dele opp alt i div's, har satt denne i en egen div, og prøvd flere ting men får det ikke til å fungere.. Noen som har noen tips å hjelpe til her med?

Takk for hjelpen.

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="mainbackground">
            <div>
                <h2 class="whiteheader"> Generate a</h1>
                <h2 class="greenheader"> random password</h1>
        
                <p class="paragraph1">Never use an insecure password again</p>

            <button class="btnpassword">Generate passwords</button>

                <hr class="linebreak">

            </div>
            <div>
                <p class="input1">Text goes here</p>
                <p class="input2">Text goes here</p>
            </div>
            
        </div>
    
        


        
        <script src="index.js"></script>
    </body>
</html>

Phoinix · 12. mars 2023

OPPDATERT KODE:

Så nå at jeg hadde avsluttet h2 med h1, har endret det nå, men får det fortsatt ikke helt slik jeg vil.

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="mainbackground">
            <div>
                <h2 class="whiteheader"> Generate a</h2>
                <h2 class="greenheader"> random password</h2>
        
                <p class="paragraph1">Never use an insecure password again</p>

            <button class="btnpassword">Generate passwords</button>

                <hr class="linebreak">

            </div>
            <div>
                <p class="input1">Text goes here</p>
                <p class="input2">Text goes here</p>
            </div>
            
        </div>
    
        


        
        <script src="index.js"></script>
    </body>
</html>

Phoinix · 12. mars 2023

Foreløpig så har jeg "løst" det ved å sette margin-top til 200px i CSS men det er vel ikke optimatl...

.input1{
    color: white;
    margin-left: 40px;
    margin-top: 200px;

}

.input2{
    color: white;
    margin-left: 40px;
    margin-top: 200px;

}

.generatedpassword{
    display: flex;

}

Taggi · 12. mars 2023

Du gjør noe feil med position attributtene, om du starter fra scratch uten css vil du se at de tekst feltene er nederst uten noe css i det hele tatt.

Curuion · 12. mars 2023

Må se mer av css koden, ser ikke noe feil med html.

Phoinix · 13. mars 2023

Her er CSS-koden, jeg er ikke så stødig på noe av dette så nok ha blitt veldig forenklet og gjort på en bedre, mer korrekt måte:

body {
    margin: 0;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
}

.mainbackground{
    background-color: #1F2937;
    width: 550px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.whiteheader{
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 40px;
    padding-top: 70px;
    margin-bottom: 0;

}

.greenheader{
    color: #4ADF86;
    font-weight: bold;
    padding-left: 40px;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 5px;
}

.paragraph1{
    color: #D5D4D8;
    padding-left: 40px;
    margin-top: 0;
}

.buttons{
    display: flex;

}

#btnpassword{
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 17px 9px 15px;
gap: 12px;

position: absolute;
width: 191px;
height: 42px;
top: 280px;
color: white;
font-weight: 500;
margin-left: 40px;

background: #10B981;
/* shadow/sm */

box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 6px;
}

#btnpassword:hover{
    color: black;
    font-size: 15;
    font-weight: bold;
}

#btncopy{
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 17px 9px 15px;
    gap: 12px;
    
    position: absolute;
    width: 110px;
    height: 42px;
    top: 280px;
    color: white;
    font-weight: 500;
    margin-left: 240px;
    
    background: #10B981;
    /* shadow/sm */
    
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    }

#btncopy:hover{
    color: black;
    font-size: 15;
    font-weight: bold;
    }



.linebreak{
position: absolute;
width: 446px;
height: 0px;
top: 361px;
margin-left: 40px;
border: 1px solid #445b7a;
clear: both;
}

#input1{
    color: #55F991;
    font-weight: bold;
    margin-left: 40px;
    margin-top: 200px;
    width: 210px;
    height: 40px;
    background-color: #273549;
    text-align: center;
    line-height: 2.5;
    border-radius: 5px;
}

#input2{
    color: #55F991;
    font-weight: bold;
    margin-left: 40px;
    margin-top: 200px;
    width: 210px;
    height: 40px;
    background-color: #273549;
    text-align: center;
    line-height: 2.5;
    border-radius: 5px;
}

.generatedpassword{
    display: flex;

}

0laf · 13. mars 2023

Problemet er nok at ...

position: absolute;

Generelt ikke er din venn.
Du sier her at elementene skal posisjoneres "absolutt", og tas ut av flyten, og da plasseres de selvfølgelig nettopp slik du har angitt, uten hensyn til andre elementer. Prøv "relative" i stedet, og bruk marginer og annet for å plassere ting i "flyten".

Curuion · 13. mars 2023

Ja, "absolute" var problemet på knappen og line break. I tillegg flytte litt på html elementene, så det blir enklere å margin-bottom. Kan også bruke padding på container div, istede for margin-left.

I

<html>
    <body>
      <div class="main">
        <div class="header">
          <h2 class="white"> Generate a</h2>
          <h2 class="green"> random password</h2>        
          <p class="secondary">Never use an insecure password again</p>                
        </div>
        <button id="btnPassword">Generate passwords</button>
        <hr class="linebreak">
        <div class="generatedPassword">
          <p>Text goes here</p>
          <p>Text goes here</p>
        </div>            
      </div>
    </body>
</html>

css:

Spoiler

body {
  margin: 0;
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
}

.main {
  background-color: #1F2937;
  width: 550px;
  height: 550px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  padding: 40px;
}

.header {
  margin-bottom: 40px;
}

.header .white {
  color: #FFFFFF;
  font-weight: bold;
  margin: 0;
}

.header .green {
  color: #4ADF86;
  font-weight: bold;
  margin: 0;
}

.header .secondary {
  color: #D5D4D8;
  margin: 0;
}

#btnPassword {
  font-family: 'Inter', sans-serif;
  padding: 9px 17px 9px 15px;
  width: 191px;
  height: 42px;
  color: white;
  font-weight: 500;
  background: #10B981;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

#btnPassword:hover {
  color: black;
  font-size: 15;
  font-weight: bold;
}

.linebreak {
  border: 1px solid #445b7a;
  margin-top: 24px;
  margin-bottom: 24px;
}

.generatedPassword {
  display: flex;
}

.generatedPassword p {
  margin-right: 8px;
  color: white;
}

Phoinix · 18. mars 2023

Takk for hjelpen alle sammen, da husker jeg det til neste gang! Går litt tregt, mye å lære seg men det er veldig givende når man får det til.

Ludvig86 · 27. april 2023

Hei igjen!

Jeg sliter litt med å få til noe. Legger ved en link til codepen ( https://codepen.io/Ludvigx86/pen/WNaOZXz )

Det jeg er ute etter, er at jeg vil ha "dato" helt ute til venstre. "Lokasjon" forblir i midten mens "tid" blir lagt helt ytterst til høyre. Jeg har prøvd "alt" innen for eget kunnskapsnivå, men klarer ikke å få det til.

Noen som kan gi meg en hjelpende hånd?

//

:utakt · 27. april 2023

Ludvig86 skrev (17 minutter siden):

Hei igjen!

Jeg sliter litt med å få til noe. Legger ved en link til codepen ( https://codepen.io/Ludvigx86/pen/WNaOZXz )

Det jeg er ute etter, er at jeg vil ha "dato" helt ute til venstre. "Lokasjon" forblir i midten mens "tid" blir lagt helt ytterst til høyre. Jeg har prøvd "alt" innen for eget kunnskapsnivå, men klarer ikke å få det til.

Noen som kan gi meg en hjelpende hånd?

//

Disclaimer: jeg har ikke formell kompetanse i dette, jeg er amatør og får til ting med å prøve, feile, google og prøve igjen. Så jeg går ikke god for at denne løsningen er "godkjent" slik en med utdanning ville gjort det, men det ser ut til å funke.

Prøv denne CSS'en:

.konsert_li
{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

0laf · 27. april 2023

Ludvig86 skrev (17 minutter siden):

Det jeg er ute etter, er at jeg vil ha "dato" helt ute til venstre. "Lokasjon" forblir i midten mens "tid" blir lagt helt ytterst til høyre. Jeg har prøvd "alt" innen for eget kunnskapsnivå, men klarer ikke å få det til.

Aner ikke hva du er ute etter, ser også ut som du driver å redigere i Codepen underveis, da ting plutselig endrer seg, men generelt bør "padding : 0;" løse det meste?

Ludvig86 · 27. april 2023

:utakt skrev (2 minutter siden):
Disclaimer: jeg har ikke formell kompetanse i dette, jeg er amatør og får til ting med å prøve, feile, google og prøve igjen. Så jeg går ikke god for at denne løsningen er "godkjent" slik en med utdanning ville gjort det, men det ser ut til å funke.

Prøv denne CSS'en:
.konsert_li
{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

Dette fungerer. I Code-pen. Men når jeg prøver å legge det inn i koden min på VS-code, så vil det ikke fungere.

HTML/CSS: Hjelp

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer