CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

nugga Nybegynder

03. oktober 2009 - 22:54 Der er 6 kommentarer og
1 løsning

Vertical Rule hjælp

Hejsa, jeg ville lave en vertical rule på min side.
Så jeg gjorde følgende.
I min Style fil.

VR {
width:1px;
height:250px;
background-color:#000000
}

og følgende i min HTML fil, under body
<div id="VR"></div>
Jeg kan ikke se nogen Vertical rule, hvad gør jeg forkert?

Synes godt om

eydun Nybegynder

03. oktober 2009 - 23:11 #1

#VR { ...

#'et hjælper lidt :-)

Synes godt om

eydun Nybegynder

03. oktober 2009 - 23:14 #2

Men forresten en vertical rule kunne jeg forestille mig at men kunne bruge flere steder på en side, så du skulle måske overveje at bruge . og class i stedet for # og id

Synes godt om

Christian_Belgien Novice

03. oktober 2009 - 23:51 #3

Der synes ikke at eksistere en vr tag i html. Hvorfor bruger du (eller misbruger du) ikke simpelhen hr taggen? En vertical rule 1 px bred og 250 px hoej er det samme som en horisontal rule 1 px bred og 250 px hoej. Saa:

<hr style="width: 1px; height: 250px"/>

Synes godt om

eydun Nybegynder

04. oktober 2009 - 00:14 #4

Hmmm...

hr.vr {
width:1px;
height:250px;
}

og

<hr class="vr" />

giver ikke helt det samme, men en centreret vertical rule,,,

Synes godt om

eydun Nybegynder

04. oktober 2009 - 00:38 #5

Eller hvad med at bruge ?

style.css:
p {
float: left;
width: 45%;
margin: 1em;
}

.vr {
width:1px;
height:250px;
background-color:#000000
}

og index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nisl nibh, vitae feugiat turpis. Cras euismod fringilla augue, non faucibus tellus commodo non. Cras urna leo, malesuada sit amet commodo quis, bibendum et lectus. Nunc placerat nisl vel nunc malesuada ut faucibus nisl condimentum. Etiam ornare massa id libero tristique porttitor. Ut felis arcu, commodo sed mollis at, dapibus id tortor. Mauris ipsum tellus, faucibus vitae fringilla quis, cursus id lacus. Aenean at sapien at diam fermentum suscipit. Phasellus placerat commodo justo, quis fringilla risus placerat vitae. Pellentesque sed metus nec massa sodales euismod at ut turpis. Nam eu lorem lectus. Aenean vitae arcu in metus condimentum sodales ut quis mi. Integer lorem risus, tincidunt non ornare nec, dignissim eget metus.




Integer luctus tortor vel nunc porta tincidunt. Nunc gravida, nunc vitae vestibulum volutpat, nisl felis porta mauris, ut semper sapien augue in ligula. Suspendisse tempor neque metus, a accumsan ipsum. Mauris tortor velit, condimentum eu ultricies in, aliquet a ligula. Fusce semper, tortor non molestie commodo, justo risus imperdiet orci, nec tempor sem neque dapibus quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean luctus malesuada augue, ut ornare est sollicitudin non. Ut faucibus pulvinar mauris, gravida facilisis augue blandit ac. Nunc aliquet scelerisque consectetur. Ut convallis tristique lectus, non egestas urna rhoncus at. In diam magna, tempor in commodo in, ornare vitae orci. Sed suscipit est quis magna faucibus id bibendum arcu dictum. Nullam felis turpis, fringilla at cursus nec, aliquam sit amet dolor. Maecenas augue risus, ornare sit amet interdum id, pharetra sit amet tellus. Proin interdum dui eu nisi egestas ac fermentum justo consequat. Sed arcu nunc, ornare ac semper sed, aliquet in mi. Quisque blandit viverra enim. Aenean in leo diam.


</body>
</html>

Synes godt om

denstorekalapojser Nybegynder

04. oktober 2009 - 14:39 #6

kan ligeså godt lige at i officiel HTML og XHTML
eksisere <vr> tagget ikke.

Synes godt om

eydun Nybegynder

04. oktober 2009 - 19:41 #7

Og så en ting mere... :-)

Brug hellere border-left eller border-right. Det er mere flexibelt.
e.g.:

style.css:
p {
float: left;
width: 40%;
margin: 1em;
padding: 1em;
}

.vr-left {
border-left: 1px dotted black;
padding-left: 1em;
margin-left: -1em;
}

og index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nisl nibh, vitae feugiat turpis. Cras euismod fringilla augue, non faucibus tellus commodo non. Cras urna leo, malesuada sit amet commodo quis, bibendum et lectus. Nunc placerat nisl vel nunc malesuada ut faucibus nisl condimentum. Etiam ornare massa id libero tristique porttitor. Ut felis arcu, commodo sed mollis at, dapibus id tortor. Mauris ipsum tellus, faucibus vitae fringilla quis, cursus id lacus. Aenean at sapien at diam fermentum suscipit. Phasellus placerat commodo justo, quis fringilla risus placerat vitae. Pellentesque sed metus nec massa sodales euismod at ut turpis. Nam eu lorem lectus. Aenean vitae arcu in metus condimentum sodales ut quis mi. Integer lorem risus, tincidunt non ornare nec, dignissim eget metus.


Integer luctus tortor vel nunc porta tincidunt. Nunc gravida, nunc vitae vestibulum volutpat, nisl felis porta mauris, ut semper sapien augue in ligula. Suspendisse tempor neque metus, a accumsan ipsum. Mauris tortor velit, condimentum eu ultricies in, aliquet a ligula. Fusce semper, tortor non molestie commodo, justo risus imperdiet orci, nec tempor sem neque dapibus quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean luctus malesuada augue, ut ornare est sollicitudin non. Ut faucibus pulvinar mauris, gravida facilisis augue blandit ac. Nunc aliquet scelerisque consectetur. Ut convallis tristique lectus, non egestas urna rhoncus at. In diam magna, tempor in commodo in, ornare vitae orci. Sed suscipit est quis magna faucibus id bibendum arcu dictum. Nullam felis turpis, fringilla at cursus nec, aliquam sit amet dolor. Maecenas augue risus, ornare sit amet interdum id, pharetra sit amet tellus. Proin interdum dui eu nisi egestas ac fermentum justo consequat. Sed arcu nunc, ornare ac semper sed, aliquet in mi. Quisque blandit viverra enim. Aenean in leo diam.


</body>
</html>

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS