Avatar billede mini-me Nybegynder
07. juni 2005 - 13:56 Der er 4 kommentarer og
2 løsninger

Kan jeg få siden til at give sig i længden?

Hej Eksperter,

Jeg har valgt at prøve, at undgå tabeller i dette design, det er som sådan også gået fint, nu er jeg blot røget ind i et problem. I mine tre tekstruder, kommer teksten måske til at blive utrolig lang, derfor ønsker jeg at ligesom en tabel at siden giver sig i højden og tilpasser sig teksten. Problemet er bare at hvis jeg gør dette flytter mit txt-felt layer ned over "bund-rammen/baren" kan jeg på nogen måde løse dette så den har en konstant højde i forhold til txt-felterne??

<!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>Untitled Document</title>
<style type="text/css">
    <!--
    #TopBar
    {
    position:absolute;
    width:756px;
    height:80px;
    z-index:1;
    left: 0px;
    top: 0px;
    background-image:url(topbar.jpg);
    border: 1px solid #dfdfdf;
    }
   
    #Layer2
    {
    position:absolute;
    width:187px;
    height:187px;
    z-index:2;
    left: 567px;
    top: 0;
    background-color: #174A65;
       
    }
   
    #Layer3
    {
    position:absolute;
    width:758px;
    height:20px;
    z-index:3;
    left: 0px;
    top: 80px;
    background-color: #B7C822;
    }
   
    #Layer4
    {
    position:absolute;
    width:758px;
    height:146px;
    z-index:4;
    top: 100px;
    left: 0px;
    }
   
    #Layer21
    {
    position:absolute;
    width:758px;
    height:4px;
    font-size:1px;
    z-index:5;
    left: 0px;
    top: 246px;
    background-color: #879A94;
    }
   
    #Layer6
    {
    position:absolute;
    width:758px;
    height:4px;
    z-index:6;
    top: 250px;
    background-color: #BACAD7;
    }
   
    #Layer7
    {
    position:absolute;
    width:758px;
    height:4px;
    z-index:12;
    top: 246px;
    background-color: #879A94;
    }
   
    #Layer8
    {
    position:absolute;
    width:250px;
    height:10px;
    z-index:8;
    top: 254px;
    left: 0px;
    background-color: #B7C822;
    }
   
    #Layer9
    {
    position:absolute;
    width:250px;
    height:10px;
    z-index:9;
    left: 254px;
    top: 254px;
    background-color: #B7C822;
    }
   
    #Layer10
    {
    position:absolute;
    width:250px;
    height:10px;
    z-index:10;
    left: 508px;
    top: 254px;
    background-color: #B7C822;
    }
   
    #Layer11
    {
    position:absolute;
    width:248px;
    height:226px;
    z-index:11;
    left: 0;
    top: 274px;
    background-color:#FFFFFF;
    border-right: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    }
   
    #Layer12
    {
    position:absolute;
    width:248px;
    height:226px;
    z-index:11;
    left: 254px;
    top: 274px;
    background-color:#FFFFFF;
    border-right: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    }
   
    #Layer13
    {
    position:absolute;
    width:248px;
    height:226px;
    z-index:11;
    left: 508px;
    top: 274px;
    background-color: #FFFFFF;
    border-right: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    }
    #Layer14
    {
    position:absolute;
    width:250px;
    height:4px;
    z-index:5;
    left: 254px;
    top: 500px;
    background-color: #879A94;
    }
    #Layer15
    {
    position:absolute;
    width:250px;
    height:4px;
    z-index:5;
    left: 508px;
    top: 500px;
    background-color: #879A94;
    }
    #Layer16
    {
    position:absolute;
    width:758px;
    height:10px;
    z-index:20;
    left: 0px;
    top: 504px;
    background-color: #ffffff;
    }
    #ContentLayer1
    {
    position:absolute;
    width:190px;
    z-index:21;
    left: 30px;
    top: 300px;
    background-color: #ffffff;
    }
    #ContentLayer2
    {
    position:absolute;
    width:190px;
    z-index:21;
    left: 284px;
    top: 300px;
    background-color: #ffffff;
    }
    #ContentLayer3
    {
    position:absolute;
    width:190px;
    z-index:21;
    left: 538px;
    top: 300px;
    background-color: #ffffff;
    }
    #Layer17
    {
    position:absolute;
    width:250px;
    height:4px;
    z-index:5;
    left: 0px;
    top: 500px;
    background-color: #879A94;
    }
   
    .Heading
    {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#000000;
    }
    .Text
    {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#000000;
    }
    .Link
    {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#B7C822;
    }
    .Menu
    {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#ffffff;
    text-indent: 20px;
    vertical-align:bottom;
    }

    -->
  </style>
<body style="text-align: center;">
<div style="position: relative; margin: auto; width: 754px; text-align: left;">
  <div id="TopBar"><img src="SiteImages/topbar.gif" width="756" height="80"></div>

  <div id="Layer3" class="Menu"></div>
  <div id="Layer4" >
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="758" height="146">
      <param name="movie" value="SiteImages/web.swf">
      <param name="quality" value="high">
    </object>
  </div>
  <div id="Layer5" ></div>
  <div id="Layer21"></div>
  <div id="Layer8"><img src="SiteImages/top1.gif" width="250" height="20" alt=""></div>
  <div id="Layer9"><img src="SiteImages/top2.gif" width="250" height="20" alt=""></div>
  <div id="Layer10"><img src="SiteImages/top3.gif" width="250" height="20" alt=""></div>
  <div id="Layer11"></div>
  <div id="Layer12" ></div>
  <div id="Layer13" ></div>
  <div id="Layer14" ></div>
  <div id="Layer15" ></div>
  <div id="Layer16" ></div>
  <div id="Layer17" ></div>
  <div id="ContentLayer1">
      <strong class="Heading">txt</strong><span class="Link"></span></div>
  <div id="ContentLayer2" ><strong class="Heading">tx3</strong><span class="Text"></span></div>
  <div id="ContentLayer3" ><strong>txt </strong></div>
</div>
Avatar billede roenving Novice
07. juni 2005 - 14:06 #1
Nej, så skal du bruge en tabel !o]

-- nåeh, ja, man kan vel kaste sig ud i en større omgang javascript, men det er vel ikke formålet med at undgå tabeller, at tilgængeligheden skal blive mindre ...

-- iøvrigt siger bare din css-opstilling, at det er en særdeles uhensigtsmæssig måde at benytte sig af divs, for c'et i css betyder cascading, så grundideen i css er, at man i et hierarki opstiller nogle regler, som så arves ned i de indeholdte elementer, og alene benytter sig af id-selektorer, når der ikke er fornuft i at bruge en class-selektor (f.eks. i et overordnet objekt, som indeholder alt andet !-)
Avatar billede mini-me Nybegynder
07. juni 2005 - 14:09 #2
Hehe okay, jamen jeg må tilbage til mine tabeller så :,-( var lige så glad for at have fået det her til at virke ;-)
Avatar billede mini-me Nybegynder
07. juni 2005 - 14:09 #3
smid et svar...
Avatar billede roenving Novice
07. juni 2005 - 14:18 #4
Men behold selv de fleste af dine point !-)

Velbekomme '-)
Avatar billede mini-me Nybegynder
07. juni 2005 - 14:21 #5
Okay ;-)
Avatar billede roenving Novice
07. juni 2005 - 14:32 #6
Tak for point ;~}
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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