Guten Tag Zusammen
Mit grosser Erwartung wende ich mich hier an Euch und hoffe, dass Ihr mir die passende Lösung geben könnt. Ich möchte für eine neue Seite das hier verwendete Menu https://www.forum-hilfe.de/%22 verwenden. Wer von Euch kann mir hier sagen wie ich dieses umsetzen soll?
Besten Dank für Eure Unterstützung.
Leider sind mir hier auch die Hände gebunden... jedoch soll ich nun etwas über die Textur der Website schreiben und habe keine Ahnung...
Guten Tag Zusammen, kann mir jemand von Euch etwas unter die Arme greifen und sagen was für eine Textur die Website welche Ihr unter http://www.medienpixel.ch/diplomarbeit vorfindet?
Bin mir bei dieser Angelegenheit nicht ganz sicher....
Ich sehe nicht ganz wo ich den z-index setzen soll... Auch um ehrlich zu sein, wo und wie Du das #navigation ul ul.submenu siehst... "Wichtig darf keinen HTML5 Code enthalten..
Nun habe ich ein Logo positioniert, nun wird das ganze noch schlimmer....
Auch an die User in diesem Forum, entschuldigt das Crossposting meinerseits. Wollte niemanden verärgern, sondern es war eine reine Verzweiflungstat. Wird also nicht mehr vorkommen...
Hallo Zusammen
Eigentlich wollte ich dem Forum beitreten um anderen Hilfesuchenden zu helfen, doch nun stecke ich selbst fest und hoffe das mir jemand helfen kann. Ich habe mir nun eine HTML-Seite (Bilder noch nicht fix und richtig, Farben bei diversen Containern dient zur Hilfe) zusammengestellt.
Doch leider habe ich grosse Mühe die Navigation mit Dropdown (bei Mouseover) ordentlich einzubinden. Diese Funktioniert zwar, jedoch ver-/enstellt es bei Mouseover die ganze Seite. Content und News Container verschwinden oder werden verschoben. Ich kann mir nicht erklären weshalb. Zusätzlich ist das Topmenu nicht richtig im Balken zentriert und das Submenu kommt verschoben unterhalb des Topmenu....
Wer kann mir hier helfen oder den entscheidenden Hinweis bieten?
Hier der Link zur Online-Page "Demo" -> http://www.medienpixel.ch/demo_page/
Hier der CSS Code
@charset "utf-8";/* CSS Document */
/* ====================================================================
CSS Document for screendesign by Sigrist Sascha
Last Update: 29.09.2013
Author: Sigrist Sascha
Media: Screen
Structure: 1 Kalibrierung
2 Allgemeine Definitionen
3. Anchors
4. Screendesign
5. Navigation
6. Form
======================================================================== */
/* ==========================================
1. Kalibrierung
========================================== */
*{
margin:0;
padding:0;
border:0;
}
html{
height:100%;
margin-bottom:1px;
}
body{
height:100%;
width:100%;
}
/*****Abstand nach unten****/
h1,h2,h3,p,ol, ul{
margin-bottom:1em;
}
/****Verschachtelte Listen**********/
ul ul, ol ol{
margin-bottom:0;
}
/*****Liste****/
li{
margin-left:1em;
}
/* ===========================================
2. Allgemeine Definitionen
=========================================== */
*{
}
body{
background-color: #000;
}
h1,h2,h3{
}
h1{
}
h2{
}
h3{
}
p{
}
strong{
}
em{
}
address{
}
blockqoute{
}
q{
}
/* ===========================================
3. Anchors
=========================================== */
/* ===========================================
4. Screendesign
=========================================== */
#wrapper{
width: 1000px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 25px;
background-color: #FFF;
z-index: 1;
}
#header{
background-image: url(../images/header.jpg);
height: 174px;
width: 1000px;
}
/*#nav{
background-image: url(../images/keymenu_background.png);
background-repeat: repeat-x;
padding: 0px;
height: 49px;
width: 1000px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 25px;
margin-left: 0px;
}*/
#infobox{
background-color: #999;
float: left;
height: 300px;
width: 300px;
}
#infobox_header{
}
#content{
width: 675px;
background-color: #9F3;
margin-left: 325px;
}
#footer {
width: 1000px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;
text-align: center;
}
/* ===========================================
5. Navigation
=========================================== */
/*#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul li {
background-image: url(../images/disconnector.png);
background-repeat: no-repeat;
background-position: left;
float: left;
}
#nav ul li:first-child {
background: none;
}
#nav ul li a {
display: block;
width: 141px;
height: 34px;
font-family: Verdana;
font-size: 12px;
color: #FFF;
text-decoration: none;
text-align: center;
margin: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul li a:hover {
background-image: url(../images/keymenu_hover.png);
background-repeat: repeat-x;
}*/
#menu {
background-image: url(../images/keymenu_background.png);
background-repeat: repeat-x;
width: 1000px;
height: 49px;
font-size: 12px;
padding: 0px;
margin-bottom: 20px;
z-index: 2;
}
#menu ul {
list-style:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:141px;
text-align:center;
}
.topmenu ul{
display:none;
}
.topmenu a, .submenu a{
width: 141px;
height: 34px;
padding-top: 15px;
marigin: 0;
text-align: center;
font-size: 12px;
font-family: Verdana;
color: #FFF;
text-decoration: none;
}
.submenu a{
background-image: url(../images/keymenu_background.png);
background-repeat: repeat-x;
font-size:12px;
width:141px;
/*position:relative;*/
clear:both; /* special IE6 */
}
#menu a:hover, .topmenu.on a {
background-image: url(../images/keymenu_hover.png);
background-repeat: repeat-x;
}
.topmenu:hover ul {
display:block;
z-index:2000;
}
/* ===========================================
6. Form
=========================================== */Hier der 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FC Lobsigen - der Imaginäre Fussbalverein</title>
<link rel="stylesheet" type="text/css" href="css/screen.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
FC Lobsigen
</div>
<div id="menu">
<ul>
<li class="topmenu"><a href="index.html">Startseite</a></li>
<li class="topmenu"><a href="der_verein">Der Verein</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 2.1</a></li>
<li class="submenu"><a href="">Unterpunkt 2.2</a></li>
</ul>
</li>
<li class="topmenu"><a href="die_mannschaft">Die Mannschaft 3</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 3.1</a></li>
<li class="submenu"><a href="">Unterpunkt 3.2</a></li>
</ul>
</li>
<li class="topmenu"><a href="fanzone.html">Fanzone</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 3.1</a></li>
<li class="submenu"><a href="">Unterpunkt 3.2</a></li>
</ul>
</li>
<li class="topmenu"><a href="die_sponsoren">Die Sponsoren 3</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 3.1</a></li>
<li class="submenu"><a href="">Unterpunkt 3.2</a></li>
</ul>
</li>
<li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="infobox">
<div class="infobox_header">
Aktuelles News
</div>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</div>
<div id="footer">
© Copyright 2011 FC-Lobsigen.ch | Design by Sascha Sigrist
</div>
</div>
</body>
</html>