Eigenes Design mit modernem Layout

Beitrag von **Jasko** » Do 9. Aug 2012, 01:38

Ok, ich habe die naechsten Design Elemente fertig, hier der Inhalt Teil, ich habe jetzt einen Rahmen drum gezogen damit man das sieht, spaeter kann man diesen auch entfernen wenn es noetig sein sollte. Hier die bilder des Quellcode:

Achtung darauf achten in welchen Zeilen Die Codes beginnen, bei der CSS ist das nicht so wichtig kanns auch einfach drunter weiterschreiben bei der index.html ist es aber zu beachten.

MFG

PS: ich habe dir den Link zu einer Demo hier gelassen, rufe mal diesen auf um zu sehen wie es am Ende aussehen kann :U

Beitrag von **Simon** » Do 9. Aug 2012, 15:15

Also bevor ich abtippe kannst du Ruffy rausholen und den Rand von DBZ wegholen und den mal grau machen?

Beitrag von **Jasko** » Do 9. Aug 2012, 15:35

Du kannst das abtippen, und sei beruhigt, die Bilder werden bei dir nicht zu sehen sein, da das nur meine Version des ganzen ist. Wir gestallten ja das Design nach deinen Wuenschen, ich habe das ganze nur so rein gemacht um zu Zeigen wie man es nacher aufmotzen kann, muss man aber nicht und auch nicht mit diesen Bildern.

MFG

Beitrag von **Simon** » Do 9. Aug 2012, 17:59

Hi hab ein kleines pRoblem
Bei der Cssdatei hast du beim letzten mal weitergemacht als du bei diesem Mal angefangen hast
wo soll ich jetzt anfangen (weckhe Spalte)?
Ps:index hab ich schon

Beitrag von **Jasko** » Do 9. Aug 2012, 18:05

Du kannst zur orientation die Nummern vor den Linien benutzen, da steht z.B.

Code: Alles auswählen

159 /*Codes fuer den Inhalt Teil*/

An diesen zahlen bzw. den Linien-Nummern kannst du dich orientieren, aber wie oben schon geschireben kannst du bei dem CSS Code einfach unter deinen jetzigen Code weiter machen.

nach dem abtippen wird nur der Inhalt teil zu sehen sein, danach kommt noch der Footer Teil, und dann sind wir eigentlich schon fertig mit dem design, der rest ist dan aufpolieren und "pimpen" das du selbst in der CSS machen kannst, aber ich werde dir da noch eine weile beistehen bis du das selber kannst.

MFG

Beitrag von **Jasko** » So 12. Aug 2012, 14:06

OK,hier kommt noch der Footer Code zum abschliessen des Designs.

Die zwei ersten Bilder sind die Codes und das dritte Bild ist der Hintergrund für den Footer.

Und so sollte das ganze dan aussehen. DEMO

Wenn du einen Grauen Hintergrund haben willst dan solltest Du die CSS Datei aufmachen und hier:

unter body, so wie bei #rahmen, das Atributt für den Hintergrund angeben, z.B.

Code: Alles auswählen

background-color: #FF0000;

Das ist der Farbcode für rot, wenn Du einen anderen haben willst, kannst du HIER deine Farbe mischen und den Farbecode im Beispiel ändern. Ich habe es z.B. mit einem etwas helerem Ton als den Rahmenschatten probiert und es sah super aus.

MFG

Beitrag von **Simon** » Di 14. Aug 2012, 17:45

Also hab jetzt fertig: http://www.abload.de/image.php?img=hihi20k00.png
Wo ist mein Fehler?

Beitrag von **Jasko** » Di 14. Aug 2012, 18:19

Nun einen Fehler aus einem Bild heraus zu finden ist so gut wie unmoeglich, ich verstehe was du meinst, aber wo der Fehler im Code ist, kann ich anhand eines Bildes nicht sagen.

Hier, so sollte dein Code jetzt sein:
index.html

Code: Alles auswählen

<!DOCTYPE HTML>
<html>
	<head>
		<title>Design by Musawiz and Npage-Hilfe Team</title>
		<link rel="stylesheet" type="text/css" href="style.css"  />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	</head>
	<body>
		<div id="rahmen"><!--Anfang des Rahmen-->
			<header>
				<div class="htitel">Mein Anime Site</div>
			</header>
			<nav class="clearfix"><!--Anfang Navigation-->
					<ul>
						<li><a href="#">Startseite</a></li>
					</ul>
					<ul>
						<li><a href="#" class="top_eltern">Droplink</a>
							<ul>
								<li><a href="#">Sub 1:1</a></li>
								<li><a href="#" class="sub">Sub 1:2</a>
									<ul>
										<li><a href="#">Sub 1:2:1</a></li>
										<li><a href="#">Sub 1:2:2</a></li>
										<li><a href="#">Sub 1:2:3</a></li>
										<li><a href="#">Sub 1:2:4</a></li>
									</ul>
								</li>
								<li><a href="#">Sub 1:3</a></li>
								<li><a href="#" class="sub">Sub 1:4</a>
									<ul>
										<li><a href="#">Sub 1:4:1</a></li>
										<li><a href="#">Sub 1:4:2</a></li>
										<li><a href="#">Sub 1:4:3</a></li>
										<li><a href="#">Sub 1:4:4</a></li>
									</ul>
								</li>
								<li><a href="#" class="sub">Sub 1:5</a>
									<ul>
										<li><a href="#">Sub 1:5:1</a></li>
										<li><a href="#">Sub 1:5:2</a></li>
										<li><a href="#">Sub 1:5:3</a></li>
										<li><a href="#">Sub 1:5:</a></li>
										<li><a href="#">Sub 1:5:5</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
					<ul>	
						<li><a href="#" >Hauptlink</a></li>
					</ul>
					<ul>
						<li><a href="#" >Hauptlink</a></li>
					</ul>
					<ul>
						<li><a href="#" >Hauptlink</a></li>
					</ul>
					
					<div id="search" class="sucherot">
						<form action="#" method="GET">
							<input type="text" name="suche" id="suchleiste" placeholder="Suchen" />
							<input type="submit" name="suchsubmit" id="suchbutton" value="Los" />
						</form>
					</div>	
			</nav> <!--Ende Navigation-->
			<div id="inhalt"><!--Anfang des Inhalt-->
				<div class="inhalt-links"><!--Anfang des Haupt-Inhalt links-->
			
				</div><!--Ende des Haupt-Inhalt links-->
				<div class="inhalt-rechts"><!--Anfang des Neben-Inhalt rechts-->
			
				</div><!--Ende des Neben-Inhalt rechts-->
				<div class="clearfix"></div><!--Wichtig fuer die Design darstellung-->
			</div><!--Ende des Inhalt-->
			<footer>
				<p class="copyr">&copy; 2012 by <a class="copy" target="_blank" href="http://musawiz.npage.de">Mein Seiten Name</a></p>
			</footer>
		</div><!--Ende des Rahmen-->
	</body>
</html>

und so der CSS-Code
style.css

Code: Alles auswählen

/* CSS Datei zu meinem Design */

/*Eigene ausgangsdaten schaffen*/
body{
	margin:0px;
	padding:0px;
}

#rahmen {
	background-color: #FFFFFF; /* Hintergrundfarbe, angabe im Hex-Farbencode fur schwartz*/
	width:1000px; /*Angabe der Breite des Rahmens*/
	margin:auto; /*Definition des abstands links und rechts, auto=Mitte*/
}

/* Header-Bereich*/

header {
	background: url(bilder/header.png) top left no-repeat; /*Header Bild einstellen*/
	display:block; /* Gewerleistet dass, der ganze Header in breite und hoehe angezeigt wird*/
	height: 200px; /*Hoehe des Headers, am besten so hoch wie das Headerbild*/
	width:1000px; /*Breite des Headers, am besten so breit wie das Headerbild*/
}

.htitel {                 /*Hier definiren wir eine eigene Klasse, fuer den Headertitel*/
	color: #FFFFFF;      /*Schrifftfarbe*/
	font-family: verdana;/*Schrifftart*/
	font-size: 24px;	 /*Schrifftgroesse*/
	font-weight:bold;	 /*Schrifftdicke*/
	font-style:normal;	 /*Schrifftstil*/
	position:relative; 	 /*Titel position relative zum Headerbereich*/
	top: 120px;			 /*Position von oben*/
	left:20px;			 /*Position von links*/
}

/*Navigation*/

nav {
	border-top: 1px solid #222;
	background: url(bilder/navbg.png) top left repeat-x;
	font-size: big;
	font-family: arial, helvetica, sans-serif;
	line-height:40px;
} 
		
nav a {
	text-align: center;
	font-weight:bold;
	display:block;
	}
	
nav a:link, nav a:visited, nav a:active	{
	color: white;
	background: url(bilder/navbg.png) top left repeat-x;
	text-decoration:none;
	}
	
nav a:hover {
	color: white;
	text-shadow:2px 2px 10px #FF0000;
	text-decoration:none;
	}	
	
nav a.top_eltern, nav a.top_eltern:hover  {
	background-image: url(bilder/ddnav_runter.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
	
nav a.sub, nav a.sub:hover  {
	background: url(bilder/ddnav_rechts.gif) right center no-repeat,
				url(bilder/navbg.png) top left repeat-x;
	}

ul {
margin:opx;
padding:0px;
}

nav ul {
	list-style:none;
	position: relative;
	width:7em;
	margin:0 5px;
	float:left;
	}
	
nav li {
	position:relative;
	min-height: 1px;		
	vertical-align: bottom;		
	}

nav ul ul {
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	width:9em;
	}

nav ul ul ul  {
	top:0;
	left:100%;
	}

nav li:hover {
	cursor:pointer;
	z-index:100;
	}

nav li:hover ul ul, nav li li:hover ul ul, nav li li li:hover ul ul, nav li li li li:hover ul ul {display:none;}

nav li:hover ul, nav li li:hover ul, nav li li li:hover ul, nav li li li li:hover ul {display:block;}

#search{
  width: 340px;
  height: 40px;
  line-height: 38px;
  margin: 0 0 0 2px;
  float:right;
}

.sucherot {
  border-left: 2px solid #000;
  background: #890303 url(bilder/suchebg.png) top left repeat-x; 
}

#suchleiste {
  font-size: 14px;
  margin-left: 55px;
  padding: 5px 10px 3px;
  width: 170px;
  border-radius: 3px;
  border: 1px solid #d1d1d1;
  box-shadow: inset 2px 2px 2px #2b2a2c;
}

#suchbutton {
  border: 1px solid #d1d1d1;
  color: #fff;
  background: none;
  padding: 1px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 15px;
}

#suchbutton:hover, #suchbutton:focus {
  background-color: rgba(0,0,0,0.4);
}

/* Ende des CSS Drop Down Menu */

/*Codes fuer den Inhalt Teil*/

#inhalt {
	width:990px;
	padding: 5px 5px 0 5px;
	color:#000000;
	background-color:transparent;
	
}

.inhalt-links {
	width: 64.75%;
	min-height:400px;
	border: 1px solid #000000;
	float:left;
	margin-left:1px;
	padding:3px 3px 0 3px;
}

.inhalt-rechts {
	width: 32.23%;
	min-height:400px;
	border: 1px solid #000000;
	float:left;
	margin-left:8px;
	padding:3px 3px 0 3px;
}

/*Footer Element*/
footer {
	width:100%;
	height: 40px;
	line-height:38px;
	background-image: url(bilder/footerbg.png);
	background-position:bottom right;
	background-repeat:no-repeat;
	display: block;
	clear:both;
}

footer p.copyr {
	text-align:center;
	margin:0px;
	padding:0px;
}

footer a.copy {
	text-decoration:none;
	color: orange;
}

footer a.copy:hover {
	text-decoration:underline;
	cursor:pointer;
}

/*Design optimirung*/
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Nun kannst Du nachschauen wo dein Fehler ist, oder Du poytest hier auch deine Codes wie sie jetzt sind, damit ich sehen kann wo der Fehler ist, den aus Fehlern lernt man. Denn Quellcode dann bitte auch als Code posten.

MFG

Beitrag von **Butterblume** » Mi 15. Aug 2012, 17:26

Das klingt hier echt kompliziert! Puh man...

Beitrag von **Simon** » Do 16. Aug 2012, 12:47

Ok
hier sind die Codes:

Code: Alles auswählen

<!DOCTYPE HTML>
<html>
    <head>
        <title>Anime-Town</title>	
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="rahmen"><!--Anfang des Rahmen-->
		    <header>
			    <div class="htitel">Anime-Town</div>
		    </header>
			<nav class="clearfix"> <!--Anfang Navigation-->
			        <ul>
					    <li><a href="#">Home</a></li>
					</ul>
					<ul>	
					    <li><a href="#" class="top_eltern">Droplink</a>
					        <ul>
					            <li><a href="#">Sub 1:1</a></li>
						        <li><a href="#" class="sub">Sub 1:2</a>
						            <ul>
					                    <li><a href="#">Sub 1:2:1</a></li>
						                <li><a href="#">Sub 1:2:2</a></li>
						                <li><a href="#">Sub 1:2:3</a></li>
						                <li><a href="#">Sub 1:2:4</a></li>
					                </ul>
					            </li>
					            <li><a href="#">Sub 1:3</a></li>
					            <li><a href="#" class="sub">Sub 1:4</a>
					                <ul>
						                <li><a href="#">Sub 1:4:1</a></li>
						                <li><a href="#">Sub 1:4:2</a></li>
						                <li><a href="#">Sub 1:4:3</a></li>
						                <li><a href="#">Sub 1:4:4</a></li>
						            </ul>
					            </li>
					            <li><a href="#" class="sub">Sub 1:5</a>
					                <ul>
						                <li><a href="#">Sub 1:5:1</a></li>
						                <li><a href="#">Sub 1:5:2</a></li>
						                <li><a href="#">Sub 1:5:3</a></li>
						                <li><a href="#">Sub 1:5:4</a></li>
							            <li><a href="#">Sub 1:5:5</a></li>
						            </ul>
					            </li>
				            </ul>
                        </li>
                    </ul>					
				    <ul>
					    <li><a href="#">Hauptlink</a></li>
				    </ul>
				    <ul>
					    <li><a href="#">Hauptlink</a></li>
			        </ul>
				    <ul>
					    <li><a href="#">Hauptlink</a></li>
				    </ul>
				
				    <div id="search" class="sucherot">
				        <form action="#" method="GET">
					        <input type="text" name="suche" id="suchleiste" placeholder="Suchen" />
						    <input type="submit" name="suchsubmit" id="suchbutton" value="Los" />
					    </form>
				    </div>
			</nav> <!--Ende Navigation-->
			<div id="inhalt"><!--Anfang des Inhalt-->
			<div class="inhalt-links"><!--Anfang des Haupt-Inhalt links-->
			
			</div><!--Ende des Haupt-Inhalt links-->
			<div class="inhalt-rechts"><!--Anfang des Neben-Inhalt rechts-->
			
			</div><!--Ende des Neben-Inhalt rechts-->
			<div xlass="clearfix"></div><!--Wichtig fuer die Design darstellung-->
			</div><!--Ende des Inhalt-->
			<footer>
			    <p class="copyr">&copy; 2012 by <a class="copy" target="_blank" href="http://www.anime-town.de">Anime-Town</a></p>    
        </div><!--Ende des Rahmen-->
    </body>
</html>

=index

Code: Alles auswählen

/**/

/**/
body {
    margin:0px;
	padding:0px;
}

#rahmen {
    background-color: #666161; /**/
	width:1000px; /**/
	margin:auto; /**/
}

header {
    background: url(bilder/header.png) top left no-repeat; /**/
	display:block; /**/
	height: 200px; /**/
	width:1000px; /**/
}

.htitel { /**/
    color: #FFFFFF; /**/
	font-family: verdana; /**/
	font-size: 24px; /**/
	font-weight:bold; /**/
	font-style:normal; /**/
	position:relative; /**/
	top: 120px; /**/
	left:20px; /**/
}






/**/

nav {
    border-top: 1px solid #222;
	background: url(bilder/navbg.png) top left repeat-x;
	font-size: big;
	font-family: arial, helvetica, sans-serif;
	line-height:40px;
}

nav a {
    text-align:center;
	font-weight:bold;
	display:block;
	}

nav a:link, nav a:visited, nav a:active {
    color: white;
	background: url(bilder/navbg.png) top left repeat-x;
	text-decoration:none;
	}
	
nav a:hover {
    color: white;
	text-shadow:2px 2px 10px #FF0000;
	text-decoration:none;
	}
	
nav a.top_eltern, nav a.top_eltern:hover {
    background-image: url(bilder/ddnav_runter.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
	
nav a.sub, nav a.sub:hover {
    background: url(bilder/ddnav_rechts.gif) right center no-repeat,
	            url(bilder/navbg.png) top left repeat-x;
	}

ul {
margin: 0px;
padding: 0px;
}

nav ul {
    list-style:none;
	position: relative;
	width:7em;
	margin:0 5px;
	float:left;
	}
	
nav li {
    position:relative;
	min-height: 1px;
	vertical-align: bottom;
	}
	
nav ul ul {
    position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	width:9em;
	}
	
nav ul ul ul {
    top:0;
	left:100%;
	}
	
nav li:hover {
    cursor:pointer;
	z-index:100;
	}
	
nav li:hover ul ul, nav li li:hover ul ul, nav li li li:hover ul ul, nav li li li:hover ul ul {display:none;}

nav li:hover ul, nav li li:hover ul, nav li li li:hover ul, nav li li li li:hover ul {display:block;} 

#search{
    width: 340px;
	height: 40px;
	line-height: 38px;
	margin: 0 0 0 2px;
	float:right;
}

.sucherot {
    border-left: 2px solid #000;
	background: #890303 url(bilder/suchebg.png) top left repeat-x;
}

#suchleiste {
    font-size: 14px;
	margin-left: 55px;
	padding: 5px 10px 3px;
	width: 170px;
	border-radius: 3px;
	border: 1px solid #d1d1d1;
	box-shadow: inset 2px 2px 2px #2b2a2c;
}

#suchbutton {
    border: 1px solid #d1d1d1;
	color: #fff;
	background: none;
	padding: 1px 8px;
	border-radius: 3px;
	cursor: pointer;
	margin-left: 15px;
}

#suchbutton:hover, #suchbutton:focus {
    background-color: rgba(0,0,0,0.4);
}

/**/

/**/

#inhalt {
    width:990px;
	padding: 5px;
	color:#000000;
	background-color:#FFFFFF;
	border-left: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
}

.inhalt-links {
    width: 641px;
	min-height:200px;
	border: 1px solid #000000;
	float:left;
	margin-left:1px;
	padding:3px;
}

.inhalt-rechts {
    width: 324px;
	min-height:200px;
	border: 1px solid #000000;
	float:left;
	margin-left:8px;
	padding:3px;
}

/**/
.clearfix:after {
    content: ".";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

/**/
footer {
    width:100%;
	height: 40px;
	line-height:38px;
	background-image: url(bilder/footer.png);
	background-position:bottom right;
	background-repeat:no-repeat;
	display: block;
	clear:both;
}

footer p.copyr {
    text-align:center;
	margin:0px;
	padding:0px;
}

footer a.copy {
    text-decoration:none;
	color: orange;
}

footer a.copy:hover {
    text-decoration:underline;
	cursor:pointer;
}

= style

HomepageHelfer.org

Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Re: Eigenes Design mit modernem Layout

Wer ist online?