HTML/CSS Problem

Rxwless2K

Hallo Retrotown,

Ich habe ein Problem mit HTML/CSS.

Das CSS funktioniert irgendwie nicht.

HTML Code:

Code

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test-Website</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav>
	<a href="#">Startseite</a>
	<a href="#">Über Uns</a>
	<a href="#">Projekte</a>
	<a href='#'>News</a>
</nav>


</body>
</html>

Alles anzeigen

CSS Code:

Code

@charset "utf-8";
/* CSS Document */


body
{
	background: #999;
	margin: 0 auto;
}
a:link
{
	color: #FFF;	
}
a:focus
{
	color: #FFF;	
}
a:active
{
	color: #FFF;	
}
a:hover
{
	color: #FFF;	
}


nav
{
	margin-top: 10px;
	margin-left: 20px;
	width: 900px;
}
nav a
{
	padding: 5px;
	color: #FFF;
	border-radius: 3px;	
	text-decoration: none
	font-size: 20px;

	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}


nav a:hover
{
	padding: 5px;
	color: #FFF;
	border-radius: 3px;	
	text-decoration: none
	font-size: 20px;
	background: color: #DD8500

	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}

Alles anzeigen

Ich finde den fehler nicht..

Ich hoffe mir kann jemand helfen.

MfG,
Mekaro

ՏɧɿՃ

Versuch mal anstatt ''<nav>'' ''<div id="nav"></div>'' zu nutzen.
Natürlich den ''DIV-Namen'' in der CSS-Datei zu ändern.

ιєχιт

Ist es denn wirklich so schwer etwas von einem Tutorial abzuschreiben?

TheCrash

Was funktionniert da nicht, gib mal bitte genauere Angaben?

"text-decoration: none" <-- da hast du das ; vergessen

Amos

Zitat von ՏɧɿՃ

Versuch mal anstatt '''' '''' zu nutzen.
Natürlich den ''DIV-Namen'' in der CSS-Datei zu ändern.

Und das soll was bringen? <nav> ist schon richtig. Veränder mal alle CSS-Angaben so um:

Bzw. immer die Folgende Klammer ({) neben body, a:link etc.

TheCrash

background: color: #DD8500 noch ein Fehler

ιєχιт

Zitat von Skadeus

Und das soll was bringen? ist schon richtig. Veränder mal alle CSS-Angaben so um:

Bzw. immer die Folgende Klammer ({) neben body, a:link etc.

Das ist doch egal.
Ich als würdest du <?php require_once('LINK'); ?> so schreiben:
<?php
require_once('LINK');
?>

sollte auch keinen Unterschied machen

Amos

<html> Tag vergessen. Soweit ich weiß muss der in einem HTML Grundgerüst immer vorhanden sein.

ιєχιт

Hier, benutz diesen code:

Code

@charset "utf-8";/* CSS Document */


body
{
	background: #999;
	margin: 0 auto;
}
a:link
{
	color: #FFF;	
}
a:focus
{
	color: #FFF;	
}
a:active
{
	color: #FFF;	
}
a:hover
{
	color: #FFF;	
}


nav
{
	margin-top: 10px;
	margin-left: 20px;
	width: 900px;
}
nav a
{
	padding: 5px;
	color: #FFF;
	border-radius: 3px;	
	text-decoration: none;
	font-size: 20px;

	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}


nav a:hover
{
	padding: 5px;
	color: #FFF;
	border-radius: 3px;	
	text-decoration: none;
	font-size: 20px;
	background: color: #DD8500;

	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in; 
}

Alles anzeigen

Wenns immer noch nicht gehen sollte, schreib mir eine PN!

TheCrash

Also du hast das von meinem Video Tutorial, schreibe es einfach korrekt ab! und dabei nicht dumm abschreiben sondern mit Verstand

Rxwless2K

ιєχιт:

Geht trotzdem nicht.

TheCrash

Schreib alles richtig ab hast du einen Browser der Html5 und CSS3 versteht

Rxwless2K

Kp,

Habe Mozilla firefox, & Google Chrome, bei beiden funktioniert es nicht.

PS: Habe alles richtig abgeschrieben!

Nesquik

CSS Datei:

Spoiler anzeigen

@charset "utf-8";
/* CSS Document */

body
{
background: #999;
margin: 0 auto;
}
a:link
{
color: #FFF;
}
a:focus
{
color: #FFF;
}
a:active
{
color: #FFF;
}
a:hover
{
color: #FFF;
}

nav
{
margin-top: 10px;
margin-left: 20px;
width: 900px;
}
nav a
{
padding: 5px;
color: #FFF;
border-radius: 3px;
text-decoration: none;
font-size: 20px;

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

nav a:hover
{
padding: 5px;
color: #FFF;
border-radius: 3px;
text-decoration: none;
font-size: 20px;
background: #DD8500;

-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}

HTML Datei:

Spoiler anzeigen

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test-Website</title>
<link rel="stylesheet" type="text/css" href="mekaro.css" />
</head>
<body>
<nav>
<a href="#">Startseite</a>
<a href="#">Über Uns</a>
<a href="#">Projekte</a>
<a href='#'>News</a>
</nav>

</body>
</html>

Rxwless2K

Zitat von Nesquik

CSS Datei:

Spoiler anzeigen

@charset "utf-8";
/* CSS Document */

body
{
background: #999;
margin: 0 auto;
}
a:link
{
color: #FFF;
}
a:focus
{
color: #FFF;
}
a:active
{
color: #FFF;
}
a:hover
{
color: #FFF;
}

nav
{
margin-top: 10px;
margin-left: 20px;
width: 900px;
}
nav a
{
padding: 5px;
color: #FFF;
border-radius: 3px;
text-decoration: none;
font-size: 20px;

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

nav a:hover
{
padding: 5px;
color: #FFF;
border-radius: 3px;
text-decoration: none;
font-size: 20px;
background: #DD8500;

-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}

HTML Datei:

Spoiler anzeigen

Test-Website

Startseite
Über Uns
Projekte
News

Alles anzeigen

Danke, Es geht!

Jedoch wenn ich den HTML Code von dir einfüge geht garnichts mehr,
wenn der alte code drinne ist, gehts.

MfG,
Mekaro

#Please Close this Thread!

Nesquik

Zitat von Mekaro

Danke, Es geht!

Jedoch wenn ich den HTML Code von dir einfüge geht garnichts mehr,
wenn der alte code drinne ist, gehts.

MfG,
Mekaro

#Please Close this Thread!

Du musst im Headerbereich
<link rel="stylesheet" type="text/css" href="mekaro.css" />
zu
<link rel="stylesheet" type="text/css" href="DEINEDATEI.css" />

umändern!

ADMGiraffe

Nächstes mal die einfache Variante :
BSP:

Html
<div id="header">
</div>

Css:

#header {
width:980px;
height:50px;
background-image:url(DEIN URL);
}

ein schönes extra ist wenn es noch abgerundet an den Ecken ist einfach dahinter schreiben:

border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;

Jetzt mitmachen!