Ankündigung

Einklappen
Keine Ankündigung bisher.

design der seite auf css umgestellt

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • design der seite auf css umgestellt

    Habe ein wahnsinniges problem mit positionierung von boxen

    Code:
    body {
        font-size:14px;  /* Größe 14px   */
        font-family:Arial,Verdana,sans-serif; /* Schriftart */
    }
    
    #seitenbereich {
        margin: 0 auto;   /* Zentrierung mitte */
        width: 1000px;    /* 1000 pixel breite */
        z-index: 20;
    }
    
    #content {
        background-color:black;
        width:  550px;
        height: 260px;
        color:white;
        border:1px gray solid; /* 1 pixel rand in grau */
        padding: 15px;         /* Innenabstand der Box */
        z-index: -20;
        border-radius: 20px;   /* Box hat runde ecken */
        margin-top: 20px;      /* abstand von oben */
        float: left;           /* ausrichtung nach links */
        opacity: 0.3;
    }
    
    #login {
        background-color:black;
        width:  350px;
        height: 400px;
        color:white;
        border:1px gray solid;
        padding: 15px;
        right: 0;
        z-index: -20;
        border-radius: 20px;
        margin-top: 20px;
        opacity: 0.3;
        float: right;
    }
    Im Seitenbereich habe ich meinen Header und das menü wenn ich jetzt aber das menü aufklappe komme ich in den"content" bereich welcher ja transparent sein soll, aber dadurch wird mein menü (das ausgeklappte) auch transparent. Hab wie ihr seht mit z-index experimentiert aber klappt auch nicht. Kann wer weiterhelfen? Ich hoffe ich habe alle erforderlichen Informationen gegeben!


  • #2
    Auf den ersten Blick würde ich sagen, dem Seitenbereich fehlt noch eine Hintergrundfarbe.

    Kommentar


    • #3
      ok hier mal die url... http://gwow.info/indexvideo1.php dann habt ihr warscheinlich alles und seht auch was ich meine...
      bitte bedenken ich bin absoluter leie und versuche schritt für schritt zu verstehen was ich da hinbastel
      wenn ihr grobe fehler findet bitte sagt sie mir

      Kommentar


      • #4
        Bevor du dich da dran machst, das CSS zu reparieren, muss dein HTML erst ein mal frei von Fehlern sein, siehe
        https://validator.w3.org/check?uri=h...org%2Fservices

        Ich würde dir empfehlen alles auf HTML5 umzustellen, dazu genügt, das du als erstes mal den Doctype angibst.
        Als Zeichenkodierung verwende UTF-8.

        Wenn du das gemacht hast und keine Fehler mehr erscheinen, kann man sich um das CSS-Problem kümmern.

        Kommentar


        • #5
          ok mach ich... weiß ich ja was ich heute zu tun habe.. habe zwar ne seite die es automatisch ändert.. aber ich will auch verstehen welche fehler ich wo gemacht habe und warum.. mein problem ist nur my broken english lol

          Kommentar


          • #6
            Wenn du etwas nicht verstehst frag halt hier nach.

            Kommentar


            • #7
              Der HTML-Code ist sowas von kaputt, daher meine Empfehlung: komplett neu machen mit den Hinweisen aus #4
              Die Deutsche Rechtschreibung ist Freeware! Du darfst sie kostenlos nutzen, allerdings ist sie nicht Open Source, d.h. Du darfst sie nicht verändern oder in veränderter Form veröffentlichen.

              Kommentar


              • #8
                was ich bisher einigermaßen verstanden habe ist das im doctype angegeben wird ob die seite html5 oder xhtml ist... wenn dieses so ist dann habe ich anscheinend mein document gemischt (kommt davon wenn man was nicht versteht es einbaut und danach versucht es so hinzubiegen das es klappt)

                Mein ziel ist es eigendlich nicht die gesammte struktur zu verstehen, sondern mir ein grundgerüßt aufzubauen (welches ich teilweise verstehe) um mich schwerpunktmäßig auf die inhalte zu konzentrieren. Soll heißen ich will es nur soweit verstehen das ich geringfügige änderungen selbständig machen kann .

                ich poste mal alle relevanten teile, und dann währe nett wenn mir jemand sagen würde "lösch den scheiß und fang nochmal bei 0 an" oder aber .. "naja geht eigendlich aber du hast dort und dort fehler gemacht"

                Mir raucht der kop lol


                Das ist mein grundgerüßt, soweit ich es begriffen habe!
                Code:
                <!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" xml:lang="de" lang="de">
                <head>
                  <meta name="generator" content="Gilden Webhosting f&#252;r World of Warcraft Gilden" />
                  <meta name="description" content="Gildenforum, WoW Addon Tutorials, Kostenloser Gildenauftritt, Horde, Allianz, World of Warcraft" />
                  <meta name="author" content="Thomas Schr&#246;ter" />
                  <meta name="publisher" content="Thomas Schr&#246;ter" />
                  <meta name="copyright" content="Thomas Schr&#246;ter" />
                  <meta http-equiv="Content-Language" content="de" />
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  <title>gwow.eu - Eure World of Warcraft Gilde im WWW</title>
                  <link rel="stylesheet" type="text/css" href="css/design1.css" />
                  <link rel="stylesheet" type="text/css" href="css/kontakt.css" />
                  <link rel="shortcut icon" href="gfx/ico.png" type="image/png" />
                  <style type="text/css">
                
                  </style>
                </head>
                <body>
                <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
                   <source src="output.webm" type="video/webm"> 
                   <source src="output.mp4" type="video/mp4"> 
                Video not supported </video>
                
                <div id="video_pattern"></div>
                  <p id="topright"><img src="gfx/alianz.gif" alt="Allianz" /></p>
                  <p id="topleft"><img src="gfx/horde.gif" alt="Horde" /></p>
                  <div id="seitenbereich">
                            <?php include ("header.php"); ?>
                
                
                    <div id="content">
                                    <strong><u>Hallo hier ist Hideaki für euch!</u></strong><br>
                                    Wie die meißten Nutzer erkennen können Spiele ich World of Warcraft!<br />
                                    Was hat es denn nun auf sich mit dieser Domain gwow.eu und gwow.info?<br />
                                    Ganz einfach, ich biete hier ausgesuchten Gilden die möglichkeit sich<br />
                                    Kostenlos im WWW zu präsentieren!<br />
                                    Warum denn nur ausgesuchten Gilden??<br />
                                    <ul>
                                      <li>Ganz einfach, es kostet mich Geld, welches ich nicht habe!</li>
                                      <li>Sehr viel Zeit, weil ich mir alles an PHP, HTML, css anlesen
                                      und verstehen muss!</li>
                                      <li>Ich die Gilden gerne kennen möchte!</li>
                                    </ul>Kann ich auch dazugehören??<br />
                                    Diese frage ist leicht zu beantworten, <u>JA wenn ich euch
                                    kennenlerne!</u><br />
                                    Kann ich meinen Webauftritt mitgestalten?<br />
                                    Auch dieses kann ich, <u>eingeschränkt</u>, mit Ja beantworten!
                    </div>
                
                    <div id="Login">einloggen<img src="gfx/horde.gif" alt="Horde" />
                    </div>
                
                  <div id="copyright">
                    <?php include ("footer.php"); ?>
                  </div>
                
                
                  </div>
                </body>
                </html>
                Der header den ich reinlade, leider noch als tabelle, muss ich auch noch komplett in die css umarbeiten
                Code:
                  <table>
                    <colgroup>
                      <col width="800px" />
                      <col width="200px" />
                    </colgroup>
                
                    <tr>
                      <td valign="top">
                        <a href="http://gwow.info/indexvideo1.php"><img src="gfx/logo.png" alt="GWoW.eu" /></a>
                
                        <div class="drop">
                          <ul class="drop_menu">
                            <li><a href="gwowgilde.php">GWoW-Gilde</a></li>
                
                            <li>
                              <a href='#'>Steckbriefe</a>
                
                              <ul>
                                <li><a href="quanturine.php"><img src="gfx/steckicon.png" align="top" />Quanturine</a></li>
                
                                <li><a href="hideaki.php"><img src="gfx/steckicon.png" align="top" />Hideaki</a></li>
                
                              </ul>
                            </li>
                
                            <li>
                              <a href='#'>Links</a>
                
                              <ul>
                                <li><a href="index.php">Sub Link 1</a></li>
                
                                <li><a href="index.php">Sub Link 2</a></li>
                
                                <li><a href="index.php">Sub Link 3</a></li>
                
                                <li><a href="index.php">Sub Link 4</a></li>
                              </ul>
                            </li>
                            <li>
                              <a href='#'>Gilden</a>
                
                              <ul>
                                <li><a href="index.php">Teutonik Knights</a></li>
                
                                <li><a href="index.php">eXistenz Reloaded</a></li>
                              </ul>
                            </li>
                            <li><a href="forum.php">Forum</a></li>
                
                            <li><a href="indexkontakt.php">Kontakt</a></li>
                          </ul>
                        </div>
                      </td>
                
                      <td>Logo</td>
                    </tr>
                  </table>
                </html>
                die css datei... diese habe ich in teilen verstanden (rest versuche ich noch zu verstehen) verständniss fehlt noch komplett beim menü (habe ich später vor, soll noch was geändert werden "von mir" das hintergrund video hab ich auch noch nicht verstanden aber es läuft und kann vorerst so bleiben
                Code:
                body {
                    font-size:14px;  /* Größe 14px   */
                    font-family:Arial,Verdana,sans-serif; /* Schriftart */
                    z-index: 50;
                }
                
                #seitenbereich {
                    margin: 0 auto;   /* Zentrierung mitte */
                    width: 1000px;    /* 1000 pixel breite */
                    z-index: 20;
                }
                
                #content {
                    background-color:black;
                    width:  550px;
                    height: 260px;
                    color:white;
                    border:1px gray solid; /* 1 pixel rand in grau */
                    padding: 15px;         /* Innenabstand der Box */
                    z-index: -20;
                    border-radius: 20px;   /* Box hat runde ecken */
                    margin-top: 20px;      /* abstand von oben */
                    float: left;           /* ausrichtung nach links */
                    opacity: 0.5;
                    box-shadow: 10px 10px 10px black;
                }
                
                #Login {
                    background-color:black;
                    width:  350px;
                    height: 400px;
                    color:white;
                    border:1px gray solid;
                    padding: 15px;
                    right: 0;
                    z-index: -20;
                    border-radius: 20px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    opacity: 0.5;
                    float: right;
                    box-shadow: 10px 10px 10px black;
                }
                
                
                #copyright {
                    font-family:Arial,Verdana,sans-serif; /* Schriftart */
                    color:#ffffff;   /* Farbe white */
                    font-size:14px;  /* Größe 14px   */
                    margin: 0 auto;  /* Zentrierung mitte */
                }
                h1 {
                    color:#FFFFFF;   /* Farbe weiß */
                    font-size:28pt;  /* Größe 28pt   */
                    font-family:Arial,Verdana,sans-serif; /* Schriftart */
                    background-color:#000000;  /* Farbe Schwarz */
                }
                
                h3 {
                    color:#FF9F00;   /* Farbe orange */
                    font-size:15pt;  /* Größe 15pt   */
                    font-family:Arial,Verdana,sans-serif; /* Schriftart */
                }
                
                .drop_menu {
                background:#005555;
                padding:0;
                margin:0;
                list-style-type:none;
                height:40px;
                background-image:url(../gfx/button1.png);
                }
                .drop_menu li { float:left; }
                .drop_menu li a {
                padding:12px 15px;
                display:block;
                color:#00ff00;
                text-decoration:none;
                font:12px arial, verdana, sans-serif;
                border-right:1px solid #000000;
                }
                
                /* Submenu */
                .drop_menu ul {
                position:absolute;
                left:-9999px;
                top:-9999px;
                list-style-type:none;
                }
                .drop_menu li:hover { position:relative; background-image:url(../gfx/button2.png); }
                .drop_menu li:hover ul {
                left:0px;
                top:38px;
                background:#75809a;
                padding:0px;
                }
                .drop_menu li:hover ul li a {
                padding:5px;
                display:block;
                width:180px;
                text-indent:5px;
                background-color:#444444;
                }
                .drop_menu li:hover ul li a:hover { background-color:#000000;  
                }
                
                #video_background {
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    min-width: 100%;
                    min-height: 100%;
                    width: auto;
                    height: auto;
                    z-index: -1000;
                    overflow: hidden;
                }
                #video_pattern {
                    background-image: url(../gfx/klippen-textur.jpg);
                    position: fixed;
                    opacity: 0.3;
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                }
                
                #topright { 
                    position: fixed; 
                    top: 0; 
                    right: 15; 
                }
                #topleft { 
                    position: fixed; 
                    top: 0; 
                    left: 15; 
                }
                so schaut mal drüber und sagt mir ob ich es lieber aufgeben soll... würde ich sehr ungerne

                Kommentar


                • #9
                  Zitat von uha Beitrag anzeigen
                  Der HTML-Code ist sowas von kaputt, daher meine Empfehlung: komplett neu machen mit den Hinweisen aus #4
                  oh .. alles klar ist schonmal ein ansatzpunkt.. also back too the roots

                  Kommentar


                  • #10
                    Ein HTML5-Grundgerüst könnte so aussehen
                    HTML-Code:
                    <!DOCTYPE html>
                    <html lang="de">
                    
                    <head>
                        <meta charset="UTF-8">
                        <title></title>
                        <meta name="viewport" content="width=device-width, initial-scale=1.0>
                        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                        <style>
                    
                        </style>
                    </head>
                    
                    <body>
                        <header>
                            <nav>
                            </nav>
                        </header>
                        <main>
                    
                        </main>
                        <aside>
                    
                        </aside>
                        <footer>
                    
                        </footer>
                    </body>
                    </html>
                    Die Stilangaben sind nur zum erstellen und testen der Seite drin, diese sollte hinterher in eine CSS-Datei ausgelagert werden, die im Dokumentenkopf eingebunden wird.

                    Kommentar


                    • #11
                      Zitat von protestix Beitrag anzeigen
                      Wenn du etwas nicht verstehst frag halt hier nach.
                      diese Angebot nehme ich gerne an und danke schon mal wegen dem Grundgerüst...werde jetzt aber erstmal für nen paar stunden nichts an der Seite machen.. nachdem ich mir das mit dem doctype durchgelesen habe ist mir der Schädel am qualmen... ich hatte es mir leichter vorgestellt als es ist.. aber ich will ja auch viel davon verstehen sodas ich hinterher nicht mehr all zuviel fragen muss! mein Problem ist blos meistens das die wichtigsten Sachen in englisch sind bzw die Leute mit so vielen Fachbegriffen rum schmeißen das ich einen text 15 mal lesen muss um ihn ansatzweise zu verstehen

                      Kommentar


                      • #12
                        Vergiss das mit dem doctype, das ist überwiegend alter Kram, du muss dir nur den html5 doctype merken, die anderen Doctypes braucht man heute nicht mehr, sind halt alter Ballast.

                        Kommentar


                        • #13
                          Habe es jetzt soweit fehlerlos

                          Code:
                          <!DOCTYPE html>
                          <html lang="de" xmlns="http://www.w3.org/1999/xhtml">
                          <head>
                            <meta name="generator" content="Gilden Webhosting f&#252;r World of Warcraft Gilden" />
                            <meta name="description" content="Gildenforum, WoW Addon Tutorials, Kostenloser Gildenauftritt, Horde, Allianz, World of Warcraft" />
                            <meta name="author" content="Thomas Schroeter" />
                            <meta name="publisher" content="Thomas Schroeter" />
                            <meta name="copyright" content="Thomas Schroeter" />
                            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
                            <title>gwow.eu - Eure World of Warcraft Gilde im WWW</title>
                            <link rel="stylesheet" type="text/css" href="css/design1.css" />
                            <link rel="shortcut icon" href="gfx/ico.png" type="image/png" />
                          <style type="text/css">
                          
                          </style>
                          </head>
                          <body>
                          <video id="video_background" preload="auto" autoplay loop="loop" muted="muted"> 
                             <source src="output.webm" type="video/webm"> 
                             <source src="output.mp4" type="video/mp4">Video not supported 
                          </video>
                          <div id="video_pattern"></div>
                          
                              <div id="seitenbereich">
                          
                                  <?php include ("header.php"); ?>
                                  <div id="content">test</div>
                              </div>
                          </body>
                          </html>
                          aber jetzt ist die box "content" so wie sie sein soll nur wenn ich das pulldownmenü öffne ist es im hintergrund

                          falls was grobes fehlt bitte sagen hab das jetzt unter http://gwow.eu/indexvideo2.php verlinkt

                          Kommentar


                          • #14
                            ich möchte nur den hintergrund der box transparent haben dazugesagt

                            Kommentar


                            • #15
                              Habs schon ich muste im submenu noch ein z-index vergeben.. so heute belästige ich keinen mehr... alle groben sachen sind bis hier geklärt

                              Kommentar

                              Lädt...
                              X