Archief - HTML: uitrekken
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
orez
Legacy Member
Deftigen uitleg: (sorry for dubbelpost ofzo)
Als je een design maakt in photoshop/imageready, dan moet er altijd gesliced worden om uwen design in html code te verkrijgen, nu wat doen de meesten, ze zien hunne border links of rechts of bovenaan staan, en ze knippen dit uit als 1 grote afbeelding = FOUT !!
Wat moet er gebeuren, als je sliced, zie je dat als je je border hebt, die border "herhaalt" zicht, tis bv e mini rij van ne rode groene & blauwe pixel naast elkaar (ok simplistisch gezegd he). Dus heb je
--- (wat die 3 pixels voorstelt)
Je site zal dit zijn je border dan
---
---
---
---
---
---
Dus telkens diezelfde pixels herhalend (naar onder toe dan in dit voorbeeld)
Nu wat de meeste problemen veroorzaakt is, indien je een teveel aan content krijgt, zal de browser die image OPNIEUW gebruiken, waarvan ge dus ne lelijke overgang verkrijgt. (vooral als je bv de onderste border mee sliced)
Wat moet er gebeuren. Stel je site voor als een box
Neem bv de 4 hoeken in 1 image
Dus
+--------+
|
| (de kruisjes zijn de hoeken)
|
+--------+
en neem een slice van 1 px hoog van de links & rechts repeatende border (|)
en neem een slice van 1 px breed van de onderste en bovenste boder (-)
Wat doe je nu als je je html opbouwt. Als je logisch denkt zal je hier al snel een tabel structuur inzien, met namelijk 9 velden.
1. image linksboven
2. topborder
3. image rechtsboven
4. leftborder
5. content
6. rightborder
7. image linksonder
8. bottomborder
9. image rechtsonder
Nu wat moet je doen met je borders daarvoor stel je een css code in
bv
td.topborder { // aangezien we met de bgimg van een cel gaan werken.
background-image: url(1 px breede image van topborder);
background-repeat: repeat-x; (waarvoor repeat-x staat voor het volgen van de x-as -- horizontaal dus)
}
td.leftboder {
background-image: url(1 px hoge image van leftborder);
background-repeat: repeat-y; (het volgen van de y-as (verticaal)
}
right & bottom spreken wel voor zich ??
Nu zal je html er als volgt uitzien:
Zo da is ff rap css-repeat handigheden voor lay-out uitgelegd. Khoop daj der iets van snapt... Anders kijk op www.w3schools.com voor xhtml/css te leren.
Als je een design maakt in photoshop/imageready, dan moet er altijd gesliced worden om uwen design in html code te verkrijgen, nu wat doen de meesten, ze zien hunne border links of rechts of bovenaan staan, en ze knippen dit uit als 1 grote afbeelding = FOUT !!
Wat moet er gebeuren, als je sliced, zie je dat als je je border hebt, die border "herhaalt" zicht, tis bv e mini rij van ne rode groene & blauwe pixel naast elkaar (ok simplistisch gezegd he). Dus heb je
--- (wat die 3 pixels voorstelt)
Je site zal dit zijn je border dan
---
---
---
---
---
---
Dus telkens diezelfde pixels herhalend (naar onder toe dan in dit voorbeeld)
Nu wat de meeste problemen veroorzaakt is, indien je een teveel aan content krijgt, zal de browser die image OPNIEUW gebruiken, waarvan ge dus ne lelijke overgang verkrijgt. (vooral als je bv de onderste border mee sliced)
Wat moet er gebeuren. Stel je site voor als een box
Neem bv de 4 hoeken in 1 image
Dus
+--------+
|
| (de kruisjes zijn de hoeken)
|
+--------+
en neem een slice van 1 px hoog van de links & rechts repeatende border (|)
en neem een slice van 1 px breed van de onderste en bovenste boder (-)
Wat doe je nu als je je html opbouwt. Als je logisch denkt zal je hier al snel een tabel structuur inzien, met namelijk 9 velden.
1. image linksboven
2. topborder
3. image rechtsboven
4. leftborder
5. content
6. rightborder
7. image linksonder
8. bottomborder
9. image rechtsonder
Nu wat moet je doen met je borders daarvoor stel je een css code in
bv
td.topborder { // aangezien we met de bgimg van een cel gaan werken.
background-image: url(1 px breede image van topborder);
background-repeat: repeat-x; (waarvoor repeat-x staat voor het volgen van de x-as -- horizontaal dus)
}
td.leftboder {
background-image: url(1 px hoge image van leftborder);
background-repeat: repeat-y; (het volgen van de y-as (verticaal)
}
right & bottom spreken wel voor zich ??
Nu zal je html er als volgt uitzien:
PHP:
<table>
<tr>
<td class="lefttopimg"></td>
<td class="topborder"></td>
<td class="righttopimg"></td>
</tr>
<tr>
<td class="leftborder"></td>
<td class="content"><!-- hier komt site content --></td>
<td class="rightborder"></td>
</tr>
<tr>
<td class="leftbottomimg"></td>
<td class="bottomborder"></td>
<td class="rightbottomimg"></td>
</tr>
</table>Zo da is ff rap css-repeat handigheden voor lay-out uitgelegd. Khoop daj der iets van snapt... Anders kijk op www.w3schools.com voor xhtml/css te leren.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.