brauche HILFE beim Dropdownmenü

psyl3nc3

ich brauche hilfe beim dropdownmenü
das was runterdropt kommt immer ganz links auf der seite und nicht unter dem menüeintrag wo es soll

css

Code

/* Navigation */ nav {    display:block;    height: 50px;    background:#FFFFFF;    text-align:center;}
nav ul {    display:block;}nav ul li {    float:center;    display:inline;    margin:15px;    position:relative;}nav ul li a {    text-align:center;    text-decoration:none;    color:#454040;    font-size: 1.125em;    line-height:2.5em;    padding:0.563em 0.938em 0.375em 0.983em;    transition:background 0.2s;    -webkit-transition:background 0.2s;}
nav ul li a:hover {    background:#DBD9D8;    border-bottom: 0.188em solid #E7590B;}nav ul li a.active {    border-bottom: 0.188em solid #E7590B;}
#submenu {    position: absolute;    visibility:hidden;    background: #FFFFFF;    display:inline-block;    margin:auto;    float:inherit;}#submenu li a{    padding:0 90;    display: block;    text-align:center;    text-decoration:none;    }nav li:hover #submenu{        display:block;        visibility:visible;}li.active #submenu{    display:block;

menü

Code

<<nav class="nav">            <ul>                <li><a href="index.html">News</a></li>                <li><a href="team.html">Team</a>                    <ul id="submenu">                        <li><a href="sarah.html">Sarah</a></li>                        <li><a href="jan.html>">Jan</a></li>                        <li><a href="sara.html">Sara</a></li>                        <li><a href="geri.html">Geri</a></li>                     </ul>                     </li>                <li><a href="fotos.html">Ueber uns</a></li>                <li><a href="index.html">Studio</a></li>                <li><a href="index.html">Dienstleistungen</a></li>                <li><a href="index.html">Anfahrt</a></li>            </ul>        </nav>

Gastl

Neu angemeldet, "ich brauche hilfe" und Codeschnipsel hingerotzt. Ich hoffe niemand hilft. Das nenne ich eine Frechheit.

psyl3nc3

kannst du mir wenigstens erklären wie ich diese codeschnispel hier übersichtlicher posten kann?

MrMurphy

Hallo

zum Beispiel so

Code

/* Navigation */ 
nav {
   display: block;
   height: 50px;
   background: #FFFFFF;
   text-align: center;
}
nav ul {
   display: block;
}
nav ul li {
   float: center;
   display: inline;
   margin: 15px;
   position: relative;
}
nav ul li a {
   text-align: center;
   text-decoration: none;
   color: #454040;
   font-size: 1.125em;
   line-height: 2.5em;
   padding: 0.563em 0.938em 0.375em 0.983em;
   -webkit-transition: background 0.2s;
   transition: background 0.2s;
}
nav ul li a:hover {
   background: #DBD9D8;
   border-bottom: 0.188em solid #E7590B;
}
nav ul li a.active {
   border-bottom: 0.188em solid #E7590B;
}
#submenu {
   position: absolute;
   visibility: hidden;
   background: #FFFFFF;
   display: inline-block;
   margin: auto;
   float: inherit;
}
#submenu li a {
   padding: 0 90;
   display: block;
   text-align: center;
   text-decoration: none;
}
nav li:hover #submenu {
   display: block;
   visibility: visible;
}
li.active #submenu {
   display: block;

Alles anzeigen

und so

Code

<<nav class="nav">
   <ul>
      <li><a href="index.html">News</a></li>
      <li><a href="team.html">Team</a>
      <ul id="submenu">
         <li><a href="sarah.html">Sarah</a></li>
         <li><a href="jan.html>">Jan</a></li>
         <li><a href="sara.html">Sara</a></li>
         <li><a href="geri.html">Geri</a></li>
      </li>
      <li><a href="index.html">Studio</a></li>
      <li><a href="index.html">Dienstleistungen</a></li>
      <li><a href="index.html">Anfahrt</a></li>
   </ul>
</nav>

Alles anzeigen

oder auch so

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Navigation</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      p {
      }


      /* Navigation */ 
      nav {
         display: block;
         height: 50px;
         background: #FFFFFF;
         text-align: center;
      }
      nav ul {
         display: block;
      }
      nav ul li {
         float: center;
         display: inline;
         margin: 15px;
         position: relative;
      }
      nav ul li a {
         text-align: center;
         text-decoration: none;
         color: #454040;
         font-size: 1.125em;
         line-height: 2.5em;
         padding: 0.563em 0.938em 0.375em 0.983em;
         -webkit-transition: background 0.2s;
         transition: background 0.2s;
      }
      nav ul li a:hover {
         background: #DBD9D8;
         border-bottom: 0.188em solid #E7590B;
      }
      nav ul li a.active {
         border-bottom: 0.188em solid #E7590B;
      }
      #submenu {
         position: absolute;
         visibility: hidden;
         background: #FFFFFF;
         display: inline-block;
         margin: auto;
         float: inherit;
      }
      #submenu li a {
         padding: 0 90;
         display: block;
         text-align: center;
         text-decoration: none;
      }
      nav li:hover #submenu {
         display: block;
         visibility: visible;
      }
      li.active #submenu {
         display: block;


   </style>
</head>
<body>
   <<nav class="nav">
      <ul>
         <li><a href="index.html">News</a></li>
         <li><a href="team.html">Team</a>
         <ul id="submenu">
            <li><a href="sarah.html">Sarah</a></li>
            <li><a href="jan.html>">Jan</a></li>
            <li><a href="sara.html">Sara</a></li>
            <li><a href="geri.html">Geri</a></li>
         </li>
         <li><a href="index.html">Studio</a></li>
         <li><a href="index.html">Dienstleistungen</a></li>
         <li><a href="index.html">Anfahrt</a></li>
      </ul>
   </nav>
</body>
</html>

Alles anzeigen

Und benutze die Vorschau-Möglichkeit.

Dann hättest du vielleicht auch die sachlichen Fehler entdeckt, mit denen wir uns rumärgern müssen um dir zu helfen. Zum Beispiel das der CSS-Code einfach aufhört und damit offensichtlich nicht vollständig ist. Oder das im HTML-Teil zwei ul-Elemente geöffnet werden, aber nur eins geschlossen wird.

Gruss

MrMurphy

djheke

Bitte

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Navigation</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>  
* {
 margin:0;
 padding:0; 
 text-decoration: none;
 list-style:none;
 border:none;
}


nav {
 background: #eee;
 text-align: center;
}


nav a {
 padding:10px 20px;
 display:block;
 text-align: center;
 color:#000;
 border-bottom: 2px solid transparent;
}


nav ul li {
 display:inline-block;
 position: relative;
}


nav ul li a:hover  {
 background: #DBD9D8;
 border-bottom: 2px solid #E7590B;
}


li ul {
 position: absolute;
 top:-99999em;
 background:#eee;
}


li ul li {
 display:block;
}


nav li:hover ul {
 top:auto;
}
</style>
</head>
<body>
   <nav>
      <ul>
         <li><a href="index.html">News</a></li>
         <li><a href="team.html">Team</a>
          <ul>
            <li><a href="sarah.html">Sarah</a></li>
            <li><a href="jan.html>">Jan</a></li>
            <li><a href="sara.html">Sara</a></li>
            <li><a href="geri.html">Geri</a></li>
          </ul>
         </li>
         <li><a href="index.html">Studio</a></li>
         <li><a href="index.html">Dienstleistungen</a></li>
         <li><a href="index.html">Anfahrt</a></li>
      </ul>
   </nav>
</body>
</html>

Alles anzeigen

psyl3nc3

Vielen dank!!

- - - Aktualisiert - - -

djheke kannst du mir bei noch was helfen bitte... ich bekomme das bild vom header nicht kleiner egal wie ich es ändere es bleibt immer gleich groß... hab größe in photoshop geändert und versucht diese neue größe per html - css umzusetzen aber es funktioniert nicht ohne dass alles ganz falsch angezeigt wird

CSS

/* General Style */ 




body {
	background:#DCDCDC;
	font-size:100%;
	margin:0em;
	padding:0em;
}




h1 {
	font-size:2.5em;
	line-height:3.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#E2DBDB;
	margin:0em;
}




h2 {
	font-size:1.563em;
	line-height:1.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1.25em;
	text-align:left;
}




p {
	line-height:1.25em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1.25em;
	text-align:justify;
}




ul {
	margin:0px;
	padding:0px;
}




li {
	list-style:square;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	line-height:1.25em;
	margin:0em;
	padding:0em;
	margin:0.313em 0em 0.313em 0em;
}




img {
	width:90%;
	height:auto;
	max-width:100%;
}




a {
	text-decoration: none;
}




/* On Top Bar */
#menubar {
	display:block;
	background:#FFFFFF;
} 
#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}
#menubar ul li a.menubutton {
	display:none;
}
/* Header */ 
header {
	display:block;
	background:#000000;
	text-align:center;
}
/* Navigation */ 
* {
 margin:0;
 padding:0; 
 text-decoration: none;
 list-style:none;
 border:none;
}




nav {
 background: #eee;
 text-align: center;
}




nav a {
 padding:10px 20px;
 display:block;
 text-align: center;
 color:#000;
 border-bottom: 2px solid transparent;
}




nav ul li {
 display:inline-block;
 position: relative;
}




nav ul li a:hover  {
 background: #DBD9D8;
 border-bottom: 2px solid #E7590B;
}




li ul {
 position: absolute;
 top:-99999em;
 background:#eee;
}




li ul li {
 display:block;
}




nav li:hover ul {
 top:auto;
}
/* Content Area */ 
#main {
	display:block;
	width:96%;
	max-width:980px;
	margin:1.25em auto;
	padding:0em;
}




#main article {
	display:inline-block; 
	width:65.3%; 
	background:#FFFFFF;
	vertical-align: top;
	margin:0em;
	padding:0em;
	text-align:center;
}




#main article img {
	max-width:400px;
	box-shadow:0px 0px 10px -5px #4c4948;
	border-radius: 5px;#
}




#main aside {
	display:inline-block;
	width:30.6%;
	margin-left:3%; 
	padding:0em;
	vertical-align:top;
}




#main aside section {
	margin-bottom:1.563em;
	background:#FFFFFF;
	border-bottom: 0.188em solid #65b1c0;
}




#main article h2 {
	padding:1em 1.8em 1em 1.8em;
}




#main aside section ul {
	padding:0em 1.875em 1.25em 2.5em;
}
/* Footer */ 
footer {
	display:block;
	background:#2F2C2C;
	text-align:center;
}




footer ul {
	display:block;
	width:100%;
	max-width:980px;
	text-align:left;
	margin:0px auto;
}




footer ul li {
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#E2DBDB;
	padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
	color:#E2DBDB;
}
/* Mobile Style */
@media screen and (max-width:800px) {
	body {
		font-size:90%;
	}
}
@media screen and (max-width:600px) {
	#main aside, #main article {
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
	}
}
@media screen and (min-width:550px) {
	nav.nav {
		display:block !important;
	}	
}
@media screen and (max-width:550px) {
	body {
		font-size:86%;
	}
	#menubar ul li a.menubutton {
		display:block;
	}	
	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}
}

Alles anzeigen

HTML

<!DOCTYPE  html>
<html>
	<head>
    	<meta charset="utf-8">
		<title>needlefactory.it</title>
        <link rel="icon" href="http://www.needlefactory.it/images/icon.png" type="icon/png" />
        <link rel="shortcut icon" href="http://www.needlefactory.it/images/icon.png" type="icon/png" />
		<link rel="stylesheet" href="style.css" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.menubutton').click(function() {
					$('nav').slideToggle('slow');
				});
			});5
		</script>
	</head>


	<body>
		<section id="menubar">
			<ul>
				<li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
			</ul>
		</section>
		[size=12][B]<header>[/B][/SIZE]
[size=12][B]			<img src="images/logo_header_v2.jpg" height="150" width="900">[/B][/SIZE]
[size=12][B]		</header>[/B][/SIZE]
		<nav>
      <ul>
         <li><a href="index.html">News</a></li>
         <li><a href="team.html">Team</a>
          <ul>
            <li><a href="sarah.html">Sarah</a></li>
            <li><a href="jan.html>">Rider</a></li>
            <li><a href="sara.html">Sara</a></li>
            <li><a href="geri.html">Carbonfeet</a></li>
          </ul>
         </li>
         <li><a href="index.html">Studio</a></li>
         <li><a href="index.html">Dienstleistungen</a></li>
         <li><a href="index.html">Anfahrt</a></li>
      </ul>
   </nav>
        <p>
		<section id="main">
			<article>
				<h2>Geri - Tattoo</h2>
				<img src="images/geri.jpg"/>
			</article>
			<aside>
				<section>
					<h2><a href="http://carbonfeet78.blogspot.it/" target="_blank">Artworks</a></h2>
				</section>
				<section>
					<h2>Steckbrief</h2>
					<p></p>					
				</section>

			</aside>
		</section>
		<footer>
			<ul>
				<li>&copy; 2015 Needlefactory</li>
				<li><a href="kontakt.html">Kontakt</a></li>
				<li><a href="impressum.html">Impressum</a></li>
			</ul>
		</footer>
	</body>
</html>

Alles anzeigen

ich hätte das bild vom header gerne etwas kleiner wie groß genau das müsste ich gern schauen. aber die höhe sollte 70 - 100px ca sein.
Können Sie mir bitte weiterhelfen?

djheke

Code

img {
    height:100px;

}

psyl3nc3

Zitat von djheke
Code
img {
    height:100px;

}

ok danke thema erledigt... header img

VIELEN DANK!

psyl3nc3

hallo henry

ich bräuchte nochmal deine hilfe und zwar würden beim dropdown menü noch sublevels dazu kommen. kannst du mir nochmal helfen?
hast du auch erfahrung mit dem menü dass es für mobile smartphones benutzbar ist? denn es ist nur für das normale menü benutzbar nicht aber für dropdown.

vielen dank im voraus

du kannst mir auch gerne deine paypal adresse schreiben und ich werde dir eine spende für deine arbeit zukommen lassen!
vielen dank

HTML

<!DOCTYPE  html>
<html>
	<head>
		<title>needlefactory.it</title>
        <link rel="icon" href="http://www.needlefactory.it/images/icon.png" type="icon/png" />
        <link rel="shortcut icon" href="http://www.needlefactory.it/images/icon.png" type="icon/png" />
		<link rel="stylesheet" href="style.css" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.menubutton').click(function() {
					$('nav').slideToggle('slow');
				});
			});5
		</script>
	</head>
	<body>
		<section id="menubar">
			<ul>
				<li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
			</ul>
		</section>
		<header>
			<img src="images/logo_header_v2.jpg" height="150" width="900">
		</header>
		   <nav>
          <ul>
             <li><a href="index.html">News</a></li>
             <li><a href="team.html">Team</a>
              <ul>
                <li><a href="sarah.html">Sarah</a></li>
                <li><a href="jan.html">Rider</a></li>
                <li><a href="sara.html">Sara</a></li>
                <li><a href="geri.html">CarbonFeet</a></li>
              </ul>
             </li>
             <li><a href="studio.html">Studio</a></li>
             <li><a href="#">Dienstleistungen</a>
             <ul>
             	<li><a href="#">Tattoo</a>
                	<ul>
                    	<li><a href="tattoo/geschichte.html">Geschichte</a></li>
                        <li><a href="tattoo/wie_funktioniert_es.html">Wie funktioniert tätowieren?</a></li>
                        <li><a href="tattoo/wo&was.html">Wo & was tätowieren?</a></li>
                        <li><a href="tattoo/preise.html">Preise</a></li>
                        <li><a href="tattoo/schmerzen&gefahren.html">Schmerzen und Gefahren</a></li>
                        <li><a href="tattoo/pflegehinweise.html">Pflegehinweise</a></li>
                    </ul>
                </li>
                <li><a href="#">Piercing</a>
             </ul>
             </li>
             <li><a href="anfahrt.html">Anfahrt</a></li>
          </ul>
       </nav>
        <p>
		<section id="main">

                <section id="main">
   				<img src="images/logo_con.jpg"
        		</section>



			<footer>
			<ul>
				<li>&copy; 2015 Needlefactory</li>
				<li><a href="kontakt.html">Kontakt</a></li>
				<li><a href="impressum.html">Impressum</a></li>
			</ul>
		</footer>
	</body>
</html>

Alles anzeigen

CSS

/* General Style */ 


body {
	background:#DCDCDC;
	font-size:100%;
	margin:0em;
	padding:0em;
	overflow: scroll;
}




h1 {
	font-size:2.5em;
	line-height:3.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#E2DBDB;
	margin:0em;
}




h2 {
	font-size:1.563em;
	line-height:1.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1.25em;
	text-align:left;
}




p {
	line-height:1.25em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1.25em;
	text-align:justify;
}




ul {
	margin:0px;
	padding:0px;
}




li {
	list-style:square;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	line-height:1.25em;
	margin:0em;
	padding:0em;
	margin:0.313em 0em 0.313em 0em;
}




img {
	width:90%;
	height:auto;
	max-width:100%;
}




a {
	text-decoration: none;
}




/* On Top Bar */
#menubar {
	display:block;
	background:#FFFFFF;
} 
#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}
#menubar ul li a.menubutton {
	display:none;
}
/* Header */ 
header {
	display:block;
	background:#000000;
	text-align:center;
}




header img {
    height:150px;
	width:auto;

/* Navigation */ 








}
* {
 margin:0;
 padding:0; 
 text-decoration: none;
 list-style:none;
 border:none;
}




nav {
 background: #eee;
 text-align: center;
}




nav a {
 padding:10px 20px;
 display:block;
 text-align: center;
 color:#000;
 border-bottom: 2px solid transparent;
}




nav ul li {
 display:inline-block;
 position: relative;
}




nav ul li a:hover  {
 background: #DBD9D8;
 border-bottom: 2px solid #64b2bf;
}




li ul {
 position: absolute;
 top:-99999em;
 background:#eee;
}




li ul li {
 display:block;
}




nav li:hover ul {
 top:auto;
}
/* Content Area */ 
#main {
	display:block;
	width:96%;
	max-width:980px;
	margin:1.25em auto;
	padding:0em;
}




#main article {
	display:inline-block; 
	width:65.3%; 
	background:#FFFFFF;
	vertical-align: top;
	margin:0em;
	padding:0em;
	text-align:center;
}




#main article img {
	max-width:400px;
	box-shadow:0px 0px 10px -5px #4c4948;
	border-radius: 5px;#
}




#main aside {
	display:inline-block;
	width:30.6%;
	margin-left:3%; 
	padding:0em;
	vertical-align:top;
}




#main aside section {
	margin-bottom:1.563em;
	background:#FFFFFF;
	border-bottom: 0.188em solid #65b1c0;
}




#main article h2 {
	padding:1em 1.8em 1em 1.8em;
}




#main aside section ul {
	padding:0em 1.875em 1.25em 2.5em;
}
/* Footer */ 
footer {
	display:block;
	background:#2F2C2C;
	text-align:center;
}




footer ul {
	display:block;
	width:100%;
	max-width:980px;
	text-align:left;
	margin:0px auto;
}




footer ul li {
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#E2DBDB;
	padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
	color:#E2DBDB;
}
/* Mobile Style */
@media screen and (max-width:800px) {
	body {
		font-size:90%;
	}
}
@media screen and (max-width:600px) {
	#main aside, #main article {
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
	}
}
@media screen and (min-width:550px) {
	nav.nav {
		display:block !important;
	}	
}
@media screen and (max-width:550px) {
	body {
		font-size:86%;
	}
	#menubar ul li a.menubutton {
		display:block;
	}	
	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}
}

Alles anzeigen

djheke

Also, wenn du keine Lust hast selber etwas zu machen, dann solltest du die eine fertige Vorlage kaufen.

Tags