HTML Styles

Pagina: 1
Acties:

  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
In html heb ik de volgende code

code:
1
2
3
4
5
6
7
8
9
<table border='1'>
<tr>
<td rowspan='2' height='100' width='100'>figuur</td>
<td style='height: 1px' height='1'>hoofd</td><td style='height: 1px' height='1'>nog wat</td>
</tr>
<tr>
<td style='height: 100%' height='100%' colspan='2'>omschrijving</td>
</tr>
</table>


En ik krijg het dus niet voor elkaar om de bovenste regel smal te houden en de onderste het maximale. Hij zet de scheiding iedere keer in het midden. Iemand id-en?

Verwijderd

?? Waarom 2x height achter elkaar? Je moet voor IE6.0 altijd de maateenheid opgeven behalve voor hoogte. Welke scheiding bedoel je trouwens? Een tabel is een vierkant blok, "ontbrekende" cellen moet je wel opgeven.

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Wat heb je zelf al opgezocht? Geprobeerd? Bedacht?
Dan is deze code euhmm... grmbl... niet helemaal juist.
Waarom in Gotsnaam height='1' ??
Btw.. wat voor content moet dr in de "hoofd" en "nog wat"?

EDIT:
height van 100% werkt niet echt lekker in alle browsers.. :/

[ Voor 60% gewijzigd door OkkE op 24-04-2003 21:35 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Het kan trouwens ook met DIVs, vind ik heel wat fijner werken..
code:
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>DIVs</title>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;height:100px;width:100px;border:1px solid black;">img</div>
<div style="position:absolute;left:100px;top:0px;height:30px;width:50px;border:1px solid black;">hoofd</div>
<div style="position:absolute;left:150px;top:0px;height:30px;width:50px;border:1px solid black;">nogwat</div>
<div style="position:absolute;left:100px;top:30px;height:70px;width:100px;border:1px solid black;">derest</div>
</body>
</html>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Verwijderd

DIV's zijn mooier, maar met meerdere "vlakken" een crime om te positioneren.

Maar woorden "hoofd" en "nog wat" ga je niet redden in 1px.

Bovendien heeft de bovenste rij 3 kolommen en de onderste maar 2. Een browser bakt daar iets random van..

[ Voor 38% gewijzigd door Verwijderd op 24-04-2003 21:44 ]


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Verwijderd schreef op 24 April 2003 @ 21:42:
DIV's zijn mooier, maar met meerdere "vlakken" een crime om te positioneren.
Hangt dr vanaf, 4 DIVs zoals hij wil, dat gaat nog wel.. maar dat is vast niet het enigste wat op de pagina moet. Dan is het al lastiger idd.
Maar woorden "hoofd" en "nog wat" ga je niet redden in 1px.
Nee idd. Dat vond ik ook al zo vreemd.. maar daar moet vast iets anders (of nix: & nbsp; ) komen.
Bovendien heeft de bovenste rij 3 kolommen en de onderste maar 2. Een browser bakt daar iets random van..
Agree. Maar die hele HTML/CSS (:?) code is bagger als je het mij vraagt...
Vind dit hele topic weer een beetje "Willen jullie even....", maar goed. :X

[ Voor 5% gewijzigd door OkkE op 24-04-2003 21:53 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Verwijderd

Als hij nu had gevraagt om een floating menubalk met uitklapbare submenu's zonder javascripts dan hadden we tenminste een uitdaging gehad.

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Haha. Inderdaad. :D
Maar ik vind TS wel errug stil...

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:24

crisp

Devver

Pixelated

Misschien overbodig maar toch:

Tabellen die vaste afmetingen moeten hebben, maar die bol staan van row- en colspans is vragen om problemen. Een browser gaat niet proberen om de tabel helemaal precies zo te krijgen als jij hebt aangegeven omdat dat met row- en colspans nogal complex is. Hij 'gokt' dus maar wat, en in 90% van de gevallen is dat niet wat jij voor ogen had.
2 oplossingen: geneste tabellen gaan gebruiken, of gebruik maken van div's

Verder is het wel degelijk mogelijk een tekst in een cel te plaatsen die maar 1 pixel hoog is, zolang je de font-size maar op 1 pixel zet en er voor zorgt dat de cel geen padding heeft :)

Intentionally left blank


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

crisp schreef op 24 April 2003 @ 22:18:Verder is het wel degelijk mogelijk een tekst in een cel te plaatsen die maar 1 pixel hoog is, zolang je de font-size maar op 1 pixel zet en er voor zorgt dat de cel geen padding heeft :)
Maar of het dan nog te lezen is... nee.
;)

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • creative8500
  • Registratie: September 2001
  • Laatst online: 03-01 16:54

creative8500

freedom.

Misschien werkt het al maar nog even een aanvulling:
om een div 1px hoog te maken doe ik het volgende:
code:
1
2
3
height: 1px;
font-size: 1px;
line-height: 1px; /* deze is dus de aanvulling */
crisp schreef op 24 April 2003 @ 22:18:
Misschien overbodig maar toch:

Tabellen die vaste afmetingen moeten hebben, maar die bol staan van row- en colspans is vragen om problemen. Een browser gaat niet proberen om de tabel helemaal precies zo te krijgen als jij hebt aangegeven omdat dat met row- en colspans nogal complex is. Hij 'gokt' dus maar wat, en in 90% van de gevallen is dat niet wat jij voor ogen had.
2 oplossingen: geneste tabellen gaan gebruiken, of gebruik maken van div's

Verder is het wel degelijk mogelijk een tekst in een cel te plaatsen die maar 1 pixel hoog is, zolang je de font-size maar op 1 pixel zet en er voor zorgt dat de cel geen padding heeft :)

  • Rhapsody
  • Registratie: Oktober 2002
  • Laatst online: 13:18

Rhapsody

In Metal We Trust

Div's zijn eenvoudiger, je kan het ook relatief positioneren. en je kan dmv overflow: hidden; aangeven dat de div een vaste grootte houdt, ook als de tekst er niet in past.

🇪🇺 pro Europa!


  • creative8500
  • Registratie: September 2001
  • Laatst online: 03-01 16:54

creative8500

freedom.

Misschien werkt het al maar nog even een aanvulling:
om een div 1px hoog te maken doe ik het volgende:
code:
1
2
3
height: 1px;
font-size: 1px;
line-height: 1px; /* deze is dus de aanvulling */
crisp schreef op 24 April 2003 @ 22:18:
Verder is het wel degelijk mogelijk een tekst in een cel te plaatsen die maar 1 pixel hoog is, zolang je de font-size maar op 1 pixel zet en er voor zorgt dat de cel geen padding heeft :)
En nog iets: die padding werkt niet goed in Netscape:
Afbeeldingslocatie: http://www.w3.org/TR/REC-CSS2/images/boxdim.gif
Als je bij internet explorer de width aangeeft van een divje (250px bijv.), dan stelt hij dat de ruimte tussen de borders (LB en RB) 250 pixels is.
Netscape daarentegen vindt dat het content-vak 250 pixels breed moet zijn. Dan krijgt de padding hetzelfde effect als de margin (tenzij je borders gebruikt).

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:24

crisp

Devver

Pixelated

creative8500 schreef op 24 April 2003 @ 23:12:
[...]

En nog iets: die padding werkt niet goed in Netscape:
[...]
Als je bij internet explorer de width aangeeft van een divje (250px bijv.), dan stelt hij dat de ruimte tussen de borders (LB en RB) 250 pixels is.
Netscape daarentegen vindt dat het content-vak 250 pixels breed moet zijn. Dan krijgt de padding hetzelfde effect als de margin (tenzij je borders gebruikt).
Nee, IE doet het fout. Volgens w3c zijn height en width namelijk de contentheight en contentwidth, dat is dus exclusief padding en borders.
IE gebruikt het zogenaamde padding-box principe waarbij de width en height inclusief padding is.
Je kan Mozilla/NS dwingen het zelfde model te gebruiken dmv de css tag:

-moz-box-sizing: padding-box;

zie ook: http://www.xs4all.nl/~ppk/css2tests/box.html

:)

Ik meen trouwens dat IE6 in XHTML strict mode wel goed omgaat met width/height en padding

[ Voor 7% gewijzigd door crisp op 24-04-2003 23:30 ]

Intentionally left blank


Verwijderd

Gister nog eens even de IE6.0 helpfile gelezen op internet. Ze praten daar alleen maar over CSS1 en bijna nergens over CSS2.

Op zich kan ik me redelijk redeen alleen IE op de MAc is een drama, kan mijn ouders mijn website nog steeds niet laten zien. (hun hebben een MAC-Cube) :(

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:24

crisp

Devver

Pixelated

Verwijderd schreef op 24 april 2003 @ 23:50:
Gister nog eens even de IE6.0 helpfile gelezen op internet. Ze praten daar alleen maar over CSS1 en bijna nergens over CSS2.

Op zich kan ik me redelijk redeen alleen IE op de MAc is een drama, kan mijn ouders mijn website nog steeds niet laten zien. (hun hebben een MAC-Cube) :(
IE mist nog een hoop CSS2 ondersteuning ja, en IE op de MAC is inderdaad een drama (raadpleeg de zoek maar eens voor wat verhelderende opmerkingen van mede-W&G-ers).
Kan je je ouders niet Mozilla/Firebird aansmeren?

Intentionally left blank


Verwijderd

Zou ik wel willen, maar die oudjes zijn zo blij met hun cube en snappen net een beetje hoe ze de grote snelweg op moeten. Als ik zie dat mijn moeder zo'n 500 links onder favorieten heeft staan, dan zal ff Mozilla installeren de nodige wrevel bezorgen. Bovendien snap ik zelf weer niks van zo'n Cube en doet iemand anders de service aan dat ding. Du sik laat het maar zo.

Die man is trouwens erg anti Microsoft, maar heeft wel outlook en IE geinstalleerd op de Cube |:(

  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
De code komt uit een database en is dus dynamisch. Bovenin komt een titel, rechts een prijs, onder een omschrijving en links een figuur, waarvan ik de afmeetingen ook niet weet.

Ik heb dus geen id wat de afmetingen van elke cel moeten zijn. Normaal gesproken als je de height van een cel op 1 zet, maakt hij hem gewoon zo klein mogelijk. Maar door de span lukt dat nu dus niet.

Het is hier dus niet mogelijk om met divs te werken, omdat ik ook de positie niet weet van de volgende "tabel". Bovendien zitten bij sommige records wel plaatjes, maar bij anderen niet en dan moet de figuur niet geplaatst worden en moet de rest doorgeschoven worden naar links.
Verder is het wel degelijk mogelijk een tekst in een cel te plaatsen die maar 1 pixel hoog is, zolang je de font-size maar op 1 pixel zet en er voor zorgt dat de cel geen padding heeft
Bij mij maakt hij hem altijd zo klein mogelijk.
Als hij nu had gevraagt om een floating menubalk met uitklapbare submenu's zonder javascripts dan hadden we tenminste een uitdaging gehad.
Ik heb nog geen oplossing, nogsteeds geen uidaging?
Bovendien heeft de bovenste rij 3 kolommen en de onderste maar 2. Een browser bakt daar iets random van..
Als je deze indeling wilt hebben voor een tabel, moet je deze code hebben.

Oh de HTML/CSS combinatie is idd bagger. Ik heb dit gedaan omdat eh... wieweet, misschien werkte het dan wel 8)7

[ Voor 19% gewijzigd door Fles op 25-04-2003 09:10 ]


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Graveheart schreef op 25 April 2003 @ 08:59:
Ik heb nog geen oplossing, nogsteeds geen uidaging?

Oh de HTML/CSS combinatie is idd bagger. Ik heb dit gedaan omdat eh... wieweet, misschien werkte het dan wel 8)7
En waarom niet gewoon zo:
code:
1
2
3
4
5
6
7
8
9
10
11
12
<table>
<tr>
   <td>
      img
   </td>
   <td style="vertical-align:top;">
      hoofd + nogiets
      <br>
      beschrijving
   </td>
</tr>
</table>
Oké, het is misschien niet 100% zoals je wilt.. maar het werkt en ziet er nog in (bijna) elke browser goed uit ook.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
Heb ik ook al aan gedacht en dit wilde ik ook als escape gebruiken. Alleen zit ik dan met de prijs die niet rechts is uitgelijnd.

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:24

crisp

Devver

Pixelated

Graveheart schreef op 25 April 2003 @ 08:59:
Ik heb nog geen oplossing, nogsteeds geen uidaging?

[...]
crisp schreef op 24 April 2003 @ 22:18:
[...]
2 oplossingen: geneste tabellen gaan gebruiken, of gebruik maken van div's
[...]
ps, div's in tabellen kan ook ;)

[ Voor 6% gewijzigd door crisp op 25-04-2003 09:15 ]

Intentionally left blank


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Graveheart schreef op 25 april 2003 @ 09:13:
Heb ik ook al aan gedacht en dit wilde ik ook als escape gebruiken. Alleen zit ik dan met de prijs die niet rechts is uitgelijnd.
Het is niet de meest mooie oplossing, en ook zeker niet foutloos, maar het werkt (enig zins..):
code:
1
2
3
4
5
6
7
8
9
10
11
12
<table>
<tr>
    <td style="width:100px; border:2px solid black;">
        img
    </td>
    <td style="vertical-align:top; width:200px; border:2px solid blue;">
        <div style="border:2px solid green;">hoofd</div>
        <div style="position:relative; left:100px; top:-20px; border:2px solid red;">nogiets</div>
        beschrijving beschrijving beschrijving beschrijving beschrijving beschrijving
    </td>
</tr>
</table>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Verwijderd

Hm. Mag ik vragen wat nu precies het probleem nog is? Werkt het al?

Verwijderd

Graveheart schreef op 25 April 2003 @ 09:13:
Heb ik ook al aan gedacht en dit wilde ik ook als escape gebruiken. Alleen zit ik dan met de prijs die niet rechts is uitgelijnd.
gebruik dan dit:
code:
1
<align="char" char=".">


dan staat alles uitgelijnd op de punt (of komma)

  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
Erm, ik heb hem nu met twee cellen naast elkaar, dus zonder de span en ik wil dus <align='char' char=','> gebruiken, maar hoe werkt dit moet hier niet een positie bij?
Ik heb de align tag nog nooit gezien en ik kan hem ook niet vinden.


Wat ik nu heb:
code:
1
<align='char' char=','>1,00</align>

maar hoe laat ik dit rechts uitlijnen?

[ Voor 23% gewijzigd door Fles op 25-04-2003 13:18 ]


  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
Erm, volgens mij heb je het niet helemaal begrepen...

De artikel naam, prijs en artikel omschrijving staan in 1 cel. De artikel naam en de prijs staan dus gewoon tegen elkaar aan, maar nu wil ik de prijs helemaal rechts hebben en de artikel naam helemaal links. Uit elkaar dus.

Align ken ik wel, maar niet als tag zoals jij het zei. Misschien moet jij die link maar ff lezen :*)

[ Voor 16% gewijzigd door Fles op 25-04-2003 14:55 ]


Verwijderd

waarom 2 of 3 dingen in een cel proppen om vervolgens stad en land af te zoeken naar een oplossing om ze te scheiden? Tabellen gebruik je puur om zaken netjes te scheiden /gescheiden te houden. Elk afzonderlijk stukje zet je in een cel.

  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
Eh... heb je het probleem wel gelezen? Lees dat eerst maar es, dan heb je door dat het niet werkt alles appart in een cel.

  • Johnny
  • Registratie: December 2001
  • Laatst online: 22-08 21:11

Johnny

ondergewaardeerde internetguru

Graveheart schreef op 25 april 2003 @ 13:16:
Erm, ik heb hem nu met twee cellen naast elkaar, dus zonder de span en ik wil dus <align='char' char=','> gebruiken, maar hoe werkt dit moet hier niet een positie bij?
Ik heb de align tag nog nooit gezien en ik kan hem ook niet vinden.


Wat ik nu heb:
code:
1
<align='char' char=','>1,00</align>

maar hoe laat ik dit rechts uitlijnen?
Ik heb de <align> tag ook nog nooit gezien. Gebruik gewoon <div> met daarin align="right", of nog beter style="text-align: right"

zet de tekst die links moet in een andere div die je links uitlijnt.

Maar dan vind ik het nog steeds raar dat je het niet in aparte cellen zet

[ Voor 22% gewijzigd door Johnny op 26-04-2003 11:42 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.


  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
Het probleem was juist dat ik de hoogte van de cellen niet in kan stellen. Hij zet de scheiding van de cellen altijd in het midden en dat moet niet. Plak de tablel als boven staat maar es in een html bestand, dan zul je zien wat het probleem is. Ik wilde idd ook al divs gebruiken in de tabel om de uitlijning te verzorgen.

  • Johnny
  • Registratie: December 2001
  • Laatst online: 22-08 21:11

Johnny

ondergewaardeerde internetguru

Graveheart schreef op 26 April 2003 @ 12:57:
Het probleem was juist dat ik de hoogte van de cellen niet in kan stellen. Hij zet de scheiding van de cellen altijd in het midden en dat moet niet. Plak de tablel als boven staat maar es in een html bestand, dan zul je zien wat het probleem is. Ik wilde idd ook al divs gebruiken in de tabel om de uitlijning te verzorgen.
zoiets?

code:
1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr style="height: 101px">
<td rowspan="2" style="height: 101px; width: 100px;">figuur</td>
<td style="height: 1px; overflow: hidden;">hoofd</td>
<td style="height: 1px; overflow: hidden;">nog wat</td>
</tr>
<tr>
<td style="height: 100px; width: 100px;" colspan="'2">omschrijving</td>
</tr>
</table>

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.


  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
Nee, de onderste moet nog een colspan hebben van 2. En dan werkt het niet meer.

  • Johnny
  • Registratie: December 2001
  • Laatst online: 22-08 21:11

Johnny

ondergewaardeerde internetguru

code:
1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr style="height: 101px">
<td rowspan="2" style="height: 101px; width: 100px;">figuur</td>
<td style="height: 1px; overflow: hidden;">hoofd</td>
<td style="height: 1px; overflow: hidden;">nog wat</td>
</tr>
<tr>
<td style="height: 100px; width: 100px;" colspan="2">omschrijving</td>
</tr>
</table>


Er zat een ' teveel in, nu moet hij het wel doen Graveheart!

[ Voor 57% gewijzigd door Johnny op 26-04-2003 17:53 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.


  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023
Ja deze werkt idd, maar er is nog 1 probleem waar je geen rekening mee hebt gehouden. Ik weet de maten van de figuur en de lengte van de tekst niet. Je hebt alle maten nu vast neer gezet en dat mag dus niet. Als er geen figuur is of de figuur is heel klein dan moet de onderste cell niet 100px hoog zijn.
Pagina: 1