Archiv

Archiv für den Monat Mai 2013

Um in einem CMS oder Blog einfachen Quelltext an passen, ist es nicht immer unbedingt notwendig, das System im Backend zu bearbeiten. Oft reicht es im Textfeld das HTML an zu passen.

Hier findet sich der Code für den Listenpunkt

<p style="color:#106080;"><strong>Past projects have included the following tasks</strong></p>
<ol style="list-style-type:disc;">
<li>expertise and fit consulting
</li>
<li>project management for multimedia projects (print and nonprint)
</li>
<li>calculation, conception, production</li>
</ol>

Das kann dann folgendermaßen aussehen:

Past projects have included the following tasks

  1. expertise and fit consulting
  2. project management for multimedia projects (print and nonprint)
  3. calculation, conception, production

weitere und ausführliche Informationen finden sich hier

http://de.selfhtml.org/css/eigenschaften/listen.htm

<!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>CSS3 Ribbon</title>
    <style type="text/css">
		@font-face {
			font-family: 'LeagueGothicRegular';
			src: url('fonts/league_gothic-webfont.eot');
			src: local('☺'), 
				 url('fonts/league_gothic-webfont.woff') format('woff'), 
				 url('fonts/league_gothic-webfont.ttf') format('truetype'), 
				 url('fonts/league_gothic-webfont.svg#webfontekMB1SFV') format('svg');
			font-weight: normal;
			font-style: normal;
		}
		* {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
			font-size: 100%;
			vertical-align: baseline;
			background: transparent;
		}
		html {
			background: #ede5d8;	
		}
		body {
			line-height: 1;
		}
		ol,ul {
			list-style: none;
		}
		:focus {
			outline: 0;
		}				
		#wrapper {
			display:block;
			padding:5% 0;
		}
		#content {
			display:block;
			margin: 0 auto;
			padding:0 0 80px 0;
			width: 80%;
			height:auto;
			background:#99cccc;
			-moz-box-shadow: 0 0 4px rgba(160,128,73,0.50);
			-khtml-box-shadow: 0 0 4px rgba(160,128,73,0.50);
			-webkit-box-shadow: 0 0 4px rgba(160,128,73,0.50);	
		}
		.ribbon {
			float: left;
			position: relative;
			height: 65px;
			width: auto;
			left:-15px;
			top: 30px;
			background: #336666;
			-moz-box-shadow: 4px 4px 0 rgba(160,128,73,0.20);
			-khtml-box-shadow: 4px 4px 0 rgba(160,128,73,0.20);
			-webkit-box-shadow: 4px 4px 0 rgba(160,128,73,0.20);
			z-index: 100;
		}		
		.ribbon h2 {
			display:block;
			padding:0 20px 0 80px;
			color:#fffdf9;
			font: normal normal 2.8em/68px 'LeagueGothicRegular', sans-serif;
			font-size-adjust: 0.55;
			text-transform:uppercase;
			text-align: right;
		}
		.triangle {
			position: relative;
			height:0;
			width:0;
			left: -35px;
			top: 75px;
			border-style:solid;
			border-width:20px;
			border-color: transparent #336666 transparent transparent;
			z-index: -1;
		}
		p {
			padding:80px 70px 0 70px;
			font:italic normal 15px/22px Georgia, "Times New Roman", Times, serif;
			color:#938462;
		}
	</style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div class="ribbon">
                	<h2>CSS3 Ribbon</h2>
                </div>
                <div class="triangle"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec magna egestas dui faucibus auctor at at ante. Nam sed mauris ac massa dictum commodo. In auctor elementum sem eu cursus. Cras tortor dolor, euismod sed fermentum a, aliquam vitae erat. Praesent dictum lobortis sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce quam dui, bibendum sed aliquet auctor, interdum id ligula. Suspendisse aliquet dignissim lacus, a laoreet odio imperdiet vitae. Cras interdum faucibus lorem at porttitor. Praesent congue nulla sed diam consequat viverra non in nunc. Morbi quis nunc eu odio feugiat tincidunt ac tempor dolor. Suspendisse potenti. Aenean id bibendum erat. Curabitur lacinia molestie placerat. Sed interdum odio ut quam feugiat interdum. Morbi et porttitor elit. Integer a tortor metus, et bibendum nisl. Nulla posuere luctus purus, non feugiat velit laoreet vitae. Nulla a nibh vel nibh fermentum cursus.</p>
            </div>
        </div>
    </body>
</html>

css-ribbon