Mein Design

Basti · 5. April 2009

Hallo liebe Community,

ich habe mal mein eigenes Design gebastelt, schreibt mir doch mal

wie es euch gefällt:

http://projectdestyny.pr.funpic.de/destiny/index.html

Den weissen Hintergund änder ich noch : )

Gruß,

Basti

lauras · 5. April 2009

nun, da du keinen inhalt hast erkennt man nicht viel von dem design... soeines zeichnet sich ja auch durch dei gestaltung von boxen und menues aus... vllt solltest du das noch hinzufügen... aber sonst ganz nett...

das headerbild ist jedoch etwas verpixelt...

Basti · 5. April 2009

Sag das mit dem Headerbild Gimp... hab Quali auf 100 % gestellt, kann ich nix für, ich könnte höchstens nochmal Paint nehm, da krieg ich die Wellen nur net so gut hin : )

Ich finde man sollte nicht missachten das ich noch nicht so lange dabei bin : )

Aber danke für die Rückmeldung!!!

Jetzt exklusiv, mein CSS Code:

Code

* {
	margin:0;
	padding:0;
}




#seite {
	width: 1000px;
	height: 1200px;
	margin: 0 auto;
}




#kopfbereich {
    margin-top: 50px;
	width: 1000px;
	height: 100px;
}




#kopfbereich1 {
    margin-top: 50px;
	padding: 0px;
	width: 1000px;
	height: 100px;
	background-color: #0066FF;
	border:5px solid #FF6600;
	}




#kopfbereich p {
	font-family: Arial;
}




#steuerung {
	padding: 10px;
	width: 1000px;
	height: 40px;
	background-color: #FF6600;
}




#steuerung ul {
	list-style-type: none;
}




#steuerung ul li a:link {
	list-style-type: none;
	font-family: Comic Sans MS;
	color: #000000;
	text-decoration: underline;
	float: left;
	color: #000;
	display: block;
	padding: 10px;
	background-color: silver;
	border: 3px solid black;
	margin-right: 5px;
	text-align: left;
	left:10px;top:50px;
	bottom:1em;
}




#steuerung ul li a:visited {
	list-style-type: none;
	font-family: Comic Sans MS;
	color: #000000;
	text-decoration: none;
	float: left;
	display: block;
	padding: 10px;
	margin-right: 5px;
    background-color: silver;
	border: 3px solid black;
	bottom:1em;
}




#steuerung ul li a:hover {
	list-style-type: none;
	font-family: Comic Sans MS;
	color: #000000;
	text-decoration: underline;
	float: left;
	display: block;
	padding: 10px;
	background-color: gainsboro;
	border-left: 2px solid black;
	border-right: 4px solid black;
	bottom:5em;
}




#inhalt {
	padding: 10px;
	width: 990px;
	height: 750px;
	background-color: #FF6600;
	border: 5px solid #FF6600;
	font-family: Comic Sans MS;
	color: #000000;
}




#footer {
    margin-bottom: auto;
    margin-top: 5px;
    width: 1000px;
    height: 10px;
    background-color: white;
    text-align:center;
}

Alles anzeigen

lauras · 5. April 2009

schön... und?

Basti · 5. April 2009

Naja nur damit ihr es sehen könnt : D

Habe jetzt einen kleinen Inhalt erstellt.

lauras · 5. April 2009

schon besser... du machst dich, üb noch ein bisschen, dann wird das...

Basti · 5. April 2009

Also jetzt wo ich das so sehe, sieht das zusammen mit Bananen und Äpfeln voll cool aus oder?

Vor allem bin ich stolz auf die Steuerung : )

Am meissten stolz bin ich das ich immer besser werde und ein einfaches CSS Design schon ohne spicken aufmalen kann : )

lauras · 5. April 2009

sieht gut aus! aber ist es gewollt, dass er zwischen header und inhaltsbereich nen weißen strich anzeigt?

Basti · 6. April 2009

Ich habe nur unter der Steuerung (die grauen Kästen) eine Trennlinie, sieht besser aus finde ich:

Code

<hr size="3" align="middle" color="000000"/ >

Aber das color="000000" bringt garnichts, der ist trotzdem in Orange eingefärbt.

Wenn da jedoch ein ungewollter Strich ist liegt es am Design, is eh komisch,

der Inhalt ist 1000px breit aber den Header musste ich auf 1019 stellen damit es klappt...

heckmann · 6. April 2009

Jo ist schon ganz gut finde ich.Mach weiter so und du machst vielleicht mal eine richtig geile Page mit Gädtrbuch etc. .

Basti · 6. April 2009

Hach Gästebuch is ja schön und gut, aber das würd ich dann mit MySQL machen und das muss ich noch mit PHP einrichten, und PHP ist noch nicht meine Stärke : )

Aber danke dir : )

NeoAramis · 6. April 2009

Warum machst du die Querstriche mit dem <hr />-Tag, da würde ich einen weiteren Container (<div></div>) mit einem Border machen?

Basti · 6. April 2009

Wie vielleicht auffällt gibt es auf der HP viele Striche, und ich möchte mit

den DIVs jetzt nicht so viel durcheinanderbringen, ich finde,

das ist für mich übersichtlicher und für den Anfang einfacher : )

Ich weiss es ist besser so viel wie möglich mit CSS zu machen.

NeoAramis · 6. April 2009

Dann würde ich aber den Querstrich auch in CSS definieren, dann kannst ihn auch ein bisschen ausführlicher gestalten, denn ich finde der Strich sieht ein bisschen deplatziert aus und passt nicht zum Rest.

Sonst hast du einen guten Ansatz geschaffen. Ist es meine Vorlage, die ich dir geschickt habe?

Basti · 6. April 2009

Ja, nur eingefärbt, oben halt das Logo rein, und dann "seite" verschoben das Abstand da ist,

und halt noch Steuerung und so angepasst : )

Achja Größe is noch geändert und footer rangebaut : P

Aber das Grundgerüst ist dein Punktegewirr : )

lauras · 6. April 2009

Zitat von "Basti"

Aber das color="000000" bringt garnichts, der ist trotzdem in Orange eingefärbt.

liegt daran, dass color kein html-attribut ist dafür brauchst du ein

Code

style

um zu zeigen, dass es css ist!

enweder in der css

Code

hr {
color: #000000
}

oder im html

Code

<hr  style="color: #000000;"/>

Basti · 7. April 2009

Deswegn malt scriptly "color" auch rot ein, danke dir

Aber ich glaube fast ich lasse das so.

Ich weise jetzt mal darauf hin das ich es gut gemeistert habe im Thema "Schlagzeug" eine 2. Steuerung einzubauen : )

YetiZwerg · 7. April 2009

versuch es mal mit folgenden Codes...

index.htm

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" xml:lang="de" lang="de">
<head>
    <title>Ein Kessel buntes</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="Spass;Spannung;Vergn&uuml;gen;Glaube" />
    <meta name="keywords" content="" />
    <meta name="generator" content="" />
	<link href="style.css" type="text/css" rel="stylesheet" />




</head>
<body>
	<div id="seite">
		<div id="kopfbereich">
		  <img src="head.jpg" align="middle" width="1020" />




		</div>
		<div id="steuerung">
		    <ul>
				<li><a href="index.html">Startseite</a></li>




				<li><a href="obst.html">Obst</a></li>
				<li><a href="drum.html">Schlagzeug</a></li>
				<li><a href="#">In Arbeit</a></li>
			</ul>
		</div>
		<div id="inhalt">
		 <hr size="3" align="middle" style="color='#FF6600';" />
           <p>Hallo, willkommen bei Project Destiny, ein Kessel buntes,</p>




           <p>bis jetzt ist noch nicht viel fertig, aber ihr k&ouml;nnt euch schon</p>
           <p>&uuml;ber &Auml;pfel und Bananen informieren.</p>
           <br />
           <p>Wir w&uuml;nschen euch viel Spass,</p>
           <p>Project Destiny Team</p>




		</div>
	   <div id="footer">
	      <p>Copyright by project_destiny@web.de</p>
	   </div>
	</div>
</body>
</html>

Alles anzeigen

style.css

Code

* {
	margin:0;
	padding:0;
}




html, body {
  background: #FFFFCC;
}




#hintergrund {
    width: 100.01%;
    height: 100.01%;
    background-image: herz.jpg;
    background-repeat: repeat;
}




#seite {
	width: 1000px;
	min-height: 800px;
	margin: 0 auto;
}




#kopfbereich {
    margin-top: 50px;
	width: 1000px;
	height: 100px;
}




#kopfbereich1 {
    margin-top: 50px;
	padding: 0px;
	width: 1000px;
	height: 100px;
	background-color: #0066FF;
	border:5px solid #FF6600;
	}




#kopfbereich p {
	font-family: Arial;
}




#steuerung {
	padding: 10px;
	width: 1000px;
	height: 40px;
	background-color: #FF6600;
}




#steuerung ul {
	list-style-type: none;
}




#steuerung ul li a:link {
	list-style-type: none;
	font-family: Comic Sans MS;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	float: left;
	color: #000;
	display: block;
	padding: 10px;
	background-color: silver;
	border: 3px solid black;
	margin-right: 5px;
	text-align: left;
	left:10px;top:50px;
	bottom:1em;
}




#steuerung ul li a:visited {
	list-style-type: none;
	font-family: Comic Sans MS;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	float: left;
	display: block;
	padding: 10px;
	margin-right: 5px;
    background-color: silver;
	border: 3px solid black;
	bottom:1em;
}




#steuerung ul li a:hover {
	list-style-type: none;
	font-family: Comic Sans MS;
	color: #000033;
	text-decoration: none;
	font-weight: bold;
	float: left;
	display: block;
	padding: 10px;
	background-color: gainsboro;
	border: 3px solid black;
	border-bottom: 4px solid black;
	bottom:5em;
}




#inhalt {
	padding: 10px;
	width: 990px;
	min-height: 550px;
	background-color: #FF6600;
	border: 5px solid #FF6600;
	font-family: Comic Sans MS;
	color: #000000;
	font-weight: bold;
}




#inhalt p {
	font-family: Comic Sans MS;
	color: #000000;
	font-weight: bold;
}
#footer {
    margin-bottom: auto;
    margin-top: 5px;
    width: 1000px;
    height: 10px;
    background-color: #FFFFCC;
    text-align:center;
}

Alles anzeigen

Ich habe deine Seite etwas verkürzt, dennoch passt sie sich der Länge des Testes an, sollte er größer werden... dies macht die Seite übersichtlicher... man muss also nicht mehr scrollen, um nichts zu sehen...

Basti · 7. April 2009

Ich hab meinen Grundsatz mal geändert, ich nehm nich mehr irgendwelche Codes,

sondern ich möchte immer wissen was du jetzt wie, wo, warum geändert hast,

zumal ich 2 Styles habe und die auch schon etwas anders sind als dein jetziges,

trotzdem schonmal danke : )

YetiZwerg · 7. April 2009

den Style, den ich da gepostet habe ist deiner... und zwar der, den du 5 min vor meinem Post auf deinem FTP liegen hattest...

was ich geändert habe, habe ich dir geschrieben...

in der index.htm habe ich deinen <hr /> editiert (dass er stimmt) und in der CSS habe ich deine Seite kürzer gemacht...

erst lesen dann denken und als letztes posten...

das sind nicht iwelche Codes... es ist deiner...

Mein Design

Jetzt mitmachen!

Teilen