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

danielbaek Nybegynder

16. december 2008 - 21:37 Der er 12 kommentarer og
1 løsning

Table udvider sig ikke med indhold fra DIVs

Hej,

Jeg har en skabelon (html) hvor der er en tabel med en række DIVs inden i selve tabellen. Problemet er, at tabellen ikke udvider sig så man kan se indholdet som er i de forskellige DIVs. Problemet er kun i IE. I FF og Chrome fungerer det fint. Nogen ideer til hvad det kan være?

På forhånd tak for eventuel hjælp.

Synes godt om

zips Juniormester

16. december 2008 - 21:43 #1

Måske en clear du mangler af dine div :)

Uden kode er alt kun gæt og gætte leg er der ikke nogen som vil bruge tid på :)

Synes godt om

danielbaek Nybegynder

16. december 2008 - 21:53 #2

Ok, det er bare fordi jeg syntes koden er ret lang så jeg ville ikke poste det hele. Her er html/php filen. Skal I også bruge CSS teksten?
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="page">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>



<div id="topbanner">

<div id="language">
<?php if($this->countModules('user4')) : ?>
<jdoc:include type="modules" name="user4" style="" />
<?php endif; ?><div>

<div id="search"><jdoc:include type="module" name="search" /></div>

<div id="logo">
<a href="./"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/<?php echo $this->language ?>.gif" width="218" height="44" style="border-style: none"/></a>

</div>



</div></td>
</tr>
<tr>
<td>


<div id="forsideflash">

<?php
if ($this->language=="da-dk") {
?>
<jdoc:include type="modules" name="user5" style="" />
<?php } ?>

<?php
if ($this->language=="en-gb") {
?>
<jdoc:include type="modules" name="user3" style="" />
<?php } ?>

</div>



</td>
</tr>
<tr>
<td><div id="mellemspalte">

<?php if($this->countModules('left')) : ?>
<div id="mellemspalte_venstre">
<jdoc:include type="modules" name="left" style="" />
</div>
<?php endif; ?>

<?php if($this->params->get('showComponent')) : ?>
<div id="indhold">
<jdoc:include type="component" />
</div>
<?php endif; ?>

</div> 
</td>
</tr>
<tr>
<td><?php if($this->countModules('bottom')) : ?>
<jdoc:include type="modules" name="bottom" style="" />
<?php endif; ?>

</td>
</tr>
</table>

</div>

<div id="bottomline">

<?php
if ($this->language=="da-dk") {
?>
<jdoc:include type="modules" name="user1" style="" />
<?php } ?>

<?php
if ($this->language=="en-gb") {
?>
<jdoc:include type="modules" name="user2" style="" />
<?php } ?>

</div>

</body>
</html>

Synes godt om

zips Juniormester

16. december 2008 - 22:06 #3

Da du har mere php end html vil det være bedst med et link til siden, er den ikke online er din css nødvendig her.

Synes godt om

danielbaek Nybegynder

16. december 2008 - 22:11 #4

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
margin: 0;
padding: 0;
}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
background-image: url(../images/background.png);
background-repeat: repeat-x;
}

div#page {
margin-top: 20px;
margin-bottom: 0px;
padding: 10px;
background-color: #EBEBEB;
border:thin solid #D6K4D5;
width: 850px;
height: 100%;

}

a:link {
text-decoration: none;
color: #0099F1;
}
a:visited {
text-decoration: none;
color: #0099F1;
}
a:active {
text-decoration: none;
color: #0099F1;
}
a:hover
{
text-decoration: none;
color: #000000;
}

/* yderrammen */
div#page {
margin: 0 auto; /* we want to center this div for browsers that understand so we have an auto declaration for the left and right margin */
margin-top: 20px;
margin-bottom: 0px;
padding: 10px;
background-color: #EBEBEB;
border:thin solid #D6D4D5;
width: 850px;
height: 100%;
}

/* topbanner */
div#topbanner {
background-color: #FFFFFF;
width: 830px;
height: 50px;
position: relative;
margin-top: 0px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}

div#logo {
margin: 0;
background-color: #FFFFFF;
width: 218px;
height: 44px;
margin-top: 20;
}

div#search {
float: right;
padding-top: 15px;
position: relative;
}

/* pladsen til karousssel på forsiden */
div#forsideflash {
background-color: #FFFFFF;
width: 850px;
height: 200px;
margin-top: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

/* MENU boks */
div#mellemspalte_venstre {
background-color: #000000;
float: left;
width: 175px;
height: 200px;
margin-top: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
height: 200px;
}

/* MENU punkter */
.menu {
float: left;
margin-top: 0px;
padding-top: 20px;
padding-left: 15px;
padding-right: 0px;
padding-bottom: 0px;
font-family: Arial, Helvetica,sans-serif;
font-size: 12px;
color:#00FF00;
text-decoration: none;
list-style-type: none;
}

/* CONTENT feltet */
div#indhold {
float: right;
background-color: #FFFFFF;
width: 655px;
padding-top: 0px;
padding-left: 20px;
padding-right: 0px;
padding-bottom: 0px;
height: auto;
}

/* pladsen umiddelbart under hovedillustration */
div#mellemspalte {
background-color: #EBEBEB;
width: 850px;
height: 50px;
margin-top: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

/* Overskriften */
h2, .contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.8em;
line-height: 1.1em;
font-weight: normal;
color: #0099F1;
text-align: left;
width: 500px;
margin-bottom: 0px;
}

/* indhold */
.article-content {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
line-height: 1.3em;
font-size: 0.8em;
font-weight: normal;
color: #000000;
text-align: left;
width: 500px;
margin-bottom: 10px;
margin-top: 20px;
}

/* placering af knapper */
.buttonheading {
padding-top: 0px;
padding-left: 20px;
padding-right: 0px;
padding-bottom: auto;
position: relative;
}

/* afsender og copyright */
div#bottomline {
margin: 0 auto; /* we want to center this div for browsers that understand so we have an auto declaration for the left and right margin */
margin-top: 0px;
margin-bottom: 50px;
padding: 0px;
background-color: none;
width: 850px;
font-family: Arial, Helvetica,sans-serif;
font-size: 10px;
}

/*TEST AF MENUEN*/

ul#mellemspalte_venstre
{padding:0; margin:0;}

ul#mellemspalte_venstre li
{list-style-type:none; display:inline; width: 155px; padding-left: 15px; padding-right: 2px; float: right; margin: 0;}

#mellemspalte_venstre a:link
{display:inline; float:left; width: 155px; padding: 2px 0px; font-weight:normal; text-decoration:none; color: #FFFFFF; background-color:#000000; padding-left:15px;
background-image: url(../images/menu_prk.gif);
background-repeat: no-repeat;
}

#mellemspalte_venstre a:visited
{display:inline; float:left; width: 155px; padding: 2px 0; font-weight:bold; text-decoration:none; color: #FFFFFF; background-color:#000000; padding-left:15px;
background-image: url(../images/menu_prk.gif);
background-repeat: no-repeat;
}

#mellemspalte_venstre a:hover {
display:inline;
float:left;
width: 155px;
padding: 2px 0;
background: #FFFFFF;
text-decoration:none;
color: #0099F1;
padding-left:15px;
background-image: url(../images/menu_prk_black.gif);
background-repeat: no-repeat;
}

#mellemspalte_venstre li.active a
{display:inline; float:left; width: 155px; padding: 2px 0; background: #FFFFFF; text-decoration:none; color: #0099F1; padding-left:15px;
background-image: url(../images/menu_prk_blue.gif);
background-repeat: no-repeat;
}

#mellemspalte_venstre li.parent active a
{display:inline; float:left; width: 155px; padding: 2px 0; background: #FF00FF; text-decoration:none; color: #000000; padding-left:10px}

/*SEARCH BOX*/

.inputbox {
font-family: arial, helvetica, sans-serif;
font-size: 9px;
color:#000000;
border:1px solid #000000;
background: #FFFFFF;
Height: 9px;
margin-top: 6px;
}

PS. Beklager, ved godt det måske ikke er den flotteste kode. Men det virkede - Lige indtil jeg kiggede i IE :(

Synes godt om

danielbaek Nybegynder

16. december 2008 - 22:23 #5

Ps. Den første div#page er ikke med - det var bare mig der kom til at kopiere en ind. Beklager forvirringen. Det ligner at problemet er, at den ikke udvider den div der hedder div#indhold i IE.

Synes godt om

danielbaek Nybegynder

16. december 2008 - 22:51 #6

ok, har nu fået løst første del af udfordringen ved at få de forskellige DIVs til at udvide sig (ved at bruge position:relative;) men nu er udfordringen at de ligesom går ud over table kanten. Gode forslag til hvordan dette kan rettes?

Synes godt om

zips Juniormester

16. december 2008 - 22:57 #7

Det du er ude i er at få mellemspalte_venstre og indhold til at være lige høje, som jeg forstå det.

Her er det Equal Height metoden som skal bruges.

Synes godt om

danielbaek Nybegynder

16. december 2008 - 23:00 #8

nej mit problem er nu at den table (ingen css tilknyttet) der er indsat i koden ikke udvider sig ligesom indholdet i de forskellige DIVs. Før kunne man slet ikke se indholdet i de to divs (herunder indhold og mellemspalte_venstre). Det kan man nu, men kun hvor det ligger flyder ud over tabellens ramme.

Synes godt om

danielbaek Nybegynder

16. december 2008 - 23:03 #9

Jeg kan se at den som er problemet er DIVen der hedder page. Den skal jeg have til at blive lige så høj som det indhold der er inden i den (indhold og mellemspalte_venstre)

Synes godt om

zips Juniormester

16. december 2008 - 23:08 #10

Jeg smider lige et link på det jeg kikker på http://prebendahl.dk/exp/test/danielbaek/

Så er det nok nemmere at snakke om hvad der sker og skal ske.

Synes godt om

danielbaek Nybegynder

16. december 2008 - 23:10 #11

Så fik jeg det løst.
Det var DIV'en der hed mellemspalte som på en eller anden måde afsluttede PAGE. Ved at give mellemspalte en height:auto; så virker det både i IE og FF.

Tak for hjælpen og tiden zips. Smider du et svar får du point for din indsats.

Synes godt om

zips Juniormester

16. december 2008 - 23:13 #12

Godt det virker :)

Synes godt om

roenving Novice

01. januar 2009 - 11:41 #13

Godt nytår -- og måske på tide at afslutte ?-)

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
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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