Div Verschiebt sich..

Defenetiv · 24.01.2013

Hallo werte Leserin und Leser,

Ich habe auf meiner Seite :

Einen Klitze kleinen fehler aber komme nicht drauf wie man diesen beheben kann.

Um euch die Werbung des Freehosters zu erspranen hier der Html Code :

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>My-test</title>     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />          <link rel="stylesheet" type="text/css" href="style.css" />          <!--[if lte IE 6]>         <script src="http://code.jquery.com/jquery-latest.js"></script>         <script type="text/javascript" src="script.js"></script>     <![endif]-->  </head> <body>  <div id="wrapper"> <!-- Wrapper Start -->   <div id="header"> <!-- Header Start -->  </div> <!-- Header Ende -->   <div id="menue">     <ul id="menu">         <li><a href="#" title="Home">Home</a></li>         <li id="angebote"><a href="#" title="Angebote">Angebote</a>             <ul>                 <li><a href="#" title="Angebot 1">Angebot 1</a></li>                 <li><a href="#" title="Angebot 2">Angebot 2</a></li>                 <li><a href="#" title="Angebot 3">Angebot 3</a></li>                 <li><a href="#" title="Angebot 4">Angebot 4</a></li>                 <li><a href="#" title="Angebot 5">Angebot 5</a></li>             </ul>         </li>         <li id="support"><a href="#" title="Support Pakete">Support Pakete</a>             <ul>                 <li><a href="#" title="Paket 1">Paket 1</a></li>                 <li><a href="#" title="Paket 2">Paket 2</a></li>                 <li><a href="#" title="Paket 3">Paket 3</a></li>                 <li><a href="#" title="Paket 4">Paket 4</a></li>                 <li><a href="#" title="Paket 5">Paket 5</a></li>             </ul>         </li>         <li><a href="#" title="">Kontakt</a></li>         <li><a href="#" title="">Impressum</a></li>     </ul>  </div>    <div id="boxCenter"> <!-- BoxCenter Start -->  </div> <!-- BoxCenter Ende -->    <div id="content"> <!-- Content Start -->  </div> <!-- Content Ende -->   </div> <!-- Wrapper Ende -->  <div id="footer"> <!-- Footer Start --> &copy; David, Burmeister 2013 All rights reserved.  <a id="link" href="#" title="#" target="_self">AGB</a> <a id="link" href="#" title="#" target="_self">Impressum</a> <a id="link" href="#" title="#" target="_self">Kontakt</a>  </div> <!-- Footer Ende -->  </body> </html>

Um evtl auch noch die anderen die Arbeit zu ersparen Poste ich auchnoch die Css-Codes.

Hier der Css-Code

body {font-family:arial; font-size:12px; behavior:url("csshover.htc"); }
div {cursor:default;}
a {text-decoration:none; color:#000000;}

ul {margin:0px; padding:0px; list-style-type:none;}
#menu li {float:left; width:90px; text-align:center;}
#menu li ul{display:none; padding-top:3px;}
#menu li:hover ul {display:block;}
#menu li ul li {background-color:#2F2D49; border-bottom:1px solid #FFFFFF;}
#menu li ul li a{color:#FFFFFF;}
#menu li ul li:hover {background-color:#232323;}

body {
background-color:grey;}

#wrapper {
background-color:darkgrey;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
margin-top:40px;}

#header {
background-color:dimgrey;
width:1000px;
height:200px;}

#menue {
background-color:lightslategrey;
width:1000px;
height:40px;}

#boxCenter {
background-color:sienna;
width:400px;
height:700px;
float:right;}

#content {
position: relative;
background-color:snow;
width:600px;
height:700px;
float:left;}

#footer {
background-color:dimgrey;
width:900px;
height:40px;
margin-left:auto;
margin-right:auto;
text-align:center;}

Hier der javascript-Code

$(document).ready(function(){

$('li').mouseover(function() {
var $id = $(this).attr('id');
$('#'+$id+' ul').css('display','block');
});
$('li').mouseout(function() {
var $id = $(this).attr('id');
$('#'+$id+' ul').css('display','none');
});

});

Ich komme einfach nicht hinter wie ich diesen fehler beheben kann und hoffe jemand hat einen Klaren durchblick, denn ich sehe den Wald voller Bäumen schon nichtmehr.

Mfg und Danke an alle Defi

leveler · 24.01.2013

AW: Div Verschiebt sich..

und welches div jetzt genau? wrapper header...? ich kann hier grad gar keinen Fehler erkennen, evt kannst Du das genauer beschreiben.

schleppel · 24.01.2013

AW: Div Verschiebt sich..

#content {
position: relative;

Vielleicht absolut?

Defenetiv · 25.01.2013

AW: Div Verschiebt sich..

Also es geht um den Div Content.

Soabld ich im Menü auf den Reiter Angebote fahre Öffnet sich das Untermenü und in dem Augenblick Verschiebt sich der Div Content soweit nach unten wie das Untermenü hoch ist.

leveler · 25.01.2013

AW: Div Verschiebt sich..

ahso, ja stimmt, ist mir erstmal gar nicht aufgefallen, da das hier auf dem Display gar nicht mehr gezeigt wurde. Hmm, das könnte man evt über den z-index der Elemente lösen.
Guck doch mal mit dem Feuerkäfer auf Stu Nichols Seite unter des css-menu-rubrik und schau, wie er sowas löst.

Defenetiv · 25.01.2013

AW: Div Verschiebt sich..

Also das eine Problem habe ich lösen können, aber nach meinem Umbau des Menüs ist ein weiterer fehler aufgetreten.

Also wie man auf der seite :

sehen kannst nun ist aber das problem mit einem weiterem Div.

Ich habe das Menü geändert es fährt nun ein und aus.

Soll ich mal alle Scripte hier einstellen ?

ben3plus · 25.01.2013

AW: Div Verschiebt sich..

Vielleicht könntest Du ja auch mal schreiben, wie es eigentlich ausehen und funktionieren soll.

Soll das (ganze) Menü ein- und ausfahren? Was soll "fahren"? - Also: Wie soll das Menü im fertigen Zustand aussehen?

Was ist mit Deinem <div id="boxCenter"> (braun). Die division ist ja eher nicht zentriert.

Vielleicht kannst Du ja auch einen Screenshot Deines Layouts zeigen.

Defenetiv · 25.01.2013

AW: Div Verschiebt sich..

@ ben

Also das Menü soll einfahren können so wie es nun ist und auch Fuktioniert.
Wenn man auf Menü Klick fährt es ein und aus.
Dann wenn man aber über die einzelnen reiter geht wo unterpunkte sind hatte sich vorher mein Div Content immer nach unten Verschoben diesen fehler habe mich gefunden es lag am FLOAT: Left; Nun ist aber aufgrund des umbaus vom Menü ein Neuer fehler aufgetaucht der Div Boxcenter dessen FLOAT:Right; ist Setzt sich nun auf oder besser gesagt vor das Menü und ich weiß einfach nicht woran das liegt.

Hier kann man den fehler gut erkennen

Ich möchte Quasi das Menü ein / ausfahen lassen + Unterpunkte.
Wenn ich es nur einfahren lassen habe ich keine Fehler.
Wenn ich es nur mit Untergruppen lasse auch nicht.

Aber eine Kombination mit dem ein/ausfahren + Untergruppen gelingt mir so bei der umsetzung einfach nicht...

Ich hoffe ich konnte mich einigermaßen in meinem fehler erklären.

Danke an allen die mir bis jetzt bei der lösung geholfen haben

*Spitze

ben3plus · 27.01.2013

AW: Div Verschiebt sich..

Hallo Defenetiv,

Dein Menü bringst Du mittels des z-indexes in den Vordergrund.
Weise dem Menü (<div id="sideBar">) z-index: 100; zu.

s.a.: http://www.otto.de/

Wieso hat Dein <div id="boxCenter"> float: right; zugewiesen?
Soll er da rechts platziert sein?

Dein <div id="content"> und <div id="boxCenter"> sollten wohl
eher oben bündig sein, oder?

patrick_l · 28.01.2013

AW: Div Verschiebt sich..

Erst einem vorweg von mir der Tipp "Quellcode einrücken". Dann ist und bleibt alles übersichtlicher und man findet sich schneller zurecht. Auch findet man Fehler so besser. Die Developer Toolbar, der Firebug sowie das Validieren helfen dir beim finden und korrigieren von Fehlern.

Nun zu deinem Quelltext. Du hast einige (semantische) Fehler. Der Div "sidebar" fehlt der schließende Tag. Bei der Navigation das selbe Problem. Außerdem ist sie falsch "verschachtelt".

Für die Navi mm Footer würde ich ebenfalls ein UL nehmen. Kurz zu den Links bzw. der vergeben ID. Eine ID darf nur einmal vergeben werden. Den Copyright Hinweis in ein <p>-tag setzen.

Zum Fehler. Setze den Content-Bereich (Content und Sidebar) in eine weitere Div. Außerdem das Floaten beenden. Dafür ein br-tag mit der Klasse "clear" setzen und im Stylesheet über .clear {clear:both;} das Floaten beenden.

Edit:

Ich hatte jetzt etwas zeit und habe mir mal die Mühe gemacht und alles aufgeräumt bzw. dir ein valides Grundgerüst inkl. CSS erstellt.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="keywords, here" />
  
    <title>your title here!</title>
  
    <!-- <link  rel="stylesheet" type="text/css" href="assets/css/style.css" /> -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <style type="text/css">
      /* <![CDATA[ */
        * {padding:0; margin:0; border:none; outline:none; list-style:none; font-size:100%;}
        .clear {clear:both;}

        html, body {min-width:100%; min-height:100%;}
        body {font:12px Arial, Helvetica, sans-serif; background-color:#ededed;}
        .wrapper {width:960px; border: 1px solid #000; margin:20px auto;}

        #header {width:958px; height:200px; border: 1px solid #000;}

        #nav {width:958px; height:38px; border: 1px solid #000;}
        /* ----| delete or edit display:none! |------ */
        #nav ul { display: none;} 
                                
        #main {width:960px;}

        /* ----| delete or edit sidebar height! |------ */
        #content {width:698px; height:452px; border: 1px solid #000; float:left;}  

        /* ----| delete or edit content height! |------ */
        #sidebar {width:258px; height:452px;border: 1px solid #000; float:right;}  

        #footer {width:958px; height:40px; border: 1px solid #000;}
        #footer p {display:block; float:left;}

        /* ----| delete or edit display:none! |------ */
        #footer ul { display: none;}  
      /* ]]> */
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div id="header">
        <!--header content here -->
      </div>
      <div id="nav">
        <ul>
          <li><a href="#">Startseite</a></li>
          <li><a href="#">Forum</a></li>
          <li><a href="#">Fight us</a></li>
          <li><a href="#">Server</a>
            <ul>
              <li><a href="Clan"></a>
                <ul>
                  <li><a href="Member"></a></li>
                  <li><a href="Team"></a></li>
                </ul>
              </li>
              <li><a href="Support"></a>
                <ul>
                  <li><a href="Kontakt"></a></li>
                  <li><a href="About"></a></li>
                </ul>
              </li>
            </ul>
          </li>   
        </ul>
      </div>
      <div id="main">
        <div id="content">
          <!-- main content here -->
        </div>
        <div id="sidebar">
          <!-- subcontent here -->
        </div>
        <br class="clear" />
      </div>
      <div id="footer">
        <p>&copy; 2013 David Burmeister. All rights reserved.</p>
        <ul>
          <li><a href="#">Kontakt</a></li>
          <li><a href="#">AGB</a></li>
          <li><a href="#">Impressum</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Ich rate dir dazu, dich nochmal näher mit HTML und CSS auseinander zusetzen. Deshalb hier ein paar nützliche Links, die dir dabei helfen werden.

- Mozilla Developer Network | Lerne HTML, CSS & JS
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- Little Boxes | Webseiten gestalten - HTML & CSS (Peter Müller)

Liebe Grüße, Patrick

ben3plus · 28.01.2013

AW: Div Verschiebt sich..

patrick_l schrieb:
Erst einem vorweg von mir der Tipp "Quellcode einrücken". Dann ist und bleibt alles übersichtlicher und man findet sich schneller zurecht. Auch findet man Fehler so besser.

Ich habe mir das auch angesehen und der Übersicht wegen alles eingerückt.
Es sah dann nicht schlecht aus.

patrick_l schrieb:
Die Developer Toolbar, der Firebug sowie das Validieren helfen dir beim finden und korrigieren von Fehlern.

Das ist auf jedenfall hilfreich und eigentlich ein Muss, wenn man Websites baut.

patrick_l schrieb:
Nun zu deinem Quelltext. Du hast einige (semantische) Fehler. Der Div "sidebar" fehlt der schließende Tag. Bei der Navigation das selbe Problem. Außerdem ist sie falsch "verschachtelt".

Wie oben geschrieben, habe ich es für mich "aufgeräumt" (eingerückt).
Ich konnte nicht feststellen, dass schließende Tags fehlten. Bei mir hatte
es soweit gepasst.

patrick_l schrieb:
Zum Fehler. Setze den Content-Bereich (Content und Sidebar) in eine weitere Div.

Muss er doch nicht. Er hat seinen Header, darunter die Sidebar (Menü), dann
darunter links <div id="content"> und rechts <div id="boxCenter">.
Warum sollte er sidebar, content und boxCenter in eine weitere Div einfügen?
Es ist doch so gut machbar.

patrick_l schrieb:
Ich rate dir dazu, dich nochmal näher mit HTML und CSS auseinander zusetzen.

Dem kann ich zustimmen. Die in der html-Datei und den verlinkten
CSS-Dateien benutzten Bezeichnungen lassen darauf schließen,
dass hier ein runtergeladenes Template nach eigenen Vorstellungen
umgebaut wird. Da spricht ja auch gar nichts dagegen.

Aber etwas HTML- und CSS-Kenntnisse braucht man dann doch.
Und die würden sogar schon reichen, die Seite selber aufzubauen.

@defenetiv
Am besten setzt Du erstmal die vorgeschlagenen Lösungen um.
Wenn danach immernoch was fehlt oder anders ist als gewollt,
einfach nochmal mit Fehlerbeschreibung melden.

patrick_l · 28.01.2013

AW: Div Verschiebt sich..

ben3plus schrieb:
Ich habe mir das auch angesehen und der Übersicht wegen alles eingerückt. Es sah dann nicht schlecht aus.

Zeile 77. Zwei ul-tags sowie ein nicht benötigte Div. Denke das diese vielleicht für den Content-Bereich gedacht war.

So würde ich es in den meisten Fällen auch machen.

ben3plus schrieb:
Wie oben geschrieben, habe ich es für mich "aufgeräumt" (eingerückt).
Ich konnte nicht feststellen, dass schließende Tags fehlten. Bei mir hatte
es soweit gepasst.

Ich habe jetzt auch nochmal nachgeschaut. Habe mich etwas verlesen. Aber wie gesagt sind einige nicht benötigte tags vorhanden. Auch sollten alle Formatierung mit im CSS gemacht werden, und nicht wie "sideBarTab"

ben3plus schrieb:
Muss er doch nicht. Er hat seinen Header, darunter die Sidebar (Menü), dann
darunter links <div id="content"> und rechts <div id="boxCenter">. Warum sollte er sidebar, content und boxCenter in eine weitere Div einfügen?

Die Bezeichnung Sidebar (side = seite) ist ja schon mal falsch.

Das ist ja noch nebensächlich. Ich rede ja auch nicht davon die Navigation + Content und Subcontent zusammen zufassen.

HTML:

<div id="nav">
        <!-- navigation -->
    </div>
    <div id="main">
        <div id="content">
            <!-- content here -->
        </div>
        <div id="sidebar">
            <!-- subcontent here -->
        </div>
    </div>

Die Seite in mehre Abschnitte unterteilen. Einmal den Kopfbereich (Header, Navigation), den Hauptbereich (Content, Subcontent) und den Fußbereich (Footer, Info). So kann man auch wunderbar später einfach Bereiche auslagern und mit PHP inkludieren.

Edit:
Die Navigation sollte meiner Meinung nach auch anders umgesetzt werden. Ziel und Zweck der Navigation seinen Besucher ohne große Umwege zum Inhalt zu bringen. Hier muss erst einmal ein Menü "geladen" werden, bevor überhaupt eine Kategorie zu sehen ist. Hier dann zusätzliche Dropdown-Einträge.

Liebe Grüße, Patrick

ben3plus · 28.01.2013

AW: Div Verschiebt sich..

@patrick_l
Ich stimme Dir in allen Punkten zu. Ich würde die Seite auch anders strukturieren,
bezeichnen, ... , aufbauen.
Aber der TE hat, so wie es aussieht, wenig Erfahrung mit HTML und CSS.
Er muss sich nunmal durch sein Template kämpfen. Deshalb ist klar, dass
er keine Bezeichnungen (sidebar -> z.B. navbar o.s.) ändert und überflüssigen
Code löscht. Er müsste ja dann auch in allen verlinkten Dateien Änderungen
vornehmen.

Defenetiv · 28.01.2013

AW: Div Verschiebt sich..

Hallo Liebe Leserin und Leser,

derzeit konnte ich einige fortschritte machen an meinem desgin aber ein fehler hat sich bei der behebung der anderen fehler eingeschlichen.

Das Menü fährt nun ein und aus
Der Div Content Verschiebt nun nichtmehr und das Dropdown funktioniert nun auch. soweit..

Das oder der Neuste fehler liegt nun darin das sich im Rechten feld das Dropdown Menü öffnet aber irgendwie hinter den Roten div Springt oder sich setzt und nun komme ich einfach nichtmehr weiter.

Vielleicht kann mir jemand helfen danke

ben3plus · 28.01.2013

AW: Div Verschiebt sich..

Defenetiv schrieb:
Das oder der Neuste fehler liegt nun darin das sich im Rechten feld das Dropdown Menü öffnet aber irgendwie hinter den Roten div Springt oder sich setzt und nun komme ich einfach nichtmehr weiter.

Diesen Fehler hattest Du in der letzten Variante auch schon.

Probiere es jetzt mal so, wie Patrick geschrieben hat:

HTML:

<div id="wrapper" class="shadow">
    <div id="header"></div>
    <div id="sideBar"></div>
<!-- Hier neue Div anlegen -->    
    <div id="maincontent">
<!-- Die bereits vorhandenen Divs hier rein -->    
        <div id="boxCenter"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

Die <div id="sideBar"> setzt Du auf z-index: 100; .

cebito · 28.01.2013

AW: Div Verschiebt sich..

Wenn du das beim nächsten Mal gleich im richtigen Bereich postest, landets auch bei viel mehr Leuten die sich mit so was beschäftigen/auskennen schneller auf dem Schirm. Hab das mal jetzt gemacht, aber mir das Thema jetzt noch auseinanderzudröseln fehlt mir heut die Muße

patrick_l · 28.01.2013

AW: Div Verschiebt sich..

Defenetiv schrieb:
derzeit konnte ich einige fortschritte machen an meinem desgin aber ein fehler hat sich bei der behebung der anderen fehler eingeschlichen.

Nur mal so frage, hast du bereits ein Layout ausgearbeitet, und muss bzw. soll dieses jetzt "nur" noch umgesetzt werden? Wie bereits erwähnt, setze dich nochmal näher mit HTML und CSS auseinander. Links habe ich ja bereits gepostet.

Liebe Grüße, Patrick

ben3plus · 28.01.2013

AW: Div Verschiebt sich..

Ich denke, Defenetiv zäumt das Pferd von hinten auf.
Er hat kein Layout und kann überlegen, wie er es strukturiert und umsetzt.
Er hat ein Template und probiert, wie er es ändern kann.

Defenetiv · 28.01.2013

AW: Div Verschiebt sich..

Ja ihr habt recht ich bin noch nocht lange am Coden aber auch mit wie ihr es hier schreibt mit meinen ganzen Code Fehlern habe ich es hinbekommen

Danke für die Hilfe jetzt kann ich mich um die hier beschriebenden Code verkleinerrungen kümmern dazu muss ich mich aber nochmal durch meinen code wühlen.

ben3plus · 28.01.2013

AW: Div Verschiebt sich..

Du hast es anders gemacht als wir Dir vorgeschlagen haben.
Aber wenn es doch klappt...
Dein HTML könntest Du insgesamt etwas schlanker aufbauen.
Einige Elemente wären nicht nötig gewesen.
Aber für den Anfang war das jetzt doch gar nicht so schlecht.

Viel Spaß beim nächsten Projekt. Da wird es dann ja auch besser laufen...