[Release] Zwei Wartungsarbeiten-Pages

[Poccix]

Hallo Community,

da ich derzeit mich in HTML und CSS einlese möchte ich die dabei entstandenen Werke mit euch teilen.

Wartungsarbeiten-Page poccix:

 Spoiler

Wartungsarbeiten-Page EXTESSYARTS:

 Spoiler

Ich weiß, das man es mit jQuery deutlich schicker hätte lösen können, jedoch stehe ich noch am Anfang und denke dafür sollten die Resultate ihren Zweck gut erfüllen.

Danke an EXTESSYARTS für das zweite Design & DasKuchen für kleinere Hilfereien :x Miyu' auch wieso fragt ihn.

Gruß,
Lord Poccix

[Lord Lix']

sieht sehr schön aus,
weiter so hase!

Grüße,
Miyu'

[kangar00]

Hallo Lord Poccix,
beide Desings sehen sehr gut aus!
Danke fürs teilen!

PS: Man muss kein jQuery können um so eine Page zu coden. Für deine Anfänge finde ich sie allerdings sehr gut!

[♥NuuB♥]

Sehr schön : )

[Poccix]

Originally Posted by Sιr Sну

Hallo Lord Poccix,
beide Desings sehen sehr gut aus!
Danke fürs teilen!

PS: Man muss kein jQuery können um so eine Page zu coden. Für deine Anfänge finde ich sie allerdings sehr gut!

Dankeschön, denke aber mit jQuery hätte man es schicker Gestalten können also der Ladebalken.

Originally Posted by ♥NuuB♥

Sehr schön : )

Danke dir !

[K.A.K.A.S.H.I]

Sieht sehr gut aus danke fürs teilen.

[Assassin']

Gut aussehen tun beide, wirklich. Was den Quellcode anbelangt möchte ich dir ein paar Hinweiße geben.

• In-Line-CSS ist nicht unbedingt schön, besonders, wenn du eine CSS-Datei einbindest und mitlieferst. (Gemeint sind die Farben) für die Schrift innerhalb des Balkens, Möglich wäre <p class="text">um den gesamten Inhalt zu machen, und dann per .text {} anweißungen übergeben
• Eine ID (div id="") darf maximal einmal pro Dokument vorkommen. Wen du für beide die selbe Erscheinung möchtest, arbeite mit <div class=""></div>
• Einrückungen werden mit dem Tabulator (Über Feststelltaste) gemacht, die W3C-Prüfung erkennt Leerzeichen und meldet diese als Fehler
• Elemente, die geöffnet und sofort wieder geschlossen werden, kann man in eine Zeile hineinschreiben <div id="Element"></div>
• font color="" ist nicht mehr valide (<span style="" wäre korrekt), aber auch hier keine direkte Farbangabe, aber hier kannst du anstelle des <b>-tags <span style="font-weight:bold">INHALT</span> angeben
• Zeilenumbrüche werden mit <br \> valide getätigt
• Benutze nach dem <br \> auch eine Neue Zeile mit der selben Einrückung, wie das gesamte Element
• Im Copyright wird das a-tag nicht geschlossen, stattdessen steht ein schließendes font-tag
  
  Zur Überschaubarkeit stellt man in CSS-Dateien eigentlich auch alle einzelnen Elemente als Block dar, während innheralb eines Blocks jede Anweißung um eine Tabulatorgröße eingerückt ist.
  
  Das Wärs erstmal, hoffe du kannst damit etwas anfangen. Kannst zur Übung ja mal versuche umzusetzen, was ich dir geschrieben hab, wenns Probleme gibt, einfach melden

[Poccix]

Danke Assassin',

werde mal versuchen mit deinen Tipps es neu umzusetzen.

Gruß,
Lord Poccix

[Assassin']

Ich warte auf ein Ergebnis, ich stelle derweil selber eines her, damit du etwas zum Vergleichen hast

[kangar00]

Originally Posted by Assassin'

Gut aussehen tun beide, wirklich. Was den Quellcode anbelangt möchte ich dir ein paar Hinweiße geben.

• In-Line-CSS ist nicht unbedingt schön, besonders, wenn du eine CSS-Datei einbindest und mitlieferst. (Gemeint sind die Farben) für die Schrift innerhalb des Balkens, Möglich wäre <p class="text">um den gesamten Inhalt zu machen, und dann per .text {} anweißungen übergeben
  
• Eine ID (div id="") darf maximal einmal pro Dokument vorkommen. Wen du für beide die selbe Erscheinung möchtest, arbeite mit <div class=""></div>
• Einrückungen werden mit dem Tabulator (Über Feststelltaste) gemacht, die W3C-Prüfung erkennt Leerzeichen und meldet diese als Fehler
• Elemente, die geöffnet und sofort wieder geschlossen werden, kann man in eine Zeile hineinschreiben <div id="Element"></div>
• font color="" ist nicht mehr valide (<span style="" wäre korrekt), aber auch hier keine direkte Farbangabe, aber hier kannst du anstelle des <b>-tags <span style="font-weight:bold">INHALT</span> angeben
• Zeilenumbrüche werden mit <br \> valide getätigt
• Benutze nach dem <br \> auch eine Neue Zeile mit der selben Einrückung, wie das gesamte Element
• Im Copyright wird das a-tag nicht geschlossen, stattdessen steht ein schließendes font-tag
  
  Zur Überschaubarkeit stellt man in CSS-Dateien eigentlich auch alle einzelnen Elemente als Block dar, während innheralb eines Blocks jede Anweißung um eine Tabulatorgröße eingerückt ist.
  
  Das Wärs erstmal, hoffe du kannst damit etwas anfangen. Kannst zur Übung ja mal versuche umzusetzen, was ich dir geschrieben hab, wenns Probleme gibt, einfach melden

Ist soweit richtig.
<div id="beispiel">
<div class"beispiel2"></div>
<div class"beispiel3"></div>
</div>

Wenn ein neuer "Part" (hoffe du weißt was ich meine) anfängt, kann man auch wieder eine 'id' benutzen.

Für Texte sollte immer das <p> Tag benutzt werden.

[Poccix]

Zu Design Nr1:

index.html

 Spoiler

<!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=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet' type='text/css'>
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
	<div id="logo">
	</div>
	<div class="content">
		<div class="loadbarbox">
			<div id="loadbar">   
			</div>
			<div class="loadstatus">
			<p>90% abgeschlossen...</p>
			</div>
		</div>
		<div class="contenttextbox">
			<div class="contenttext">
				<p><span id="contenttitle1text">Client-Wartungsarbeiten:</span></b> Hier seht ihr den aktuellen Status der Client-Wartungsarbeiten.<br />
				Für weitere Informationen besuchen sie unser <u><a href="#">Forum</a></u>.</p>
			</div>
		</div>
	</div>
	<div class="content">
		<div class="loadbarbox">
			<div id="loadbar2">   
			</div>
			<div class="loadstatus">
			<p>24% abgeschlossen...</p>
			</div>
		</div>
		<div class="contenttextbox">
			<div class="contenttext">
			<p><span id="contenttitle2text">Server-Wartungsarbeiten:</span> Hier seht ihr den aktuellen Status der Server-Wartungsarbeiten.<br />
			Für weitere Informationen besuchen sie unser <u><a href="#">Forum</a></u>.</p>
			</div>
		</div>
	</div>
	<div id="copyright">
		<p>© Servername | Design and Code by <a href="http://poccix.de">poccix.de</a></p>
	</div>
</div>
</body>
</html>

style.css

 Spoiler

@charset "utf-8";
/* CSS Document */
body {
	background:url(bg.png);
	margin:0; font-family: 'Fenix', serif;
}
a:link {
	text-decoration: none;
	color: #666666;
}
.wrapper {
	width: 750px;
	margin: 0 auto;
}
.content {
	background:url(content.png) top center no-repeat;
	height: 120px;
	width: 750px;
	top: -100px;
}
.loadbarbox {
	position:relative;
	top: 10px;
	left: 93px;
	width: 561px;
}
#loadbar {
	background-image:url(loadfull.png);
	width: 90%;
	height:49px;
}
#loadbar2 {
	background-image:url(loadfull.png);
	width: 24%;
	height:49px;
}
.loadstatus {
	position:relative;
	top: -50px;
	text-align: center;
	text-shadow: 1px 1px 0 #767676;
	color: #e5e5e5;
}
.contenttextbox {
	position: relative;
}
.contenttext {
	position:relative;
	top: -33px;
	text-align: center;
	text-shadow: 1px 1px 0 #d0d0d0;
	color: #808080;
	font-size:13px;
}
#copyright {
	position:relative;
	text-align: center;
	text-shadow: 1px 1px 0 #ededed;
	color: #c0c0c0;
	font-size:10px;
}
#copyright a {
	color:#9f9f9f;
}
#logo {
	background:url(logo.png);
	height: 100px;
	width: 450px;
	margin:0 auto;
}
#contenttitle1text {
	color:#9b0000;
	font-weight:bold;
}
#contenttitle2text {
	color:#CC9900;
	font-weight:bold;
}

[xCaLTy]

Sieht nice aus danke

[kangar00]

<div class="loadstatus">
	90% abgeschlossen...
</div>

Würds mit <p class="..."> machen

<span style="font-weight:bold" id="contenttitle2text">

Wenn du eine 'id' setzt kannst du diese auch in CSS verwenden:

#contenttitle2text {
font-weight: bold;
}

[Assassin']

Schaut soweit gut aus, im oberen Balken ist noch ein schließendes </b> das da nicht mehr hingehört.
loadbar und loadbar2 hättest du noch als id stehen lassen können, die kommen ja nur einmal auf der Seite vor.
Ich hab das jetzt so umgesetzt, dass gar kein CSS mehr innerhalb der HTML vorkommt und hab alles über CSS gelöst.

<p>-Elemente um die Texte wären auch noch schön, musst eben die Elemente neu ausrichten.
Die u-tags in den Links gibts auch nicht mehr, per CSS gelöst.
Ach ja contenttextbox und contenttext: hier hebt sich die top-Regel auf, kannst also auch weglassen.

 Spoiler

<!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=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>
<body>
	<div id="wrapper">
		<div id="logo"></div>
		<div class="content">
			<div class="loadbarbox">
				<div id="loadbar"></div>
				<div class="loadstatus">
					90% abgeschlossen...
				</div>
			</div>
			<div class="contenttextbox">
				<div class="contenttext">
					<span class="text">Client-Wartungsarbeiten:</span> Hier seht ihr den aktuellen Status der Client-Wartungsarbeiten.<br \>
					Für weitere Informationen besuchen sie unser <a href="#"><span class="url">Forum</span></a>
				</div>
			</div>
		</div>
	
		<div class="content">
			<div class="loadbarbox">
				<div id="loadbar2"></div>
				<div class="loadstatus">
					24% abgeschlossen...
				</div>
			</div>
			<div class="contenttextbox">
				<div class="contenttext">
					<span class="text">Server-Wartungsarbeiten:</span> Hier seht ihr den aktuellen Status der Server-Wartungsarbeiten.<br \>
					Für weitere Informationen besuchen sie unser <a href="#"><span class="url">Forum</span></a>
				</div>
			</div>
		</div>
		<div id="copyright">
			© Servername | Design and Code by <a href="http://poccix.de">poccix.de</a>
		</div>
	</div>
</body>
</html>

 Spoiler

@charset "utf-8";
/* CSS Document */
body {
	background:url(bg.png); 
	margin:0; 
	font-family: 'Fenix', serif;
}

a:link {
	text-decoration: none;
}

#wrapper { 
	width: 750px; 
	margin: 0 auto;
}

.content {
	background:url(content.png) top center no-repeat; 
	height: 120px; 
	width: 750px; 
	top: -100px;
}

.loadbarbox {
	position:relative; 
	top: 10px; 
	left: 93px; 
	width: 561px;
}

#loadbar { 
	background-image:url(loadfull.png); 
	width: 90%; 
	height:49px;
}

#loadbar2 { 
	background-image:url(loadfull.png); 
	width: 24%; 
	height:49px;
}

.loadstatus { 
	position:relative; 
	top: -33px; 
	text-align: center; 
	text-shadow: 1px 1px 0 #767676; 
	color: #e5e5e5;
}

.contenttextbox { 
	position: relative; 

}

.contenttext { 
	position:relative; 
	text-align: center; 
	text-shadow: 1px 1px 0 #d0d0d0; 
	color: #808080; 
	font-size:13px
}

.text {
	color: #9b0000;
	font-weight: bold;
}

.url {
	color: #666666;
	text-decoration: underline;
}

#copyright { 
	position:relative;
	text-align: center; 
	text-shadow: 1px 1px 0 #ededed; 
	color: #c0c0c0; 
	font-size:10px
}
#copyright a {
	color:#9f9f9f;
}

#logo { 
	background:url(logo.png); 
	height: 100px; 
	width: 450px; 
	margin:0 auto;
}

Was id und class angeht

Das besondere an CLASS ist, das damit mehrere Elemente ausgezeichnet werden können, dagegen die ID nur für 1 einziges Element pro Seite verwendet werden darf. ID ist also zur eindeutigen Bestimmung eines Elementes.

[Stαgє6]

Sehen ganz gut aus kann man gut gebrauchen