webdesign ohne div - elemente 05.07.2006
Im Rahmen dieser Seite, angefangen hat das ganze mit Webdesign Wilhelmshaven, versuche ich soweit wie irgendmöglich auf divs zu verzichten.
Dieses Element erfreut sich in letzter Zeit immer größerer Beliebtheit bei Webdesigner, was teilweise zu einer Divitis führen kann.
Die Auszeichnungsprache stellt eine Menge Elemente zur Verfügung. Bei vielen von Ihnen handelt es sich um so genannte Blocklevel Elemente.
Zugegeben, das Verwenden von div Elementen erleichtert ungemein das Designhandling. Aber geht es nicht auch anders?!
Auf der Startseite von www.werbung-webdesign.de verwende ich keine divs. Die Seite ist ja auch nicht Designlastig, werden jetzt viele sagen. Stimmt, aber ich denke, ich kann eine Menge erreichen auch ohne die fehlenden divs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Seitentitel</title>
<meta name="Keywords" content="keywords" />
<meta name="Description" content="Description" />
<meta name="Copyright" content="Author" />
<meta name="Author" content="Author" />
<meta name="Subject" content="Subject" />
<meta name="Language" content="de" />
<meta name="Robots" content="index,follow" />
<style type="text/css">
<!-- @import "screen.css"; -->
</style>
</head>
<body>
<h1><a href="/" name="top"><span>Startseite</span></a>
<span>Beispiel Design Seite</span></h1>
<ul id="sitemap">
<li>
<h2>Übersicht Neuigkeiten</h2>
<ul>
<li><a href="#a">a1</a></li>
<li><a href="#b">a2</a></li>
<li><a href="#c">a3</a></li>
<li><a href="#d">a4</a></li>
</ul>
</li>
<li>
<h2>Übersicht Projekte</h2>
<ul>
<li><a href="seite-a.html">Seite A</a></li>
<li><a href="seite-b.html">Seite B</a></li>
<li><a href="seite-c.html">Seite C</a></li>
<li><a href="seite-d.html">Seite D</a></li>
</ul>
</li>
</ul>
<ul id="content">
<li>
<h2>Neuigkeiten auf Werbung Webdesign</h2>
</li>
<li>
<h3><a name="a">Seite A</a></h3>
<span>08.07.2006</span>
<p> T E X T </p>
<p class="topLink">
Artikel <a class="more" href="seite-a.html"><strong>Seite A</strong></a>
<a href="#top">nach Oben</a>
</p>
</li>
<li>
<h3><a name="b">Seite B</a></h3>
<span>08.07.2006</span>
<p> T E X T </p>
<p class="topLink">
Artikel <a class="more" href="seite-b.html"><strong>Seite B</strong></a>
<a href="#top">nach Oben</a>
</p>
</li>
<li>
<h3><a name="c">Seite C</a></h3>
<span>08.07.2006</span>
<p> T E X T </p>
<p class="topLink">
Artikel <a class="more" href="seite-c.html"><strong>Seite C</strong></a>
<a href="#top">nach Oben</a>
</p>
</li>
<li>
<h3><a name="d">Seite D</a></h3>
<span>08.07.2006</span>
<p> T E X T </p>
<p class="topLink">
Artikel <a class="more" href="seite-d.html"><strong>Seite D</strong></a>
<a href="#top">nach Oben</a>
</p>
</li>
<!-- Informationen -->
<li>
<h2>Werbung Webdesign</h2>
<p> T E X T </p>
</li>
</ul>
<p class="contact"><a href="impressum.htm">Impressum</a> E-Mail</p>
</body>
</html>
Übrigens ein sehr hilfreiches Tool und dennoch kaum bekannt. Fast alle Webdesigner kennen den w3c Validator, aber wer kennt Validome?
so und jetzt noch ein bisschen CSS
body, html{
color:#555555;
background:#f4f4f4;
padding:9px 10% 5px 10%;
margin:0;
}
a{color:#66B05C;text-decoration:none;}
a:hover{color:#347B04;}
p, h1, h2, h3, td, span, div, a, li, pre{
font-size:0.9em;
font-family:verdana, arial, sans-serif;
padding:0;margin:0;
}
body{
background:#ffffff;
color:#4f4f4f;
padding:9px 14px;
border:1px solid #cfcfcf;
}
h1{
height:60px;
border:1px solid #808000;
margin:0 0 17px 0;
text-align:center;
padding:10px 0 0 0;
}
h1 a{
display:block;
}
h1 a span{
color:#66B05C;
font-size:1.8em;
}
h1 a:hover span{
color:#bbbbbb;
}
h1 span{
color:#ff7f00;
font-size:0.8em;
}
#content{
width:67%;
float:left;
padding:1% 0 2% 2%;
margin:0 0 10px 0;
border:1px solid #ffbf00;
list-style-type:none;
}
#sitemap{
width:26%;
float:right;
padding:1% 0 2% 1%;
list-style-type:none;
margin:0;
border:1px solid #BDAA5E;
}
.contact{
clear:both;
margin:0 auto;
font-size:0.7em;
color:#bfbfbf;
padding:3px;
border:1px solid #cfcfcf;
}
Das wars. Hier das Ergebnis. Webdesign ohne Div
Ich denke, das wäre ein optimales Design für Blogs.
