[css] Afgeronde hoeken. - Softwareontwikkeling

zaterdag 5 januari 2008 17:26

Acties:

Topicstarter

Het is de zoveelste vraag over afgeronde hoeken, in css. Alleen via Google en GoT search kom ik niet tot een oplossing.

Ik heb de volgende style sheet:

Cascading Stylesheet:

#content{
    width: 98%;
    margin-top: 3px;
    margin-left: 1%;
    margin-right:1%;
}
#content .hlt{
    float: left;
    width:6px;
    height:6px;
    background: transparent url(../images/corners_left.png) no-repeat;
    background-position: top; 
}
#content .hrt{
    float: right;
    width: 6px;
    height: 6px;
    background: transparent url(../images/corners_right.png) no-repeat;
    background-position: top;
}
#content .hlb{
    float: left;
    padding: 0px;
    margin: 0px;
    width: 6px;
    height: 6px;
    background: transparent url(../images/corners_left.png) no-repeat;
    background-position: left -6px;
}
#content .hrb{
    float: right;
    padding: 0px;
    margin: 0px;
    width: 6px;
    height: 6px;
    background: transparent url(../images/corners_right.png) no-repeat;
    background-position: right -6px;
}

.test{
    background: transparent url(../images/background-blue.png) repeat;
}

En gebruik de volgende html code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CMS Login</title>
<link rel="stylesheet" type="text/css" href="./css/roundcorners.css" >
</head>
<body><div id='content' class='test'>
            <div class='hlt'></div><div class='hrt'></div>
                <div>Fleppuhstein.com</div>
            <div class='hlb'></div><div class='hrb'></div>
</div>
</body>
</html>

Resultaat: [url]http://_develop.fleppuhstein.com/test.php[/url]

In Iexplore7 ziet alles er netjes uit, behalve als ik H1 H2 enz tags gebruik (Background loopt uit).
Alleen Firefox 2 slaat de onderste gedeelte over waardoor de twee onderste hoeken geen afgeronde hoek zijn. De background image is een blauwe png van 1X1 pixel met 85% opacity. De hoek afbeeldingen zijn png's in wit, met de binnenkant van de cirkel in transparant, waardoor dus het overbodige achtergrondplaatje wordt afgedekt.

Zoals gezegt heeft een search op GoT en Google niets opgeleverd. HTML en CSS zijn 100% in orde (W3 validator). En firefox geeft geen fouten met de foutconsole.
Enkele andere voorbeelden van rounded corners die niet goed zijn of niet werken:
http://www.schillmania.co...ven-more-rounded-corners/ << Zeer overtollige en onoverzichtelijk css. En grote afbeeldingen
http://www.webcredible.co...und-corners-borders.shtml << Werkt niet mee met verschil in achtergrond kleur.

Is er iemand die mij een zetje kan helpen ?

zaterdag 5 januari 2008 17:40

Acties:

RemcoDelft

Je linkje doet het niet...

zaterdag 5 januari 2008 18:02

Acties:

Blaise

Je kan ook kiezen voor een Javascript oplossing: http://www.google.com/search?q=rounded+corners+javascript

zaterdag 5 januari 2008 18:05

Acties:

Harm

RemcoDelft schreef op zaterdag 05 januari 2008 @ 17:40:
Je linkje doet het niet...

Wat komt door de underscore erin.

zaterdag 5 januari 2008 19:09

Acties:

RemcoDelft

Harm schreef op zaterdag 05 januari 2008 @ 18:05:
[...]

Wat komt door de underscore erin.

Als ik hem weghaal kom ik hier:
Object niet gevonden!

zaterdag 5 januari 2008 19:16

Acties:

sanzut

It's always christmas time

URL doet het hier gewoon, incl underscore.
In Firefox inderdaad geen afgeronde hoeken onderaan de pagina, maar van die curvyCorners, moet toegeven dat ik dat wel makkelijk scriptje vind. Heb het even opgeslagen

zaterdag 5 januari 2008 19:18

Acties:

Harm

RemcoDelft schreef op zaterdag 05 januari 2008 @ 19:09:
[...]

Als ik hem weghaal kom ik hier:
Object niet gevonden!

Dat is vrij logisch, omdat je dan een pagina opvraagt die helemaal niet bestaat. Ik wilde zeggen dat de TS de url nogmaals moet plaatsen, maar dan met een url zonder underscores erin. Anyway, verder gaarne ontopic

.

@TS: wat is er op tegen om een achtergrondafbeelding te gebruiken met afgeronde hoeken? Zo heb ik het gedaan bij twee sites de afgelopen tijd en dat werkte erg prettig én crossbrowser.

zaterdag 5 januari 2008 19:26

Acties:

fleppuhstein

Topicstarter

Harm schreef op zaterdag 05 januari 2008 @ 19:18:
[...]

Dat is vrij logisch, omdat je dan een pagina opvraagt die helemaal niet bestaat. Ik wilde zeggen dat de TS de url nogmaals moet plaatsen, maar dan met een url zonder underscores erin. Anyway, verder gaarne ontopic .

Dit is nou eenmaal de map waarin ik werk. _develop is gewoon voor mijzelf iets waarmee ik bezig ben. En de link werkt hier in FF en IE7

@TS: wat is er op tegen om een achtergrondafbeelding te gebruiken met afgeronde hoeken? Zo heb ik het gedaan bij twee sites de afgelopen tijd en dat werkte erg prettig én crossbrowser.

Ik wil graag met verschillende kleuren werken, en dan zou ik voor elke kleur een aparte afbeelding moeten maken. Daarom wil ik de huidige afbeeldingen gebruiken, omdat wit een algemene achtergrond kleur is ( voor mij iig).

zaterdag 5 januari 2008 19:29

Acties:

deCube

http://www.html.it/articoli/nifty/index.html

Dat niet wat?

Work hard & be brave.

zaterdag 5 januari 2008 21:01

Acties:

fleppuhstein

Topicstarter

deCube schreef op zaterdag 05 januari 2008 @ 19:29:
http://www.html.it/articoli/nifty/index.html

Dat niet wat?

Dat is een niet zo mooie pixel oplossing. Als ik dan voor een 6 px oplossing wil gaan zijn dit gelijk 5 divs.

zaterdag 5 januari 2008 21:18

Acties:

Sendy

De code van de link is in ieder geval (iets) anders dan de code in de startpost. Waarom je in de code uit de link een <b> (een inline-box) gebruikt..., nou ja, dat zal wel experimenteren zijn...

Je opzet uit de startpost lijkt me niet onaardig (het is in ieder geval direct begrijpelijk). Waarom het niet werkt weet ik niet zo; ik heb ook weleens zoiets gemaakt en in Firefox werkte dat prima i.t.t. tot IEoud.

Als je niet je eigen idee wil volgen is er genoeg te vinden met een Google zoek.

[ Voor 10% gewijzigd door Sendy op 05-01-2008 21:22 ]

zaterdag 5 januari 2008 21:30

Acties:

fleppuhstein

Topicstarter

Ben er achter gekomen dat het in FF wel werkt, alleen dat de background niet doorloopt. En dan valt het plan in duigen. Links onders is nu even geel ipv afbeelding. Dan zie je dat het wel aanwezig is.

Nu dus het probleem met de background oplossen.

zondag 6 januari 2008 22:26

Acties:

fleppuhstein

Topicstarter

Helaas kan ik nog geen goed oplossing vinden. Niemand anders die een oplossing heeft voor het stoppen van de achtergrond color ? Die zou dus moeten doorlopen, maar stopt bij het eerste stuk.

zondag 6 januari 2008 23:03

Acties:

fleppuhstein

Topicstarter

fleppuhstein schreef op zondag 06 januari 2008 @ 22:26:
Helaas kan ik nog geen goed oplossing vinden. Niemand anders die een oplossing heeft voor het stoppen van de achtergrond color ? Die zou dus moeten doorlopen, maar stopt bij het eerste stuk.

Uiteindelijk toch de goede oplossing gevonden. Door de test div een float left te geven wordt in FF de achtergrond goed door getrokken. Zo is in FF en IE7 alles goed. Iemand toevallig nog IE 6 en 5 om mee te testen ?

zondag 6 januari 2008 23:07

Acties:

frederikske

Ik kom misschien een beetje laat, maar toevallig had ik onlangs een gelijkaardig probleem en ik kwam op een pagina waar een round-up stond van vele gekende oplossingen voor rounded corners mbv css

http://www.smileycat.com/miaow/archives/000044.php

Er staat ook telkens bij of het met of zonder JS is, en met eventueel het aantal gebruikte images.

[ Voor 18% gewijzigd door frederikske op 06-01-2008 23:08 ]

zondag 6 januari 2008 23:25

Acties:

fleppuhstein

Topicstarter

Nu alleen nog een probleem dat de lengte niet goed doorloopt in IE 7.

woensdag 9 januari 2008 17:27

Acties:

G-ZeS

fleppuhstein schreef op zondag 06 januari 2008 @ 23:25:
Nu alleen nog een probleem dat de lengte niet goed doorloopt in IE 7.

Je moet even de link van degene boven je volgen, daar staan genoeg werkende versies. (vele ook met een goede IE oplossingen)

woensdag 9 januari 2008 23:35

Acties:

fleppuhstein

Topicstarter

G-ZeS schreef op woensdag 09 januari 2008 @ 17:27:
[...]

Je moet even de link van degene boven je volgen, daar staan genoeg werkende versies. (vele ook met een goede IE oplossingen)

Ik heb er zeker 50 % door gekeken (Meer dan 4 plaatjes is sowieso geen goed oplossing.) Maar ze zijn niet van toepassing voor mij omdat ze werken met en vast kleur. Een van mijn eisen is dat ze kleur onafhankelijk zijn. Behalve achtergrond kleur. Door gebruik te maken van een transparante image kan ik via css een plaatje (Met kleur verloop/ transarantie) een achtergrond toekennen.

Vandaag een collega gesproken. Hij zegt dat het waarschijnlijk een padding/margin probleem is. Morgen ff fixen. Zodra ik doorvoor een oplosing heb zal ik ff resultaat posten.

donderdag 10 januari 2008 16:12

Acties:

fleppuhstein

Topicstarter

Oplossing gevonden, probleem zat hem in het opbouw van de tekst. Daar zit schijnbaar een verschil in tussen IE en FF. Oplossing zit hem in fontsize mee te geven aan alle H elementen. En de margin op nul zetten.

Cascading Stylesheet:

h1,h2,h3,h4,h5,h6{
margin: 0px;
}
h1{font-size: 90%;}
h2{font-size: 110%;}
h3{font-size: 115%;}
h4{font-size: 120%;}
h5{font-size: 125%;}
h6{font-size: 130%;}

Met dan als volledige css:

Cascading Stylesheet:

#content{
    width: 98%;
    margin-top: 3px;
    margin-left: 1%;
    margin-right:1%;
    margin-bottom:6px;
}
#content .hlt{
    float: left;
    width:6px;
    height:6px;
    background: transparent url(../images/corners_left.png) no-repeat;
    background-position: top; 
}
#content .hrt{
    float: right;
    width: 6px;
    height: 6px;
    background: transparent url(../images/corners_right.png) no-repeat;
    background-position: top;
}
#content .hlb{
    float: left;
    padding: 0px;
    margin: 0px;
    width: 6px;
    height: 6px;
    background: transparent url(../images/corners_left.png) no-repeat;
    background-position: left -6px;
}
#content .hrb{
    float: right;
    padding: 0px;
    margin: 0px;
    width: 6px;
    height: 6px;
    background: transparent url(../images/corners_right.png) no-repeat;
    background-position: right -6px;
}

.bluewhite{
    background: transparent url(../images/background-blue.png) repeat;
    float: left;
    color: white;
}
h1,h2,h3,h4,h5,h6{
margin: 0px;
padding:5px;
}
h1{font-size: 90%;}
h2{font-size: 110%;}
h3{font-size: 115%;}
h4{font-size: 120%;}
h5{font-size: 125%;}
h6{font-size: 130%;}

vrijdag 11 januari 2008 00:56

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

fleppuhstein schreef op donderdag 10 januari 2008 @ 16:12:
Cascading Stylesheet:
1
2
3
4
5
6
h1{font-size: 90%;}
h2{font-size: 110%;}
h3{font-size: 115%;}
h4{font-size: 120%;}
h5{font-size: 125%;}
h6{font-size: 130%;}

offtopic:
Normaliter* is H1 het grootst en H6 het kleinst... i.v.m. SEO is het wellicht slim om diezelfde conventie aan te houden? Ik neem aan dat je nu H3 gebruikt als titel (bijvoorbeeld) en H2 of H1 als 'subtitel'?

* "Visual browsers usually render more important headings in larger fonts than less important ones.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 11 januari 2008 01:01

Acties:

BtM909

Watch out Guys...

offtopic:
Strict gezien heeft de size grootte geen invloed op SEO, juist omdat je semantiek in je element meegeeft

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 11 januari 2008 01:03

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

BtM909 schreef op vrijdag 11 januari 2008 @ 01:01:

offtopic:
Strict gezien heeft de size grootte geen invloed op SEO, juist omdat je semantiek in je element meegeeft

offtopic:
Uiteraard; maar het gevaar bestaat dat in de content de koppen worden gewisseld (dus h3 h2 h1 voor "Titel", "Sectie", "Subsectie" resp.) vanwege die omgekeerde font-sizes, en dus ga je je semantiek verkeerd om gebruiken en dus is het SEO wise misschien niet zo slim

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 11 januari 2008 01:06

Acties:

BtM909

Watch out Guys...

RobIII schreef op vrijdag 11 januari 2008 @ 01:03:
[...]

offtopic:
Uiteraard; maar het gevaar bestaat dat in de content de koppen worden gewisseld (dus h3 h2 h1 voor "Titel", "Sectie", "Subsectie" resp.) vanwege die omgekeerde font-sizes, en dus ga je je semantiek verkeerd om gebruiken en dus is het SEO wise misschien niet zo slim

offtopic:
Ik negeer bewust je aanname

Maar genoeg offtopic, koop eens een MSN account

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1

Reageer