Css Snippets » list

Een ul lijst opsplitsen in kolommen

Mark — Thu, 04 Mar 2010 07:00:20 +0000

Hoe kun je 1 lijst

HTML


  Lorem
  ipsum
  dolor
  sit
  amet
  consectetuer
  adipiscing
  elit

CSS

ul {
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li {
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.col2 li  { width:50%;}
.col3 li  { width:33.333%; }
.col4 li  { width:25%; }
.col6 li  { width:16.666%; }

Oplossing “trappen effect” in IE6

Mark — Sun, 29 Nov 2009 07:43:18 +0000

Bijna elke webdeveloper gebruikt lijsten om een navigatie te maken, in de lijst maken we dan links en deze floaten we dan en normaal gezien is alles in orde …. voor de moderne browsers. IE6 en IE7 zullen je het trappen effect tonen. Als je het gezien hebt, weet je waarover ik het heb:

Normale code

HTML

CSS

ul {
    list-style: none;
}
ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

Fixed CSS voor Internet Explorer

CSS

ul li {
    float: left;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Sitemap stylen met één pixel afbeelding

Mark — Thu, 26 Nov 2009 07:43:39 +0000

Met een één pixel achtergrond afbeelding kan je vele dingen doen, met repeat-x maak je een horizontale lijn, repeat-y maakt een vertikale lijn en met repeat kan je een vlak vullen met kleur. Hoe kunnen we dit nu combineren voor onze sitemap styling? :

HTML


 Civil Engineering
  
   Home
   Home Office
   First Addition
   Contact
    
     Main office
     Sister office
    
   
   Metropolitan Place Phase II
   Oak Park Place of Baraboo
   Premier Coop
   Sleep Inn & Suites
   Tradewinds Business Center
   UW-Madison Nielsen Tennis Stadium
  
 
 Environmental Engineering
 About
  
   This site
   Office
   Disclaimer
   Person x
   Person Y

CSS

#project-list {
    background:transparent url(images/pixel.png) repeat-y 15px 0;
    width:340px;
}

#project-list li {
    font-size:16px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}

#project-list li a {
    background:white;
    color:#1F6DD9;
    display:block;
    padding:3px;
}

#project-list li a:hover {
    color:#84B8FF;
}

#project-list li ul li {
    background:transparent url(images/pixel.png) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 20px;
}

#project-list li ul li a {
    padding:0 0 0 3px;
}

#project-list li ul li ul {
    background:transparent url(images/pixel.png) repeat-y 15px 0;
    margin-bottom:10px;
}

#project-list li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Vertikaal uitgeklapt menu

Mark — Sun, 18 Oct 2009 07:39:49 +0000

Een simpel navigatie menu door gebruik van in elkaar geneste lijsten om zo een uitgeklapt menu te realiseren.

HTML



Item one

Subitem one
Subitem two
Subitem three
Subitem four


Item two
Item three
Item four

CSS

#navlist {
list-style-type: none;
color: #333;
background-color: #eee;
margin-left: 5px;
}
#active:hover li {
display: block;
}
#active li {
display: none;
}
#navcontainer {
width: 220px;
background-color: #eee;
border: 1px #999 solid;
}
#navcontainer a {
color: #999;
background-color: #eee;
width: 120px;
display: block;
}
#navcontainer a:visited {
color: #900;
background-color: #eee;
}
#navcontainer a:active {
color: #fff;
background-color: #000;
}
#navcontainer a:hover {
color: #fff;
background-color: #000;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Menu kaart met CSS

Mark — Tue, 23 Jun 2009 07:58:50 +0000

Een menu kaart (spreek: restaurant) stylen.

HTML

Rates

	
		WordPress Coding
		100⁹⁵
	
	
		CSS Design
		250⁹⁵
	
	
		Support IE6 (extra)
		500⁹⁵
	

Services

	
		PhotoShop
		50⁰⁰
	
	
		Illustrator
		75⁰⁰
	
	
		Flash
		60⁰⁰
	

Sushi

	
		Spicy Hand Roll
		29⁹⁹
	
	
		Salmon Roll
		20⁹⁵
	
	
		Fire Dragon
		69⁹⁵
	

Sashimi

	
		Tuna
		2⁰⁰
	
	
		Salmon
		3⁵⁰
	
	
		White Fish
		4⁶⁰

CSS

body {
background: #fff;
font: 80%/160% Arial, Helvetica, sans-serif;
padding: 0;
margin: 20px 40px;
}
a {
color: #999;
}
h2 {
font: bold 320%/100% Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 0;
}
.menu {
width: 500px;
list-style: none;
margin: 0 0 2em;
padding: 0;
font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
.menu strong {
background: #fff;
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -0.3em;
left: 0;
}
.menu em {
background: #fff;
padding: 0 0 0 5px;
font: 110%/100% Georgia, "Times New Roman", Times, serif;
position: absolute;
bottom: -.2em;
right: 0;
}
.menu sup {
font-size: 60%;
color: #666;
margin-left: 3px;
}
.style2 li {
border-bottom: dashed 1px #000;
}
.style3 li {
background: url(images/sub.gif) repeat-x left bottom;
border: none;
}
.style4 li {
padding: 0 0 2.3em 0;
border-bottom: dotted 2px #999;
}
.credits {
color: #999;
font: 100% Georgia, "Times New Roman", Times, serif;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Geef stijl aan een ol lijst

Mark — Thu, 11 Jun 2009 06:28:48 +0000

Als je wil dat de nummerieke weergave van een

HTML


  
    Lijst item één
  
  
    Lijst item twee
  
  
    Lijst item drie

CSS

ol {
font: italic 1em Georgia, Times, serif;
color: #999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000;
}

Eenvoudig formulier template

Mark — Wed, 06 May 2009 08:05:41 +0000

Een contact formulier is tegenwoordig zeer belangrijk in elke website, ze maken is normaal gezien geen probleem. Maar het formulier goed doen uitzien verlangt enig talent.
Door enkele eenvoudige CSS regels toe te passen kan je jouw formulier er “kick-ass” doen uitzien.

HTML




Contact Form
Please fill in your details

Name * Required

Email * Required

Url



Message * Required

CSS

body {
	font-family: Georgia, serif;
}
#wrapper {
	width:400px;
	margin: 0 auto;
	position: relative;
}
fieldset {
	border:1px solid #E8E8E8;
	padding: 10px;
	margin: 10px;
	width:300px;
}
legend {
  border: 1px solid #E8E8E8;
  padding:5px 15px;
}
p {
  font-size: 1.2em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
	margin:10px 0;
	display:block;
}
li input, textarea {
	height:15px;
	padding:5px;
	border:1px solid #E8E8E8;
	width:288px;
}
textarea {
	font-family: Arial, sans-serif;
	font-size: 12px;
	height:150px;
}
span {
	color: #AC0000;
	font-size: 10px;
}
.button {
	border:1px solid #E8E8E8;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #AC0000;
	color: #FFF;
}
.reset {
	border:none;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #FFF;
	color: #AC0000;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Stijlen van genummerde lijst

Mark — Mon, 30 Mar 2009 15:47:45 +0000

Geef je

HTML


	
		This  is  line  one
	
	
		Here  is  line  two
	
	
		And  last  line

CSS

ol {
font: italic 1.0em Georgia,Times,serif;
color: #999;
font-size: 1.8em;
}
ol p {
font: normal 0.8em Arial,Helvetica,sans-serif;
color: #000;
}