design der seite auf css umgestellt

Hideaki

Dabei seit: 27.11.2016

Beiträge: 30
#16

17.12.2016, 05:03

So da ein neuer tag schon lange begonnen hat und ich immer noch nicht meinen nächsten fehler gefunden habe (von der syntax ist alles richtig nur die positionierung stimmt nicht)
bitte schaut noch einmal über die seite http://gwow.info/indexvideo2.php ich begreif so ungefär was ich da gemacht habe.. die erste box ist absolut die 2te box soll sich aber an der ausrichten
also unter ihr sein und zur seite gerutscht.. das aber so das es auf verschiedenen auflösungen dennoch passt!
Habe schon alle möglichen variationen versucht, entweder bin ich zu deppert oder zu müde
Kommentar
Hideaki

Dabei seit: 27.11.2016

Beiträge: 30
#17

17.12.2016, 06:12

Man bin ich gut.. ich sollte erst 6 stunden versuchen und lesen.. dann komm ich immer auf die antwort von allein... ich muss nicht opacity: 0.5; benutzen sondern muss das ganze mit HSLA angaben machen.. also echt wenn ich mit dem projekt fertig bin kann ich webdesigner werden lol
Kommentar

protestix

Dabei seit: 30.06.2016
Beiträge: 7719

#18

17.12.2016, 08:23

Ich habe mir mal die Mühe gemacht, dir deine Seite HTML5 konform zu gestalten.
Bitte verwende alle diese Elemente und lies dich ein bei https://wiki.selfhtml.org/wiki/HTML. Dort ist alles schön erklärt.
Dein Header braucht keine weiteren Metatags, diese werden von den Suchmaschinen ignoriert und sind somit überflüssiger Ballast.

Wenn du dieses HTML so verwendest, kannst du dich daran machen und dein CSS anzupassen.
Versuche mal nicht am HTML etwas zu verändern um dein Design zu erstellen, das ist nicht nötig. Design ist nur CSS.
Tabellen sind keine vorhanden, daher habe ich die Element heraus genommen.
Du solltest auch ein wenig an deiner Schriftsprache arbeiten. 2 Fragezeichen hintereinander gibt es nicht.

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset=UTF-8">
    <title>gwow.eu - Eure World of Warcraft Gilde im WWW</title>
    <meta name="description" content="Gildenforum, WoW Addon Tutorials, Kostenloser Gildenauftritt, Horde, Allianz, World of Warcraft">
    <link rel="stylesheet" type="text/css" href="css/design1.css">
    <link rel="shortcut icon" type="image/png" href="gfx/ico.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</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>
    <header>
        <a href="http://gwow.info/indexvideo2.php"><img src="gfx/logo.png" alt="GWoW.eu"></a>
        <nav>
            <ul>   
                <li><a href="gwowgilde.php">GWoW-Gilde</a></li>
                <li>
                    <a href='#'>Steckbriefe</a>
                    <ul>
                        <li><a href="quanturine.php"><img class="icon" src="gfx/steckicon.png" alt="Steckbrief-icon">Quanturine</a></li>
                        <li><a href="hideaki.php"><img class="icon" src="gfx/steckicon.png" alt="Steckbrief-icon">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="formular.php">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="content_text">
            <h1>Hallo hier ist Hideaki für euch.</h1>
            <p>        
                Wie die meisten 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>
            <p>
                Kann ich auch dazu gehören?<br>
                Diese Frage ist leicht zu beantworten: <u>Ja, wenn ich euch
                kennen gelernt habe.<br>
                Kann ich meinen Webauftritt mitgestalten?<br>
                Auch dieses kann ich, <u>eingeschränkt</u>, mit Ja beantworten.
            </p>
        </section>
        <section id="Login_text">
            <h1>Hallo, das ist ein Test!</h1>
        </section>
    </main>
</body>
</html>

Dein Design ist damit leicht umsetzbar, versuche es mal.

Kommentar

Hideaki

Dabei seit: 27.11.2016
Beiträge: 30

#19

17.12.2016, 14:42

ich mach gerade ein päuschen habe 2 1/2 stunden gepennt.. hatte auch nochmal bei 0 angefangen... bin auch auf nen guten wege... muss aber jetzt ersteinmal bevor ich an meinem weitermache deines anschauen... 100000 DANK für die mühe!!!!

ich habe alles valediert, bis ich das video eingefügt habe.. hab ich noch nicht überprüft aber da wird er sicher so ein paar errors rauswerfen... die bekomm ich aber hin.... wenn ich mich nicht irre müsste das so auch ganz einfach sein die ganze seite handy konform zu machen... macht immer mehr spaß je mehr mann von alleine schnallt

hier mal mein quellcode (wie gesagt der video part ist nicht überprüft da sind fehler drin.. muss aber jetzt erstmal runterkommen und spiele das spiel für das ich die webseite mache)

Code:

body {
    font-family:Arial,Verdana,sans-serif;    /* Schriftart */
    font-size:14px;                         /* Größe 14px   */
    background-color: black;
}

input {
    border-radius: 20px;                       /* Box hat runde ecken */
}

.boxgroesse {
    color: white;                            /* schriftfarbe */

}

#seitenbereich {
    z-index: 20000;
    width: 1000px;                          /* 1000 pixel breite */
    margin: auto;
    background-color: black;
    background-color: hsla(0, 0%, 0%, 0.5);
    position: absolute;
    left: 0; 
    right: 0;
}

#content {
    z-index: 18000;
    width:  550px;                          /* 550 pixel breite */
    top: 15px; 
    background-color: black;
    background-color: hsla(0, 0%, 0%, 0.5);
    position: relative;
    border-radius: 20px;                                       /* Box hat runde ecken */
    border: 1px hsla(120, 100%, 50%, 0.5) solid;            /* Ramen um die Box */
    box-shadow: 10px 10px 10px black;                        /* schatten der Box */    
    padding: 15px;                                             /* Innenabstand der Box */
}

#news {
    z-index: 17000;
    width:  330px;                                          /* 550 pixel breite */
    height: 280px;                                          /* 260 pixel Höhe */
    background-color: black;
    background-color: hsla(0, 0%, 0%, 0.5);
    position: relative;
    top: -3px;
    left: 510px;
    border-radius: 20px;                                       /* Box hat runde ecken */
    border: 1px hsla(120, 100%, 50%, 0.5) solid;            /* Ramen um die Box */
    box-shadow: 10px 10px 10px black;                        /* schatten der Box */    
    padding: 15px;                                             /* Innenabstand der Box */
}

#videobox {
    z-index: 16000;
    width:  428px;                                          /* 550 pixel breite */
    height: 242px;                                          /* 260 pixel Höhe */
    background-color: black;
    background-color: hsla(0, 0%, 0%, 0.5);
    position: relative;
    top: -278px;
    left: 30px;
    border-radius: 20px;                                       /* Box hat runde ecken */
    border: 1px hsla(120, 100%, 50%, 0.5) solid;            /* Ramen um die Box */
    box-shadow: 10px 10px 10px black;                        /* schatten der Box */    
    padding: 15px;                                             /* Innenabstand der Box */
}
.drop_menu {
background:#005555;
padding:0;
margin:0;
list-style-type:none;
height:38px;
background-image:url(../gfx/button1.png);
border-radius: 20px;   /* Box hat runde ecken */
}
.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;
}

/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
z-index: 19000;
}
.drop_menu li:hover { 
position:relative; 
background-image:url(../gfx/button2.png);
border-radius: 20px;   /* Box hat runde ecken */
}
.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;
}

der html teil

Code:

<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content="Gilden Webhosting fü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.ico" 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" class="boxgroesse">
    <?php include ("header.php"); ?>

    <div id="content" class="boxgroesse">
            <strong>Hallo hier ist Hideaki für euch!</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="news" class="boxgroesse">
    hier kommt der NEWS Inhalt
    </div>
    <div id="videobox" class="boxgroesse">
    <video  width="430px" src="Legion.mp4" autoplay controls>
        Ihr Browser kann dieses Video nicht wiedergeben.<br/>
        Dieser Film zeigt eine Demonstration des video-Elements. 
        Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
    </video>
    </div>




</div> 


</body>
</html>

der header (den muss ich noch in css machen bekomm ich aber inzwischen locker hin)

Code:

  <table>
    <tr>
      <td>
        <a href="http://gwow.info/indexvideo2.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 class="icon" src="gfx/steckicon.png" alt="Steckbrief-icon" />Quanturine</a></li>

                <li><a href="hideaki.php"><img class="icon" src="gfx/steckicon.png" alt="Steckbrief-icon" />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="formular.php">Kontakt</a></li>
          </ul>
        </div>
      </td>

      <td>Logo</td>
    </tr>
  </table>

ich lasse immer alle alten sachen online damit ich hinterher schauen kann was ich davon noch brauchen kann darum wird der alte link nicht mehr gehen... hier der neue http://gwow.info/test/positionierung.php

Kommentar

Hideaki

Dabei seit: 27.11.2016

Beiträge: 30
#20

19.12.2016, 16:15

Ich werde hier weiter posten wenn es etwas neues gibt.. muss jetzt ersteinmal einige fehler beseitigen.. aber ich glaube das ich das alleine schaffe
Kommentar
Hideaki

Dabei seit: 27.11.2016

Beiträge: 30
#21

22.12.2016, 23:46
Zuletzt geändert von Hideaki; 22.12.2016, 23:50.

bin wieder auf ein problem gestoßen.. ich will neben der slideshow meinen steckbrief reinschreiben (name hobbys und so weiter) wie ihr auf der webseite seht habe ich alle positionen gefunden (da wo test1...7 steht nur nicht die position die ich brauche... könnte da mal wer schauen und mir sagen was ich da machen soll... bin da seit gestern dran und find ums verecken nich die lösung .. sicher wieder einfacher als ich denk der direktlink zum besagten teil ist http://gwow.eu/test/hideaki.php das blablabla war ein zweites include .. macht er aber auch darunter
Kommentar

Ankündigung

design der seite auf css umgestellt

Neue Werbung 2019

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar