bitte um hilfe habe problem mit positionierung

rudi83

hallo

ich habe ein menü erstellt das aufklappt.jedoch wird das menü das aufklappt ist zu weit weg und ich schaffe es nicht weiter nach links zu schieben..
und nebenbei bei dem menü was aufklappt ist ein weisser strich der mich stört den bekomm ich auch nicht weg......bitte helft mir hier der code:
also beim letzten menüpunkt also apokalypse dort öffnet sich das zweite untermenü

html code:

HTML

<!DOCTYPE html>
<html>


<head>




    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">


    <link href="styles/apokalypse.css" type="text/css" rel="stylesheet">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">


         <title>Apokalypse</title>
        <!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->




</head>


<body>


      <div id="background">
      <div id="seitenformat">
       <div id="header" align="center"><img id="headerbild" src="images/header.jpg" alt="Startseite"  title="Apokalypse" /></div>




      <div id="nav">
      <ul>
      <li><a href="index.html"><span></span>Startseite</a></li>
      <li><a href="kontakt.html"><span></span>Kontakt</a></li>
      <li><a href="information.html"><span></span>Informationen</li>
       <li><a href="apokalypse.html"><span></span>Apokalypse</a>
       <ul>




      <li class="zombie"><a href="zombie.html">Zombieapokalypse</a></li>
      <li class="strom"><a href="strom.html">Stromkatastrophe</a></li>
      <li class="fallout"><a href="fallout.html">Atomkatastrophe</a></li>
      <li class="alien"><a href="alien.html">Angriffskatastrophe</a></li>
      </ul>
       </ul>
      </li>


      </div>


   </div>
  </div>


</body>
</html>

Alles anzeigen

css code:

Code

#headerbild{
       width: 1190px;
       height: 105px;
       border-radius:6px;
       margin-top: 5px;






}
#header{
    background-image: url(image/bg_list.gif) ;
    border-radius:5px;
    height: 110px;


}




#background{
    background-image: url(../images/zombie.jpg);
    border-radius:8px;




}


#seitenformat{
    width: 1200px;
    margin: 0 auto;


}


#nav{
    width: 170px;




}


#nav ul{
    list-style: none;
}




#nav li{


    width: 150px;
    text-align: left;
    font-family: fantasy;
    font-size: small;
    font-style: italic;
    background-image: url(image/bg_menu.gif);
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-bottom: 8px;
    margin-left: -40px;
    border-left: 25px orange solid;
    border-radius:8px;


}


   /*Span-Elemente*/
#nav span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#nav a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
  /* Links Submenu */
#nav ul ul li a {
color:#476EA8; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#nav ul ul li a:hover {
color:#153363; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background: #F0F4FA; /*Hintergrundfarbe */
}
 #nav ul ul li {
width:170px; /* Breite */
background:#DCE1E8; /*Hintergrundfarbe*/
border:1px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
}
/*Verhalten der Unterlisten bei Hover */
#nav ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#nav ul ul {
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:1px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
 /* Links Hoverzustand */
#nav a:hover {
    background: RGBA(255,255,255,0.05); /* Hintergrundfarbe */
    color:#fff; /* Schrifrfarbe */
    font-style: italic;  /* Kursiv */
}
#nav a {
    color:#f9f9f9; /* Schriftfarbe */
    display:block; /* Block-Anzeige, jedes Element neue Zeile */
    text-decoration:none; /*keine Unterstreichung*/
    transition:1s; /* Fliessende Bewegung */
    -moz-transition:1s;
    -webkit-transition:1s;
    -o-transition:1s;
    font-family:Playfair Display; /* Schriftart */
    font-weight: bold; /* Fett */
    font-size:16px; /* Schriftgrösse */
    padding-left:10px; /* Abstand links */
}
  #nav ul li {
    position:relative; /*relative Positionierung der
                        Listenpunkte, damit Unterpunkte
                        absolut positioniert werden können.*/
}

Alles anzeigen

bitte ich verzweifle.

threadi

Im HTML-Code hast Du einen Syntax-Fehler:

HTML

</ul>
      </li>


      </div>

Richtig wäre diese Reihenfolge:

HTML

</li>
</ul>
</div>

Ob das jetzt auch die Darstellungssache behebt kann ich nicht sagen. Anhand deines Codes kann ich auf den ersten Blick nichts offensichtliches erkennen. Ein Link zur Seite wäre sicherlich hilfreich.

rudi83

Danke für die antwort aber das hilft mir leider nicht

hier ein link zu der seite:
http://rudi83.lima-city.de/

und beim menüpunkt apokalypse sieht man dann das problem

resteverwerter

das schnellste wäre:

Code

#nav ul ul {margin-left:-20px;}

im CSS-Code

Besser wäre es, Du würdest die ganze #nav ul normalisieren:

Code

#nav ul, #nav li {padding:0; margin:0;}

und dann alle Abstände selber festlegen.

Helpstar24

Füge das in deine CSS Datei ein.

HTML

.zombie  {margin-left:-19px}
.strom   {margin-left:-19px}
.fallout {margin-left:-19px}
.alien   {margin-left:-19px}

rudi83

Zitat von resteverwerter
das schnellste wäre:
Code
#nav ul ul {margin-left:-20px;}
im CSS-Code

Besser wäre es, Du würdest die ganze #nav ul normalisieren:
Code
#nav ul, #nav li {padding:0; margin:0;}
und dann alle Abstände selber festlegen.

danke für deine antwort die erste möglichkeit hat gleich super gefunkt danke jetzt passt das submenü gut hinein....

doch eins noch:

ich will den inhalt also das wo die zeilen über apokalypse steht weiter unten haben und die überschrift soll oben bleiben.#
ich hab das probiert über css mit h1 text-align:center usw doch es geht nicht.

und dann hab ich noch probiert oben beim header ein border-image für alle seiten zu erstellen mit
border-left-image: url (...dieUrl)

doch er tut es nicht.

dann hab ich einfach das bild so gross wie den ganzen header gemacht aber das ist ja auch nicht die lösung.

achso ja beim submenü habt ihr bemerkt das über dem ersten menüpunkt so ein komischer strich ist???weiß
jemand warum und wieso und wie ich den wegbekomme???

aber danke für eure tolle hilfe

resteverwerter

> achso ja beim submenü habt ihr bemerkt das über dem ersten menüpunkt so ein komischer strich ist???
> weiß jemand warum und wieso und wie ich den wegbekomme???

Du hast in Zeile 119 ein

Code

#nav ul ul {
    border-top: 1px solid #e9e9e9;
    ...
}

>ich will den inhalt also das wo die zeilen über apokalypse steht weiter unten haben und die überschrift soll oben bleiben.#
>ich hab das probiert über css mit h1 text-align:center usw doch es geht nicht.

http://wiki.selfhtml.org/wiki/Text-align zentriert den Text, bzw. richtet mit :justify Blocksatz ein.
Du bräuchtest hier margin.

>und dann hab ich noch probiert oben beim header ein border-image für alle seiten zu erstellen mit
>border-left-image: url (...dieUrl)
>dann hab ich einfach das bild so gross wie den ganzen header gemacht aber das ist ja auch nicht die lösung.

Doch das wäre es:
CSS:

Code

header {
  background: url(bla.jpg);
  text-color:transparent;
}

HTML:

Code

<header></header>

Pack das Bild in den Hintergrund und ersetz
<div id="header" align="center"> durch <header>

Noch ein paar Tipps:

1. Jag deine Seite durch einen Validator:
https://validator.nu/?doc=http%3A%2…de%2Findex.html

Dann siehst Du wo es evtl. noch hakt.

2. Du verwendest HTML5. Gut!
Dann könntest du auch die neuen Elemente verwenden. Sie sind m.E. übersichtlicher:
http://wiki.selfhtml.org/wiki/HTML/Tuto…5-Grundstruktur

3. Responsivität
Schau mal Deine Seite bei 800px, bzw. 1000px Breite an, vielleicht kannst Du die Grundstruktur dieses Tutorials für Deinen Inhalt und deine CSS-Einstellungen verwenden?

4. Bilder wie <div id="background">
könntest Du direkt als Hintergrundbild in

Code

html {
    background: #4a4a4a url(bla.jpg) right no-repeat;


    height: auto;

legen

rudi83

danke für deine hilfe ich werde mich gleich mal daran setzen

Tags