Ergebnis 1 bis 8 von 8

Thema: bitte um hilfe habe problem mit positionierung

  1. #1
    Youngster
    Registriert seit
    18.11.2014
    Beiträge
    12
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard bitte um hilfe habe problem mit positionierung

    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:

    Code:
    <!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>



    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.*/
    }






    bitte ich verzweifle.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von rudi83 (27.11.2014 um 19:16 Uhr)

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: bitte um hilfe habe problem mit positionierung

    Im HTML-Code hast Du einen Syntax-Fehler:

    HTML-Code:
    </ul>
          </li>
    
          </div>
    Richtig wäre diese Reihenfolge:

    HTML-Code:
    </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.

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    18.11.2014
    Beiträge
    12
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: bitte um hilfe habe problem mit positionierung

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

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


    und beim menüpunkt apokalypse sieht man dann das problem

  4. #4
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: bitte um hilfe habe problem mit positionierung

    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.

  5. Folgende User finden die Antwort von resteverwerter gut:


  6. #5
    HTML Newbie Avatar von Helpstar24
    Registriert seit
    18.11.2014
    Beiträge
    9
    Danke
    0
    Bekam 2 mal "Danke" in 2 Postings

    Standard AW: bitte um hilfe habe problem mit positionierung

    Füge das in deine CSS Datei ein.

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

    Erstellen einer eigenen Homepage - Anleitung: www. helpstar24. de

  7. #6
    Youngster
    Themenstarter

    Registriert seit
    18.11.2014
    Beiträge
    12
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: bitte um hilfe habe problem mit positionierung

    Zitat Zitat von resteverwerter Beitrag anzeigen
    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
    Geändert von rudi83 (29.11.2014 um 18:24 Uhr)

  8. #7
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: bitte um hilfe habe problem mit positionierung

    > 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%2F...e%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/T...-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

  9. Folgende User finden die Antwort von resteverwerter gut:


  10. #8
    Youngster
    Themenstarter

    Registriert seit
    18.11.2014
    Beiträge
    12
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: bitte um hilfe habe problem mit positionierung

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

Ähnliche Themen

  1. Ich habe ein Homepage-Problem! Hilfe!!
    Von Unregistriert (14 Jahre) im Forum Promotion - SEO - Suchmaschine (Google & Co) – Mitarbeiter & Linkpartnersuche
    Antworten: 1
    Letzter Beitrag: 27.12.2008, 02:32
  2. habe großes problem bitte um hilfe
    Von Mathias199 im Forum Webhoster - Provider - (free) Webspace - Server - Domain
    Antworten: 1
    Letzter Beitrag: 13.10.2007, 06:25
  3. Habe megA Stress! Bitte um Hilfe
    Von kackeamstart im Forum Computer - Internet Forum
    Antworten: 83
    Letzter Beitrag: 18.10.2005, 19:10
  4. habe endung .htm sollte .html sein frontp.2000 bitte hilfe
    Von araghona im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.03.2005, 09:52
  5. Habe ein Problem!! bitte um hilfe
    Von Ilmer im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 25.02.2005, 03:13

Stichworte

Berechtigungen

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