[HTML/CSS] Code inkorten, mogelijk?

[NitroX infinity]

Ik ben momenteel bezig met een ontwerpje voor een site waarbij ronde hoeken worden gebruikt in de tabellen. Uiteraard wordt dit gedaan met afbeeldingen:


^thumbnail^

Daarbij gebruik ik de volgende code:

HTML:

<DIV CLASS="header">
    <TABLE CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
        <TR>
            <TD CLASS="z3topleft"></TD>
            <TD CLASS="z3top"></TD>
            <TD CLASS="z3topright"></TD>
        </TR>
        <TR>
            <TD CLASS="z3left"></TD>
            <TD CLASS="z3center">&nbsp;</TD>
            <TD CLASS="z3right"></TD>
        </TR>
        <TR>
            <TD CLASS="z3bottomleft"></TD>
            <TD CLASS="z3bottom"></TD>
            <TD CLASS="z3bottomright"></TD>
        </TR>
    </TABLE>
</DIV>

Cascading Stylesheet:

DIV.header {
    position: absolute;
    width: 500px;
    height: 80px;
    left: 10px;
    top: 10px;
    border: 0px;
    z-index: -3; }

TD.z3topleft {
    width: 7px;
    height: 7px;
    background-image: url('site/images/z3topleft.png'); }

TD.z3top {
    width: *%;
    height: 7px;
    background-image: url('site/images/z3top.png'); }

TD.z3topright {
    width: 7px;
    height: 7px;
    background-image: url('site/images/z3topright.png'); }

TD.z3left {
    width: 7px;
    height: *%;
    background-image: url('site/images/z3left.png'); }

TD.z3center {
    width: *%;
    height: *%;
    vertical-align: top;
    background-color: #CEEAFF; }

TD.z3right {
    width: 7px;
    height: *%;
    background-image: url('site/images/z3right.png'); }

TD.z3bottomleft {
    width: 7px;
    height: 7px;
    background-image: url('site/images/z3bottomleft.png'); }

TD.z3bottom {
    width: *%;
    height: 7px;
    background-image: url('site/images/z3bottom.png'); }

TD.z3bottomright {
    width: 7px;
    height: 7px;
    background-image: url('site/images/z3bottomright.png'); }

Ik heb al enkele dingen uitgeprobeerd en tientallen topics hier op GoT doorgespit maar ik kom er maar niet uit. Kan deze code korter? Het liefst dat ik maar gebruik hoef te maken van één cell in elke div en dat ik voor alle vier de hoeken maar één keer de breedte en hoogte hoef op te geven (is toch constant).

[Verwijderd]

http://www.alistapart.com/articles/mountaintop/

[Rowanov]

Mountaintop is nou niet precies het toonbeeld van een goede oplossing imho. Mijn vraag is of je gebruik maakt van vaste afmetingen voor de breedte van je blokken. Als je dit doet, kan je namelijk met een gif plaatje (met alleen de zwarte rand) voor de bovenkant en de onderkant af. Dan kom je uit op 2 gifjes per verschillende breedte. Ook zou ik zowieso de tabel pertinent niet gebruiken voor de opmaak en gewoon css gebruiken icm. semantische html.

[Osxy]

Mischien is http://www.html.it/articoli/niftycube/index.html een idee. Zeer simpel en weinig code

[Verwijderd]

hier een voorbeeld van hoe je dit zonder tabellen doet.

[skate master]

Op onderstaande manier zou ik het doen.

PHP:

<DIV id=header>
<DIV id=header_tekst>
Hier je header tekst!
</DIV>
</DIV>

css:

PHP:

#header {
width: breedtepx;
height: hoogtepx;
background-image: url('site/images/header.png');
}

#header_tekst {
top: 10px;
left: 10px;
}

Wat je nu doet is je voorbeeld afbeelding als losse rechthoeken met afgeronde hoeken als
achtergrond van je div instellen.
Dan zet je in een apparte div wie je dmv top en left op de juiste plaats zet je tekst in de header.
Er kan op een enkele plaats iets niet helemaal correct zijn, maar je bent een stuk in de richting.

[ Voor 5% gewijzigd door skate master op 22-05-2006 13:22 . Reden: Hmm net te laat ]

[Verwijderd]

osxy schreef op maandag 22 mei 2006 @ 13:19:
Mischien is http://www.html.it/articoli/niftycube/index.html een idee. Zeer simpel en weinig code

Tjee, deze is wel erg nifty handig!
/me bookmarked

[bartje321]

skate master schreef op maandag 22 mei 2006 @ 13:21:
[...]

doe het dan zo:

Op onderstaande manier zou ik het doen.

code:

<div class="header">
  Hier je header tekst!
</div>

css:

code:

.header {
  width: breedtepx;
  height: hoogtepx;
  background-image: url('site/images/header.png');
  margin: 10px;
  overflow:hidden;
}

[ Voor 10% gewijzigd door bartje321 op 22-05-2006 13:29 ]

[Osxy]

Ik gebruik niftycubes nu al een tijdje en het is echt ideaal voor veel meer dan alleen ronde hoeken, ook div's gelijke hoogte geven is erg handig (bijvoorbeeld als je 2 menu's wilt links en rechts )

[MaZo]

Ik zou zoiezo van die tabellen af stappen als ik jou was.

[NitroX infinity]

Rowanov schreef op maandag 22 mei 2006 @ 13:15:
Mountaintop is nou niet precies het toonbeeld van een goede oplossing imho. Mijn vraag is of je gebruik maakt van vaste afmetingen voor de breedte van je blokken. Als je dit doet, kan je namelijk met een gif plaatje (met alleen de zwarte rand) voor de bovenkant en de onderkant af. Dan kom je uit op 2 gifjes per verschillende breedte. Ook zou ik zowieso de tabel pertinent niet gebruiken voor de opmaak en gewoon css gebruiken icm. semantische html.

Bedankt, dit zou opzich al een stuk minder code moeten opleveren.

osxy schreef op maandag 22 mei 2006 @ 13:19:
Mischien is http://www.html.it/articoli/niftycube/index.html een idee. Zeer simpel en weinig code

Wel ideaal natuurlijk maar ik heb toch liever geen JavaScript.

Verwijderd schreef op maandag 22 mei 2006 @ 13:20:
hier een voorbeeld van hoe je dit zonder tabellen doet.

Dat is mij iets teveel afbeelding wat gebruikt wordt. maar toch interessant genoeg om te bookmarken.

skate master schreef op maandag 22 mei 2006 @ 13:21:
Op onderstaande manier zou ik het doen.

[...]


Wat je nu doet is je voorbeeld afbeelding als losse rechthoeken met afgeronde hoeken als
achtergrond van je div instellen.
Dan zet je in een apparte div wie je dmv top en left op de juiste plaats zet je tekst in de header.
Er kan op een enkele plaats iets niet helemaal correct zijn, maar je bent een stuk in de richting.

Zie mijn vorige reactie hierboven.

MaZo schreef op maandag 22 mei 2006 @ 13:31:
Ik zou zoiezo van die tabellen af stappen als ik jou was.

Ja, dat zou ik ook wel graag willen maar dan kom ik zelf bij grote achtergrond afbeeldingen uit en dan heb ik toch liever een boel code met kleine afbeeldingen (flexibeler).

[Der Rudi]

Zie ook http://www.sitepoint.com/...id=5&issue=20&format=html voor een heel goed artikel over afgeronde hoeken (kopje: Spanky Corners: Right Round, Baby verderop op pagina)

En er is ook een code generator http://tools.sitepoint.com/spanky/index.php

Succes!