Rounded Rectangle exporteren uit Fireworks (naar Dreamweaver)

[Ed121212]

Hallo,

Ik heb een ontwerp gemaakt in Fireworks met Rounded Rectangles volgens de 3 Slice Technique.
Na exporteren krijg ik in de browser echter haakse ipv afgeronde hoeken.

Weet iemand hoe dit op te lossen is?

Reeds toegepast:
De 3 slices van de rounded rectangle in Properties Panel "top" respectievelijk "middle" (met y-repeat) en "bottom" meegeven.

Reeds geprobeerd:
In een map onderaan een onzichtbare rectangle om de gehele rounded rectangle gezet (om Fireworks te helpen de rectangle juist te exporteren).

 

[csshunter]

Link naar testpagina'tje om te kunnen zien wat er gebeurd is?

 

[Ed121212]

Hallo csshunter,

Ik heb het Fireworks .png bestand bijgevoegd (krijgt foutief de extensie .jpg mee?)

Ik kom er niet helemaal uit hoe ik een de webpagina (.html, .css, images) toevoeg / met je kan delen.

Hoop dat je hiermee wat kunt...

Alvast bedankt,
Ed

 

[csshunter]

Hoi Ed,
Juist. Wat Fireworks ervan gesliced heeft, en hoe dat naar Dreamweaver geëxporteerd is weet ik niet , maar een simpele methode is deze:

1. Je maakt een css-sprite (gecombineerde afbeelding) waarin zowel de bovenste corners als de onderste corners zitten:
   
   

   
   (download: testcorners800x9x2.png)​
   
   
2. Je zet op de pagina een <div>'je met via css de halve hoogte, en zet daar ook met css de afbeelding in als achtergrondfiguur. Alleen de bovenste helft wordt nu getoond.
   Zie: test-rounded-rectangle1.htm en broncode.
   
   
3. Het content-blok daaronder krijgt met css de groene achtergrondkleur, en een border (met dezelfde kleur als de rand in de figuur) in U-vorm: zonder een bovenrand. De #content sluit nu naadloos aan op bovencorners.
   Zie: test-rounded-rectangle2.htm en broncode.
   
   
4. Voor de footer doen we het omgekeerde: de border alleen niet aan de onderkant. Bovenin geven we een padding (opvulling) van de corner-hoogte, zodat de footer-inhoud mooi verticaal gecentreerd wordt.
   Zie: test-rounded-rectangle3.htm en broncode.
   
   
5. Nu komt onder de <div id="footer"> een <div id="bottomcorners"> van weer de halve hoogte en de figuur als achtergrondfiguur er in. Maar nu gebruiken we alleen de onderste helft van het plaatje, door de achtergrondpositie de helft van de hoogte omhoog te schuiven. Alsof de corners in de footer zelf zitten!
   Zie: test-rounded-rectangle4.htm en broncode.
   
   
6. Omdat de bottomcorners onder de footer zitten, en de footer naar beneden gedrukt wordt als er meer inhoud in de pagina zit, gaat het goed bij elke hoogte van de pagina: de bottomcorners gaan mee naar beneden.
   Ook als de hoogte van de footer anders wordt gaat het altijd goed (bv. bij meer regels in de footer, of als de bezoeker in z'n/h'r browser een andere lettergrootte instelt).
   Zie: test-rounded-rectangle5.htm en broncode.

Leesvoer hierbij:

• De patrijspoort-theorie
• Flexibele ronde hoeken - die kunnen ook toegepast worden als er niet (zoals hier) een vaste breedte is waar de hoekjes in moeten komen.
• Hoekjes-voorbeelden

Met de styles die in de nieuwe css3-standaard staan, hoeft er zelfs geen image meer gebruikt te worden, en kunnen hoekjes met alleen css gemaakt worden.
Maar nog niet iedereen zal een browser hebben die dit ondersteunt: met een img lukt het in ieder geval.

Succes!
met vriendelijke groet,
CSShunter

 

[Ed121212]

Wauw, da's een eyeopener... ga ik 's bestuderen