CSS oder zurück an den Start...

Status
Nicht offen für weitere Antworten.

wazzup

Grünschnabel
Hallo Leutz !

..habe als Aufgabe eine Site zu erstellen :) - in begrenztem Zeitraum für eine Prüfung -jetzt wollte ich die ganze Seite mit CSS aufbauen - bin aber nach kurzem, wenn ich zB über ein fixes Bild ein paar vertikale Links legen wollte, an die Grenzen meiner CSS Programmierkunst gestoßen :confused: , die zugegebener Maßen nicht von weit her sind - habe es versucht mit ineinander geschachtelten DIV Tags zu realisieren gesteuert über eine externe CSS - ist nix bei rausgekommen einmal waren die Links net zu sehen oder das ganze is unterschiedlich gefloated :mad: . Habe ich mir zuviel vorgenommen oder muss ich einfach noch etwas Muße in das Projekt investieren ? Kann man sich CSS für ein nicht allzu aufwändiges Projekt selbst beibringen - oder bedarf es doch des längeren Studiums ? Nicht allzu aufwändig - was meint er damit werdet ihr fragen - is doch ziemlich relativ - naja also über ein in Photoshop erstelltes Layout sollen über Links eine Bildergallerie, etwas Text, ev. ein paar Movies erreichbar sein und das ganze vor einem ansprechenden Hintergrund. :rolleyes: . Es sollte also zuerst Mal ein Grundkonzept her das ich dann je Nach Seite verändere - ne Vorlage sozusagen !

Hier mein code:
HTML:
<!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=iso-8859-1" />
<title>Töpferworkshop - Smartworks</title>
<link href="eigene.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {color: #CCCCCC}
body {
	background-image: url(images/HG%202.jpg);
}
.Stil2 {color: #000033}
-->
</style>
</head>

<body>
<div id="table">
	<img src="images/VG neu br.jpg" alt="Smartworks" width="624" height="768" border	="0" usemap="#Map" />
	<map name="Map" id="Map"><area shape="rect" coords="24,39,604,126" href="	#home.html" />
</map>
</div>
<div id="navigation2">
	<a href="#" class="Stil2">Platzhalter</a></div>
<div id="navigation1">
	<table width="500">
      		<tr>
        		<td width="69"><a href="#" class="Stil1">Objekte</a></td>
       			<td width="89"><a href="#" class="Stil1">Workshops</a></td>
        		<td width="76"><a href="#" class="Stil1">Kontakt</a></td>
        		<td width="76"><a href="#" class="Stil1">Affiliates</a></td>
			<td width="76"><a href="#" class="Stil1">BIOS</a></td>
      		</tr>
    	</table>
</div>
<div id="navigation3">
	<a href="#" class="Stil2">Impressum</a>
	<a href="#" class="Stil2">AGB's</a></div>
</body>
</html>

..und hier noch der CSS :

HTML:
/* CSS Document */

body{
	padding: 0;
	margin: 0;
}
#table{
	position: absolute;
	top: 10px;
	left: 25%;
}
#navigation1{
	font-family: "Trebuchet MS", Georgia, Times, serif;
	font-size: 80%;
	font-weight: normal;
	color: #FFFFFF;
	background-color: transparent;
	position: absolute;
	top: 141px;
	left: 30%;
	width: 500px;
		
}
#navigation2{
	font-family: "Trebuchet MS", Georgia, Times, serif;
	font-size: 80%;
	font-weight: normal;
	color:#FFFFFF;
	background-color: transparent;
	position: absolute;
	top: 25px;
	left: 77%;
}
#navigation3{
	font-family: "Trebuchet MS", Georgia, Times, serif;
	font-size: 80%;
	font-weight: normal;
	color:#FFFFFF;
	background-color: transparent;
	position: absolute;
	top: 738px;
	left: 30%;
	width: 59px;
		
}
#navigation4{
		font-family: "Trebuchet MS", Georgia, Times, serif;
		font-size: 80%;
		font-weight: normal;
		color:#FFFFFF;
		background-color: transparent;
		position: absolute;
		top: 146px;
		left: 622px;
		
}

Frage hab ich's überhaupt falsch angepackt oder bin ich am richtigen Weg
und muss nur noch ein wenig herumfeilen *verzweifel*?

greez wazzup
 
Du solltest dich zunächst mal von der Tabellendenkweise lösen. Tables brauchst du für's Layout nicht. Dennoch sind sie angebracht, wenn ein Inhalt tabellarisch dargestellt werden soll.
Die Navigation muss man ebenfalls nicht in Zellen schreiben. Dafür und für die Linkformatierung gibt's das Listenformat. Zahlreiche Beispiele findest du hier: http://css.maxdesign.com.au/listamatic/

Absolute Positionierungen führen oft irgendwann zu Problemen. Sofern sie nicht für gezielte Effekte erforderlich sind, sollte man darauf möglichst verzichten. Stattdessen kann man mit height, width und margin-Werten arbeiten.

Eigenschaften, die sich in allen Elementen wiederholen (hier z.B. die Schriftart) brauchst du nur einmal in den body zu schreiben.

Anhand deines Codes ist nicht unbedingt erkennbar, wie die HP im Endeffekt aussehen soll. Hier findest du Beispiele für einige "Grundgerüste":
http://www.stichpunkt.de/css/bereiche.html
http://www.css4you.de/wslayout1/index.html

CSS kann man sich durchaus selbst beibringen, wenn man Interesse hat. Ich habe mit dem Buch "Jetzt lerne ich CSS" von Florence Maurice sehr gute Erfahrungen als Einsteiger gemacht. Etwas Theorie ist erforderlich, der Rest kommt duch learning by doing.
 
Status
Nicht offen für weitere Antworten.
Zurück