Tabellenlayout in div geändert

Status
Nicht offen für weitere Antworten.
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 !

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;">&nbsp;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">&nbsp;&nbsp;&copy; 2005 Dee&nbsp;&nbsp;|</span></div>

<div style=" position:absolute;left:531px;width:244px;height:33px;background-color:#FFF; background-image:url(img/footright.gif);">&nbsp;</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
 
Was mir schonmal schräg reinkommt, sind die vielen divs hintereinander. Das ist wohl kaum nötig.

Bezüglich CSS:
  • Wenn du Angaben mit 0 machst, brauchst du keine Einheit anzugeben – 0 Pixel sind gleichviel wie 0 Zentimeter.
  • Angaben wie die folgende:
Code: 
background-color:#990000;
background-image:url(img/header_ganz.jpg);
background-repeat:no-repeat;
kannst du so zusammenfassen:
Code: 
background:#900 url('img/header_ganz.jpg') no-repeat;
Wie du siehst, kann man die 216 ähm … Grundfarben (?) des Webs auch nur mit 3 Zeichen schreiben. (Die Grundfarben sind die, in denen jeweils die zwei Ziffern einer Farbe gleich sind und entweder 0, 3, 6, 9, C oder F sind.)
  • Dasselbe gilt für die font-Angaben (obwohl das bei mir bisher noch nicht funktioniert).
  • Des weiteren kannst du offensichtlich die Angaben für .copyright a:link, .copyright a:hover und .copyright a:active wie folgt zusammenfassen:
Code: 
.copyright a:link, .copyright a:hover, .copyright a:active {
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;
}

.copyright a:visited{
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;
}
Nochmal kurz was zum Code: Es geht bei tabellenlosem Layout nicht darum, alles in Divs zu stopfen, wie du das getan hast. Es geht vielmehr darum, das richtige Markup für einen bestimmten Teilbereich auszuwählen. Zum Beispiel könntest/solltest du die Navigation in eine Liste (ul) packen, da sie eine listenartige Struktur hat.
 
Hi,
erstmal vielen dank mach mich gleich mal an die Umsetzung.

SilentWarrior hat gesagt.:
Was mir schonmal schräg reinkommt, sind die vielen divs hintereinander. Das ist wohl kaum nötig.
Zum Vergrößern anklicken....

Finde ich eigentlich ja auch aber ich weiß es ja noch nicht besser

Nochmal kurz was zum Code: Es geht bei tabellenlosem Layout nicht darum, alles in Divs zu stopfen, wie du das getan hast. Es geht vielmehr darum, das richtige Markup für einen bestimmten Teilbereich auszuwählen. Zum Beispiel könntest/solltest du die Navigation in eine Liste (ul) packen, da sie eine listenartige Struktur hat.
Zum Vergrößern anklicken....

Ja das es nicht darum geht alles irgendwie in ein div zu packen ist mir bewust. Deshalb ja auch meine frage hier weil mir es dann schon sehr viel und auch unnötig vorkam. Es ist halt immer die frage wie soll man es besser machen... ich habe jetzt von Freitag bis heute früh etliche Foren und Howtos durchgearbeitet habe mir andere Seite angeschaut wie die es umsetzen aber am Anfang will ja nicht immer alles gleich so wie man es möchte. Und da es ja etwas schwer ist eigene Fehler selbst zu erkennen habe ich ja hier gefragt.
Danke für die Tipps werde gleich mal ein paar sachen ändern.

Gruß
Deejoy
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück