D
Deejoy
Hi,
ich habe mich mal an das Thema CSS gewagt und meine Seite komplett von den Tabellen auf div umgestellt. Da es mir noch an Erfahrung fehlt wollte ich wissen was man an dem Quelltext noch verbessern könnte. Vielleicht läßt er sich ja auch noch etwas verkürzen ich hab das gefühl das ich es teilweise recht umständlich gelößt habe.
Hier der Quelltext. Hier habe ich den CSS Style noch nicht ausgelagert !
Da ist ein abschnitt drin wo ich noch eine Tabelle drin habe weil ich dort das Bild mittig haben wollte. Klappt leider noch nicht so ganz vielleicht hat jemand nen guten Tip.
Gruß
Deejoy
ich habe mich mal an das Thema CSS gewagt und meine Seite komplett von den Tabellen auf div umgestellt. Da es mir noch an Erfahrung fehlt wollte ich wissen was man an dem Quelltext noch verbessern könnte. Vielleicht läßt er sich ja auch noch etwas verkürzen ich hab das gefühl das ich es teilweise recht umständlich gelößt habe.
Hier der Quelltext. Hier habe ich den CSS Style noch nicht ausgelagert !
Code:
<!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="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<title>Site mit Css</title>
<!--
<link rel="stylesheet" href="sitecss.css" type="text/css"></link>
-->
<style type="text/css">
<!--
body {background-image: url(img/bg.gif); text-align:center;}
#head
{
width: 775px;
height: 107px;
margin: 0px;
padding: 0px;
vertical-align: top;
background-color:#990000;
background-image:url(img/header_ganz.jpg);
background-repeat:no-repeat;
}
#headtext
{
display: none;
}
.copyright{
background-color: #000000;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-align: left;
left: 67px;
top: 7px;
position: relative;
}
.copyright a:link{
background-color: transparent;
color: #FFFFFF;
text-decoration: none;
}
.copyright a:visited{
background-color: transparent;
color: #FFFFFF;
text-decoration: none;
}
.copyright a:hover{
background-color: transparent;
color: #FFFFFF;
text-decoration: underline;
}
.copyright a:active{
background-color: transparent;
color: #FFFFFF;
text-decoration: none;
}
.reddotline {
height: 100%;
background-image: url(img/reddottedline_bg.gif);
background-repeat: repeat-y;
}
-->
</style>
</head>
<body>
<!-- Ausenrahmen -->
<div style="position: relative; width:775px;height:auto;min-height:575px; margin: 0px auto 100px auto;text-align:center; padding:0px; background-color:#FFFFFF; border:1px solid #000000; top:15px;">
<!-- Header Anfang -->
<h1 id="head">
<span id="headtext">Header Text</span>
</h1>
<!-- Header Ende-->
<!-- Navigation Anfang -->
<div id="nav11" style="float:left;width:775px;left:0px; height:33px; background-color:#FFF;">
<div id="navi_011" style="float:left;width: 244px;height:33px; background-image: url(img/header_r3_c1.jpg); background-repeat:no-repeat;"></div>
<div id="navi_012" style="float:left;width: 42px;height:33px; background-image: url(img/home.jpg); background-repeat:no-repeat;"></div>
<div id="navi_013" style="float:left;width: 30px;height:33px; background-image: url(img/header_r3_c4.jpg); background-repeat:no-repeat;"></div>
<div id="navi_014" style="float:left;width: 55px;height:33px; background-image: url(img/ximg1.jpg); background-repeat:no-repeat;"></div>
<div id="navi_015" style="float:left;width: 33px;height:33px; background-image: url(img/header_r3_c6.jpg); background-repeat:no-repeat;"></div>
<div id="navi_016" style="float:left;width: 50px;height:33px; background-image: url(img/ximg2.jpg); background-repeat:no-repeat;"></div>
<div id="navi_017" style="float:left;width: 31px;height:33px; background-image: url(img/header_r3_c8.jpg); background-repeat:no-repeat;"></div>
<div id="navi_018" style="float:left;width: 51px;height:33px; background-image: url(img/ximg3.jpg); background-repeat:no-repeat;"></div>
<div id="navi_019" style="float:left;width: 31px;height:33px; background-image: url(img/header_r3_c11.jpg); background-repeat:no-repeat;"></div>
<div id="navi_0110" style="float:left;width: 62px;height:33px; background-image: url(img/header_r3_c12.jpg); background-repeat:no-repeat;"></div>
<div id="navi_0111" style="float:left;width: 146px;height:33px; background-image: url(img/header_r3_c13.jpg); background-repeat:no-repeat;"></div>
</div>
<div style="clear:left;"></div>
<!-- Navigation Ende-->
<!-- Laufleiste Anfang -->
<div id="main" style="float:left;width:775px;left:0px;background-color:#999999"><img src="img/spacer.gif" height="10" alt="spacer" ></img></div>
<!-- Laufleiste Anfang -->
<div style="clear:left;"></div>
<!-- Menu Anfang -->
<div id="menu" style="float:left;width: 165px; height:auto;left:0px; background-color:#FF0000;"> menu</div>
<!-- Menu Ende-->
<!-- Trennleiste Anfang -->
<div id="menu_leiste" style="float:left; margin:0px; padding:0px;width: 15px;height:auto;background-color:#FFF;">
<table class="reddotline" width="15" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="reddotline"valign="middle"><img src="img/reddottedline.gif" width="15" height="392" alt="spacer" ></img></td>
</tr>
</table>
</div>
<!-- Trennleiste Ende -->
<!-- Main Content Anfang -->
<div id="content" style="float:left;width: 595px;top:0;background-color:#FF9999;">
</div>
<!-- Main Content Ende-->
<div style="clear:left;"></div>
<!-- Fusszeile -->
<div style="position:relative;width:775px;text-align:center;background-color:#FFF;">
<div style="float:left;width:531px; margin: 0px ;height:26px;background-color:#000000; text-align: left;"><span class="copyright"> © 2005 Dee |</span></div>
<div style=" position:absolute;left:531px;width:244px;height:33px;background-color:#FFF; background-image:url(img/footright.gif);"> </div>
<div style=" float:left; width:531px;height:7px; background-color:#FFFFFF;background-image:url(img/footbg.gif); background-repeat:repeat-x; background-position:bottom;">
<img src="img/spacer.gif" width="33" height="7" alt="spacer"></img></div>
</div>
<!-- Fusszeile Ende-->
</div>
</body>
</html>
Da ist ein abschnitt drin wo ich noch eine Tabelle drin habe weil ich dort das Bild mittig haben wollte. Klappt leider noch nicht so ganz vielleicht hat jemand nen guten Tip.
Gruß
Deejoy