Css Snippets » border http://www.csssnippets.be Snippets for you, snippets for me Wed, 23 Jun 2010 09:35:12 +0000 http://wordpress.org/?v=2.9 en hourly 1 Border op een TR element? http://www.csssnippets.be/2010/01/border-op-een-tr-element/ http://www.csssnippets.be/2010/01/border-op-een-tr-element/#comments Tue, 05 Jan 2010 07:47:19 +0000 Mark http://www.csssnippets.be/?p=697 Normaal gezien kan je geen border toevoegen op een <tr> element van een tabel, toch niet crossbrowser, maar je kan het heel anders aanpakken:

HTML

<tr>
 <td class="outerleft">bla</td>
 <td>bla</td>
 <td>bla</td>
 <td>bla</td>
 <td class="outerright">bla</td>
</tr>

CSS

td {
 border-top: 2px solid #000;
 border-bottom: 2px solid #000;
}
td.outerleft {
 border-left: 2px solid #000;
}
td.outerright {
 border-right: 2px solid #000;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/01/border-op-een-tr-element/feed/ 0 Dik onderlijnde navigatie http://www.csssnippets.be/2009/12/dik-onderlijnde-navigatie/ http://www.csssnippets.be/2009/12/dik-onderlijnde-navigatie/#comments Tue, 29 Dec 2009 07:02:01 +0000 Mark http://www.csssnippets.be/?p=695 Een navigatie kan zoveel vormen aannemen, hier een eenvoudige maar fraaie navigatie met onderlijning bij mouseover.

HTML

<ul class="menu">
	<li><a href="http://www.csssnippets.be">Home</a></li>
	<li><a href="http://www.csssnippets.be">CSS Codes</a></li>
	<li><a href="http://www.csssnippets.be">Forums</a></li>
	<li><a href="http://www.csssnippets.be">Webmaster Tools</a></li>
	<li><a href="http://www.csssnippets.be">JavaScript</a></li>
	<li><a href="http://www.csssnippets.be">Gallery</a></li>
</ul>

CSS

ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: right;
}
ul li{
display: inline;
}
ul li a{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
}
ul li a:hover, ul li a.selected{
border-bottom-color: black;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/12/dik-onderlijnde-navigatie/feed/ 0 Foto’s-afbeeldingen verfraaien met border http://www.csssnippets.be/2009/12/fotos-afbeeldingen-verfraaien-met-border/ http://www.csssnippets.be/2009/12/fotos-afbeeldingen-verfraaien-met-border/#comments Sat, 26 Dec 2009 07:27:15 +0000 Mark http://www.csssnippets.be/?p=691 Je kan je foto’s een beetje verfraaien door bijvoorbeeld een beetje te spelen met de CSS border eigenschap.

HTML

<div class="shadow">
<img src="bordering.jpg" alt="">
</div>

CSS

div.shadow {
float: left;
padding: 0 5px 5px 0;
}
div.shadow img {
display: block;
position: relative;
top: -2px;
left:-2px;
padding:8px;
background:#FFF;
border:1px solid;
border-color: #ccc #666 #666 #ccc;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/12/fotos-afbeeldingen-verfraaien-met-border/feed/ 0 Border-radius: maak ronde hoeken met CSS http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/ http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/#comments Thu, 15 Oct 2009 07:30:57 +0000 Mark http://www.csssnippets.be/?p=418 Met de komst van CSS3 is het mogelijk via CSS ronde hoeken te bepalen voor elementen, momenteel hebben enkel FireFox/Mozilla en Safari 3 deze optie geïntrigeerd.
Andere browsers zullen het dus voorlopig nog zonder moeten doen, maar hoe gebruik je nu border-radius?

CSS3 (nog niet klaar!!)

CSS

#foo {
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 10px;
}
#foo {
border-radius: 5px; /*alle hoeken hetzelfde*/
}

Safari/webkit

CSS

#faa {
webkit-border-top-right-radius: 10px;
webkit-border-bottom-right-radius: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-top-left-radius: 10px;
}
#faa {
webkit-border-radius: 5px; /*alle hoeken hetzelfde*/
}

FireFox/Mozilla

CSS

#fee {
moz-border-radius-topright: 10px;
moz-border-radius-bottomright: 5px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-topleft: 10px;
}
#fee {
moz-border-radius: 5px; /*alle hoeken hetzelfde*/
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/feed/ 0 Geen border op links in FireFox http://www.csssnippets.be/2009/03/geen-border-op-links-in-firefox/ http://www.csssnippets.be/2009/03/geen-border-op-links-in-firefox/#comments Mon, 02 Mar 2009 20:07:49 +0000 Mark http://www.csssnippets.be/?p=118 FireFox heeft de neiging om een puntjes rand rond actieve links te zetten, door toevoeging van deze korte snippet kan je dit ongewenst euvel behelpen.

CSS

a:focus, a:active {
outline: 0 none;
-moz-outline: 0 none;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/03/geen-border-op-links-in-firefox/feed/ 0