Ik snap een html dingetje niet...

Ik heb hier onder een tabelcel... hierin staan een plaatje, dit plaatje is een puntje van 1px... moet dit puntje in de lengte groeien... wanneer de cel groter wordt (hoogte) dan moet de punt meerekken.

Hoe ga ik dit doen?

<th scope="row"><img src='images/menu_border_line.gif' width='1' dynsrc="images/menu_border_line.gif"></th>
@Arjan: Hoe bedoel je los???
niet:

ding : 1 2 3 4

maar:

ding1 : 1;
ding2 : 2;
..
..
IK heb hem nu zo, maar mag ook niet baten

.menu_line {
background-image: url(images/menu_border_line.gif);
background-repeat:repeat-y;
background-position:top;
background-position:center;
}
Hmm ja ik heb het gezien.
Ik dacht dat het een groot plaatje was ofzo dat er niet op kwam. Dus ik net kijken of het plaatje wel bestaat is het een mini bij mini plaatje... die je aan de zijkanten gebruikt.
Als je wilt dat ie helemaal tot onder aan gaat, moet je eerst een 100% hoogte maken.
.menu_line {
background-image: url(images/menu_border_line.gif);
background-repeat:repeat-y;
background-position:top;
background-position:center;
height: 100%;
}

Bedoel je dit???

Als je dit bedoeld... dan heeft het ook geen zin
Volgens mij is het niet helemaal netjes... vind het wel een nette work around :)... ik het opgelost doormiddel van 2 classes:

<?php
.menu_line_right {
background-image: url(images/menu_border_line.gif);
background-repeat:repeat-y;
background-position:top;
background-position:center;
border-right-width: 1px !important;
border-right-width: 0px;
border-left-width: 2px !important;
border-left-width: 0px;
border-right-style: solid;
border-left-style: solid;
}
.menu_line_left {
background-image: url(images/menu_border_line.gif);
background-repeat:repeat-y;
background-position:top;
background-position:center;
border-right-width: 1px !important;
border-right-width: 0px;
border-left-width: -1px !important;
border-left-width: 0px;
border-right-style: solid;
border-left-style: solid;
}
?>
waarom zo ingewikkeld, als je het plaatje als border gebruikt. Maak dan gewoon een simpele border-right aan zoals je ook hebt. Nu kan je wel beter met shorthands werken:


.menu_line_right, .menu_line_left {
    background-image: url(images/menu_border_line.gif) repeat-y top center
    border-right-width: 1px !important;
    border-left-width: 2px !important;
    border-style: solid;
}

Dat lijkt me wat korter
@Kalle, dat zal ik je vertellen... Ik heb jou voorbeeld geprobeert en die deed het niet... dus dan maar wat langer :)

Reageren