[CSS] Ronde hoekjes - Softwareontwikkeling

dinsdag 3 juni 2008 18:49

Acties:

Verwijderd

Topicstarter

code:

<html>
<head>
<style type="text/css">
.container {
width: 500px;
height: 500px;
}
.boven {
position: relative;
height: 25px;
background: url("b.gif") top repeat-x;
}
.midden {
position: relative;
background: green;
}
.onder {
position: relative;
height: 25px;
background: url("o.gif") bottom repeat-x;
}
</style>
</head>
<body>
<div class="container">
<div class="boven"><img src="lb.gif" align="left"><img src="rb.gif" align="right"></div>
<div class="midden">bla</div>
<div class="boven"><img src="lo.gif" align="left"><img src="ro.gif" align="right"></div>
</div>
</body>
</html>

l = links, o = onder, b = boven, r = rechts (bijv. lb is LinksBoven)
lb,lo,rb,ro zijn 25x25px
b,o(,l,r) zijn 1x25px

Ik wil hiermee dus ronde hoeken maken, maar hij doet het niet. Heb het ook al geprobeerd met backgroundimages, z-index, float en nog veel meer, maar het lukt me maar niet! De middelste div heb ik nog niet gemaakt. Hij moet elke grootte en breedte aan kunnen nemen, en gebruik maken van de 8 plaatjes. Wie kan me hiermee helpen aub??

dinsdag 3 juni 2008 18:58

Acties:

mithras

Je hebt in principe twee methodes om rounded corners te maken (eigenlijk drie: de simpelste is google

).

De eerste is met javascript (gemakkelijk te vinden hoe).
De tweede is ongeveer zoals jij doet. Maak een container div en plaats er vier elementen (blokelementen of de afbeeldingen zelf) en zorg dat je ze kan identificeren (i.e. geef een id mee).
Positioneer alle hoekelementen absoluut en op (0|100)% (0|100)%. Dan krijg je in de vier hoeken een eigen blokje. Denk erom om de container als nieuw containing block te positioneren met position:relative.

dinsdag 3 juni 2008 19:03

Acties:

Onbekend

...

Zelf vond ik het lastig te maken en gebruik Nifty Corners met een paar eigen aanpassingen.
Kijk eens hoe hun dat doen, vooral met het transparante gedeelte.

Speel ook Balls Connect en Repeat

dinsdag 3 juni 2008 19:10

Acties:

Verwijderd

Topicstarter

Onbekend schreef op dinsdag 03 juni 2008 @ 19:03:
Zelf vond ik het lastig te maken en gebruik Nifty Corners met een paar eigen aanpassingen.
Kijk eens hoe hun dat doen, vooral met het transparante gedeelte.

Heb ik geprobeerd maar ik heb een rand eromheen, dus dan wordt het moeilijk.

en @mithras

Ik heb nu dit.. ongeveer wat jij zei, probleem is dat de rechterhoekjes 25px lager zitten als de linkerhoekjes... En werkt dat systeem ook met een rand? De andere 4 plaatjes moeten er ook nog tussen op de een of andere manier.

code:

<html>
<head>
<style type="text/css">
#container {
width: 500px;
height: 500px;
}
#lb {
position: relative;
top: 0%;
left: 0%;
width: 25px;
height: 25px;
background: url("lb.gif") top left no-repeat;
}
#rb {
position: relative;
top: 0%;
left: 100%;
width: 25px;
height: 25px;
background: url("rb.gif") top right no-repeat;
}
#lo {
position: relative;
top: 100%;
left: 0%;
width: 25px;
height: 25px;
background: url("lo.gif") top left no-repeat;
}
#ro {
position: relative;
top: 100%;
left: 100%;
width: 25px;
height: 25px;
background: url("ro.gif") top left no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="lb"></div>
<div id="rb"></div>
<div id="lo"></div>
<div id="ro"></div>
</div>
</body>
</html>

dinsdag 3 juni 2008 19:15

Acties:

mithras

Verwijderd schreef op dinsdag 03 juni 2008 @ 19:10:
[...]

en @mithras

Ik heb nu dit.. ongeveer wat jij zei
[...]

En implementeer nu eens compleet was ik zei? Het gaat fout op de punten dat je een aantal essentiële dingen in mijn post mist

[ Voor 11% gewijzigd door mithras op 03-06-2008 19:15 ]

dinsdag 3 juni 2008 19:21

Acties:

Johnny

ondergewaardeerde internetguru

In CSS3 zit ook de property border-radius. In Firefox 2 (en in Firefox 3 zelfs met anti-aliasing) en Safari wordt dit al ondersteund met een speciale prefix.

Cascading Stylesheet:

1
2
3

border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 3 juni 2008 19:46

Acties:

Cartman!

Johnny schreef op dinsdag 03 juni 2008 @ 19:21:
In CSS3 zit ook de property border-radius. In Firefox 2 (en in Firefox 3 zelfs met anti-aliasing) en Safari wordt dit al ondersteund met een speciale prefix.
Cascading Stylesheet:
1
2
3
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;

Das heel leuk, maar wat is je oplossing voor browsers die dit niet kunnen?

dinsdag 3 juni 2008 20:16

Acties:

Verwijderd

Topicstarter

mithras schreef op dinsdag 03 juni 2008 @ 19:15:
[...]
En implementeer nu eens compleet was ik zei? Het gaat fout op de punten dat je een aantal essentiële dingen in mijn post mist

Klopt, dat deed ie eerst niet omdat ik mijn container nog op relative had staan.. Maargoed, hij doet het nu, hoe krijg ik de andere 4 plaatjes erin? Als ik dit doe doet blijft alles precies hetzelfde:

code:

#b {
position: absolute;
top: 0%;
width: 100%
height: 25px
background: url("b.gif") top repeat-x;
}

dinsdag 3 juni 2008 21:13

Acties:

Borizz

Zie ook dit topic van een maandje geleden: Rounded borders. met image of doormiddel van js. Daar worden al een hoop (verschillende) oplossingen aangedragen.

If I can't fix it, it ain't broken.

dinsdag 3 juni 2008 21:57

Acties:

crisp

Devver

Pixelated

Cartman! schreef op dinsdag 03 juni 2008 @ 19:46:
[...]

Das heel leuk, maar wat is je oplossing voor browsers die dit niet kunnen?

Gracefull degradation misschien? (dus rechte hoeken in browsers die het niet ondersteunen). Dat kan een serieuze optie zijn, mede afhankelijk van het design zelf en je publiek wellicht...

Intentionally left blank