Beiträge von DoLu2421

DoLu2421

Danke für die Antwort,

es hat geklappt.
Nun stehe ich aber vor dem nächsten Problem.
Wenn du mal auf den Link gehst und auf der ersten Seite bleibst die angezeigt wird, fällt mir auf das die Seite nach kurzer zeit aktualisiert wird. Also sieht man an dem weißen Kasten der erscheint. Was kann ich dagegen tun ?
Ach ja, das passiert nur bei der Index Seite die als ersten geöffnet wird.

DoLu2421

Hallo,

ich habe es nun geschafft meine Startseite nach meinen Wünschen zu gestalten.
http://www.u13-bvrentfort.besaba.com

Nun ist meine Frage, was ich genau machen muss, damit sich bei einem klick auf Anfahrt, die zweite Seite öffnet.

Hier die index.html:

HTML

<!DOCTYPE html>
<html>




<head>
    <meta charset="ISO-8859-1">
    <title>BR Rentfort D1</title>
    <meta name="description" 
          content="Willkommen bei der D1 des BV Rentfort. Hier findet ihr alle wichtigen News und Themen zur aktuellen Saison.">
    <link href="style.css" type="text/css" rel="stylesheet">




    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->




</head>




<body>








<header>








  
</header>




<div id="wrapper">




<nav id="steuerungoben">
<div class="menu">








	<ul>

	<li><a class="menu" href="home.html">Home</a></li>
	<li><a class="menu" href="verein.html">Verein</a></li>
	<li><a class="menu" href="anfahrt.html">Anfahrt</a></li>
	<li><a class="menu" href="kontakt.html">Kontakt</a></li>
	</ul>




</div>
</nav>
<nav id="steuerungrechts">
<div class="menu2">
<ul>




	<li><a class="menu2" href="news.html">News</a></li>
	<li><a class="menu2" href="termine.html">Termine</a></li>
<ul id="navi">
<ul>
	<li><a class="menu2" href="#">Saison 14/15</a></li>
<ul>
	<li><a class="menu2" href="mannschaft-14-15.html">Mannschaft 14/15</a></li>
	<li><a class="menu2" href="spielberichte-2014-2015.html">Spielberichte</a></li>
	<li><a class="menu2" href="tabelle-spieltage.html">Tabelle/Spieltage</a></li>		
</ul>
</li>
</ul>
</div>
<div class="menu2">
<ul id="nav3">




	<li><a class="menu2" href="eltern-sind-vorbilder.html">Eltern-Vorbilder</a></li>
	<li><a class="menu2" href="links.html">Links</a></li>
	<li><a class="menu2" href="gästebuch.html">Gästebuch</a></li>
</ul>
</ul>
</div>








</nav>












<section>
	<p><h1>Willkommen bei der U13 des BV Rentfort 1919/46</h1></p>




	<p>Wir die 2002er und 2003er der D1, freuen uns euch auf unserer ersten eigenen</p> 
	<p>Internetseite begrüßen zu dürfen.</p> 
	<p>Informiert euch umfassend über Themen der aktuellen Saison 2014/2015 u.v.m.</p>




	<p>Zu jeden Spiel werdet ihr Spielberichte und auch Fotos finden, zudem würden wir uns freuen,</p> 
	<p>wenn ihr einen netten Eintrag in unsererm Gästebuch hinterlassen würdet.</p>




	<p>Nun wünschen wir euch viel Spaß auf unseren Seiten!</p>




	<p><strong>eure D1 des BVR!</strong></p>
<hr>




</section>




<footer>
<nav id="steuerungunten">
©2014 Dominik Kisker
<ul>
	<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</footer>
</body>
</html>

Alles anzeigen

und einmal die style.css:

Code

* {
	margin: 0;
	padding: 0;
}




header, nav, footer, aside, section {
	display: block;
}




header {
 	/*background-color: yellow;*/
	background-image: url(img/kopfbild_01.png);
	height: 281px;
	width: 951px;
	margin-left: 280px;
	margin-right: 360px;
}
#steuerungoben ul {
	list-style-type: none;
	margin-left: 69.5px;
	padding-top: 9.42px;
	word-spacing: 7em;

}
#steuerungoben li {
	display: inline;
}
#steuerungoben a {
	display: block;
	width: 192px;
	text-align: center;
	line-height: 26px;
	float: left;
	color: white;
	text-decoration: none;
}
#steuerungrechts {
	/*background-color: green*/
	width: 140px;
	height: 400px;
	float: right;
	padding-top: 33px;
	list-style-type: none;
	line-height: 45px;


}
#steuerungrechts ul {
	list-style-type: none;
}
#steuerungrechts a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	border: 3px;
	border-color: #343434;
	border-style: solid;
}
section {
	height: 1000px;
	width: 600px;
	margin-left: 3.5em;
}




footer {
	background-color: #343434;
	position:absolute;
	float: right;
	margin-left: 40;
	text-align: center;
	width:1024px;
	margin-top: 280px;
	color: white;

}




#wrapper {
	/*background-color: #eeeeee;*/
	background-image: url(img/design14.png);
	margin: 0 auto;
	width: 1024px;
	height: 1300px;
	margin-bottom: 300px;
	background-repeat: no-repeat;
}




body {
	text-align: left;
	background-image: url(img/background.jpg);
	background-attachment: fixed;
	font-family: Arial, sans-serif;
}




section p {
	display: block;
	padding-bottom: 1em;
	font-size: large;
	border-width: 3px;

}




section h1 {
	padding-top: 1.5em;
	font-size: xx-large;

}




#menu {
	width: 734px;
	height: 34.8px;
}
a.menu:link {
	color: #000000;
	background-color: transparent;
}
a.menu:visited {
	color: #000000;
	background-color: transparent;
}
a.menu:hover {
	color: #4c4c4c;
	background-color: #4c4c4c;
}
a.menu:active {
	color: #4c4c4c;
	background-color: #4c4c4c;
}








#menu2 {
	width: 735px;
	height: 34.8px;
}
a.menu2:link {
	color: #000000;
	background-color: transparent;
}
a.menu2:visited {
	color: #000000;
	background-color: transparent;
}
a.menu2:hover {
	color: #4c4c4c;
	background-color: #4c4c4c;
}
a.menu2:active {
	color: #4c4c4c;
	background-color: #4c4c4c;
}




ul#navi {
	margin: 0;
	padding: 0;
	float: right;
	width: 9.375em;





}
ul#navi ul {
	margin: 0;
	padding: 0;
	line-height: 45px;
	float: right;
	width: 9em;
	display: block;
	text-align: center;
	background-color: #747474;
	border: 3px;
	border-color: #343434;
	border-style: solid;
}
ul#navi li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	position: relative;
	diplay: block;
}	
ul#navi ul li a {
	font-family: arial;
	text-decoration: none;
	text-align: center;
	height: 40px;
	width: 139px;
	display: block;

}
ul#navi ul ul {
	position: absolute;
	top: 30px;
	visibility: hidden;
	background-color: #747474;
	margin-top: 393.5px;
	right: 417px
}
ul#navi:hover ul {
	visibility: visible;

}




#nav3 {
	/*background-color: green;*/
	width: 140px;
	height: 400px;
	float: right;
	padding-top: 0;
	list-style-type: none;
	line-height: 45px;
{
#nav3 ul {
	list-style-type: none;
	}
#nav3 a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;

Alles anzeigen

Vielen Dank!

DoLu2421

Hallo liebe Community,

ich befasse mich erst seit 2 Tagen richtig mit den Themen HTML und CSS.
bin aber der Meinung, das ich trotz meines noch nicht so ausgereiften Wissens eine doch sehr gute erste Seite kreiert habe.
Habe ein Foto als Anlage bei getan. So dort seht ihr das ich oben, wie auch unten eine NAV-Leiste habe.
Nun meine Frage:
Da der Punkt Saison 14/15 noch weitere 3 Unterpunkte enthält, wäre meine Frage, wie schaffe ich es das ich eine Art drop-down-side Menü was nach links einblendet kreieren kann?

Akzeptabel wäre es für mich auch, wenn sich beim drauf klicken auf Saison 14/15 ein kleines Menü darunter öffnen würde, mit den 3 anderen Punkten.

Meine .html:

HTML

<!DOCTYPE html>
<html>




<head>
    <meta charset="ISO-8859-1">
    <title>BR Rentfort D1</title>
    <meta name="description" 
          content="Willkommen bei der D1 des BV Rentfort. Hier findet ihr alle wichtigen News und Themen zur aktuellen Saison.">
    <link href="style.css" type="text/css" rel="stylesheet">




    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->




</head>




<body>








<header>








  
</header>




<div id="wrapper">




<nav id="steuerungoben">
<div class="menu">








    <ul>

    <li><a class="menu" href="home.html">Home</a></li>
    <li><a class="menu" href="verein.html">Verein</a></li>
    <li><a class="menu" href="anfahrt.html">Anfahrt</a></li>
    <li><a class="menu" href="kontakt.html">Kontakt</a></li>
    </ul>




</div>
</nav>
<nav id="steuerungrechts">
<div class="menu2">




    <li><a class="menu2" href="news.html">News</a></li>
    <li><a class="menu2" href="termine.html">Termine</a></li>
    <li><a class="menu2" href="saison-2014-2015.html">Saison 14/15</a></li>
    <li><a class="menu2" href="eltern-sind-vorbilder.html">Eltern-Vorbilder</a></li>
    <li><a class="menu2" href="links.html">Links</a></li>
    <li><a class="menu2" href="gästebuch.html">Gästebuch</a></li>
</div>
</nav>












<section>
    <p><h1>Willkommen bei der U13 des BV Rentfort 1919/46</h1></p>




    <p>Wir die 2002er und 2003er der D1, freuen uns euch auf unserer ersten eigenen</p> 
    <p>Internetseite begrüßen zu dürfen.</p> 
    <p>Informiert euch umfassend über Themen der aktuellen Saison 2014/2015 u.v.m.</p>




    <p>Zu jeden Spiel werdet ihr Spielberichte und auch Fotos finden, zudem würden wir uns freuen,</p> 
    <p>wenn ihr einen netten Eintrag in unsererm Gästebuch hinterlassen würdet.</p>




    <p>Nun wünschen wir euch viel Spaß auf unserern Seiten!</p>




    <p><strong><p>eure D1 des BVR!</p></strong></p>
</section>
<footer>
©2014 Dominik Kisker
</footer>
</div>
</body>
</html>

Alles anzeigen

und meine .css:

Code

* {
    margin: 0;
    padding: 0;
}




header, nav, footer, aside, section {
    display: block;
}




header {
     /*background-color: yellow;*/
    background-image: url(img/kopfbild_01.png);
    height: 281px;
    width: 951px;
    margin-left: 280px;
    margin-right: 360px;
}
#steuerungoben ul {
    list-style-type: none;
    margin-left: 69.5px;
    padding-top: 9.42px;
    word-spacing: 7em;
}
#steuerungoben li {
    display: inline;
}
#steuerungoben a {
    display: block;
    width: 192px;
    text-align: center;
    line-height: 26px;
    float: left;
    color: white;
    text-decoration: none;
}
#steuerungrechts {
    /*background-color: green;*/
    width: 150px;
    height: 500px;
    float: right;
    padding-top: 30px;
    list-style-type: none;
    line-height: 45px;

}
#steuerungrechts ul {
    list-style-type: none;
}
#steuerungrechts a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    border-bottom: 3px;
    border-color: #434343;
    border-style: solid;
}
section {
    height: 1000px;
    width: 600px;
    /*background-color: orange;*/
    margin-left: 3.5em;
}




footer {
    /*background-color: brown;*/
    float: right;
    padding-top: 585px;
    margin-right: 15px;
}




#wrapper {
    /*background-color: #eeeeee;*/
    background-image: url(img/kopfbild_02.png);
    margin: 0 auto;
    width: 1024px;
    height: 1300px;
    margin-bottom: 300px;
    background-repeat: no-repeat;
}




body {
    text-align: left;
    background-image: url(img/background.jpg);
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}




section p {
    display: block;
    padding-bottom: 1em;
    font-size: large;
    border-width: 3px;

}




section h1 {
    padding-top: 1.5em;
    font-size: xx-large;

}




#menu {
    width: 734px;
    height: 34.8px;
}
a.menu:link {
    color: #000000;
    background-color: transparent;
}
a.menu:visited {
    color: #000000;
    background-color: transparent;
}
a.menu:hover {
    color: #4c4c4c;
    background-color: #4c4c4c;
}
a.menu:active {
    color: #4c4c4c;
    background-color: #4c4c4c;
}








#menu2 {
    width: 735px;
    height: 34.8px;
}
a.menu2:link {
    color: #000000;
    background-color: transparent;
}
a.menu2:visited {
    color: #000000;
    background-color: transparent;
}
a.menu2:hover {
    color: #4c4c4c;
    background-color: #4c4c4c;
}
a.menu2:active {
    color: #4c4c4c;
    background-color: #4c4c4c;

Alles anzeigen

Ich hoffe das ihr mir schnell weiterhelfen könnt, das ist mir extrem wichtig!

Danke !

Beiträge von DoLu2421

Zweite Seite

Zweite Seite

drop-down-side menü