Na dort hatte ich nicht gesucht. Was soll ich jetzt schreiben in meiner template.css Datei? Ich habe es versucht mit
@media screen and (max-width: 980px) {
div#nav {
display: none;
}
@media screen and (max-width: 800px) {
div#line {
display: none;
}
aber das bringt nichts. Kannst du mir da auch weiterhelfen?
Danke
Chantal
Wenn du mir noch sagen könntest in welchem css file das geschrieben ist, wäre das super. Ich kann es nämlich nicht finden. Danke
Hallo
Ich habe ein horizontales Dropdown Menu auf meiner Webseite, das in der Desktopansicht gut funktioniert.
http://www.proverzasca.ch/index.php/de/
Möchte man die Seite aber auf dem Mobile anschauen, erscheint das Menu nicht.
In der Simulation am Desktop (Ctrl/Shift/m) erscheint das Menu erst ab einer Breite von ca 900px.
Ist etwas mit dem Code nicht in Ordnung?
Wäre froh um eure Hilfe.
Chantal
html { height:100.1%; }
body { font-size: 16px; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #697075; }
a { outline:none; }
a:link { color: #000000; text-decoration: underline; }
a:visited { text-decoration: none; color: #000000; }
a:hover, a:active, a:focus { text-decoration: underline; color: #7aaba0; }
#container { width: 1000px; text-align: left;margin:20px auto; background-color: #fff; border: 2px solid #000000; }
#header { height:150px; background: url(../images/bg/oben.jpg); background-repeat: no-repeat; }
#navigation { width: 1000px; height:55px; background-color: #4c4c4c; }
#nav { float: left; width: 100%; font-size: 20px; }
#nav ul { margin: 0; padding: 0; }
#nav a { display: block; color: #fff; text-decoration: none;}
#nav ul li { position: relative; float: left; list-style: none; border-left: 1px solid #fff; }
#nav ul li ul{ display:none; }
#nav ul li:hover { background: #7aaba0; }
#nav ul li a { padding: 20px 50px 10px 10px; }
#nav ul ul { position: absolute; background: #4c4c4c; }
#nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #fff; }
#nav ul ul li a { padding: 10px 20px; font-size:16px;}
#nav ul li:hover > ul { top: 100%; left: 0; display: block; z-index:1;}
#nav ul ul li:last-child { border-bottom: none; }
#main { min-height: 450px; height: auto !important; background: #fff; }
#left { padding: 10px 20px 30px; float:left;width:700px;border-right: 1px solid black;}
#right { width: 200px; float:left; background: #fff; padding:10px; }
#footer { padding: 10px; background: #424242; position: relative; clear: both; text-align: center; color: #a8a8a8;border:1px solid #39668A; }
Weil ich mich mit Joomla besser auskenne.
Findet denn niemand den Fehler?
Danke
Ja dein Code läuft so wie ich es möchte. Ich denke etwas anderes in der CSS blokiert das Hover bei mir. DIe Homepage (Schrott) von oben http://proverzasca.ch/it/ wurde mit Wordpress gemacht und ich baue das ganze mit Joomla um.
Wenn du Zeit hast, hier wäre der ganze Code.
Index.php
<?php
defined('_JEXEC') or die;
/* The following line loads the MooTools JavaScript Library */
JHtml::_('behavior.framework', true);
/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="<?php echo $this->language; ?>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/print.css" type="text/css" media="Print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template1.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/shop.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<!-- start #container -->
<div id="container">
<!-- start #header -->
<div id="header">
<jdoc:include type="modules" name="email" style="xhtml" />
</div>
<!-- end #header -->
<!-- start #navigation -->
<div id="navigation">
<!-- start #nav -->
<div id="nav">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<!--end #nav -->
</div>
<!--end #navigation -->
<!-- start #main -->
<div id="main">
<!-- start #left -->
<div id="left">
<jdoc:include type="message" />
<jdoc:include type="modules" name="debug" />
<jdoc:include type="component" />
</div>
<!-- end #left -->
<!-- start #right -->
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<!-- end #right -->
</div>
<!-- end #main -->
<!-- start #footer -->
<div id="footer">
© <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>
template1.css
html { height:100.1%; }
body { font-size: 16px; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #697075; }
a { outline:none; }
a:link { color: #000000; text-decoration: underline; }
a:visited { text-decoration: none; color: #000000; }
a:hover, a:active, a:focus { text-decoration: underline; color: #7aaba0; }
#container { width: 1000px; text-align: left;margin:20px auto; background-color: #fff; border: 2px solid #000000; }
#header { height:150px; background: url(../images/bg/oben.jpg); background-repeat: no-repeat; }
#navigation { width: 1000px; height:55px; background-color: #4c4c4c; }
#nav { float: left; width: 100%; font-size: 20px; }
#nav ul { margin: 0; padding: 0; }
#nav a { display: block; color: #fff; text-decoration: none;}
#nav ul li { position: relative; float: left; list-style: none; }
#nav ul li ul{ display:none; }
#nav ul li:hover { background: #7aaba0; }
#nav ul li a { padding: 20px 50px 10px 30px; }
#nav ul ul { position: absolute; background: #4c4c4c; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); }
#nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #fff; }
#nav ul ul li a { padding: 10px 20px; font-size:16px;}
#nav ul li:hover > ul { top: 100%; left: 0; display: block; z-index:1;}
#nav ul ul li:last-child { border-bottom: none; }
#main { min-height: 450px; height: auto !important; height: 450px; padding: 20px 0 20px 0;
background: #fff; }
#left { padding: 10px 20px 30px; float:left;width:700px;border-right: 1px solid black;}
#right { width: 200px; float:left; background: #fff; padding:10px; }
#footer { padding: 10px; background: #424242; position: relative; clear: both; text-align: center; color: #a8a8a8;border-color:1px solid #39668A; }
Vielen Dank für deine Hilfe
Chantal
Hallo
Ich habe ein Horizontales Dropdown Menu erstellt und möchte, dass die Untermenüs beim Darüberfahren der Maus aufklappen.
Das klappt nicht ganz. Die 2. Ebene (Untermenu) klappt erst auf, wenn ich auf die 1. Menuebene klicke, also wenn es aktiv ist.
Meine Homepage ist leider noch nicht aufgeschaltet, es sollte aber so aussehen: http://proverzasca.ch/it/
Hier die CSS der Navigation:
#navigation { width: 1000px; height:55px; background-color: #4c4c4c; }
#nav { float: left; width: 100%; font-size: 20px; }
#nav ul { margin: 0; padding: 0; }
#nav a { display: block; color: #fff; text-decoration: none;}
#nav ul li { position: relative; float: left; list-style: none; }
#nav ul li ul{ display:none; }
#nav ul li:hover { background: #7aaba0; }
#nav ul li a { padding: 20px 50px 10px 30px; }
#nav ul ul { position: absolute; background: #4c4c4c; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); }
#nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #fff; }
#nav ul ul li a { padding: 10px 20px; font-size:16px;}
#nav ul li:hover > ul { top: 100%; left: 0; display: block; z-index:1;}
#nav ul ul li:hover > ul { top: 0; left: 200px; }
#nav ul li.submenu > a:after { position: relative; float: right; content: '';
margin-left: 10px; margin-top: 5px; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-top: 5px solid #fff; border-bottom: 5px solid transparent; }
#nav ul ul li.submenu a:after { margin-left: auto; margin-right: -10px;
border-left: 5px solid #fff; border-right: 5px solid transparent;
border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
#nav ul ul li:last-child { border-bottom: none; }
Was habe ich falsch gemacht.
Vielen Dank für eure Hilfe
Chantal
