Søg
Avatar billede strikerdk Novice
07. november 2007 - 15:07 Der er 10 kommentarer og
1 løsning

Problemer med stylesheet og div under tabel

Jeg er igang med at lave en masterpage, hvori jeg har top, menu og indhold smidt ind i en tabel. Herunder har jeg smidt en div der skal strække sig til bunden af IE7 og Firefox - men jeg kan ikke få det til at hænge sammen.

Er der nogen der har et godt forslag?

CSS:

html,body
{
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}

#wrap
{
    margin: 0 auto;
    height: auto;
    min-height: 100%;    
}

#bottom
{
?!?
}

CODE:

<!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" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="styles/StyleSheet.css" rel="stylesheet" type="text/css" />


</head>
<body  style="margin-top: 0px; margin-bottom: 0px;">
     
   
        <form id="form1" runat="server">
        <table style="width: 100%; height: 100%; background-color: #ffffff;" cellpadding="0" cellspacing="0">
     
       
        <tr>
            <td align="center" valign="top" rowspan="3">
            ****image****
            </td>
       
            <td colspan="3" style="height: 80px;" class="overskrift">
            </td>
           
           
        </tr> 
           
       
        <tr>
       
            <td colspan="3" style="height: 30px;"; class="subskrift">
                </td>
        </tr>
       
       
 
        <tr>
           
            <td colspan="3" align="right" valign="bottom" class="navitop" style="height: 30px;";>
               
               
               
            </td>
        </tr>
       
       
        <tr>
           
           
            <td style="width: 20px" class="lineblue"></td>
           
            <td style="width: 20px" class="lineblue"></td>
 
  <td align="left" colspan="3" class="lineblue">
             
  </td>
        </tr>
       
       
  <tr>
 
  <td align="left" valign="top" style="width: 150px; height: 100%; background-color: #0000ff;" class="leftnavi">
 
  </td>
 
  <td style="width: 20px; height: 100%;" ></td>
 
  <td align="center" valign="top" style="background-image: url(img/Vandmaerkebg2.gif); background-repeat: no-repeat; background-position: center top; background-color: #ffffff; height: 100%;">
        <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
        </div>
  </td>
 
  <td style="width: 20px; height: 100%;"></td>
 
  </tr>
 
    </table>
 
 
 
  <div id="wrap">
      ****DENNE skal udvide sig til bunden af browseren hvis muligt****
  </div>
 
    <div id="bottom">
        tekst
  </div>

     
 
    </form>
 
   
</body>
</html>
Avatar billede strikerdk Novice
07. november 2007 - 15:28 #1
Måske et mere overskueligt eksempel:

CSS:

html,body
{
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}

#wrap
{
    margin: 0 auto;
    height: auto;
    min-height: 100%;   
}

#bottom
{
?!?
}


HTML:

<table>
  <tr>
      <td>
              ***Tekst el. lign.*** 
      </td>
  </tr>
</table>

<div id=wrap> </div>

<div id=bottom> </div>
Avatar billede w13 Novice
07. november 2007 - 21:12 #2
Jeg forstår ikke, hvad du vil. Du siger, at noget ikke hænger sammen?
Avatar billede strikerdk Novice
07. november 2007 - 23:00 #3
problemet er at hvis ***Tekst el. lign**** er et kort tekstafsnit, så smækker IE7 højden sammen på tabellen så bunden ryger op på siden. Her ønsker jeg så at bunden "strækker" sig til at blive nederst i browseren.
Avatar billede strikerdk Novice
07. november 2007 - 23:02 #4
Forstået på den måde, at uanset hvor lidt tekst der er i cellen, så bliver bottom DIVén stadig i bunden. Det virker dog lidt forkert, da jeg sikkert under normale omstændigheder ville have anvendt DIV-tags hele vejen igennem - men er ovenstående muligt?
Avatar billede sibbelone Nybegynder
07. november 2007 - 23:06 #5
body {
    text-align: center;
}
.wrapper {
    width: 1210px;
    text-align: left;
}
.header {
    width: 1210px;
    height: 124px;
    margin-top: 30px;
    text-indent: -9999em;
    background-color: #369;
    /*background: #fff url(../img/toplogo_2.png) no-repeat;*/
   
}
img {
    float: right;
}
h2 {
    padding: 15px 0;
    color: #1b73d6;
    font: 1.3em verdana,sans-serif;
}
p {
    padding: 0 0 15px;
    color: #194379;
    font: 1em/1.3em arial,sans-serif;
}
strong {
    font-weight: normal;
}
.download {
    text-align: right;
}
.footer {
    width: 1210px;
    margin: 0 auto;
    background-color: #369;
    /*background: #a3b2c6 url(../img/footer.gif) no-repeat 0 0;*/
}
.footer p {
    padding: 17px 0 0;
    color: #fff;
    font: 0.8em arial,sans-serif;;
}
a {
    color: #194379;
}
a:hover {
    text-decoration: none;
}
/*herfra laves det der gør at bundbjælken altid er i bunden*/
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 4em; /* .push must be the same height as .footer */
}

stylesheet gemmes som layout.css
Avatar billede sibbelone Nybegynder
07. november 2007 - 23:07 #6
html gemmes som hvad du nu vil


<!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="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       

        <title>Css bundbjælke i bunden</title>


        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <link rel="stylesheet" type="text/css" media="screen" href="style/layout.css" />
       
    </head>
    <body>

        <div class="wrapper">

            <div class="header">
                <h1>CSS Sticky Footer</h1>
            </div>

            Her kan du smide alt det indhold ind du vil
            <div class="push"></div>

        </div>

        <div class="footer">
           
        </div>

       

    </body>
</html>
Avatar billede sibbelone Nybegynder
07. november 2007 - 23:08 #7
så har du en side med en boks i toppe og en i bunde der altid fylder siden ud
Avatar billede sibbelone Nybegynder
07. november 2007 - 23:09 #8
og du behøver ikke bruge en eneste tabel
siden udvider sig også hvis du fylde mere indhold i en der kan være
Avatar billede strikerdk Novice
07. november 2007 - 23:33 #9
ja okay - det er nok en god ide at droppe de kedelige tabeller helt så. Vil du smide et svar sibbelone? :-)
Avatar billede sibbelone Nybegynder
08. november 2007 - 06:47 #10
ok fik du det til at virke
og du kan ikke helt undvær tabeller der er nogle steder hvor div ikke kan det men vil
Avatar billede strikerdk Novice
08. november 2007 - 14:19 #11
Ikke med tabellen. Men det virker fint bare med DIV´s :-)
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:36 godt råd søges Alternativ styresystem på Mac pc Af luffe1955 i Andre styresystemer
I går 11:32 Hjælp til kontrol af sygefravær Af Maja i Excel
27/0113:59 2 skærme til en stationær computer Af BIRGER i Skærme
26/0119:26 Opstart af ny computer Af Bent i Windows
25/0120:06 Hjemmeside der virker både på mobil og computer Af Strawberry i PHP
White papers
Flere white papers »