PC-Freak :D
Hi, also ich habe noch ein Problem/Anliegen ^^.
Also ich habe eine index.html Seite erstellt für einen Schwimmverein in meinem Dorf^^. Hier mal meine beiden Dateien:
index.html
style.css
Jetzt dachte ich, es wäre cool, wenn man einfach auf einen Punkt im Menü geht, und der Inhalt wird im Contentbereich eingeblendet, sprich die opacity wird von 0 auf 1 erweitert bei einem Div, dass bereits in der index.html steht. (und so was dann halt bei jedem Menüpunkt)
Aber ich weiß nicht, wie ich das umsetzen kann. Oder ob man das überhaupt nur mit purem CSS machen kann?
Wäre echt super nett, wenn jemand mir helfen könnte, bin noch ein Anfänger
PS: Noch ne Frage nebenbei: Beim Menü der Hover-Effekt, das ging nur, wenn ich ne normale Farbe genommen habe. Bei einem Farbverlauf kam keine animation. Ist das normal?
Also ich habe eine index.html Seite erstellt für einen Schwimmverein in meinem Dorf^^. Hier mal meine beiden Dateien:
index.html
Code:
<!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>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<header>
<div class="logo"> </div></header>
<nav>
<table border="0" cellspacing="0">
<tr>
<th width="100px" class="navigation ecke1"><a href="#">News</a></th>
<th width="100px" class="navigation"><a href="#">Trainingszeiten</a></th>
<th width="100px" class="navigation"><a href="#">Team</a></th>
<th width="100px" class="navigation"><a href="#">Bilder</a></th>
<th width="100px" class="navigation ecke2"><a href="#">Termine</a></th>
</tr>
</table>
</nav>
<div id="container" class="content">
<h1> My Heading <span class="dreieck"></span><span class="dreieck2"></span> </h1> Hallo
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />test
</div>
<footer>
</body>
</html>style.css
Code:
/* CSS Document */
/* ---------------------------------Logo----------------------------------------------*/
.logo {
background-image: url('Bilder/Logo.png');
background-repeat: no-repeat;
background-position: center center;
height:300px;
}
/* ---------------------------------Logo Ende----------------------------------------------*/
/* -----------------------------------Menue--------------------------------------------*/
table {
margin: auto;
width: 60%;
min-width:960px;
}
.navigation {
height: 5´40px;
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera11.10+ */
color: #fff;
font-size: 28px;
font-weight: bold;
text-shadow: 0 0 6px black;
-moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
-webkit-box-shadow-: 0 0 5px #666, inset 0 0 5px #ddd;
box-shadow: 0 0 15px #333, inset 0 0 1px #333;
-webkit-transition: all .5s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.navigation:hover {
background: #1e5799;
}
th.ecke1 {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
th.ecke2 {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
} /* Die ganz linken und rechten Ecken müssen rund werden */
th a {
display:block;
width:100%;
text-decoration:none;
color: white;
}
/* -----------------------------------Menue Ende--------------------------------------------*/
/* -----------------------------------Content Anfang--------------------------------------------*/
#container {
background: #666;
margin: auto;
margin-top: 15px;
width: 930px;
padding-top: 30px;
padding-left: 15px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #fff;
-moz-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
-webkit-box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
box-shadow: 0 0 5px #666, inset 0 0 40px #ddd;
border-top: 10px solid black;
}
h1 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottombottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px;
margin-left: -37px;
margin-top: -35px;
position: relative;
width: 102.1%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.dreieck {
width: 0; height: 0;
top: 104%;
line-height: 0;
border-top: 10px solid #c8c8c8;
border-left: 20px solid transparent;
position: absolute;
left: 0;
}
.dreieck2 {
width: 0; height: 0;
top: 104%;
line-height: 0;
border-top: 10px solid #c8c8c8;
border-right: 20px solid transparent;
position: absolute;
right: 0;
}Jetzt dachte ich, es wäre cool, wenn man einfach auf einen Punkt im Menü geht, und der Inhalt wird im Contentbereich eingeblendet, sprich die opacity wird von 0 auf 1 erweitert bei einem Div, dass bereits in der index.html steht. (und so was dann halt bei jedem Menüpunkt)
Aber ich weiß nicht, wie ich das umsetzen kann. Oder ob man das überhaupt nur mit purem CSS machen kann?
Wäre echt super nett, wenn jemand mir helfen könnte, bin noch ein Anfänger
PS: Noch ne Frage nebenbei: Beim Menü der Hover-Effekt, das ging nur, wenn ich ne normale Farbe genommen habe. Bei einem Farbverlauf kam keine animation. Ist das normal?
da ist dein Problem nur mit css umgesetzt
:
Aber mein Browser ist aktuell.
