|
| Er height som % af width (eller omvendt) m~ Fra : Thor |
Dato : 10-09-03 15:49 |
|
Som overskriften antyder vil jeg gerne lave en tabel, hvor højden
følger browservinduets bredde. Dette er for at få samme
størrelsesforhold elementerne imellem, uden at lave ablolut
højde/bredde angivet i pixels.
Kan man det med html/css?
Hvis vi nu siger at nedenstående tabels højde skal være 21% af
browservinduets bredde (som også er tabelles bredde da den er
100%), hvad skal jeg så skrive på ?'s plads? Løsning i stylesheet
er også meget velkommen. :)
<table width="100%" height="?">
<tr>
<td>xxx<td>
</tr>
</table>
Få forhånd "tag" for svar ;)
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Martin Hintzmann And~ (10-09-2003)
| Kommentar Fra : Martin Hintzmann And~ |
Dato : 10-09-03 16:04 |
|
Thor wrote:
> Som overskriften antyder vil jeg gerne lave en tabel, hvor højden
> følger browservinduets bredde. Dette er for at få samme
> størrelsesforhold elementerne imellem, uden at lave ablolut
> højde/bredde angivet i pixels.
>
> Kan man det med html/css?
Nej, du skal benytte JavaScript til dette.
>
> Hvis vi nu siger at nedenstående tabels højde skal være 21% af
> browservinduets bredde (som også er tabelles bredde da den er
> 100%), hvad skal jeg så skrive på ?'s plads? Løsning i stylesheet
> er også meget velkommen. :)
>
> <table width="100%" height="?">
> <tr>
> <td>xxx<td>
> </tr>
> </table>
>
Noget a lá nedenstående:
document.getElementById('TABELLENSID').style.height = (
document.getElementById('TABELLENSID').offsetWidth / 100) * 21 );
Hintzmann c",)
| |
Thor (11-09-2003)
| Kommentar Fra : Thor |
Dato : 11-09-03 12:57 |
|
Tusind tak, jeg vil prøve at pusle med dit script, selvom jeg desværre
er helt grøn ud i Java. Hvis jeg nu benævner min tabel "tb1" og
skriver:
<table id="tb1" height="document.getElementById('tb1').style.height =
(document.getElementById('tb1').offsetWidth / 100) * 21 );">
<tr>
<td>xxx<td>
</tr>
</table>
I mit stylesheet:
#tb1
{
width: 100%;
background-color: #CCFFFF;
}
Er det så nok, eller er jeg helt galt afmarcheret?
Martin Hintzmann Andersen wrote in dk.edb.internet.webdesign.html:
> Thor wrote:
> > Som overskriften antyder vil jeg gerne lave en tabel, hvor højden
> > følger browservinduets bredde. Dette er for at få samme
> > størrelsesforhold elementerne imellem, uden at lave ablolut
> > højde/bredde angivet i pixels.
> >
> > Kan man det med html/css?
>
> Nej, du skal benytte JavaScript til dette.
>
> >
> > Hvis vi nu siger at nedenstående tabels højde skal være 21% af
> > browservinduets bredde (som også er tabelles bredde da den er
> > 100%), hvad skal jeg så skrive på ?'s plads? Løsning i stylesheet
> > er også meget velkommen. :)
> >
> > <table width="100%" height="?">
> > <tr>
> > <td>xxx<td>
> > </tr>
> > </table>
> >
>
> Noget a lá nedenstående:
> document.getElementById('TABELLENSID').style.height = (
> document.getElementById('TABELLENSID').offsetWidth / 100) * 21 );
>
> Hintzmann c",)
>
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Anders Thorsen Holm (11-09-2003)
| Kommentar Fra : Anders Thorsen Holm |
Dato : 11-09-03 13:23 |
| | |
Thor (11-09-2003)
| Kommentar Fra : Thor |
Dato : 11-09-03 14:08 |
|
Anders Thorsen Holm wrote in dk.edb.internet.webdesign.html:
> Thor wrote:
>
> > Tusind tak, jeg vil prøve at pusle med dit script, selvom jeg
> > desværre er helt grøn ud i Java.
>
> Det er heller ikke Java, men JavaScript - det er to vidt forskellige
> ting
>
> Jeg kunne vel ikke overtale dig til at klippe lidt i dine indlæg og
> skrive under det, du svarer på? Det vil gøre dine indlæg noget
> nemmere for andre at læse og besvare:
>
> < http://www.usenet.dk/netikette/citatteknik.html>
>
> --
> Anders Thorsen Holm http://www.daimi.au.dk/~zoolook/
>
---
Hmmm, begge dele siger vist desværre noget om hvor grøn jeg er...men
jeg er her jo heldigvis for at lære...
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Martin Hintzmann And~ (11-09-2003)
| Kommentar Fra : Martin Hintzmann And~ |
Dato : 11-09-03 13:27 |
|
Thor wrote:
> Tusind tak, jeg vil prøve at pusle med dit script, selvom jeg desværre
> er helt grøn ud i Java.
Blot til information, så er Java er _ikke_ det samme som JavaScript.
> Hvis jeg nu benævner min tabel "tb1" og skriver:
>
[snip kode]
>
> Er det så nok, eller er jeg helt galt afmarcheret?
>
Du kan ikke bruge javascript i attributten height på tabel elementet. Skriv det i stedet i en
script blok.
Du skal skrive noget a lá nedenstående:
<style type="text/css">
#tb1 {
width: 100%;
background-color: #CCFFFF;
}
</style>
<table id="tb1">
<tr>
<td>xxx<td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('tb1').style.height = ((document.getElementById('tb1').offsetWidth /
100) * 21 );
</script>
Jeg vil lige gøre dig opmærksom på, at bruge javascript til designe/layoute sin side, er en
dårlig vej at bevæge sig ned af.
Layout skal holdes i et stylesheet og funktion i et javascript.
Men da dit specifikke ønske ikke kan lade sig gøre i almindelig CSS, er det vel okay for denne
ene gang. Men prøv at hold dem adskilt
Hintzmann c",)
| |
Thor (11-09-2003)
| Kommentar Fra : Thor |
Dato : 11-09-03 14:44 |
|
Martin Hintzmann Andersen wrote in dk.edb.internet.webdesign.html:
> Thor wrote:
> > Tusind tak, jeg vil prøve at pusle med dit script, selvom jeg desværre
> > er helt grøn ud i Java.
>
> Blot til information, så er Java er _ikke_ det samme som JavaScript.
>
> > Hvis jeg nu benævner min tabel "tb1" og skriver:
> >
>
> [snip kode]
>
> >
> > Er det så nok, eller er jeg helt galt afmarcheret?
> >
>
> Du kan ikke bruge javascript i attributten height på tabel elementet. Skriv det i stedet i en
> script blok.
>
> Du skal skrive noget a lá nedenstående:
>
> <style type="text/css">
> #tb1 {
> width: 100%;
> background-color: #CCFFFF;
> }
> </style>
> <table id="tb1">
> <tr>
> <td>xxx<td>
> </tr>
> </table>
> <script type="text/javascript">
> document.getElementById('tb1').style.height = ((document.getElementById('tb1').offsetWidth /
> 100) * 21 );
> </script>
>
> Jeg vil lige gøre dig opmærksom på, at bruge javascript til designe/layoute sin side, er en
> dårlig vej at bevæge sig ned af.
> Layout skal holdes i et stylesheet og funktion i et javascript.
> Men da dit specifikke ønske ikke kan lade sig gøre i almindelig CSS, er det vel okay for denne
> ene gang. Men prøv at hold dem adskilt
>
>
> Hintzmann c",)
>
Ok, det vil jeg overveje. Uanset hvad, skal du have mange tak for din hjælp. Især da jeg godt
ved, at det kan være krævende at skulle skære tingene ud i pap for amatører som jeg selv... :)
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
René Lønstrup (11-09-2003)
| Kommentar Fra : René Lønstrup |
Dato : 11-09-03 15:10 |
|
Martin Hintzmann Andersen wrote:
> Du skal skrive noget a lá nedenstående:
<SNIP>
Dit script virker, men kun en gang per sideindlæsning. Hvis det skal gøres
dynamisk, i tilfælde af at brugeren resizer sin browser, skal der lidt mere
til.
Dette skulle gøre tricket:
<html>
<head>
<title>min side</title>
<style type="text/css">
#tb1 {width: 100%; background-color: #CCFFFF}
</style>
<script type="text/javascript">
function changeSize() {
// vær opmærksom på brudte linier
// nedenstående 2 skal stå på en linie
document.getElementById("tb1").style.height =
((document.getElementById("tb1").offsetWidth / 100) * 21 );
}
</script>
</head>
<body onload="changeSize();" onresize="changeSize();">
<table id="tb1">
<tr>
<td>xxx</td>
</tr>
</table>
</body>
</html>
--
Mvh René Lønstrup
min web: http://www.rel7star.dk?r=usenet
min email: se om du kan regne dén ud..
| |
Thor (11-09-2003)
| Kommentar Fra : Thor |
Dato : 11-09-03 16:28 |
|
René Lønstrup wrote in dk.edb.internet.webdesign.html:
> Martin Hintzmann Andersen wrote:
> > Du skal skrive noget a lá nedenstående:
>
> <SNIP>
>
> Dit script virker, men kun en gang per sideindlæsning. Hvis det skal gøres
> dynamisk, i tilfælde af at brugeren resizer sin browser, skal der lidt mere
> til.
>
> Dette skulle gøre tricket:
>
> <html>
> <head>
> <title>min side</title>
> <style type="text/css">
> #tb1 {width: 100%; background-color: #CCFFFF}
> </style>
> <script type="text/javascript">
> function changeSize() {
> // vær opmærksom på brudte linier
> // nedenstående 2 skal stå på en linie
> document.getElementById("tb1").style.height =
> ((document.getElementById("tb1").offsetWidth / 100) * 21 );
> }
> </script>
> </head>
> <body onload="changeSize();" onresize="changeSize();">
> <table id="tb1">
> <tr>
> <td>xxx</td>
> </tr>
> </table>
> </body>
> </html>
>
>
> --
Super at I er så hjælpsomme! Men jeg bilver lige nødt til at stille endnu et
n00b spørgsmål: Virker JavaScriptet først når siden er uploaded til en server
som understøtter dette? Jeg har forsøgt at få siden vist i IE 6.0 via Stone's
Webwriter 4 og FrontPage, men der virker det ikke rigtigt efter hensigten...
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Knud Gert Ellentoft (11-09-2003)
| Kommentar Fra : Knud Gert Ellentoft |
Dato : 11-09-03 17:55 |
|
Thor <thor@mail-online.dk> skrev :
>Super at I er så hjælpsomme! Men jeg bilver lige nødt til at stille endnu et
>n00b spørgsmål: Virker JavaScriptet først når siden er uploaded til en server
>som understøtter dette? Jeg har forsøgt at få siden vist i IE 6.0 via Stone's
>Webwriter 4 og FrontPage, men der virker det ikke rigtigt efter hensigten...
Nej, det har ikke noget med serveren at gøre.
Javascript afvikles på brugerens computer.
PS.
Klip venligst i det du svarer på, der er ingen grund til at
citere hele det foregående svar, tak.
--
Knud
| |
Thomas Dybdahl osv (11-09-2003)
| Kommentar Fra : Thomas Dybdahl osv |
Dato : 11-09-03 06:35 |
|
<snip>
>
> <table width="100%" height="?">
> <tr>
> <td>xxx<td>
> </tr>
> </table>
>
<table style="width:100%; height:21%;">? Ellers med javascript
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Thor (11-09-2003)
| Kommentar Fra : Thor |
Dato : 11-09-03 12:32 |
|
Jeg har prøvet dit forslag, men tabellens højde bliver stadig 21%
af browservinduets højde - ikke bredde. Jeg er vist nødt til at
kaste mig ud i et JavaScript... Du skal dog have tak for
indlægget alligevel. :)
Thomas Dybdahl osv wrote in dk.edb.internet.webdesign.html:
> <snip>
> >
> > <table width="100%" height="?">
> > <tr>
> > <td>xxx<td>
> > </tr>
> > </table>
> >
>
> <table style="width:100%; height:21%;">? Ellers med javascript
>
> --
> Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
> - Pædagogiske tutorials på dansk
> - Kom godt i gang med koderne
> KLIK HER! => http://www.html.dk/tutorials
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
|
|