• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS-AnfängerproblemE

Nissi

Neues Mitglied
Servus,
seid Montag versuche ich nun, mir CSS und HTML beizubringen. Da Ferien sind, ( heute letzter Tag :? ) hatte ich viel Zeit.

Langsam geht es auch ein bisschen vorran.
Nun hätte ich aber ein paar Fragen.

1. Ist mein Code soweit richtig ? Oder schleichen sich einige Anfängerfehler ein ( was ich mal denke ).

2. Wenn man die Webseite auf dem Handy anschauen möchte, muss man dann alles anderst Programmieren ? Ich hab meine bisherige Webseite mal hochgeladen und auf dem Handy sah Sie ganz anders aus.

3. Im Hauptbereich habe ich bis jetzt den Text stehen "Servus, wie geht es dir". Wie bekomme ich es hin, dass die Hintergrundfarbe von der Hauptseite Vom "Menü" bis runter zum "Footer" geht ? Und das rechts und links ein Rand ist ?

4. Wie ändere ich das Menü, dass es so aussieht, wie von "www.html.de" ? Bei mir ist die Schrift nicht gleichmäßig vom oberen und unterem Rand entfernt, die Balken dazwischen habe ich nicht und "Menu a:Hover ... " bekomm ich leider auch nicht so hin. Und wie ändere ich den Code in ein "ListenMenü" ?


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
    <title> - Home</title>
<head>
	<meta http-equiv="data" content="10.10.2010" />
	<meta name="description" content="...." />
	<meta name="keywords" content"...." />
	<meta http-equiv="author" content="Christoph Nisseler" />
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<meta name="content-language" content="de" /> 
	<meta name="robots" content="index,follow" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

<body>
<div id="zentriert">
<div id="Header"></div>
<div id="Menu">
  <a href="#">Home</a>
  <a href="#">Home1</a>
  <a href="#">Home2</a>
  <a  target="_blank" href="#">Forum</a>
<div id="Hauptbereich">
<p>Servus,</br>
   wie gehts dir ?
</div>
  
  
   </div>
</div>
<div id="footer">
        <b id="f1">Copyright ©</b> <b id="f2">2011</b> 
        <b id="f1">Made by</b>     <b id="f2">Christoph N.</b>
</div>
</body>
</html>

Code:
/*Header*/
#Header {
	background-color: #323232;
	width: 61.25em;
	height: 120px;
	}

/*Menu,Links*/
#Menu{ 
    font: bold 16pt arial, sans-serif;
	font-variant: small-caps; 
    width: 980px;
	height: 27px;
    background-color: #8fb12f;
	border-bottom: 1pt solid black;
	text-align: center;
	top: 193px;
    }
	
#Menu a{
    color: black;
    text-decoration: none;
	margin-right: 13px;
    margin-left: 13px;
	}

#Menu a:hover{
    text-decoration: none;
	background-color: #ffffff;
    }

/*Hauptbereich*/
	#zentriert
       {
    position:absolute;
    left: 50%;
	margin-left: -490px;
	width: 61.25em;
    }
	
	#Hauptbereich {
	text-align: left;
	font: 14px arial;
	width: 975px;
	padding-left: 5px;
	border-left: 0.1em solid black;
	border-right: 0.1em solid black;
	background-color: #b7b7b7;
	}
	

	   
/*Footer*/
   #footer {
    position: absolute;
	left: 50%;
	margin-left: -490px;
    bottom: 0;
    width: 61.25em;
    height: 90px;
    background: #1a1a1c;
	text-align:center;
	}
	
/*Schriften*/
   #h1 {
    font: 1.25em Helvetica ,arial;
	color: #000000;
    }
	
   #f1 {
    font: 0.7em Helvetica, arial;
	color: #7c7471;
	padding: 5px;
    }
	
   #f2 {
    font: 0.7em Helvetica, arial;
	color: #ffffff;
	padding-top: 5px;
    }


gr. chris

PS. ist jetzt n bissl kompliziert geschrieben, falls Fragen bestehen, werd ich morgen nochmal ausführlicher schreiben ^^

PSS. Ihr könnt es ja mal auf eurem PC abspeichern und mal schnell anschauen, dann versteht ihr es auch noch besser ;)
 
Werbung:
Für die ID-Bezeichnungen würde ich generell Kleinschreibweise verwenden, das erleichtert die Handhabung und hilft Fehler zu vermeiden.

Für die Navi verwende besser eine ul-Liste.
Vertikale Listennavigation. Für eine horizontale Anordnung musst du dann die li's floaten.
Eine vertikale Schriftzentrierung bei der Navi erreichst du, indem du einen line-height-Wert verwendest, welchcher der Höhe der Buttons entspricht.

Zentrieren solltest du wie bei #zentriert oder #footer nicht mit position: absolute; weil dann je nach viewportgröße Inhalte aus dem sichtbaren Bereich verschwinden können. Besser ist es, so zu zentrieren:
Horizontale Zentrierung mit CSS

Für verschiedene Schriften (#f1, #f2 usw.) solltest du keine Id's, sondern besser Klassen verwenden. Die können dann im Gegensatz zu einem ID dann auch mehrmals auf einer Seite verwendet werden.

Was die Hintergrundfarbe, durchgehend bis zum footer betrifft, so weise sie am besten dem body zu und gib diesem wie auch html 100% height.
 
Ok, danke :)
Werde heute Abend das mal alles versuchen umzusetzen.
Falls ich noch Fragen habe oder neue Frage anfallen, meld ich mich wieder ... .

gr
 
Werbung:
Zurück
Oben