Notifikationer

Markér alle som læst Log ud

Slettet bruger

16. april 2004 - 15:31 Der er 25 kommentarer og
1 løsning

undgå mellemrum mellem 2 div's

Hej!

Hvordan undgår jeg mellemrum imellem de 2 div's så "Overskrift:" og "felt" hænger sammen uden luft imellem?

Det er meningen at der skal være luft den anden vej ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
.form_heading {
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
width:100px;
margin-bottom:6px;
float:left;
}

.form_element {
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
width:100%;
margin-bottom:6px;
}
</style>
</head>

<body>

<div class="form_heading">Overskrift:</div><div class="form_element">felt</div>
<div class="form_heading">Overskrift:</div><div class="form_element">felt</div>

</body>
</html>

Synes godt om

olebole Juniormester

16. april 2004 - 15:36 #1

<ole>

Brug <span>, som er et inline-element. <div> er et block-element og _skal_ lave linieskift ;o)

/mvh
</bole>

Synes godt om

Slettet bruger

16. april 2004 - 15:38 #2

jamen..linieskiftet er fint nok, det har jeg selv lavet.

Jeg vil undgå det her:

<kasse> mellemrum <kasse>

Synes godt om

olebole Juniormester

16. april 2004 - 15:38 #3

PS: Du bør skrive font-navne med lille begyndelses bogstav - og er der mellemrum i font-navnet, skal det escape's:
font-family: 'trebuchet ms', verdana, geneva, arial, helvetica, sans-serif;

Synes godt om

pelkjaer Nybegynder

16. april 2004 - 15:38 #4

Ellers din margin-bottom på header'en kunne man forestille sig.

Synes godt om

pelkjaer Nybegynder

16. april 2004 - 15:39 #5

ahh jeg glor på din css med en doctype der ser sådan ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

not pretty :)

Synes godt om

Slettet bruger

16. april 2004 - 15:41 #6

Skylder at sige at det kun er i IE den laver mellemrummet

Synes godt om

Slettet bruger

16. april 2004 - 15:42 #7

pelkjaer> Næh, det har du da ret i :)

Nogen fornuftig løsning på det, udover at gå tilbage til tabeller? (Jeg har brugt mange timer på at rode med CSS og har efterhånden givet op)

Synes godt om

olebole Juniormester

16. april 2004 - 15:42 #8

el_barto >> Brug den rigtige DTD (som elkjaer viste dig), ellers kan IE slet ikke tolke CSS ordentligt (den har svært nok ved det i forvejen) - og prøv så med <span> ;o)

Synes godt om

Slettet bruger

16. april 2004 - 15:44 #9

Det blev ikke meget kønnere af span løsningen:

<div id="tab1" class="indhold">
<span class="form_heading">Overskrift:</span><span class="form_element"><input type="text"></span>
<span class="form_heading">Overskrift:</span><span class="form_element">felt</span>
</div>

Synes godt om

olebole Juniormester

16. april 2004 - 15:49 #10

Hvis du lavede en gif af, hvordan det skal se ud, ville det være meget lettere at angive en præcis løsning :)

Synes godt om

pelkjaer Nybegynder

16. april 2004 - 15:51 #11

ole>>Du kan se det "næsten" rigtige udseende med en forkert eller ingen doctype :)

Synes godt om

olebole Juniormester

16. april 2004 - 15:57 #12

Jeg er ikke interesseret i at lave noget, der er 'næsten' rigtigt - og så skulle lave det om igen ... gif, please :)

Synes godt om

Slettet bruger

16. april 2004 - 15:57 #13

der ligger nu en gif på www.partout.dk/box.gif

Synes godt om

olebole Juniormester

16. april 2004 - 16:00 #14

Brug en tabel ... det er præcis opstillinger som denne, tabeller er lavet til - og derfor langt bedre at bruge :)

Synes godt om

olebole Juniormester

16. april 2004 - 16:01 #15

Du kan sagtens lægge dine formateringer i CSS, når du bruger tabeller - og hvis nogen har fortalt dig, at tabeller er yt, så lad være med at tro dem. Det passer ikke :)

Synes godt om

Slettet bruger

16. april 2004 - 16:07 #16

hehe...jamen det gør alle andre (borset fra dig) og jeg får på hatten af dem ovre i brugervenlighed når min webside ikke kan ses på en eller anden mobiltelefon fordi jeg har brugt tabeller og faste bredder :D

Jeg fortsætter med tabeller så!

Synes godt om

olebole Juniormester

16. april 2004 - 16:08 #17

Sider til mobiltelefoner bør laves for sig selv :)

Synes godt om

olebole Juniormester

16. april 2004 - 16:10 #18

PS: De fleste af de, der påstår, tabeller er yt, aner ikke det fjerneste af, hvad de taler om. Påstanden strider i øvrigt direkte mod W3C og deres arbejde ;o)

Synes godt om

pelkjaer Nybegynder

16. april 2004 - 16:52 #19

Lidt at lege videre med - selvom jeg helt er på linje med Ole.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.form_heading {
position: absolute;
left: 10px;
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
width:100px;
}

.form_element {
margin: 0px 0px 6px 105px;
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
}
</style>
</head>
<body>

<div class="form_heading">
Overskrift:
</div>

<div class="form_element">
felt
</div>

<div class="form_heading">
Overskrift:
</div>

<div class="form_element">
felt
</div>

</body>
</html>

"Known bug" (hehe) : Mozilla/Opera giver IKKE nummer 2 form_heading sine 6 padding, så der bliver mellemrum. Jeg ville nok lave en class2 til de 2 nederste divs.

Synes godt om

Slettet bruger

16. april 2004 - 16:56 #20

Jamen jeg takker da for input og løsningsforslag. Der er lidt at rode videre med :)

Jeg kan mærke at I brænder helt vildt efter at dele de 15 point, så hvis I lige lægger et svar?

Synes godt om

pelkjaer Nybegynder

16. april 2004 - 17:00 #21

Ahh, uden margin på body, kan man ikke regne med nada:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
margin: 10px;
}
.form_heading {
position: absolute;
left: 10px;
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
width:100px;
}

.form_element {
margin: 0px 0px 6px 105px;
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
}
.form_heading2 {
position: absolute;
left: 10px;
top: 45px;
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
width:100px;
}

.form_element2 {
margin: 0px 0px 6px 105px;
padding-left:5px;
padding-top:4px;
background:#E6F3F5;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
height:25px;
}
</style>
</head>
<body>

<div class="form_heading">
Overskrift:
</div>

<div class="form_element">
felt
</div>

<div class="form_heading2">
Overskrift:
</div>

<div class="form_element2">
felt
</div>

</body>
</html>

virker fint.

Synes godt om

roenving Novice

16. april 2004 - 17:07 #22

Hvad med at bruge <label>-elementet ?-)

Synes godt om

Slettet bruger

16. april 2004 - 17:08 #23

tabeller er fint, det har jeg prøvet før *G*

Synes godt om

roenving Novice

16. april 2004 - 17:18 #24

<label style="width:200px;">Overskrift: </label><input class="form_element" value="felt"><br />
<label style="width:200px;">Overskrift: </label><input class="form_element" value="felt"><br />

Synes godt om

olebole Juniormester

16. april 2004 - 17:32 #25

Jamen, så må vi vel hellere slukke branden (ref: 16/04-2004 16:56:07) :D

Synes godt om

Slettet bruger

15. maj 2004 - 15:58 #26

Undskyld ventetiden, men troede jeg havde lukket spm og uddelt point :/

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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