Ergebnis 1 bis 11 von 11
  1. #1
    Moby ist offline Mitglied
    registriert
    19-12-2010
    Beiträge
    29

    Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Hallo liebe User!

    Ich habe ein Problem. Ich habe ein Html File und ein css file. Wenn ich das html file aufrufe ohne css, dann passt alles, mit dem CSS File sieht zwar alles so aus wie es soll aber die Funktion mit dem aufklappen und dem runtergehen funtinier nicht richtig, auch die Formatierung passt nicht, bin Anfänger und sehr verzweifelt. Bitte Bitte um Hilfe!

    Liebe Grüße
    Moby

    HTML-Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>TEST GmbH</title>
    <link href="site2c.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body>
    
    <div id="masthead">
    </div>
    <div id="top_nav">
    <div class="oe_wrapper">
    			<div id="oe_overlay" class="oe_overlay"></div>
    			<ul id="oe_menu" class="oe_menu">
    				<li><a href="">Willkommen</a>
    					<div>
    						<ul>
    							<li class="oe_heading">TEST GmbH</li>
    						</ul>
    			<dl class="v_show_hide">
      			<dt>Wer ist die TEST GmbH</dt>
      			<dd>These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping.  The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.  </dd>
      			<dt>Was macht die TEST GmbH</dt>
      			<dd>Start with a tube of premade sugar cookie dough.  Press a cookie-sized amount into mini-muffin pans and then bake as directed.  Dust the cookie cups with powdered sugar.  Microwave some jam (raspberry and mint) and spoon it into the cookie cups.  Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.</dd>
      			<dt>TEST GmbH und die Umwelt</dt>
      			<dd>These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.</dd>
    			</dl>
    				</div>	
    				</li>
    				<li><a href="">Produkte</a>
    					<div style="left:-111px;"><!-- -112px -->
    						<ul>
    							<li class="oe_heading">Komposter</li>
    							<li><a href="#">HAPPY</a></li>
    						</ul>
    						<ul>
    							<li class="oe_heading">Zubehör</li>
    							<li><a href="#">Gehäuse</a></li>
    							<li><a href="#">Kücheneinbausatz</a></li>
    						</ul>
    					</div>
    				</li>
    				<li><a href="">Hilfe</a>
    					<div style="left:-223px;"><!-- -112px -->
    						<ul>
    							<li class="oe_heading">Anleitung</li>
    							<li><a href="#">HAPPY Deutsch</a></li>
    							<li><a href="#">HAPPY Englisch</a></li>
    						</ul>
    						<ul>
    							<li class="oe_heading">Kompostieren</li>
    							<li><a href="#">Wie kompostiere ich Richtig</a></li>
    							<li><a href="#">Wie reinige ich den HAPPY</a></li>
    						</ul>
    					</div>
    				</li>
    				<li><a href="">Neuigkeiten</a>
    					<div style="left:-335px;">
    						<ul>
    							<li class="oe_heading">INFO 2011</li>
    							<li><a href="#">Presse</a></li>
    							<li><a href="#">Magazine</a></li>
    							<li><a href="#">Auszeichnungen</a></li>
    						</ul>
    						<ul>
    							<li class="oe_heading">Blog</li>
    							<li><a href="#">Aktuelles</a></li>
    						</ul>
    					</div>
    				</li>
    				<li><a href="">Kontakt</a>
    					<div style="left:-447px;">
    						<ul>
    							<li class="oe_heading">Die vielen Möglichkeiten</li>
    							<li><a href="#">Kontaktformular</a></li>
    							<li><a href="#">Adresse</a></li>
    							<li><a href="#">Mail</a></li>
    							<li><a href="#">Wie finde ich die TEST GmbH</a></li>
    						</ul>
    						<ul>
    							<li class="oe_heading">Social Media</li>
    							<li><a href="#">Facebook</a></li>
    							<li><a href="#">Twitter</a></li>
    						</ul>
    					</div>
    				</li>
    			</ul>	
    		</div>
            <div>
    		</div>
    
            <!-- The JavaScript -->
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {
    				var $oe_menu		= $('#oe_menu');
    				var $oe_menu_items	= $oe_menu.children('li');
    				var $oe_overlay		= $('#oe_overlay');
    
                    $oe_menu_items.bind('mouseenter',function(){
    					var $this = $(this);
    					$this.addClass('slided selected');
    					$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
    						$oe_menu_items.not('.slided').children('div').hide();
    						$this.removeClass('slided');
    					});
    				}).bind('mouseleave',function(){
    					var $this = $(this);
    					$this.removeClass('selected').children('div').css('z-index','1');
    				});
    
    				$oe_menu.bind('mouseenter',function(){
    					var $this = $(this);
    					$oe_overlay.stop(true,true).fadeTo(200, 0.6);
    					$this.addClass('hovered');
    				}).bind('mouseleave',function(){
    					var $this = $(this);
    					$this.removeClass('hovered');
    					$oe_overlay.stop(true,true).fadeTo(200, 0);
    					$oe_menu_items.children('div').hide();
    				})
                });
            </script>
            <script type="text/javascript">
       		$(document).ready(function(){
    
    	//  Get height of all dds before hide() occurs.  Store height in heightArray, indexed based on the dd's position.
    	heightArray = new Array();
    	$("dl.v_show_hide dd").each(function(i) {
    	  theHeight = $(this).height();
    	  heightArray[i] = theHeight;
    	});
    
    	// Hide all dds
    	$("dl.v_show_hide dd").hide();
    
    	//  When a dt is clicked, 
    	$("dl.v_show_hide dt").click(function () {
    	  //  Based on the dt's position in the dl, retrieve a height from heightArray, and re-assign that height to the sibling dd.
    	  $(this).next("dd").css({height: heightArray[$("dl.v_show_hide dt").index(this)]});
    	  //  Toggle the slideVisibility of the dd directly after the clicked dt
    	  $(this).next("dd").slideToggle("slow")
    		//  And hide any dds that are siblings of that "just shown" dd.
    		.siblings("dd").slideUp("slow");
    	});
    
     }); </script>
    <div id="container">
    	<div id="right_col">
    	</div>
    	<div id="page_content">
    	</div>
    </div>
    <div id="footer">
    </div>
    CSS File mit dem was nicht stimmt!

    Code:
    /* CSS layout */
    body {
    	background:#000;
    	font-family:"Trebuchet MS", Helvetica, sans-serif;
    	font-size:15px;
    	color: #fff;
    	text-transform:uppercase;
    	overflow-x:hidden;
    	
    	margin: 0;
        padding: 0;
        Background: #000 url('../images/FERTYNA.jpg') no-repeat fixed center;
       	-moz-background-size: cover;
       	background-size: cover;
       	color: #fff;
       	}
       	@media only all and (max-width: 1024px) and (max-height: 768px) { /* Important: 1024x768px has the same ratio as 1280x960px */
       	body {	
       	-moz-background-size: 1024px 768px;
       	background-size: 1024px 768px;
        		}
       			}
    }
    }
    #masthead {
    }
    
    #top_nav {
    }
    .oe_overlay{
    	background:#000;
    	opacity:0;
    	position:fixed;
    	top:0px;
    	left:0px;
    	width:100%;
    	height:100%;
    }
    ul.oe_menu{
    	list-style: none;
    	position: relative;
    	margin: 30px 0px 0px 40px;
    	width: 700px;
    	float: left;
    	clear: both;
    	table-layout: auto;
    }
    ul.oe_menu > li{
    	width:112px;
    	height:101px;
    	padding-bottom:2px;
    	float:left;
    	position:relative;
    }
    ul.oe_menu > li > a{
    	display:block;
    	background-color:#101010;
    	color:#aaa;
    	text-decoration:none;
    	font-weight:bold;
    	font-size:12px;
    	width:90px;
    	height:80px;
    	padding:10px;
    	margin:1px;
    	text-shadow:0px 0px 1px #000;
    	opacity:0.8;
    }
    ul.oe_menu > li > a:hover,
    ul.oe_menu > li.selected > a{
    	background:#fff;
    	color:#101010;
    	opacity:1.0;
    }
    .oe_wrapper ul.hovered > li > a{
    	background:#fff;
    	text-shadow:0px 0px 1px #FFF;
    }
    ul.oe_menu div{
    	position: absolute;
    	top: 103px;
    	left: 1px;
    	background: #fff;
    	width: 498px;
    	height: 180px;
    	padding: 30px;
    	display: none;
    	color: #000000;
    }
    ul.oe_menu div ul li a{
    	text-decoration:none;
    	color:#222;
    	padding:2px 2px 2px 4px;
    	margin:2px;
    	display:block;
    	font-size:12px;
    }
    ul.oe_menu div ul.oe_full{
    	width:100%;
    }
    ul.oe_menu div ul li a:hover{
    	background:#000;
    	color:#fff;
    }
    ul.oe_menu li ul{
    	list-style:none;
    	float:left;
    	width: 150px;
    	margin-right:10px;
    }
    li.oe_heading{
    	color:#aaa;
    	font-size:16px;
    	margin-bottom:10px;
    	padding-bottom:6px;
    	border-bottom:1px solid #ddd;
    }
    
    #container {
    	min-width: 600px;
    }
    
    #right_col {
    	width: 200px;
    	float: right;
    }
    
    #page_content {
    	margin-right: 100px;
    }
    
    #footer {
    	clear: both;
    }

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Was heißt denn "funktioniert nicht richtig"?

  3. #3
    Moby ist offline Mitglied
    registriert
    19-12-2010
    Beiträge
    29

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Hallo Klapsner,

    Wenn ich ohne css arbeite, dann erscheint unter Willkommen -> Wer ist TEST GmbH nach anklicken der versteckte Text, und was macht die TEST GmbH rückt nach unten. Wenn ich dann Was macht...., anklicke schliest sich das Wer ist und Was macht....öffnet sich,....

    Wenn ich css verlinke, ist alles natürlich viel schöner, wie in zb in Kontakt zu sehen ist. Aber mit dem CSS File sehe ich unter Willkommen zwar die drei wer ist..., was macht..., ...und die Umwelt aber in einer nicht schönen wie es sich gehört formatierung und auch wenn man nun eines anklickt gehen die anderen nicht runter, es funktioniert nichts so als wie ohne css unter willkommen!

    Bitte Bitte um Hilfe, Vielen, VIelen Dank!
    Moby
    Geändert von Moby (20-12-2010 um 05:05 Uhr)

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Irgendwie wird die Höhe nicht richtig gesetzt vermute ich mal. Mit folgendem Zusatz in deiner CSS-Datei funktionierts erstmal (unschön):
    Code:
    dl.v_show_hide dd{
    	border: 1px solid transparent;
    }
    Probier doch mal deinen CSS-Code nach und nach zu überprüfen.
    Hoffe ich konnte helfen

  5. #5
    Moby ist offline Mitglied
    registriert
    19-12-2010
    Beiträge
    29

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Hallo miniA4kuser das ist nicht die Lösung, leider. Wenn man beides ladet von den Files die ich da habe das ohne css läd, dann funktioniert es wie es soll!
    Wenn man das mit css FIle macht funktioniert es auch, aber nicht formatiert, sollte so aussehen wie unter kontakt, aber wenn man das letze Test und ie Umwelt drückt, erscheitn der text und wenn man nochmal drück ist er weg, was auch bei den anderen geht, aber die Überschriften genn nicht hinunter wie sie sollen, sondern bleiben und so überlagert sie der Text der sichtbar wird!

    Bitte Bitte Hilfe!

    Liebe Grüße
    Moby

  6. #6
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Auch für CSS Probleme hilft die Fehlerkonsole. Sie zeigt CSS Fehler als Warnungen an (zumindest im FF oder Opera)

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Dein Problem ist, dass du die Elemente schon am Anfang ausblendest und dann versuchst ihre Größe auszulesen. Da sie aber nicht dargestellt werden, brauchen sie auch keinen Platz und die Höhe ist 0px. Besser ist es, den Elementen eine Höhe von 0px zu geben und dann scrollHeight auszulesen.

  8. #8
    Moby ist offline Mitglied
    registriert
    19-12-2010
    Beiträge
    29

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Hallo an alle!

    Ich bräuchte unbedingt ein Beispiel bin neu in Weseite machen und brauch mehr. Könntest Du mir das bitte deutlich machen was du meinst? Ich verstehe es so nicht. Vielleich ein Codebeispiel, oder einsetzen damit ich es nach vollzien kann, möchte einfach ein sauber formatierte Web Seite. Laut Microsoft expression Web habe ich weder im Html File nach Html5 Prüfung noch im CSS nach CSS 2.1 Prüfung einen Fehler!

    Bitte, Bitte, Bitte, Danke, Danke, Danke
    Geht quasi um meine Zukunft....

    Liebe Grüße
    Moby
    Moby

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Hier ein kleines Beispiel, was ich meine:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <script type="text/javascript" src="./kkjs/modules/kkjs.load.js"></script>
    <script type="text/javascript">
    window.onload = function(){
    	var h = document.getElementById("hidden");
    	alert(	"offsetHeight: " + h.offsetHeight + "\n" +
    		"clientHeight: " + h.clientHeight + "\n" +
    		"scrollHeight: " + h.scrollHeight);
    	h = document.getElementById("zeroHeight");
    	alert(	"offsetHeight: " + h.offsetHeight + "\n" +
    		"clientHeight: " + h.clientHeight + "\n" +
    		"scrollHeight: " + h.scrollHeight);
    };
    </script>
    <style type="text/css">
    div {font-size: 300px;}
    #hidden {display: none;}
    #zeroHeight {height: 0px; overflow: hidden;}
    </style>
    </head>
    <body>
    <div id="hidden">jölsakdjfaölksdjflaskdjflasjdf</div>
    <div id="zeroHeight">jölsakdjfaölksdjflaskdjflasjdf</div>
    </body>
    </html>
    PS: Du hast definitiv einen CSS 2.1 Fehler: background-size gibt es erst in CSS 3.

  10. #10
    Moby ist offline Mitglied
    registriert
    19-12-2010
    Beiträge
    29

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    Hallo KKAPSNER, da öffnet sich ein Fenster mit verschieden Inhalten, was mach ich damit?
    Liebe grüße Moby!

  11. #11
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Habe eine Problem mit meinem CSS File mit Code Bitte Bitte Hilfe

    lesen und mit der Aussage in Verbindung bringen
    Da sie aber nicht dargestellt werden, brauchen sie auch keinen Platz und die Höhe ist 0px.

Ähnliche Themen

  1. Antworten: 8
    Letzter Beitrag: 21-12-2007, 14:59
  2. Bitte, Bitte Hilfe Webshop (Warenkorb)
    Von XELAK im Forum Serverseitige Programmierung
    Antworten: 5
    Letzter Beitrag: 25-02-2007, 13:07
  3. Antworten: 23
    Letzter Beitrag: 17-04-2005, 19:20
  4. Antworten: 22
    Letzter Beitrag: 16-04-2005, 18:55
  5. Antworten: 5
    Letzter Beitrag: 06-03-2002, 18:33

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •