Hvordan få mellomrom mellom <li> elementer inline

Odin · 1. august 2018

Jeg lurer på hvordan jeg kan få mellomrom mellom linkene i en liste som er horisontal?

Vet at koden er klønete som pokker men jeg har akkurat begynt å det viktigste er innholde vises på en profesjonell måte. Er langt unna målet så bruker dropbox med droppage for å hoste noe som er veldig merkelig. index filen må lagres i txt og jeg har enda ikke funnet ut hvordan linken blir til de sidene menyen skal lede til. men jeg fokuserer på designen først.

Uansett takk for all hjelp på forhånd alle tips er velkommne

URL: http://farma.droppages.com/#

kode:

<!DOCTYPE html>

<title>Potensere CIP450 medisiner</title>

<style>

title {

font-family: verdana;

}

header {

background: url('https://www.opiates.com/wp-content/uploads/2017/10/3124-white_pills-1296x728-header-1296x648.jpg');

background-size: cover;

padding: 5px;

border-radius: 10px;

margin: 0, auto;

color: rgba(0,0,0,0.7);

font-family: Arial, Helvetica, sans-serif;

}

h1 {

text-align: center;

}

ul {

border-radius: 5px;

margin: 0 50 0 50;

border: 1px solid black;

padding: 10px;

background: rgba(200,200,200,0.7);

text-align: center;

font-size: 18px;

}

li {

margin: 0 20 0 20;

display: inline;

padding: 0, 10px 0 10px;

}

body {

background: lightgrey;

}

h2 {

text-align: center;

margin: 0 auto;

}

.oppskrift {

text-align: left;

}

.hvordan {

text-center: center;

}

.kontakt {

text-align: right;

}

div {

display: inline;

}

</style>

<head>

<h1>Potensere medisiner,hemme CIP450 enzymer.</h1>

<ul>

<div class="oppskrift"><li><a href="#">Oppskrift</a></li></div>

<div class="hvordan"><li><a href="hvordan.html">Hvordan</a></li></div>

<div class="kontakt"><li><a href="#">Kontakt</a></li></div>

</ul>

</header>

</head>

<body>

<div

<h2>Oppskrift</h2>

<p>Her kommer oppskriften av hvilke midler (grapefruktjuice, antihistaminer, og natron, blant annet) og når det skal inntaes for å få maksimal effekt.

</p>

</article>

</div>

</body>

Merko · 1. august 2018

Jeg lurer på hvordan jeg kan få mellomrom mellom linkene i en liste som er horisontal?

Vet at koden er klønete som pokker men jeg har akkurat begynt å det viktigste er innholde vises på en profesjonell måte. Er langt unna målet så bruker dropbox med droppage for å hoste noe som er veldig merkelig. index filen må lagres i txt og jeg har enda ikke funnet ut hvordan linken blir til de sidene menyen skal lede til. men jeg fokuserer på designen først.

Uansett takk for all hjelp på forhånd alle tips er velkommne

URL: http://farma.droppages.com/#

Noe sånt?

https://codepen.io/anon/pen/yqKxEZ

Er nok helt feil måte å gjøre det på..men det er en annen sak :dremel:

Et annet tips så ville jeg nok ha byttet ut bakgrunnbildet i toppen. Blender for mye inn med teksten.

Odin · 1. august 2018

Noe sånt?

https://codepen.io/anon/pen/yqKxEZ

Er nok helt feil måte å gjøre det på..men det er en annen sak

Et annet tips så ville jeg nok ha byttet ut bakgrunnbildet i toppen. Blender for mye inn med teksten.

Tusen takk for tipset skal prøve det ut nå med en gang:)

Angående teksten på toppen så så du sikkert i css koden at jeg har hatt den gjennomsiktig, kan teste ut med rgba x, x,x 1. Vet du hvordan man endrer farge på hyperlinker?

PS: koden din fungerte fint

Endret 1. august 2018 av Odin

Merko · 1. august 2018

Tusen takk for tipset skal prøve det ut nå med en gang:)

Angående teksten på toppen så så du sikkert i css koden at jeg har hatt den gjennomsiktig, kan teste ut med rgba x, x,x 1. Vet du hvordan man endrer farge på hyperlinker?

Tenkte mest på tittelen:

I forhold til annen farge på linker så må du gjøre noe sånt som:

https://codepen.io/anon/pen/yqKxEZ

a:link, a:visited, a:active, a:hover {
  color: #333;
  text-decoration: none;
}

text-decoration fjerner underlinjen.

Edit: Mulig du vil sjekke ut nettsiden "Webflow".

https://webflow.com/

Da kan du lage en relativt "profesjonell" nettside i nettleserne med veldig mange hjelpeverktøy.

Da slipper du kode alt fra scratch.

Endret 1. august 2018 av Merko.

Odin · 1. august 2018

Tenkte mest på tittelen:

I forhold til annen farge på linker så må du gjøre noe sånt som:

https://codepen.io/anon/pen/yqKxEZ
a:link, a:visited, a:active, a:hover {
  color: #333;
  text-decoration: none;
}
text-decoration fjerner underlinjen.

Edit: Mulig du vil sjekke ut nettsiden "Webflow".

https://webflow.com/

Da kan du lage en relativt "profesjonell" nettside i nettleserne med veldig mange hjelpeverktøy.

Da slipper du kode alt fra scratch.

Jeg tror jeg skal sjekke ut webflow for nå vil ikke droppages vise index siden engang, skjønner ikke at jeg fjernet DIV tagene for linkene å la til en div class som inneholdt alle skulle gjøre noe sånt, det er noe jeg lurer på, hvorfor i css delen brukte li (.meny li { ) og ikke bare .meny?

Ser ut til at det var en eller annen form for crash ved reload som ga 404

Endret 1. august 2018 av Odin

Merko · 1. august 2018

det er noe jeg lurer på, hvorfor i css delen brukte li (.meny li { ) og ikke bare .meny?

Det er bare en måte som jeg synes er "Best Practice". Spesifisere hvor på siden du skal gjøre endringer.

Feks i koden din har du:

li {
  margin: 0 20 0 20;
  display: inline;
  padding: 0, 10px 0 10px;
}

Da vil den gjøre endringen på alle "li" du skulle ha i koden.

Det er jo ikke alltid du ønsker dette, dersom du har flere menyer på nettsiden.

Da kan du spesifisere med feks:

menyhead li {
  margin: 0 20 0 20;
  display: inline;
  padding: 0, 10px 0 10px;
}

menyfooter li {
  margin: 0 20 0 20;
  display: inline;
  font-size: 12px;
  padding: 10px, 10px 10px 10px;
}

ol.

Dersom du kun hadde brukt ".meny" så vil den også gjøre endringer på andre elementer du skulle hatt i "menyen". Feks et icon\bilde eller annen tekst som du ikke vil skal endres på samme måte som selve meny-knappene.

Ideelt sett skulle du vel egentlig brukt .meny ul li { kode } på eksemplet mitt over

Men som nevnt, dette er bare noe jeg holder på med en veldig sjelden gang på fritiden, så jeg er ingen ekspert på området.

Odin · 1. august 2018

Det er bare en måte som jeg synes er "Best Practice". Spesifisere hvor på siden du skal gjøre endringer.

Feks i koden din har du:
li {
  margin: 0 20 0 20;
  display: inline;
  padding: 0, 10px 0 10px;
}
Da vil den gjøre endringen på alle "li" du skulle ha i koden.

Det er jo ikke alltid du ønsker dette, dersom du har flere menyer på nettsiden.

Da kan du spesifisere med feks:
menyhead li {
  margin: 0 20 0 20;
  display: inline;
  padding: 0, 10px 0 10px;
}

menyfooter li {
  margin: 0 20 0 20;
  display: inline;
  font-size: 12px;
  padding: 10px, 10px 10px 10px;
}
ol.

Dersom du kun hadde brukt ".meny" så vil den også gjøre endringer på andre elementer du skulle hatt i "menyen". Feks et icon\bilde eller annen tekst som du ikke vil skal endres på samme måte som selve meny-knappene.

Ideelt sett skulle du vel egentlig brukt .meny ul li { kode } på eksemplet mitt over

Men som nevnt, dette er bare noe jeg holder på med en veldig sjelden gang på fritiden, så jeg er ingen ekspert på området.

du er til kjempe stor hjelp for hvertfall, det setter jeg stor pris på. lærer meg mye

Merko · 1. august 2018

du er til kjempe stor hjelp for hvertfall, det setter jeg stor pris på. lærer meg mye

Bare hyggelig.

Anbefaler også nettsiden her:

https://www.w3schools.com/

Spesielt "HTML og CSS" på menyen til høyre.

Odin · 1. august 2018

Bare hyggelig.

Anbefaler også nettsiden her:

https://www.w3schools.com/

Spesielt "HTML og CSS" på menyen til høyre.

hehe jeg har css commando lista deres oppe i en fane nå. w3 som har lært meg det jeg kan til nå men når man treffer på ett spesifikt problem så er de ikke så enkle å hjelpe.

Som du sikkert ser på siden prøver jeg å få border rundt menen til å bli en del mindre, trenger ikke hele bredden på siden til det, får margin-left eller var det right til å funke men ikke den andre. kunne tenkt meg en litt mindre boks rundt menyen

Merko · 1. august 2018

Som du sikkert ser på siden prøver jeg å få border rundt menen til å bli en del mindre, trenger ikke hele bredden på siden til det, får margin-left eller var det right til å funke men ikke den andre. kunne tenkt meg en litt mindre boks rundt menyen

Noe slikt?

ul {
  border-radius: 5px;
  /*margin: 0 50 0 50; */
  border: 1px solid black;
  padding: 10px;
  background: rgba(200,200,200,0.7);
  text-align: center;  
  font-size: 18px;
  
  width: 350px;
  margin: 0 auto;
  margin-bottom: 25px;
}

https://codepen.io/anon/pen/yqKxEZ

Tar kvelden nå, god natt

Odin · 1. august 2018

Noe slikt?

ul {
  border-radius: 5px;
  /*margin: 0 50 0 50; */
  border: 1px solid black;
  padding: 10px;
  background: rgba(200,200,200,0.7);
  text-align: center;  
  font-size: 18px;
  
  width: 350px;
  margin: 0 auto;
  margin-bottom: 25px;
}

https://codepen.io/anon/pen/yqKxEZ

Tar kvelden nå, god natt

Setter stor pris på at du tok deg tiden til å hjelpe en nybegynner å vise meg ikke bare løsningen på problemene men veien videre.

God natt, å takk for all hjelp

etse · 6. august 2018

Bare hyggelig.

Anbefaler også nettsiden her:

https://www.w3schools.com/

Spesielt "HTML og CSS" på menyen til høyre.

Selv synes jeg den siden er utdatert, finnes mange bedre alternativer. Synes bare det er synd den dukker så høyt på google hele tiden. Synes f.eks. https://developer.mozilla.org/ er mye bedre og mer oppdatert med nye best-practices.

F.eks. kan du her lese om styling av lister: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists

Endret 7. august 2018 av etse

danielhoifodt · 8. september 2018

Hei, har ikke sett over så nøye. Men kan det være inline-block. For med det parameteret får du tekst etter hverandre horisonalt.

Logg inn

Hvordan få mellomrom mellom <li> elementer inline

Anbefalte innlegg

Odin

Lenke til kommentar

Videoannonse

Merko

Lenke til kommentar

Odin

Lenke til kommentar

Merko

Lenke til kommentar

Odin

Lenke til kommentar

Merko

Lenke til kommentar

Odin

Lenke til kommentar

Merko

Lenke til kommentar

Odin

Lenke til kommentar

Merko

Lenke til kommentar

Odin

Lenke til kommentar

etse

Lenke til kommentar

danielhoifodt

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer