Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
You last visited: Today at 15:27

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement



Anfängerfragen

Discussion on Anfängerfragen within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
elite*gold: 0
Join Date: May 2016
Posts: 58
Received Thanks: 1
Anfängerfragen

Moin,

werde zukünftig immer mal wieder ein paar Fragen hier in die Runde werfen, da ich denke, dass es sich nicht lohnt für jede kleine Frage ein neues Thema zu öffnen.

PS: Ich bin gerade dabei HTML & CSS zu lernen, erwartet also nicht zu viel von mir.

Fangen wir gleich mal an.

1. Ich möchte der ganzen Seite eine content-breite von 1000px geben. Wie stelle ich das am besten an? Wenn ich im body einen div mit 100px erstelle, dann werden die bereits erstellten elemente (nav, div#content-1 etc.) auch auf 1000px abgeschnitte, die hintergrund-farbe dieser elemente soll allerdings über die volle breite laufen - nur der Inhalt, bei nav das <img> und <ul> sollten sich an der 100px breite anordnen.

2. Ich möchte das <img> im <nav> vertikal zentrieren, krieg ich aber irgendwie nicht hin. Habe es mit line-height 80px und vertical-align middle in nav versucht.

Vielen Dank für eure Hilfe.

HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<link href="main.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'
	rel='stylesheet' type='text/css'>
	<title>Nova²</title>
</head>
<body>

	<nav>
		<img src="img/logo.png" width="132px" height="60px" alt="logo">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Pages</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>

	<div id="content-1">
		<p>test</p>
	</div>

	<div id="content-2">
		<p>test</p>
	</div>

	<div id="content-3">
		<p>test</p>
	</div>

</body>
</html>
Code:
@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #333333;
}

nav {
	height: 80px;
	background-color: #ffffff;
}

nav ul {
	float: right;
}

nav ul li{
	display: inline-block;
	line-height: 80px;
	padding-left: 30px;
}

a:link {
	text-decoration: none;
	color: #333333;
}

nav ul li a:link {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.8em;
}

nav ul li a:visited {
	color: #333333;
}

nav ul li a:hover, a:active {
	color: #3498db;
}

#content-1 {
	height: 500px;
	background-color: #3498db;
}

#content-2 {
	height: 150px;
	background-color: #ffffff;
}

#content-3 {
	height: 550px;
	background-color: #252525;
}
nafets404 is offline  
Old 06/26/2016, 11:40   #2
 
elite*gold: 0
Join Date: Apr 2015
Posts: 428
Received Thanks: 361
Quote:
Originally Posted by nafets404 View Post
1. Ich möchte der ganzen Seite eine content-breite von 1000px geben. Wie stelle ich das am besten an? Wenn ich im body einen div mit 100px erstelle, dann werden die bereits erstellten elemente (nav, div#content-1 etc.) auch auf 1000px abgeschnitte, die hintergrund-farbe dieser elemente soll allerdings über die volle breite laufen - nur der Inhalt, bei nav das <img> und <ul> sollten sich an der 100px breite anordnen.
Dann muss die Navigation die volle Breite haben, besser du setzt eine Version in online, dann können wir diese ansehen, dann würde ich dir den gecodeten Part zeigen können, aber ist's ein bisschen verwirrend ^^

Quote:
Originally Posted by nafets404 View Post
2. Ich möchte das <img> im <nav> vertikal zentrieren, krieg ich aber irgendwie nicht hin. Habe es mit line-height 80px und vertical-align middle in nav versucht.
Du suchst

Code:
nav img {
	align-items: center;
}
#Metho is offline  
Thanks
1 User
Old 06/30/2016, 11:12   #3
 
elite*gold: 0
Join Date: May 2016
Posts: 58
Received Thanks: 1
Siehe Datei im Anhang.

1. ) Wie kann ich die Elemente vertikal zentrieren?

2. ) Beim Hover über die Nav ist zwischen den Roten Flächen und dem grauen Strich weißer Platz frei. Wie bekomme ich das weg?

3. ) Wir haben nen Content-Bereich von 1000px breit (Siehe Nav). Wie kann ich die Icons und das Logo ganz oben an dieser Breite ausrichten?

4. ) Was hätte man Code-mäßig besser machen können? Abgesehen davon, dass ich überall Pixel als Einheit verwendet habe. Bzw. ist das was ich geschrieben habe so korrekt?

Vielen Dank
Attached Files
File Type: rar test.rar (4.2 KB, 2 views)
nafets404 is offline  
Old 06/30/2016, 20:37   #4
 
elite*gold: 0
Join Date: Apr 2015
Posts: 428
Received Thanks: 361
Quote:
Originally Posted by nafets404 View Post
1. ) Wie kann ich die Elemente vertikal zentrieren?
findest du, was du suchst.

Quote:
Originally Posted by nafets404 View Post
2. ) Beim Hover über die Nav ist zwischen den Roten Flächen und dem grauen Strich weißer Platz frei. Wie bekomme ich das weg?
Die Elemente müssen gefloatet werden.

Code:
deinElement { display: inline-block; float: left; }
Quote:
Originally Posted by nafets404 View Post
3. ) Wir haben nen Content-Bereich von 1000px breit (Siehe Nav). Wie kann ich die Icons und das Logo ganz oben an dieser Breite ausrichten?
Sind sie doch oder verstehe ich dies falsch?

Quote:
Originally Posted by nafets404 View Post
4. ) Was hätte man Code-mäßig besser machen können? Abgesehen davon, dass ich überall Pixel als Einheit verwendet habe. Bzw. ist das was ich geschrieben habe so korrekt?
Du da gibt es viele Dinge, die ich dir nennen könnte, aber mal ein ganz einfacher Tipp: Hast du ein Element, das wirklich nur einmal vorkommen soll, nimm #id. Sofern du dies tust, verwende keine anderen Selektoren auf dem Element

Code:
#meinElement {} /* richtig */
div ul#meinElement.meineKlass {} /* falsch */
Bist du dir nun sicher, dass nur direkt darauffolgende Elemente hast, benutze >

Code:
#meineUL > li {} /* richtig */
#meineUL li {} /* falsch */
Benutze keine Ids auf eindeutigen Elementen, wie dem Body-Tag oder dem Main-Tag

Code:
body {} /* richtig */
body#meinRumpf {} /* falsch */
versuche zu vermeiden, dass allzuviel vereerbt wird.

Code:
ul > li { list-style: none } /* richtig */
ul { list-style: none } /* falsch */
Aber pauschal kann man das eigentlich nicht sagen, es kommt immer auf die Aufgabe drauf an, aber dies mal so als Tipp
#Metho is offline  
Thanks
1 User
Old 06/30/2016, 22:11   #5
 
elite*gold: 0
Join Date: May 2016
Posts: 58
Received Thanks: 1
Vielen Dank. Blöd dass vertikal zentrieren so kompliziert ist.

Schreibt man bei HTML Tags ohne closing tag, sprich img meta link etc. eigentlich einen slash, oder nicht? Steht überall anders.

<img .. />
<img .. >
nafets404 is offline  
Old 06/30/2016, 22:21   #6
 
elite*gold: 0
Join Date: Apr 2015
Posts: 428
Received Thanks: 361
Quote:
Originally Posted by nafets404 View Post
Vielen Dank. Blöd dass vertikal zentrieren so kompliziert ist.

Schreibt man bei HTML Tags ohne closing tag, sprich img meta link etc. eigentlich einen slash, oder nicht? Steht überall anders.

<img .. />
<img .. >
Dies ist die HTML5 Schreibweise:
Code:
<img .. >
oder alternativ (HTML5):
Code:
<img .. />
Und dies ist für ältere Versionen (HTML4 etc....)
Code:
<img .. />
bedeutet HTML5 unterstützt beide, weshalb ich dir anrate das /-Zeichen zu machen.

Im <!DOCTYPE html> für HTML5. Dies kommt an den Anfang deines Dokumentes. Klingt jetzt kompliziert, ist es aber garnicht

ein Link dazu
#Metho is offline  
Reply


Similar Threads Similar Threads
Anfängerfragen. s:
07/14/2012 - Metin2 Private Server - 4 Replies
Hey, ihr da. ^.^ Ich habe mir vor kurzem einen Privatserver erstellt, blabla. Jetzt möchte ich gerne wissen, wie man die Items, die ein NPC verkauft, ändert. Ja, dieses HowTo (http://www.elitepvpers.com/forum/metin2-pserver-g uides-strategies/342330-how-npc-ndern-sie-verkaufe n.html) habe ich mir durchgelesen) und dieser NPC hat dann auch Schwerter verkauft, aber wie mache ich das mit mehreren Items? Und wie ich dann beispielsweise die Sachen, die die Gemischtwarenhändlerin verkauft, in...
Anfängerfragen
04/11/2011 - GW Bots - 12 Replies
Mahlzeit, Ich möchte auch mal versuchen einen Bot für GW zu programmieren. Ich hab mich die Tage schon mal fleissig durchs Forum gewühlt und schon viele interessante Sachen gefunden, die ich bisher nicht kannte (AutoIt etc.) Es gibt da nur noch ein paar Sachen aus denen ich noch ned ganz schlau geworden bin. Wenn ich es richtig verstanden habe, wäre es am einfachsten einen Bot auf Basis von GWCA zu erstellen. D.h. die DLL dann in GW zu injecten und dann den Bot dann mit AuoIt oder C++...
Anfängerfragen
12/15/2010 - Minecraft - 4 Replies
Gut ich habe mit Minecraft angefangen und habe direkt einige Fragen: 1.Was machen Schwämme und woher kriegt man die? 2.Wie bringt man ein Minecart in verschiedene Richtungen zum laufen? 3.Gibt es "leitende" Materialien, d.h. kann man einen Knopfdruck weit weiterleiten? 4.Wie funktioniert die Elektrick insgesamt? 5.Wie kann man die Map Datei eines Servers editieren? 6.Wie richtet man bei einem Server ein geschütztes Gebiet ein? 7.Wie kann man Wasser oder Lava in einen Becher reinstecken?
Anfängerfragen :)
02/12/2010 - World of Warcraft - 7 Replies
Halli hallo Gemeinde :) Da ich derzeit am überlegen meine CS:S Karriere an den Nagel zu hängen, um wieder nen MMO anzufangen, dachte ich, wieso nicht WoW? Nunja, ich hab c. 7 Monate Erfahrung mit dem 1:1 Klon RoM (Runes of Magic). Gameplay sollte in etwa gleich sein (oder? =/)?! Warum WoW und nicht RoM?
Anfängerfragen...
09/20/2009 - WoW Private Server - 1 Replies
Hallo liebe Com... Wollt mir mal einen eigenen Server erstellen. Jetzt meine frage: Was ist der Unterschied zwischen ArcEmu, Mangos, etc. Was empfielt sich. Kann ich jede Version mit meinem Wow Ordner spielen? LG Jonas



All times are GMT +1. The time now is 15:27.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2024 elitepvpers All Rights Reserved.