Gå til innhold

HTML/CSS: Hjelp

Ludvig86

Av Ludvig86
i Programmering og webutvikling

Anbefalte innlegg

Ludvig86

Ludvig86

Skrevet
  • Forfatter
Skrevet (endret)
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 av Ludvig86
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Gjest Slettet-x7D6du0Hjb

Gjest Slettet-x7D6du0Hjb

Skrevet
Skrevet (endret)
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 av Slettet-x7D6du0Hjb
Lenke til kommentar
Ludvig86

Ludvig86

Skrevet
  • Forfatter
Skrevet
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? 

Lenke til kommentar
Gjest Slettet-x7D6du0Hjb

Gjest Slettet-x7D6du0Hjb

Skrevet
Skrevet
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. 

Lenke til kommentar
Ludvig86

Ludvig86

Skrevet
  • Forfatter
Skrevet
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 😄

Lenke til kommentar
bjorning9

bjorning9

Skrevet
Skrevet

 

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.

  • Liker 1
Lenke til kommentar
  • 2 måneder senere...
Phoinix

Phoinix

Skrevet
Skrevet

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>



image.thumb.png.eda2fc211849a62fb2c2f6ea6c608df4.png

Lenke til kommentar
Phoinix

Phoinix

Skrevet
Skrevet

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>



 

Lenke til kommentar
Phoinix

Phoinix

Skrevet
Skrevet

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;

}

image.thumb.png.b2acef043fe3e7804d691ed427f9f833.png

Lenke til kommentar
Phoinix

Phoinix

Skrevet
Skrevet

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;

}

 

Lenke til kommentar
0laf

0laf

Skrevet
Skrevet

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".

Lenke til kommentar
Curuion

Curuion

Skrevet
Skrevet

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;
}

 

 

 

Lenke til kommentar
  • 1 måned senere...
Ludvig86

Ludvig86

Skrevet
  • Forfatter
Skrevet

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? 

// 
 

Lenke til kommentar
:utakt

:utakt

Skrevet
Skrevet
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;
}

 

  • Liker 1
Lenke til kommentar
0laf

0laf

Skrevet
Skrevet
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?

Lenke til kommentar
Ludvig86

Ludvig86

Skrevet
  • Forfatter
Skrevet
: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.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...