Hilfe beim Design

Beitrag von **Jasko** » Di 17. Jun 2014, 20:52

Wie awardfan schreibt hast du dieses Scipt

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

zwei mal drin, nur halt aus verschiedenen Quellen, den eigentlichen jQuery Code der für die Aktionen im Menü zuständig ist hast du aber nicht eingebunden.

Das wäre dieser Script:

Code: Alles auswählen

$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
});

Also, diesen Code in eine Datei und so einbinden wie in der Linie 2. bei deinem Beitrag

Beitrag von **npage-user** » Mi 18. Jun 2014, 15:29

moni hat geschrieben:Michael ja tut mir aber Leid... wen man dir was helfen soll da lasse hier den Code !

Das braucht dir doch nicht leid zu tun, du kannst doch nichts dafür, wenn ich das nicht hinkriege. Das wird schon irgendwie noch werden!

Also hier mal der überarbeitete Head-Bereich (nur mit der eigenen, hochgeladenen jQuery-Datei in der untersten Zeile) ...

Code: Alles auswählen

<meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="http://file2.npage.de/012600/02/html/version8.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://file1.npage.de/005800/03/html/lightbox.css" type="text/css" media="screen, projection" />
    <script type="text/javascript" src="http://file1.npage.de/005800/03/html/lightbox.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="http://file1.npage.de/005800/03/html/lightbox.js"></script>
    <script type='text/javascript' src='http://file2.npage.de/012600/02/html/jquery.min.js'></script>

Außerdem hab ich den Code der jQuery-Datei entsprechend Jaskos letztem Beitrag bearbeitet: http://file2.npage.de/012600/02/html/jquery.min.js

Und jetzt funktioniert's immer noch nicht. Seltsam, seltsam ...

Beitrag von **moni** » Mi 18. Jun 2014, 20:20

es ist doch ganz einfach so ne leiste zu montieren ...
habe das einer JS drin in den Design doch man soll den auslagern ebenso auch css ..

http://blicke.npage.de/_navi-leiste.html

Code: Alles auswählen

<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

      	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
     	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script language="javascript" type="text/javascript">
    $( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
});
</script>

    <link href="style.css" type="text/css" rel="stylesheet">
    <style type="text/css">
     h1 {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
font-style: italic;
font-size : 22px;
color : #339966; }

h2 {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
font-size : 18px;
color : #000000; }

h3 {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
font-size : 14px;
color :#0cbb3f; }

a:link {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
color : #111111;
font-size : 13px;
text-decoration : underline; }

a:visited {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
color : #111111;
font-size : 13px;
text-decoration : underline; }

a:active {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
color : #111111;
font-size : 13px;
text-decoration : underline; }

a:hover {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
color : #3e8d36;
font-size : 13px;
text-decoration : none; }

#zentrum {
   background-image: url(http://file2.npage.de/012600/02/bilder/zentrum-back.jpg);
   width: 100%;
   min-height: 960px;
   max-width: 1000px;
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 10px;
   margin: 0 auto;
}

#header {
background-position : center top;
border : 0px solid #008000;
width : 990px;
height: 200px;
background-color : transparent;
background-image : url(http://file2.npage.de/012600/02/bilder/testheader.jpg);
background-repeat : no-repeat;
}

@media only screen and (max-width: 801px) {

#header {
display: none;
}

}

#navi-links {
position: absolute;
float: left;
background-color: #ffffff;
padding-left: 5px;
padding-right: 5px;
width: 255px;
height: 750px;
}

@media only screen and (max-width: 801px) {

#navi-links {
display: none;
}

}

#suche {
position:absolute;
margin-top: 10px;
}
#suche input[type="text"] { width:200px; display:block; background-image:url(http://file1.npage.de/005800/03/bilder/lupe.png); background-repeat:no-repeat; background-position:2px 7px; padding-left:21px; }
#suche input[type="text"]:focus { width:200px; display:block; padding-right:30px; }


#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 250px;
  margin-top: 45px;
  font-family: georgia, arial, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 8px 12px;
  border-left: 1px solid #0f6d16;
  border-right: 1px solid #0f6d16;
  border-top: 1px solid #0f6d16;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #19b023;
  background: -webkit-linear-gradient(#19b023, #169a1f);
  background: -moz-linear-gradient(#19b023, #169a1f);
  background: -o-linear-gradient(#19b023, #169a1f);
  background: -ms-linear-gradient(#19b023, #169a1f);
  background: linear-gradient(#19b023, #169a1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #ffffff;
  background: #169a1f;
  background: -webkit-linear-gradient(#169a1f, #13831a);
  background: -moz-linear-gradient(#169a1f, #13831a);
  background: -o-linear-gradient(#169a1f, #13831a);
  background: -ms-linear-gradient(#169a1f, #13831a);
  background: linear-gradient(#169a1f, #13831a);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #0f6d16;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #0f6d16;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #ffffff;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}

#content {
position: relative;
left: 277px;
width: 698px;
padding : 7px;
margin-top : 0;
margin-right: 10px;
margin-bottom : 10px;
border-top : 0px solid #008000;
border-right : 0px solid #008000;
border-bottom : 0px solid #008000;
border-left : 0px solid #008000;
background-color : #ffffff;
}

@media only screen and (max-width: 801px) {

#content {
width: 95%;
left: 0px;
background-color: #ffffff;
}

}

body {
font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
text-align: justify;
color : #000000;
font-size : 13px;
background-color : #5db5ef; }

.schatten {
background: #f4f5f0;
padding: 12px;
-webkit-box-shadow: 2px 2px 2px #FFFFFF;
-moz-box-shadow: 2px 2px 2px #FFFFFF;
box-shadow: 2px 2px 2px #FFFFFF; }

.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px Arial, Arial, Helvetica, sans-serif;
padding: 5px 15px;
text-shadow: 0 2px 2px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
box-shadow: 0 2px 3px rgba(0,0,0,.2);
color: #ebf4ff;
background: #46c414;
background: -webkit-gradient(linear, left top, left bottom, from(#46c414), to(#197d21));
background: -moz-linear-gradient(top,  #46c414,  #197d21);
filter:  progid:DXImaGETransform.Microsoft.gradient(startColorstr='#46c414', endColorstr='#197d21');
}
.button:hover {
background: #46c414;
background: -webkit-gradient(linear, left top, left bottom, from(#197d21), to(#46c414));
background: -moz-linear-gradient(top,  #197d21,  #46c414);
filter:  progid:DXImaGETransform.Microsoft.gradient(startColorstr='#197d21', endColorstr='#46c414');
text-decoration: none;
color: #ebf4ff;
}
.button:active {
color: #ebf4ff;
background: -webkit-gradient(linear, left top, left bottom, from(#46c414), to(#197d21));
background: -moz-linear-gradient(top,  #46c414,  #197d21);
filter:  progid:DXImaGETransform.Microsoft.gradient(startColorstr='#46c414', endColorstr='#197d21');
position: relative;
top: 1px;
}

.auszeichnungen {
   width: 678px;
   background-color: #8a7019;
   background-image: url(http://file1.npage.de/005800/03/bilder/auszeichnungen.png);
   background-repeat: no-repeat;
   padding-top: 35px;
   padding-right: 20px;
   padding-bottom: 10px;
}

div.bildquiz {
   width: 690px;
   height: 80px;
   background-color: #ffffff;
   padding-top: 5px;
   padding-bottom: 5px;
   margin: 0 auto;
}

.eswareinmal {
   width: 673px;
   background-image: url(http://file1.npage.de/005800/03/bilder/eswareinmal.jpg);
   background-repeat: no-repeat;
   background-color: #cacaca;
   padding-top: 60px;
   padding-bottom: 3px;
   padding-left: 5px;
}

div.eventkalender01 {
   width: 690px;
   background-image: url(http://file1.npage.de/005800/03/bilder/eventkalender-back.png);
   background-repeat: repeat-x;
   background-color: #45b31c;
   margin-bottom: 10px;
   padding-left: 5px;
   padding-right: 5px;
}

div.eventkalender02 {
   width: 690px;
   background-color: #ffffff;
   min-height: 70px;
}

div.facebook-banner {
   width: 690px;
   height: 100px;
   background-image: url(http://file1.npage.de/005800/03/bilder/facebook-neuheiten.jpg);
   background-repeat: no-repeat;
   padding-top: 10px;
   padding-left: 460px;
}

div.newsliste {
   width: 690px;
   background-color: #ebebea;
   padding-top: 1px;
   padding-bottom: 1px;
   padding-right: 1px;
   margin: 0 auto;
}

div.newsliste h3 {
   font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-size : 14px;
   color :#928e8e;
   margin-left: 25px;
}

div.news-video {
   width: 630px;
   height: 340px;
   background-image: url(http://file1.npage.de/005800/03/bilder/news-video.jpg);
   background-repeat: no-repeat;
   padding-top: 60px;
   padding-left: 60px;
}

div.newsvorschau {
   width: 98%;
   height: 125px;
   background-image: url(http://file1.npage.de/005800/03/bilder/newsvorschau-hintergrund.jpg);
   background-repeat: no-repeat;
   padding-left: 3px;
   padding-top: 3px;
}

div.newsvorschau h2 {
   font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-size : 16px;
   color : #2e8e31;
   margin-left: 155px;
   margin-top: -100px;
}

div.newsvorschau p {
   font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-size: 12px;
   font-style: italic;
   color: #aaaaaa;
   margin-left: 155px;
   margin-top: 15px;
   text-align: justify;
}

div.newsvorschau02 {
   position: absolute;
   width: 440px;
   height: 20px;
   margin-left: 380px;
   margin-top: 40px;
}

div.newsvorschau02 p {
   color: #c5c9ce;
   font-weight: bold;
   font-size: 12px;
}

div.preise01 {
   width: 690px;
   height: 22px;
   background-color: #22884f;
   padding-left: 5px;
   padding-right: 5px;
   margin-top: -10px;
}

div.preise02 {
   width: 690px;
   background-color: #adf9c1;
   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 5px;
   padding-right: 5px;
   margin-top: 0px;
}

div.sub-headline {
   width: 100%
   max-width: 690px;
   height: 20px;
   background-image: url(http://file2.npage.de/012600/02/bilder/sub-headline.jpg);
   background-repeat: no-repeat;
   color: #ffffff;
   font-size: 15px;
   padding-left: 5px;
   padding-top: 2px;
   margin-bottom: 3px;
}

div.quicknews {
   width: 100%
   max-width: 690px;
   margin: 0 auto;
   padding: 5px;
   background-color: #ebebea;
}

div.quicknews p {
   color: #7d7d7a;
}

div.quicknews a {
   color: #7d7d7a;
   text-decoration: underline;
}

div.quicknews a:hover {
   color: #7d7d7a;
   text-decoration: none;
}

div.wusstestdudass {
   width: 660px;
   background-color: #41ff41;
   background-image: url(http://file1.npage.de/005800/03/bilder/wusstestdudass.jpg);
   background-repeat: no-repeat;
   padding-top: 40px;
   padding-bottom: 5px;
   padding-right: 20px;
   margin: 0 auto;
}

div.zitat {
width: 550px;
background-image: url(http://file1.npage.de/005800/03/bilder/zitat.png);
background-repeat: no-repeat;
background-color: #9d9d9c;
margin: 0 auto;
color: #ffffff;
font-size: 12px;
font-family: arial, verdana, times  new  roman;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 100px;
}

img.bildquiz {
   float: left;
   margin-left: 20px;
   margin-right: 50px;
   -moz-box-shadow: 5px 5px 3px #888;
  -webkit-box-shadow: 5px 5px 3px #888;
  box-shadow: 5px 5px 3px #888;
  -moz-transform:rotate(8deg);
  -webkit-transform:rotate(8deg);
  -o-transform:rotate(8deg);
  -ms-transform:rotate(8deg);
  transform:rotate(8deg);
}

img.eventkalender {
   float: left;
   margin-right: 15px;
   margin-bottom: 10px;
   margin-left: 20px;
}

img.newsartikel {
   border-radius: 10px;
   float: left;
   margin-right: 20px;
}

img.newsvorschau {
   width: 140px;
   height: 107px;
   border: 2px solid #8cde54;
   -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

img.newsvorschau:hover {
   opacity: 0.7;
   filter:alpha(opacity=70); /* For IE8 and earlier */
}

img.newsueberschrift {
   width: 90px;
   height: 90px;
   -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
}

img.vorschau {
   width: 225px;
   height: 110px;
   margin-right: 3px;
   margin-top: 3px;
}

@media only screen and (max-width: 801px) {

img.vorschau {
   min-width: 90%;
   height: auto;
}

}

table.kurz-info td {
   border-bottom: 1px dashed green;
   height: 20px
}

table.wusstestdudass {
   width: 678px;
   background-color: #41ff41;
   background-image: url(http://file1.npage.de/005800/03/bilder/wusstestdudass.jpg);
   background-repeat: no-repeat;
   margin: 0 auto;
}

table.wusstestdudass td {
   padding-top: 35px;
   padding-right: 20px;
}

table.newsbalken {
   width: 470px;
   height: 20px;
   background-color: #b1e958;
   margin-left: 20px;
   padding-left: 100px;
   margin-top: -10px;
}

p.eventkalender-name {
   color: #ffffff;
   font-weight: bold;
   font-size: 12px;
   text-align: left;
   margin-top: 0px;
   margin-bottom: 0px;
}

p.eventkalender-datum {
   color: #ffffff;
   font-style: italic;
   font-size: 12px;
   text-align: right;
   margin-top: -12px;
   margin-bottom: 0px;
}

.pagenews {
color: #006400;
font-size: 12px;
}

p.preis {
   color: #ffffff;
   font-size: 18px;
   text-align: right;
   margin-top: -29px;
   margin-bottom: 0px;
}

p.preise-text {
   color: #ffffff;
   font-size: 12px;
   text-align: left;
   padding-top: 2px;
}

.typ {
   color: #ff6600;
   font-size: 13px;
   font-style: italic;
   font-weight: bold;
}

.update {
   color: #cacaca;
   font-size: 10px;
   margin-top: -30px;
   margin-left: 480px;
}

ul.newsliste {
   list-style-type: square;
}

ul.newsliste li {
   margin-bottom: 5px;
}

div.holder-newsvorschau {
   width: 100%;
   background-color: transparent;
}

@media only screen and (max-width: 801px) {

div.holder-newsvorschau {
   display: none;
}

}

div.holder-mobile-newsvorschau {
   max-width: 698px;
   width: 100%
   height: 300px;
}

@media only screen and (min-width: 801px) {

div.holder-mobile-newsvorschau {
   display: none;
}

}
</style>
</head>

<body>




        <div id="zentrum">
          <div id="header">
          </div>
          <div id="navi-links">
          <div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
          </div>
              <div id="content">
        Hier  ist  dann  der  Inhalt!
        </div>
        </div>
        </body>

</body>
</html>

Beitrag von **Jasko** » Mi 18. Jun 2014, 21:04

Du brauchsr beide jquery Dateinen. Die von google oder halt die die mitgeliefert wird und diese die den kürzeren Code enthält.

MfG

Beitrag von **npage-user** » Do 19. Jun 2014, 09:05

Also, ich hab jetzt mal das gesamte HTML auf dem PC gespeichert, dass das Design nicht wieder kaputt geht. Dann hab ich exakt den Code von Moni kopiert - funktioniert nicht. Dann hab ich nochmal die ganzen Download-Dateien vom Menumaker hochgeladen und aktualisiert und alles so eingefügt, wie es der Code in der index.html vormacht - funktioniert nicht.

So langsam glaube ich, dass irgendwas die jQuery-Funktion blockiert. Vielleicht kann jemand bei Zeit selbst mal schauen? Das ist wie gesagt nur ein Testaccount, da kann ich gerne jemandem den Zugang erlauben. Ist bestimmt nur irgendwo ein kleiner Fehler im Code, den ich aber nicht entdecke (obwohl der Code von Moni ja auch nicht funktioniert hat, und ich kapier nicht, wie das sein kann, weil auf ihrer Testseite hat das funktioniert). Also, wenn jemand mal kurz Zeit hat, kann ich demjenigen die Zugangsdaten geben. Denn ich hab jetzt gefühlt tausend verschiedene Möglichkeiten ausprobiert, nix tut sich, selbst bei Monis Code nicht.

Beitrag von **Jasko** » Do 19. Jun 2014, 10:37

NUn, es würde bestimmt auch ausreichen den Link zur testseite da zu lassen, dann kann man im Quellcode nachschauen wie es aussieht.

MfG

Beitrag von **moni** » Do 19. Jun 2014, 13:49

Das verstehe auch auch nicht warum das bei dir nicht geklappt hat ..bei mir hast´s es zu erstem mal funktioniert ..

wie der Jasmin sagte , lasse den Link hier ,da können mehrere sich schlau machen um was geht ,meinten wegen kannst mir auch die Zugang Daten zu senden ob mir was dazu einfällt

Beitrag von **npage-user** » Do 19. Jun 2014, 18:27

Ok, dann schau mal nach (Monis Code ist jetzt übrigens wieder draußen, ist jetzt auf Standard zurückgesetzt).

http://weissmic.npage.de

Beitrag von **moni** » Do 19. Jun 2014, 19:20

Habe vermutet das es daran liegt das du die drei Sachen alle in einen div gepackt hast , Such Formular navi und auch Iframe.... bei meinen code läuft das ganz gut
http://blicke.npage.de/_navi-leiste.html

oder es kan auch an den lightbox liegen was du da hast ..ob da ein Fehler ist

...
lasse dein Code hier da kann den installieren ob bei mir auch schief läuft .. wollte schon machen aber es ist mir zu mühsam das ganze herauspicken .

Beitrag von **npage-user** » Fr 20. Jun 2014, 07:55

moni hat geschrieben:Habe vermutet das es daran liegt das du die drei Sachen alle in einen div gepackt hast , Such Formular navi und auch Iframe.... bei meinen code läuft das ganz gut
http://blicke.npage.de/_navi-leiste.html

oder es kan auch an den lightbox liegen was du da hast ..ob da ein Fehler ist ...
lasse dein Code hier da kann den installieren ob bei mir auch schief läuft .. wollte schon machen aber es ist mir zu mühsam das ganze herauspicken .

Ok, hier der gesamte Code.

HTML Header und Body

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

    <head>
      
<style type="text/css">
body {
   background-image:url(http://file2.npage.de/012600/02/bilder/testback.jpg); 
   background-repeat: repeat-x;
   background-attachment: fixed; 
   background-color: #35a3eb;
   padding: 0px;
}
                           </style>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="http://file2.npage.de/012600/02/html/version8.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://file1.npage.de/005800/03/html/lightbox.css" type="text/css" media="screen, projection" />
    <script type="text/javascript" src="http://file1.npage.de/005800/03/html/lightbox.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="http://file1.npage.de/005800/03/html/lightbox.js"></script>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
	<script type='text/javascript' src='http://file2.npage.de/012600/02/html/menu_jquery.js'></script>
      
    </head>
    <body>
      
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
      
<!-- Fügen Sie dieses Tag in den head-Abschnitt oder direkt vor dem schließenden body-Tag ein. -->
<script type="text/javascript" src="https://apis.google.com/js/platform.js">
  {lang: 'de'}
</script>
      
<div id="zentrum">
  <div id="header">
  </div>
  <div id="navi-links">
    
<form id="suche" name="cse" action="suchergebnisse.html">
<input type="hidden" name="cref" value="">
<input type="hidden" name="ie" value="utf-8">
<input type="hidden" name="hl" value="">
<input name="q" type="text" autocomplete="off">
</form>    
    
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
    
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fholidaypark.uptodate&width=250&height=325&colorscheme=light&show_faces=false&header=false&stream=true&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:395px;" allowTransparency="true"></iframe>    
    
  </div>
      <div id="content">

HTML Footer

Code: Alles auswählen

</div>
            </div>
            </body>

    </body>
    </html>

CSS: http://file2.npage.de/012600/02/html/version8.css
Menü-JS: http://file2.npage.de/012600/02/html/menu_jquery.js

HomepageHelfer.org

Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Re: Hilfe beim Design

Wer ist online?