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

elskermad.dk Nybegynder

13. januar 2007 - 16:27 Der er 23 kommentarer og
1 løsning

Omskrive tabeldesign til div-design

Hej Eksperter!

Jeg har tit bøvlet med at undgå tabeller og udelukkende bruge divs/css - Men det lykkes aldrig :( Nu er jeg efterhånden ved at blive så tosset at jeg har brug for hjælp til det!

Mine primære problemer er når to ting skal sættes ved siden af hinanden (som to celler) og at FF ikke trækker div'ens baggrund med ned og det derfor ser ud til at teksten ikke længere er inden i diven!

Hvis jeg kan få en til at omskrive nedenstående html til div-design ville jeg blive rigtig glad da jeg så kan se teknikkerne det kræver :)

På forhånd mange tak for din hjælp!

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='da'>
<head>
<title>velkommen!</title>
</head>
<body>

<table id='container' cellpadding='0' cellspacing='0'>
<tr>
<td id='indholdscelle'>
<h1>velkommen!</h1>

<table id='content' cellpadding='0' cellspacing='0'>
<tr align='left' valign='top'>
<td id='menu'>
<div id='menu_ramme'>
<a href='/' class='menupunkt_1 menupunkt_aktiv'>Forside</a>
<a href='/bureauet/ide-og-vision.htm' class='menupunkt_1'>Bureauet</a>
<a href='/produkter/computerrelaterede-problemknusere.htm' class='menupunkt_1'>Produkter</a>
<a href='/kundecenter/' class='menupunkt_1'>Kundecenter</a>
<a href='/support/' class='menupunkt_1'>Support</a>
</div>
</td>
<td id='tekst'>
<p>
Cras cursus, lorem in venenatis vestibulum, tortor nunc sagittis metus, at venenatis pede tellus et ipsum. Integer bibendum. Suspendisse potenti. Phasellus arcu ante, aliquam eget, elementum eu, suscipit at, nulla. Cras eleifend risus quis libero. Praesent ut urna et enim pharetra ultricies. Suspendisse a velit quis purus vulputate egestas. Mauris porta nisl dictum turpis. Cras vulputate. Donec adipiscing, risus in eleifend mattis, libero orci commodo mauris, ac tempor ipsum felis a nunc. Vivamus est. Nullam sapien. Proin urna. Quisque vel diam vel justo imperdiet cursus. Donec ultrices molestie lectus. Aenean orci. Suspendisse quis sem id mi lobortis sagittis.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Synes godt om

karmicmind Nybegynder

13. januar 2007 - 18:06 #1

http://www.intensivstation.ch/en/templates/

måske kan det hjælpe..?

Synes godt om

mclemens Nybegynder

13. januar 2007 - 18:08 #2

Hvad med denne:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title><meta name="robots" content="index, follow">

<style type="text/css">
#container {background:red;width:980px;}
#menu {float:left;width:125px;}
#tekst {float:right;width:855px;}

.duglemmermig {clear:both;height:0px;overflow:hidden;}

p {margin:0px;}

</style>

</head><body>

<div id='container'>
<h1>velkommen!</h1>

<div id='content'>
<div id="menu">
<div id='menu_ramme'>
<a href='/' class='menupunkt_1 menupunkt_aktiv'>Forside</a>
<a href='/bureauet/ide-og-vision.htm' class='menupunkt_1'>Bureauet</a>
<a href='/produkter/computerrelaterede-problemknusere.htm' class='menupunkt_1'>Produkter</a>
<a href='/kundecenter/' class='menupunkt_1'>Kundecenter</a>
<a href='/support/' class='menupunkt_1'>Support</a>
</div>
</div>

<div id='tekst'>
<p>
Cras cursus, lorem in venenatis vestibulum, tortor nunc sagittis metus, at venenatis pede tellus et ipsum. Integer bibendum. Suspendisse potenti. Phasellus arcu ante, aliquam eget, elementum eu, suscipit at, nulla. Cras eleifend risus quis libero. Praesent ut urna et enim pharetra ultricies. Suspendisse a velit quis purus vulputate egestas. Mauris porta nisl dictum turpis. Cras vulputate. Donec adipiscing, risus in eleifend mattis, libero orci commodo mauris, ac tempor ipsum felis a nunc. Vivamus est. Nullam sapien. Proin urna. Quisque vel diam vel justo imperdiet cursus. Donec ultrices molestie lectus. Aenean orci. Suspendisse quis sem id mi lobortis sagittis.
</p>
</div>
</div>

<div class="duglemmermig"></div>

</div>

</body></html>

Synes godt om

mclemens Nybegynder

13. januar 2007 - 18:09 #3

Udover at p kan drille kan
h elementer selvfølgelig også ...
- Jeg tror det med baggrunder er fordi
at du ikke clearer floatede divs ...

Synes godt om

mclemens Nybegynder

13. januar 2007 - 18:12 #4

Ups, kom til at bruge en anden doctype :P

Synes godt om

mclemens Nybegynder

13. januar 2007 - 18:13 #5

... Kaster lige et svar hvis det hjalp :o)

Synes godt om

mclemens Nybegynder

13. januar 2007 - 18:18 #6

Hmm, man kan vist også gøre det lettere iflg.
http://www.positioniseverything.net/easyclearing.html
... har ikke læst det endnu, det må være aftenlæsning :o)

Synes godt om

elskermad.dk Nybegynder

14. januar 2007 - 14:06 #7

jeg har næsten fået det til at virke, hvert fald i IE, men den kokser stadig i FF

http://v3.alvision.dk/ - Hvad gør jeg galt? Både at der er en hvid kant i toppen og at teksten ikke står ved siden af menuen?

Synes godt om

mclemens Nybegynder

14. januar 2007 - 14:30 #8

#container {
width: 711px;
margin: 25px auto;

->

#container {
width: 711px;
margin: 0px auto;
position:relative;top:25px;

...

#tekst {
float: right;
padding: 0px 10px;
line-height: 125%;
width:510px;
}

( width tilføjet )

...

ryk dine baggrundsdefineringer fra body til html

... håber at det hjælper lidt ...

Synes godt om

mclemens Nybegynder

14. januar 2007 - 14:38 #9

Måske kan du bare nøjes med:

#tekst {
float: right;
padding: 0px 10px;
line-height: 125%;
width:510px;
}

( width tilføjet )

...

ryk dine baggrundsdefineringer fra body til html

(når baggrunden flyttes fra body til html er det
ikke sikkert at rettelsen i container er nødvendig mere )

Synes godt om

elskermad.dk Nybegynder

14. januar 2007 - 14:45 #10

så langt så godt, er det eneste problem tilbage at jeg gerne vil have lidt padding-right på min tekst-div, men det kan jeg åbenbart ikke når den er floatet til kanten?

Synes godt om

mclemens Nybegynder

14. januar 2007 - 14:48 #11

Virker fint hos mig ?

#tekst {
float: right;
width: 500px;
padding-right:10px;
margin: 12px 0px;
line-height: 125%;
}

test:

java script:document.getElementById("tekst").style.paddingRight="10px";void(0);

- ind i url og enter

Synes godt om

mclemens Nybegynder

14. januar 2007 - 14:49 #12

Tak for point :)

Synes godt om

mclemens Nybegynder

14. januar 2007 - 14:52 #13

#tekst {
float: right;
width: 500px;
margin: 12px 10px;
line-height: 125%;
}

burde give ca. det samme ...

Synes godt om

elskermad.dk Nybegynder

14. januar 2007 - 15:44 #14

super, burde os have virket hos mig - brugte: padding:0px 0px 0px 15px; men det er åbenbart ikke rigtigt?

Synes godt om

mclemens Nybegynder

14. januar 2007 - 15:51 #15

padding: top right bottom left;

Synes godt om

elskermad.dk Nybegynder

14. januar 2007 - 17:17 #16

hvis du stadig abonnerer på spørgsmålet:

efter at jeg har indsat skygger på div'en har jeg problemer med at teksten igen hopper ud af div'en i FF

hvad gør jeg galt?

Synes godt om

mclemens Nybegynder

14. januar 2007 - 17:35 #17

Pas på med at definere height på elementer der
har en variabel height afhængig af indholdet ...

- Fjern din height definering fra container's css.

Synes godt om

mclemens Nybegynder

14. januar 2007 - 17:37 #18

IE virker fordi at IE ikke overholder
height defineringer medmindre den får tilføjet
en overflow:scroll; eller overflow:hidden; på elementet

Synes godt om

elskermad.dk Nybegynder

14. januar 2007 - 17:44 #19

jeg er nødt til at have en minimum højre på den da rammen til højre ellers kommer til at se forkert ud...

hvis jeg laver height om til min-heigth virker det i FF men nu er der problemmer i IE :(

hvorfor er der ikke monopol på browsermarkedet :(

Synes godt om

mclemens Nybegynder

14. januar 2007 - 17:57 #20

#container {
float: left;
width: 711px;
height: 460px;
margin: 0px auto;
background-color: #FFFFFF;
border: 1px solid #3E434A;
background-image: url(/_grafik/layout/top.png);
background-repeat: no-repeat;
padding: 155px 0px 0px 0px;
font-size: 11px;
}

#ramme > #container {
height: auto;
min-height: 460px;
}

Synes godt om

elskermad.dk Nybegynder

14. januar 2007 - 19:38 #21

hvad mener du med >, er det en del af css'en?

Synes godt om

elskermad.dk Nybegynder

14. januar 2007 - 19:39 #22

det ser ud til at gøre hvad det skal, hvordan virker det helt korrekt med sådan en > ?

Synes godt om

mclemens Nybegynder

14. januar 2007 - 19:46 #23

http://www.w3.org/TR/REC-CSS2/selector.html#q1
"E > F Matches any F element that is a child of an element E"
IE < 7 understøtter ikke > selectoren, og heller ikke min-height m.v.
IE > 7 understøtter > selectoren samt min-height m.v. og overholder
også en height definering ... > tricket er en måde at omgå problemet
med at IE < 7 ikke understøtter min-height ...

Kig evt. på http://www.positioniseverything.net/articles/ie7-dehacker.html
"The Child and Adjacent Sibling Hacks" ... problemet kan også løses med et
specielt IE under 7 css stylesheet indesluttet i en conditional comment til IE
og så brug af min-height i den css fil der leveres til alle andre browsere ...

Synes godt om

mclemens Nybegynder

14. januar 2007 - 19:47 #24

Ups... IE > 7 skulle have været: IE >= 7
... da IE 7 jo også understøttede det :D

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