Avatar billede cgsdk Novice
19. august 2016 - 22:54 Der er 10 kommentarer og
1 løsning

Lave en lodret streg

Er der en klog person som kan hjælpe?

Jeg skal have lavet en html kode med 2 spalter tekst som skal deles af en tynd lodret streg i midten.

hvordan laver jeg koden?

Det skal laves så det er responsivt og ser pænt ud på en mobiltelefon. Tænker stregen skal udelades på mobilvisning.

kan man lave en style og hvordan?

På forhånd tak
Avatar billede moddi100 Seniormester
20. august 2016 - 01:17 #1
Du laver blot et element f.eks. en div, og så med en border-right på.

@media screen and (min-width: 768px) {
  #div_venstre {
      border-right: 2px solid black;
  }
}
Avatar billede rhl2401 Mester
20. august 2016 - 19:03 #2
http://codepen.io/RasmusLauridsen/pen/BzEGrx

Her kan du se et eksempel, der virker.
Avatar billede cgsdk Novice
20. august 2016 - 21:06 #3
Hej rhl2401 - det fungerer rigtig nok på skærm, må når man ser det på moilos er det ikke responsivt. Så står de 2 kolonner ved siden af hnanden istedet for under hinanden. Har du også løsningen på dette?

På forhånd tak :-)
Avatar billede rhl2401 Mester
20. august 2016 - 21:22 #4
Undskyld. Jeg havde forstået som om at stregen bare skulle forsvinde. Her er en opdateret version, der skulle lave dem 100% bredde når det er mobil. (Jeg har lavet en rød border i mobilversionen, for at illustrere det bedst muligt)

http://codepen.io/RasmusLauridsen/pen/BzEGrx
Avatar billede rhl2401 Mester
20. august 2016 - 21:24 #5
Ellers vil jeg anbefale dig at bruge Bootstrap-frameworket. Det kan klare opgaven med det reponsive på 0,5, hvor det er lidt mere besvæligt og kræver mere kode når man gør det "manuelt". Hvis man bruger Bootstrap, kan det også komme en til gode senere. ;)

www.getbootstrap.com
Avatar billede cgsdk Novice
20. august 2016 - 21:41 #6
Har vist nogenlunde styr på formlen nu - mangler dog bare en smule mere margin til højre i den venstre kolonne


.left; .right; {width:100%;}
@media screen and (min-width: 768px) {
.left {
  width: 45%;
  float:left;margin-left: 4%;
  display: inline-block;
  border-right: 2px solid black;
}

.right {
  width: 46%;
  float: left; margin-left:4%;
  display: inline-block;
}
}

@media screen and (max-width: 500px) {
  .left {
  width: 100%;
 
}

.right {
  width: 100%;
 
  margin-top: 20px;
}
}
Avatar billede rhl2401 Mester
20. august 2016 - 22:04 #7
Kan du ikke give den det?
Avatar billede cgsdk Novice
20. august 2016 - 22:22 #8
mangler at finde ud af hvordan jeg laver margin i venstre  kolonne ind mod stregen så der bliver mere luft...
Avatar billede rhl2401 Mester
21. august 2016 - 07:49 #9
Du skal bruge padding i det tilfælde.

.left {
    padding-right: 50px;
}

.right {
    padding-left: 50px;
}



Da du kan se, at det er en border vi leger med, kan du på dette billede se, hvorfor det er padding og ikke margin.

Margin er som hovedregel afstanden til andre elementer.
Border er en visuel steg, prikker osv., der ligger helt oppe ad borderen.
Padding er afstanden til borderen og det inderste af margin.

http://i.stack.imgur.com/PeSIJ.gif
Avatar billede rhl2401 Mester
21. august 2016 - 07:51 #10
Hov, jeg glemte at skrive, at du kan kigge på linket, jeg har sendt et par gange før, der nu er opdateret med et eksempel med padding.
Avatar billede cgsdk Novice
21. august 2016 - 09:29 #11
Fantastisk (y)

Tusind tak for hjælpen, nu spiller det

God søndag
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester