Beiträge von phzu

phzu

Hallo!

Ich versuche gerade eine gute Navigationsleiste (Dropdown) mit JQuery zu erstellen, habe allerdings Probleme.

Das ganze ist in HTML5 programmiert.

HTML

<head>
        <link rel="stylesheet" type="text/css" href="css/layout.css">
        <link rel="stylesheet" type="text/css" href="css/color.css">
        <title>JQuery</title>
        <script type="text/javascript" src="jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('header#page_header nav ul li').hover(
                    function() { $('ul',this).slidedown(100); },
                    function() { $('ul',this).slideup(100); 
                });
            });
        </script>
    </head>
    <body>
        <header id="page_header">
            <img src="images/header.png" id="header_img">
            <nav>
                <ul>
                    <li><a href="#">Parent 01</a></li>
                        <ul>
                            <li><a href="#">01 Item 01</a></li>
                            <li><a href="#">01 Item 02</a></li>
                            <li><a href="#">01 Item 03</a></li>
                            <li><a href="#">01 Item 04</a></li>
                        </ul> 
                    <li><a href="#">Parent 02</a></li>
                    <ul>
                            <li><a href="#">02 Item 01</a></li>
                            <li><a href="#">02 Item 02</a></li>
                        </ul> 
                    <li><a href="#">Parent 03</a></li>
                    <ul>
                            <li><a href="#">03 Item 01</a></li>
                            <li><a href="#">03 Item 02</a></li>
                            <li><a href="#">03 Item 03</a></li>
                        </ul> 
                    <li><a href="#">Parent 04</a></li>
                    <ul>
                            <li><a href="#">04 Item 01</a></li>
                        </ul> 
                </ul>
            </nav>
        </header>
        <section id="posts">
            <article class="post">
                <header>
                      ..... und so weiter

Alles anzeigen

Das Problem was ich habe ist...
1. dass die Navigationsleiste nicht runterklappt und
2. dass wenn man die Submenüs standardmäßig anzeigen lässt, sind nicht die richtigen Submenüs dargestellt.

Code

body{
    width: 960px;
    margin: auto;
}


header#page_header{
    width: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}


header#page_header nav { 
    display:block;  
    position:relative;
}


header#page_header nav ul { 
    padding:0; 
    margin:0; 
}


header#page_header nav li { 
    float:left; 
    list-style-type:none; 
}


header#page_header nav ul:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
}


header#page_header nav li a { 
    display:block; 
    padding:10px 20px;
}


header#page_header nav ul ul { 
    display:none; 
    position:absolute; 
    top: 39px;
    left: -1px;
}


header#page_header nav ul ul li { 
    float:none;
}


header#page_header nav ul ul a { 
    padding:10px 20px; 
    border-left:none; 
    border-right:none; 
    font-size:14px; 
    background-color: #CCCCCC;
    width: 150px;
    text-align: left;
}

Alles anzeigen

Hat jemand eine Idee warum das Ding nicht funktioniert? Bzw. hat jemand schon eine fertige Navibar?

mfg

phzu

Hallo!

Meinst du die Rundungen bei den Fenstern (Login, Statistik,...)?

Falls du diese meinst, liegt es an den Hintergrundgrafiken die eckige Ecken haben. Dann musst du diese als .png bearbeiten und die Ecken transparent abrunden. PNG darum, da andere Grafikformate keine Transparenz abspeichern können.

Weiters nehme ich an, dass du mit Firefox arbeitest oder? Diese Annahme kommt daher, dass der Internet-Explorer nicht mit Rundungen umgehen kann bzw. nicht ohne Workarounds. (IE9 soll soweit ichs gehört haben die Funktion border-radius unterstützen)

Hier ist eine Anleitung für IE, weiß allerdings nicht wies mit dem Workaround aussieht: http://tinyurl.com/625rswn

mfg phzu

phzu

Achso meinst du das Ja dann wär das sicher ne Überlegung, allerdings ist es schon möglich dass die detailierten Daten dann mehrere Spalten haben.

Mal sehn.
Auf jeden Fall vielen Dank für die Hilfe!

phzu

Die Homepage wird in HTML5 und CSS3 programmiert. (mit sämtlichen Workarounds...:x) Bin gerade dabei mir es ein wenig anzueignen, das auch der Grund warum ich solche Sachen vermehrt mit JQuery probiere. Ist einfach schön zu programmieren ohne Flash herumzugurken! Ich weiß schon IE - wie ich ihn hasse!

Zurück zu deiner Anregung:

Die Tabellen stehen später natürlich nicht mehr so da wie jetzt, die werden noch in die entsprechenden <section>'s gegeben. Dann dürften die Tabellen wieder mehr Sinn ergeben.

Oder was meinst du mit Eingangsbereich? Navigation wird schon noch vor den Tabellen positioniert.

mfg

phzu

Danke für die schnellen Antworten!

ID zu verwenden war natürlich Blödsinn.

SinnlosS
Der Code ist gut, kleiner Fehler ist aber drinnen.

td.detail >>> tr.detail

Dann funktionierts.

Vielen Dank!

mfg Phzu

phzu

Hallo!

Ich arbeite gerade an einer kleine Homepage wo ich meine Entwicklungen vorstellen kann. Dazu sind für den Inhalt Tabellen vorgesehen. Bei einem Klick auf die erste Zeile der Tabelle sollen alle anderen Zeilen DIESER Tabelle angezeigt werden. Beim nächsten Klick wieder ausgeblendet.

Das Ganze ist kein Problem solange ich nur eine Tabelle habe. Sobald aber zwei Tabellen vorhanden sind, bei denen die ersten Zeilen mit den selben CSS-ID's markiert sind, werden natürlich alle Informationen zu allen Produkten eingeblendet.

Hier ist mein bisheriger Code:
HTML:

HTML

<html>
 <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="jquery.js"></script> 
  <script>
   $(document).ready(function(){ 
    $("tr#name").click(function(){
     $("tr#detail").toggle(); 
    }); 
   });
  </script>
 </head>
 <body>
  <table border="0">
   <tr id="name"><td><a href="#">Produktname</a></td></tr>
   <tr id="detail"><td>Details 1</td></tr>
   <tr id="detail"><td>Details 2</td></tr>
  </table>
  <table border="0">
   <tr id="name"><td><a href="#">Produktname</a></td></tr>
   <tr id="detail"><td>Details 1</td></tr>
   <tr id="detail"><td>Details 2</td></tr>
  </table>
 </body>
</html>

Alles anzeigen

CSS:

Code

body{}
tr#name{
 background-color: #CCCCCC;
}
tr#detail{
 background-color: #DDDDDD;
}
a{
 display: block;
}

Nun ja, das ist natürlich nicht der fertige Code, aber zum Testen sollte das genügen.

Wäre sehr glücklich wenn jemand einen Tipp hätte!

mfg phzu

phzu

Hallo!

Ich hoffe ich kann meine Frage beüglich der Administration von Websites hier reinstellen...

Zu meiner Frage: Wie werden private Websites verwaltet?
Also ich meine es gibt ja die Möglichkeit von Joomla u.ä. aber gerade Selbstständige Programmierer welche kleine Homepages programmieren müssen doch praktisch ihr eigenes System haben solche Seiten zu verwalten?
Verwenden die selbst gemachte Backends oder wie wird es von denen gemacht?

Mit verwalten meine ich neue Beiträge und anfällige Aktualisierungen im Inhalt und so weiter....

Was mich zu der Frage bewegt ist, dass ich mittlerweile recht gut in HTML, CSS und PHP und nun meine eigene Homepage zu gestalten, aber auch für kleinere Vereine aus der Umgebung (für ein Taschengeld [Blockierte Grafik: http://www.html-forum.de/images/smilies/smile.gif])

Die bisher einzige Homepage die ich gemacht habe wird mit Joomla verwaltet, allerdings bin ich nicht so der Fan davon.

mfg phzu

phzu

o mann...

vielen vielen Dank!

Wär eigentlich ganz einfach gewesen..

phzu

Hat niemand eine Idee an was es liegen könnte?

Wäre wirklich froh wenn ich das Problem in den Griff bekommen würde...

mfg

phzu

Wenn das die Lösung wäre, wäre ich auch drauf gekommen...

Ich weiß nicht woher dieser Abstand kommt...

phzu

Nein das ist auch nicht die Lösung... Dadurch wird wieder nur der Rand nach oben entfernt, den ich allerdings haben möchte.

phzu

Hmm... Dadurch wird nur der gewollte Abstand nach oben gestrichen.

Die Seite ist noch nicht online, bin gerade dran sie lokal aufzubauen...

mfg

phzu

Naja Rand ist vielleicht falsch ausgedrückt, besser gesagt der Abstand des Elements "Startseite" zum roten Rand (Wrapper-Div).

phzu

Hallo!

Ich bin relativ unerfahren in der Formatierung von Homepages mit CSS. Nun habe ich eine horizontale Menüleiste eingebunden, wo ein Rand auftritt, den ich mir nicht erklären kann...

Der Rand befindet sich rechts des grünen Auswahlfeldes, innerhalb des provisorischen Rahmens. Ich weiß nicht wie ich diesen weg bekomme.

Der HTML-Code sieht noch ganz einfach so aus:

HTML

<body>
        <div id="container">
            <div id="header_outer">
                <div id="header"><img src="images/logo.png"></img></div> 
            </div>
            <div id="wrapper">
                <ul id="navigation-3">
                    <li><a href="homepage.php" class=" active">Startseite</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                </ul>
                <div id="login">Zum Login</div>
            </div>
            <div id="content_outer">
                <div id="content">                
                    Bedeutete es in ... usw. 
                </div>
            </div>
        </div>   
    </body>

Alles anzeigen

Das CSS File dazu sieht folgendermaßen aus:

Code

body,html{
    margin: 0;
    padding: 0;
    background-image: url('../images/background.gif');
    background-color: gray;
    background-repeat: repeat;
    font: normal 16px Helvetica, Arial, sans-serif;
}


div#header_outer {
    /*background-color: none;*/
    height: 160px;
    width: 860px;
    margin: auto;
}


div#header {
    padding: 10px;
    text-align: center;
}


div#container {
    position: absolute;
    margin-left: -430px;
    margin-top: -300px;
    top: 50%;
    left: 50%;
    width: 860px;
    height: 600px;
    background-color: white;
}


#wrapper {
    width: 800px;
    margin: auto auto 20px 30px;
    float: left;
    border: 1px solid red;
    padding: 0;
}
#navigation-3 li {
    background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
    border-left: 1px solid #707F90;
    border-right: 1px solid #3C444D;
    float: left;
    list-style-type: none;
}


#navigation-3 li a {
    color: #DFE1E2;
    float: left;
    padding: 10px 20px;
    text-decoration: none;
}


#navigation-3 li a:hover {
    background: #5d91da url(nav-bg-2.jpg) bottom left repeat-x;
    color: #fff;
    text-decoration: underline;
}


#navigation-3 li a.active {
    background: #6aec7c url(nav-bg-3.jpg) bottom left repeat-x;
    color: #fff;
    text-decoration: underline;
}


#navigation-3 li.start {
    border-left: 0;
}


#navigation-3 li.ende {
    border-right: 0;
}


div#content_outer {
    clear: both;
    width: 800px;
    margin: 20px auto;
    border: 1px solid black;
    height: 300px;
    overflow: scroll;
}


div#content {
    margin: 15px;
}


#login{
    padding: 10px;
    float: right;
    background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
    color: white;
    border-left: 1px solid #707F90;
    border-right: 1px solid #3C444D;
}

Alles anzeigen

Ich denke mal, dass die Antwort nicht allzu schwer sein dürfte. Für mich als Leihen ist dieser Abstand allerdings unerklärlich.

mfg Philip

Beiträge von phzu

Horizontale Navigationsleiste mit JQuery

Schwierigkeiten bei der Rundung im Innenrahmen des Forums...

JQuery - Toggle Funtkion

JQuery - Toggle Funtkion

JQuery - Toggle Funtkion

JQuery - Toggle Funtkion

Administration von Homepages

Rand durch <ul> unerklärlich...

Rand durch <ul> unerklärlich...

Rand durch <ul> unerklärlich...

Rand durch <ul> unerklärlich...

Rand durch <ul> unerklärlich...

Rand durch <ul> unerklärlich...

Rand durch <ul> unerklärlich...