[Webdesign] Rounded corners bij links

Door Wouter De Schuyter op 31-07-2009 21:12

710 views

Hoi,
ik zit met een vervelend probleempje. Ik zou dus rounded corners op links willen gebruiken bij hover, dat lukt ook d.m.v. 2 elementen te gebruiken (in dit geval <li> en <a>) en die 2 elementen dan een afbeelding mee te geven (menu_item_left & menu_item_right). Maar wanneer je hovert of het uiterst rechtse deel dan zie je enkel dat en niet de volledige "button" terwijl wanneer je hovert over het linker deel je eigenlijk ook hovert over het rechterdeel en daardoor 1 geheel krijgt.

Zijn hier crossbrowser oplossing voor, liefst zonder javascript?

source: http://products.paradox-productions.net/Paradox%20Forum/

-

Ik zou dus iets willen zoals bij Jan ( http://www.jankoehoorn.nl/advaita/ ), alleen dan crossbrowser valid want bij jan lukt dit dus al niet in IE.

EDIT
-----

Besloten toch niet te doen, past toch niet zo goed bij de layout.

Tom Van Sichem

01-08-2009 02:32

Ziet er netjes uit!

Je probleem was wss een soort 'bracket-probleem'? Ergens een div niet goed afgesloten ofzo... ? Maak niet uit, je komt er wel, succes!

En ik heb je site alvast bij m'n favorieten staan!

Wouter De Schuyter

01-08-2009 09:42

@ R3Q, alles is altijd valid bij mij ;). Alles is afgesloten dat is het probleem niet, ik moet <li> rechts 5px padding meegeven om de rc te kunnen zien en <a> rechts 0px.
Daardoor als je over de eerste 5px rechts hovert ga eigenlijk enkel over het <li> element en zal dat enkel de button tonen.

Nu zoek ik een andere oplossing om toch hetzelfde te bekomen en liefst zonder javascript en iets dat crossbrowser valid is.

(maar zoals je ziet helemaal onderaan m'n vorige post staat er dat het goed is en ik toch besloten had het niet met de "buttons" te doen, dus eigenlijk, nvm.)

Harmen

01-08-2009 11:37

<a><span class="left">Tekst</span></a>

Die span geef je een achtergrondplaatje voor de linkerkant van de ronde hoeken. Die a geef je een heel breed plaatje met aan de rechterkant de ronde hoeken. Plaatje op de span laat je links uitlijnen, plaatje op de a rechts. Dan heb je een link die tot een bepaalde breedte kan groeien met ronde hoeken.

Je werkt dan met a:hover en a:hover span.

Wouter De Schuyter

01-08-2009 11:39

@ Harmen, heb je naar m'n css gekeken? Ik doe nu exact hetzelfde met <li><a>link</a></li> alleen dan met het lange plaatje links en het korte rechts.

edit
lol sorry, vergeten dat ik het al weg gedaan had.

edit2
even doen zoals jij zegt, maar ben vrij zeker dat ik hetzelfde probleem zal hebben.

EDIT3

Ziezo, klaar. Even gedaan wat je zei, net hetzelfde van wat ik al deed alleen nu met span en met a en het lange plaatje rechts en het korte links.

En het resultaat: zelfde probleem

online vb: http://paradox-productions.net/projects/rounded%20corners%20links/

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Corners Links | CSS ONLY</title>
<link rel="stylesheet" type="text/css" media="all" href="design/css/style.css" />
</head>
<body>
<div class="wrapper">
	<div class="header">Rounded Corners Links | CSS ONLY</div>
    <div class="menu">
    	<a href="#"><span>Item 1</span></a>

    	<a href="#"><span>Item 2</span></a>
    	<a href="#"><span>Langer Item</span></a>
    	<a href="#"><span>Heel Lang Item</span></a>
    	<a href="#"><span>Item 5</span></a>
    </div>
    <div class="content">
      <h1>Rounded Corners Links | CSS ONLY</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis dapibus congue. Nunc aliquet laoreet placerat. Proin magna eros, convallis nec eleifend et, tempor consequat odio. Aliquam nisl tortor, luctus viverra fermentum ac, pharetra lobortis nisl. Donec sit amet convallis turpis. Etiam congue congue volutpat. Ut semper purus et orci dignissim faucibus. Sed scelerisque enim in nisi tristique fermentum. Quisque metus velit, pulvinar non porttitor id, facilisis a est. Proin tincidunt, augue ut fringilla luctus, quam orci ultricies lorem, dictum ornare est eros nec neque. Maecenas arcu nisi, lacinia mattis porttitor in, blandit ac diam. Pellentesque sodales rhoncus ipsum quis varius. Nam ut urna eros, sit amet eleifend nisi. Quisque cursus justo dolor.</p>
      <p>Etiam purus erat, pellentesque a interdum quis, condimentum in sapien. Nulla et dui nec lectus aliquet ultricies ac non enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem est, aliquam in faucibus eget, sagittis eget nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus erat, sodales vitae ullamcorper eu, mattis non nulla. Suspendisse in odio orci. Donec iaculis risus non eros blandit dignissim. Sed in feugiat ipsum. Praesent sit amet scelerisque tellus. Vivamus ullamcorper lacinia mattis. Donec fringilla nisi ac risus lacinia elementum. Aenean tempus, neque ultricies hendrerit pretium, eros mi semper arcu, in imperdiet felis ipsum a dui. Nunc scelerisque vestibulum massa, quis venenatis nunc bibendum nec. Quisque sodales porttitor luctus.</p>
      <p>Cras ultricies quam a urna ornare varius. Integer facilisis lacinia sapien in laoreet. Proin et velit a risus tincidunt vulputate ut non justo. In sollicitudin rhoncus dui nec vestibulum. Sed eget dolor id mi placerat malesuada. Suspendisse euismod condimentum odio, vel vehicula arcu tempor non. Suspendisse sagittis luctus sem, ut pellentesque libero mattis sit amet. Pellentesque id nunc libero, nec feugiat turpis. Aliquam quis risus risus, non sodales purus. Ut ornare accumsan est. Nunc facilisis cursus varius. </p>
    </div>
    <div class="footer">&copy; All Rights Reserved To Paradox-Productions.Net</div>
</div>
</body>
</html>

css

body {
	background: #FFF;
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

div.wrapper {
	margin: auto;
	margin-top: 15px;
	background: #F9F9F9;
	border: 1px solid #444;
	width: 800px;
}

div.wrapper div.header {
	background: #DFEEFF;
	color: #1B9EDF;
	padding: 15px;
	height: 70px;
	font-size: 200%;
}

div.wrapper div.menu {
	background: #B3DAEF;
	padding: 10px;
	border-bottom: 1px solid #5AA8CF;
	border-top: 1px solid #5AA8CF;
}

div.wrapper div.menu a {
	color: #000;
	text-decoration: none;
	padding: 6px 0px 6px 6px;
}

div.wrapper div.menu a span {
	padding: 6px 6px 6px 0px;
}

div.wrapper div.menu a:hover {
	color: #FFF;
	background: url('../img/button_link_left.png') top left no-repeat;
}

div.wrapper div.menu a:hover span:hover {
	background: url('../img/button_link_right.png') top right no-repeat;
}	

div.wrapper div.content {
	padding: 10px;
	text-align: justify;
	color: #333;
}

div.wrapper div.footer {
	padding: 3px;
	text-align: center;
	color: #FFF;
	font-size: 10px;
	background: #111;
}

CB2thephp

01-08-2009 14:18

Haal bij de span de :hover weg:


div.wrapper div.menu a:hover span

In plaats van:


div.wrapper div.menu a:hover span:hover

Let op niet getest met IE wel met FF.

Groeten,
Christian

Wouter De Schuyter

01-08-2009 14:20

OMG!
Zo logisch! Dat ik daar nooit zelf opgekomen ben :s..

Bedankt!

Edit

crossbrowser valid ^^!

Tested on Windows Vista Ultimate x86 with:

IE 8.x
FF 3.5.1
Opera 8.64
Google Chrome x
Safari 4

vb: http://paradox-productions.net/projects/rounded%20corners%20links/

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Corners Links | CSS ONLY</title>
<link rel="stylesheet" type="text/css" media="all" href="design/css/style.css" />
</head>
<body>
<div class="wrapper">
	<div class="header">Rounded Corners Links | CSS ONLY</div>
    <div class="menu">
    	<a href="#"><span>Item 1</span></a>
    	<a href="#"><span>Item 2</span></a>
    	<a href="#"><span>Langer Item</span></a>
    	<a href="#"><span>Heel Lang Item</span></a>
    	<a href="#"><span>Item 5</span></a>
    </div>
    <div class="content">
      <h1>Rounded Corners Links | CSS ONLY</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis dapibus congue. Nunc aliquet laoreet placerat. Proin magna eros, convallis nec eleifend et, tempor consequat odio. Aliquam nisl tortor, luctus viverra fermentum ac, pharetra lobortis nisl. Donec sit amet convallis turpis. Etiam congue congue volutpat. Ut semper purus et orci dignissim faucibus. Sed scelerisque enim in nisi tristique fermentum. Quisque metus velit, pulvinar non porttitor id, facilisis a est. Proin tincidunt, augue ut fringilla luctus, quam orci ultricies lorem, dictum ornare est eros nec neque. Maecenas arcu nisi, lacinia mattis porttitor in, blandit ac diam. Pellentesque sodales rhoncus ipsum quis varius. Nam ut urna eros, sit amet eleifend nisi. Quisque cursus justo dolor.</p>
      <p>Etiam purus erat, pellentesque a interdum quis, condimentum in sapien. Nulla et dui nec lectus aliquet ultricies ac non enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem est, aliquam in faucibus eget, sagittis eget nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus erat, sodales vitae ullamcorper eu, mattis non nulla. Suspendisse in odio orci. Donec iaculis risus non eros blandit dignissim. Sed in feugiat ipsum. Praesent sit amet scelerisque tellus. Vivamus ullamcorper lacinia mattis. Donec fringilla nisi ac risus lacinia elementum. Aenean tempus, neque ultricies hendrerit pretium, eros mi semper arcu, in imperdiet felis ipsum a dui. Nunc scelerisque vestibulum massa, quis venenatis nunc bibendum nec. Quisque sodales porttitor luctus.</p>
      <p>Cras ultricies quam a urna ornare varius. Integer facilisis lacinia sapien in laoreet. Proin et velit a risus tincidunt vulputate ut non justo. In sollicitudin rhoncus dui nec vestibulum. Sed eget dolor id mi placerat malesuada. Suspendisse euismod condimentum odio, vel vehicula arcu tempor non. Suspendisse sagittis luctus sem, ut pellentesque libero mattis sit amet. Pellentesque id nunc libero, nec feugiat turpis. Aliquam quis risus risus, non sodales purus. Ut ornare accumsan est. Nunc facilisis cursus varius. </p>
    </div>
    <div class="footer">&copy; All Rights Reserved To Paradox-Productions.Net</div>
</div>
</body>
</html>

css

body {
	background: #FFF;
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

div.wrapper {
	margin: auto;
	margin-top: 15px;
	background: #F9F9F9;
	border: 1px solid #444;
	width: 800px;
}

div.wrapper div.header {
	background: #DFEEFF;
	color: #1B9EDF;
	padding: 15px;
	height: 70px;
	font-size: 200%;
}

div.wrapper div.menu {
	background: #B3DAEF;
	padding: 10px;
	border-bottom: 1px solid #5AA8CF;
	border-top: 1px solid #5AA8CF;
}

div.wrapper div.menu a {
	color: #000;
	text-decoration: none;
	padding: 6px 0px 6px 6px;
}

div.wrapper div.menu a span {
	padding: 6px 6px 6px 0px;
}

div.wrapper div.menu a:hover {
	color: #FFF;
	background: url('../img/button_link_left.png') top left no-repeat;
}

div.wrapper div.menu a:hover span {
	background: url('../img/button_link_right.png') top right no-repeat;
}	

div.wrapper div.content {
	padding: 10px;
	text-align: justify;
	color: #333;
}

div.wrapper div.footer {
	padding: 3px;
	text-align: center;
	color: #FFF;
	font-size: 10px;
	background: #111;
}

CB2thephp

01-08-2009 14:24

Geen dank het zijn soms kleine rot punten :P waar je gewoon over heen kijkt na een bepaalde tijd :D

Reageren

Inloggen om te reageren