Hoe dit te slicen?

[Tommetje]

Oke, mijn probleem: ik heb een vlak (gemaakt met photoshop, waar wat simpele filters overheen zitten), en dat valk moet ik dus in html krijgen (om het zo maar even te zeggen ). *klik*

Nu kan ik dat vlak dus ook in z'n geheel als achtergrondplaatje inladen, maar dat wil ik niet omdat het vlak resizable moet zijn (dus ook ok andere resoluties er goed uit moet zien, en de lengte moet kunnen variëren). Ik ben al de hele middag aan 't spelen geweest. Ik heb geprobeerd:

• 3 divs in een (left, center, right) voor het balkje (stukje) boven aan
• 3 divs in een voor de content (eentje voor de linker rand, eentje voor de rechter rand en eentje voor het middenvlak)

Maar dat sloot allemaal niet mooi aan, en zag er niet mooi uit op verschillende resoluties ed.

Mijn vraag: Hoe zouden jullie dit 'probleem' aanpakken? Ideetjes?

Wat ik dus niet vraag is of iemand die layout voor mij kan slicen, gewoon een plan hoe dit aan te pakken (div gebruiken voor dat, enzo).

[Verwijderd]

Kun je het plaatje niet in photoshop in 2 formaten maken?

[Tommetje]

Verwijderd schreef op zondag 03 april 2005 @ 18:12:
Kun je het plaatje niet in photoshop in 2 formaten maken?

Dan moet je het dus in meerdere formaten maken voor de verschillende resoluties. En dan ziet het er nog niet uit als de gebruiker zijn venster verkleind e.d.

[Wacky]

Waarom neem je niet alleen de hoekjes voor de hoeken van bijvoorbeeld een tabel. De rest kun je dan als achtergrond in de tabel zelf zetten.

[Tommetje]

Kijk eens goed naar het vlak, er zit links boven een soort van 'gloed' (weet niet hoe ik dit anders moet noeme..) en dat gaat niet met hoekjes (heb ik al geprobeerd). En tabellen zijn sowieso niet voor de opmaak

[Verwijderd]

Kun je het niet zoals hier doen?
Met maar 2 plaatjes en flexibel

Of anders is dit wel een goed artikel voor je.

[Verwijderd]

of deze, die ik laatst voor kaastosti heb gemaakt:

http://www.rikkertkoppes.com/troep/kaastosti.htm

zie ook het topique: [rml][ CSS] IE en FF, waarom is IE zo eigenwijs?[/rml]

[ Voor 30% gewijzigd door Verwijderd op 03-04-2005 19:48 ]

[Tommetje]

Ja, oke aparte hoekjes maken lukt me nog wel, maar zoals je ziet zit er linksboven een grote 'gloed', en is de bovenrand overal anders, en ook de zijranden lopen zijn niet recht (maw: dat moeten ook plaatjes worden). Dat maakt het een stuk ingewikkelderd dan alleen maar hoekjes.

[crisp]

Ik zou zoiets doen: voorbeeld
Wel wat extra markup, maar dat mag de pret niet drukken

[RwD]

Ik zou het zo doen:

+-----------------------------------+
| 1. kop                            |
+--+----------------+---------------+
|  | 3. gloed       |               |
|  |                |               |
|  |                |               |
|  |                |               |
|  |                |               |
|  |                |               |
|  |                |               |
|  +----------------+               |
|                                   |
| 2. vast gedeelte herhalen         |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |

[JorisPenders]

Inderdaad RwD, maar dan zit je weer met het probleem dat je maar één backgroundimage kan hebben in een tabel, dus 3 kolommen (rand - zwart - rand), een image die niet repeat en dan een #000000 background. Had bij mijn eigen site een soortgelijk probleem.

[Tommetje]

crisp schreef op zondag 03 april 2005 @ 21:52:
Ik zou zoiets doen: voorbeeld
Wel wat extra markup, maar dat mag de pret niet drukken

Dat is opzich nog wel te doen idd. maar daarbij is de breedte van het vlak niet variabel, en ALS dat op een of andere manier mogelijk is, zou ik dat graag willen.

RwD schreef op maandag 04 april 2005 @ 10:59:
Ik zou het zo doen:
-knip-

Hierbij geldt volgens mij het zelf als hierboven?

Of is er geen mogelijk om dit vlak te slicen zodat hij variabel is kwa hoogte en breedte?

[RwD]

En zo dan?

+-----------------------------------+
| 1.                      | 4.  | 5.|
+--+----------------+-----------+   |
|  | 3.             |           |   |
|  |                |           |   |
|  |                |           |   |
|  |                |           |   |
|  |                |           |   |
|  |                |           |   |
|  |                |           |   |
|  +----------------+           |   |
|                               |   |
| 2.                            |   |
|                               |   |
|                               |   |
|                               |   |
|                               |   |
|                               |   |
|                               |   |
|                               |   |
|                               |   |
|                               |   |
|                               |   |

1. Linker vast gedeelte van de kop
2. Linker vast gedeelte van het herhalende stuk
3. De gradient (gloed)
4. Herhalende stuk boven-midden
5. Herhalende stuk rechts-verticaal

Of alternatief:

+-----------------------------------+
| 1.                | 3.       |    |
|                   +----------+    +
|                   |               |
|                   |               |
|                   |               |
|                   |               |
|                   |               |
|                   |               |
|                   |               |
+-------------------+               |
| 2.                                |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |

1. Linker vast gedeelte (incl de gradient (gloed))
2. Horizontale herhalende stuk
3. Herhalende stuk boven-midden (t/m hoek, de lentjes er rechts van komen van 2.)

Hoe je het met de achtergronden doet moet je even kijken, desnoods trek je er een div omheen aan

[Verwijderd]

Tommetje schreef op maandag 04 april 2005 @ 16:11:
[...]

Dat is opzich nog wel te doen idd. maar daarbij is de breedte van het vlak niet variabel, en ALS dat op een of andere manier mogelijk is, zou ik dat graag willen.
[...]
Hierbij geldt volgens mij het zelf als hierboven?

Of is er geen mogelijk om dit vlak te slicen zodat hij variabel is kwa hoogte en breedte?

Dus je bedoeld zoiets ?
De plaatjes zijn even snel (lelijk) gesliced.

Als je te ver vergroot (niet in IE) zie je dat het 'breekt', maar dat kun je simpel oplossen door grotere afbeeldingen te maken.

Dit is een mooier voorbeeld, met dezelfde techniek.

[Tommetje]

Hmm, allebei bedankt! Ik zal er morgen eens naar kijken en laat nog wat van me horen.

[Tommetje]

. Het is me gelukt. Beetje ranzig code (divs in divs), maar goed. Bedankt allemaal!
http://tom.driverwebs.nl/test/test.html

Niet dus.. In FF gaat alles goed, maar IE is buggy. De footer (die kleine tekst onderaan ) wordt nu ook af en toe zwart. Heel vaag... Iemand een idee?

[ Voor 41% gewijzigd door Tommetje op 06-04-2005 18:51 ]

[Verwijderd]

Tommetje schreef op woensdag 06 april 2005 @ 18:38:
. Het is me gelukt. Beetje ranzig code (divs in divs), maar goed. Bedankt allemaal!
http://tom.driverwebs.nl/test/test.html

Niet dus.. In FF gaat alles goed, maar IE is buggy. De footer (die kleine tekst onderaan ) wordt nu ook af en toe zwart. Heel vaag... Iemand een idee?

Beetje jammer dat de tekst over het randje staat.
Je moet trouwens op lijn 30 even

code:

</html>

weghalen

[party42]

Tommetje schreef op woensdag 06 april 2005 @ 18:38:
. Het is me gelukt. Beetje ranzig code (divs in divs), maar goed. Bedankt allemaal!
http://tom.driverwebs.nl/test/test.html

Niet dus.. In FF gaat alles goed, maar IE is buggy. De footer (die kleine tekst onderaan ) wordt nu ook af en toe zwart. Heel vaag... Iemand een idee?

ik zie wel een vrij duidelijke overgang tussen je glow en het zwarte. dus je verloop, loopt niet mooi over.

[RwD]

Zorg ook voor een minimale breedte; nu kan ik zo smal als ik wil en verneuk ik het alsnog. Zo breed als die gradient is moet je minimale breedte zeker zijn. En wat betreft dat zwarte randje probeer eens p#footer{clear:both;} ik heb het niet getest, maar wie weet

Hoe is je oplossing voor het probleem trouwens? kun je eens een tekening plaatsen ofzo?

[ Voor 15% gewijzigd door RwD op 07-04-2005 11:00 ]

[Tommetje]

Verwijderd schreef op donderdag 07 april 2005 @ 08:26:
[...]


Beetje jammer dat de tekst over het randje staat.
Je moet trouwens op lijn 30 even

code:

</html>

weghalen

Beiden gefixt (locaal dan)

party42 schreef op donderdag 07 april 2005 @ 09:13:
[...]

ik zie wel een vrij duidelijke overgang tussen je glow en het zwarte. dus je verloop, loopt niet mooi over.

Welke browser? OS? Schermresolutie? Screenshotje? Heb het hier namelijk niet.. (Firefox1.0.2 en IE6 op WinME, 1024x768).

RwD schreef op donderdag 07 april 2005 @ 10:59:
Zorg ook voor een minimale breedte; nu kan ik zo smal als ik wil en verneuk ik het alsnog. Zo breed als die gradient is moet je minimale breedte zeker zijn. En wat betreft dat zwarte randje probeer eens p#footer{clear:both;} ik heb het niet getest, maar wie weet

Hoe is je oplossing voor het probleem trouwens? kun je eens een tekening plaatsen ofzo?

Minimale breedte ga ik naar kijken, en die clear: both op de footer werkt helaas niet. Iemand anders een idee?

Ik heb het probleem opgelost aan de hand van jou eerst tekening. Waarvoor nog mijn hartelijk dank! Ook aan alle andere mensen in dit topique.