Avatar billede Max Novice
02. april 2004 - 23:14 Der er 8 kommentarer og
1 løsning

Relative bredder på tabeller?

Hej alle.

Æv, mit forrige spørgsmål blev åbenbart ikke postet. Ingen sure miner; jeg prøver bare igen..:

Jeg har lidt problemer med absolut positionering af to tabeller ved siden af hinanden. Den første skal fylde et bestemt (afgrænset) område på x-aksen af skærmen, mens den sidste, som er placeret umiddelbart til højre for, skal udfylde resten af x-aksen mod højre. Lyder det skørt? Jeg prøver lige igen. Meningen er at jeg vil have en tabel med grå baggrund som er centreret. Den tabel skal have et vist indhold (som så ser ud som om det er centreret) mens det grå område skal fortsætte helt ud til højre kant af skærmen. Her er det stykke kode jeg prøver at får til at makke ret:

<!-- Header -->
<TABLE STYLE="position:absolute;left:265px;top:100px;z-index:98" CLASS="header" COLS="1" HEIGHT="100" WIDTH="600">
<TR>
  <TD>
  Overskrift
  </TD>
</TR>
</TABLE>
<TABLE STYLE="position:absolute;left:865px;top:100px;z-index:98" CLASS="header" COLS="1" HEIGHT="100" WIDTH="100%">
<TR>
  <TD>
  </TD>
</TR>
</TABLE>

.. og klassen "header" i min .css fil:

.header {background: #515151;
        border: 0px;
        text-align: center;
        color: #FFFFFF;
        font-size: 24px;
        font-weight: none}     


Håber I kan hjælpe.

Mvh.
/Mnc
Avatar billede roenving Novice
02. april 2004 - 23:20 #1
Det lyder som den opgave, som er enormt simpel at løse med frames:

<frameset col="*,600,*">
  <frame src="venstre.html" frameborder="0" framespacing="0">
  <frame src="content.html" name="main" frameborder="0" framespacing="0">
  <frame src="hojre.html" frameborder="0" framespacing="0">
</frameset>

-- men det er måske ikke det du vil ?-)
Avatar billede Max Novice
02. april 2004 - 23:25 #2
Jepjep, men nul frames.. :-/
Dette *skal* desværre løses uden brug af frames.

/Mnc
Avatar billede roenving Novice
02. april 2004 - 23:37 #3
Okay !-)

Men centreret betyder, at du ikke ved hvor meget plads, der er i hver side, derfor skulle jeg lige spørge ...

Men præcis fordi, du ikke kender bredden af andet end din centrerede ting er det faktisk næsten umuligt !o]

-- men vi kan da hacke en smule:

læg med z-index:0 en div i 100% bredde og den grå baggrund, du vil have til højre.
læg med z-index:1 en div, som er 600px bred (=din centrerede tabels bredde !-) med den baggrund, du vil have til venstre
Indsæt din tabel i en div, som har den nødvendige bredde og margin-left:auto og margin-right:auto samt z-index:2

Lav alle diverne 100% høje med style="height:100%" (fordi height ikke findes på table medmindre det sættes som style, gør vi det for alle elementer)

Det kræver så, at du bruger den rigtige doctype, selv bruger jeg:

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

-- samt at du også giver html og body en højde:

html,body{height:100%;}
Avatar billede roenving Novice
02. april 2004 - 23:45 #4
En hurtig skitse:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style/style.css">
<style type="text/css">
html,body{height:100%;margin:0;padding:0;}
#bag{position:absolute;z-index:-1;height:100%;width:100%;background:#999;}
#bag2{position:absolute;z-index:-1;height:100%;width:600px;background:#990;}
#main{position:absolute;z-index:0;height:100%;width:100%;background:transparent;text-align:center;}
#content{position:relative;z-index:0;height:100%;width:600px;margin-left:auto;margin-right:auto;background:#999;text-align:left;border-right:1px solid #660;}

</style>
<script language="javascript" type="text/javascript">
var x
//tdat.onclick = function anonymous{ alert('virker');};
</script>
</head>
<body>
<div id="bag"></div>
<div id="bag2"></div>
<div id="main">
<div id="content"></div></div>

</body>

</html>
Avatar billede Max Novice
02. april 2004 - 23:53 #5
Ok, det kunne faktisk bruges. Jeg fandt en anden (lidt mere snyde-agtigt) måde at gøre det på vha. z-index, men hvis du svarer, får du point. :)

Tak for hjælpen.
/Mnc
Avatar billede roenving Novice
02. april 2004 - 23:59 #6
Hvordan ?-)

Velbekomme '-)
Avatar billede Max Novice
03. april 2004 - 00:02 #7
Jeg smed bare en tabel bagerst med den rigtige farve, og gav den width 100%, og så dækkede jeg bare det venstre stykke med en højere z-index, og smed til sidst den midterste tabel ind hvor den passede.

/Mnc
Avatar billede roenving Novice
03. april 2004 - 00:06 #8
Altså principielt det samme, som jeg lavede, men alt andet lige vil jeg anbefale, at du bruger div'erne i stedet, for tabellerne kan give andre knuder, divs er skabt til at opføre sig sådan !-)

Tak for points ;~}
Avatar billede Max Novice
03. april 2004 - 00:10 #9
np.
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