Beiträge von Jakob5603

Jakob5603 · 17. Juni 2018

Code

<div class="MOOOODIIII">

          <div class="modipvpbridge"> </div>

    </div>


<style>

.modipvpbridge {
     width: 1500px;
     height: 800px;
     margin-right: 80%;
     margin-left: 10%;
     background: url(modi/pvpbridge1.png) no-repeat;
     transition: 2.0s; }


.modipvpbridge:hover {
    background: url(modi/pvpbridge1tran2.png)
        no-repeat; }

</style>

Alles anzeigen

Jakob5603 · 17. Juni 2018

@m.scatello

HTML

<style>
.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
    height: 10px;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 128px;
height: 50px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
}
</style>


<div class="flex-container">
  <div class="Instaaagran" href="http://instagram.com/playgalaxy"></div>
  <div class="TWIIII" href="http://twitter.com/playgalaxy_net"></div>
  <div class="YYYTT" href="http://youtube.com"></div>  
</div>

Alles anzeigen

Jakob5603 · 17. Juni 2018

http://prntscr.com/jvwowd

Wenn ich das ganze mit height löse wird das Bild abgeschnitten.

Jakob5603 · 17. Juni 2018

Hey, wie kann ich die Bilder hier verkleinern und mittig positionieren? Mit margin wird das ganze verschoben, die Bildgröße mit height ausrichten funktioniert nicht, es gibt keine sichtbare Veränderung.

Viele Grüße, Jakob

HTML

<div class="mediaobergroup">
                       <table class="mediaaa">

                 <tr>

                 <th><div class="lufttable"></div></th>
                 <th><div class="Instaaagran" href="http://instagram.com/playgalaxy"></div></th>
                 <th><div class="TWIIII" href="http://twitter.com/playgalaxy_net"></div></th>
                 <th><div class="YYYTT" href="http://youtube.com"></div></th>
                 <th><div class="lufttable"></div></th>
                     <th></th>


                           </tr></table>
                 </div>

Alles anzeigen

CSS

                            .mediaobergroup{
                             background-color: aliceblue;
                           }


                           .mediaaa {
                               float: inherit;
                               height: 60px;
                               background-color: white;
                           }

                           .Instaaagran {
                               width: 128px;
                               height: 128px;
                               background: url(media/nice/colored/Instagram.png) no-repeat;
                               transition: 2.0s; }


                          .Instaaagran:hover {
                              background: url(media/nice/Instagram.png)
                                  no-repeat; }

                                            .TWIIII {
                               width: 128px;
                               height: 128px;
                              
                                                background: url(media/nice/colored/Twitter.png) no-repeat;
                                                transition: 2.0s; }


                                           .TWIIII:hover {
                                               background: url(media/nice/Twitter.png)
                                                   no-repeat; }


                                                   .YYYTT {
                               width: 128px;
                               height: 128px;
                              
                                                       background: url(media/nice/colored/YouTube.png) no-repeat;
                                                       transition: 2.0s; }


                                                  .YYYTT:hover {
                                                      background: url(media/nice/YouTube.png)
                                                          no-repeat; }

Alles anzeigen

Jakob5603 · 17. Juni 2018

Nein, die Bilder sind gleich groß, aber es ist kein Übergang sichtbar

Jakob5603 · 15. Juni 2018

Der Übergang geht leider immer noch nicht.

Jakob5603 · 13. Juni 2018

Meinst Du so?

rl(modi/pvpbridge1.png no-repeat);

Jakob5603 · 13. Juni 2018

Hey! Warum wird das ganze beim "hovern" nicht animiert/überblendet?

CSS: style.css

.imgBox { 
                width: 1500px; 
                height: 800px; 
                background: url(modi/pvpbridge1.png) 
                    no-repeat; 
                transition: 2.0s; } 
            
            
            .imgBox:hover { 
                width: 1500px; 
                height: 800px; 
                background: url(modi/pvpbridge1tran2.png) no-repeat; }

Alles anzeigen

Jakob5603 · 5. Juni 2018

Ja, danke Dir!

Jakob5603 · 5. Juni 2018

Hey! Ich möchte die Navigation mittig auf meiner Webseite positionieren. Jedoch sollen die Punkte nicht untereinander sondern nebeneinander stehen. Webseite: http://www.jakobhd.de

Danke schonmal im Vorraus!

Jakob5603 · 20. Mai 2018

Ich verstehe leider nicht was in diesem Link ist https://codepen.io/basti1012/pen/MGLaEd.

Der Teil der animiert ist, ist am Ende der Seite (ganz unten wenn man runterscrollt). Diese Animation soll aber erst starten, wenn Du diesen Teil siehst.

Ich hoffe ich habe jetzt nichts falsch verstanden

Jakob5603 · 20. Mai 2018

Hey! Ich habe nun eine Animation auf meiner Webseite eingebaut. Nun ist meine Frage: Die Aninmation kommt, wenn die Webseite neu geladen/geöffnet wird. Jedoch soll die Animation des Bildes erst kommen, wenn ich runterscrolle und bei diesem animierten Inhalt bin. Wie kann ich das machen?

Jakob5603 · 3. Mai 2018

Hey! Könnte hier nochmal jemand rüberschauen? Ich bin wirklich noch komplett am Anfang und habe probiert das ganze nochmal ohne </br> zu lösen. Allerdings habe ich mich informiert, habe aber noch keine Ahnung wie ich mit flex arbeiten soll.

Wäre nett wenn ein paar Verbesserungsvorschläge kommen würden Danke!

HTML: index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JakobHD | Offizielle Webseite</title>
  </head>
  <body>
    <!-- Sichtbarer Dokumentinhalt im body -->
       
      <ul>
  <li><a href="#home"><b>Start</b></a></li>
  <li><a href="https://www.youtube.com/channel/UC1rVfTiJx1ljR3UM-Kqc25w">YouTube</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">weiteres</a>
    <div class="dropdown-content">
      <a href="http://www.playgalaxy.net"#">PlayGalaxy</a>
      <a href="http://labymod.net/team"#">Labymod</a>
    </div>
  </li>
</ul>

                

<div id="Head">       
      <img id=Bild src="img/lel.png" alt="Error#09" /> 
          </div>
          
<div class="flex">
    <div><img src="img/Skin2.png" alt="skin1"></div>
    <div><img id=bild6 src="img/T%C3%A4tigkeit.PNG" alt="tätigkeit"></div>
    <div><img id=bild6 src="img/TN.png" alt="TN"></div>
</div>

                                                                                           
                              
<hr> 
<div id="Bereich2"> 
                              
<img id=Jakob1 src="img/Skin1.png" alt="Error#09" />



    <img id=Bild_YT src="img/YT1.png" alt="Error#09" />
  <video id=Video src="img/TP.mp4" controls>
    Ihr Browser kann dieses Video nicht wiedergeben.
    Error#10 - Sie können den Fehler unter error@playgalaxy.net melden. 
    Sie können ihn unter <a href="#">https://www.youtube.com/channel/UC1rVfTiJx1ljR3UM-Kqc25w</a> abrufen.
  </video>

</div>

<div id="Bereich3"> 

<hr>
<img id=Skin3 src="img/Skin3.png" alt="Error#09" /> 





<h5>Du willst mehr erfahren?</h5>

<a id=mail href="mailto:info@jakobhd.de"><img src="img/Mail.png" /></a> 
<a id=twitter href="http://www.twitter.com/jakob_2608"><img src="img/Twitter.png" /></a>
                           

</div>

<div id="Bereich4"> <hr>
<a id=text1 href="https://www.playgalaxy.net/about/">Impressum</a> 
          <a id=text1 href="https://www.playgalaxy.net/j/privacy">Datenschutz</a>
</div>
  </body>

</html>

Alles anzeigen

CSS: style.css

body {
background-color: cadetblue;
}

#Head {
background-color: cadetblue;
    width: 100%
}

#Bereich2 {
background-color: cornflowerblue;
width: 100%;

}

#Bereich3 {
background-color: chocolate;
width: 100%;
margin-bottom: 200px;
}

#Bereich4 {
background-color: aquamarine;
    width: 100%
}


hr { 
    width: 100%; 
    height: 5px; 
    margin: 0 auto;
    color: lightcyan;
    background: #08088A;
}

h1 { 
    text-align: center
}

h2 { 
    text-align: center
    
}


h5 { 
    text-align: center
    
}


a { 
    text-align: center
    
}


.flex { width:1250px; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    white-space: 150px; }


#box1 {
    background-color: darkolivegreen;
    width: 400px;
    height: 100px;
}


#mail {
display: block;
margin-left: auto;
    margin-right: auto;
}


#twitter {
display: block;
margin-left: auto;
    margin-right: auto;
}



#Bildt{
border-color: darkblue;
border-width: 10px;
border-style: solid;
    position: absolute;
      left: 700px;
      right: 400px;    
      overflow: hidden;
    container; flex;   
}


#Bild6{
border-color: darkblue;
border-width: 10px;
border-style: solid;    
}




#Video{

    margin-top: 130px;
border-color: darkblue;
cursor: pointer;
border-width: 10px;
border-style: solid;
    position: absolute;
      left: 700px;
      right: 400px;
width: 350%;
height: 285px;
width: 500px;
      overflow: hidden
}






#Jakob1{
    width: 25%;
    height: auto;
    top: 100px;
    float: right;
    
}



#Bild{
width: 100%
}

  #Bild1{
      left: 600px;
      right: 900px;
width: 20%;
height: 90px;
      overflow: hidden
}

  #Bildlol{
      position: relative;
      text-align: center;
      float: right;
      overflow: hidden
}

  #Bild_YT{
      margin-top: 130px;

}




  #h1{
    text-align: center
}



  #text1{
      text-align: right
}



  #Bild2{
position: absolute;
      left: 845px;
      right: 900px;
width: 100%;
height: 90px;
width: 200px;
overflow: hidden;
}

  #h1{
    text-align: center
        background-color: #8A0829;
      
}



  #button1{
left: 200px;
right: 150px;
background-color: #8A0829;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;

}


  #Skin3{
      position: relative;
      text-align: center;
      float: right;
      overflow: hidden;
      margin-bottom: 1600px;
}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #A4A4A4;
    background-repeat: no-repeat;
}

li {
    float: left;
    background-repeat: no-repeat;
}

li a, .dropbtn {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    background-repeat: no-repeat;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: lightblue;
    background-repeat: no-repeat;
}

li.dropdown {
    display: inline-block;
    background-repeat: no-repeat;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    background-repeat: no-repeat;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background-repeat: no-repeat;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
    background-repeat: no-repeat;
}

Alles anzeigen

Jakob5603 · 1. Mai 2018

Hey! Ich habe meine Webseite nun endlich online gestellt und habe nun ein Problem. Sobald ich die Webseite verkleinere/vergrößere wird alles verschoben.

Folgende Webseite:

http://jakobhd.de/

Hat jemand eine Lösung wie dies vermieden werden kann?

Jakob5603 · 30. April 2018

Hat sich erledigt

Jakob5603 · 30. April 2018

Wenn ich das ganze mit Containern mache sind weiße Ränder an der Seite. Wie bekomme ich die weg?

Tut mir leid dass ich so viel frage

Jakob5603 · 30. April 2018

Alles klar, vielen dank!

Jakob5603 · 30. April 2018

[Blockierte Grafik: https://image.jimcdn.com/app/cms/image/transf/dimension=320x10000:format=png/path/sa1b4a4574beb0b04/image/i63956d7f5e065a4e/version/1525094892/image.png]Ich mein das so: Oben ist das ganze (z.B. wie im Bild) blau, dadrunter dann weiß. Ich hoffe das war verständlich

Dass sich der Besucher die Farbe aussuchen kann wäre auch interessant..

Dank im vorraus!

Jakob5603 · 30. April 2018

Hey! Ich möchte es auf meiner Webseite so machen, dass sie verschiedene Hintergrundfarben hat (z.B. wie auf Labymod.net) - Allerdings habe ich keinen Ansatzpunkt.

Kann mir jemand helfen?

Viele Grüße

Jakob5603 · 25. April 2018

Wie könnte ich diesen Button den in CSS "bearbeiten"?

Beiträge von Jakob5603

Übergang

Bildgröße

Bildgröße

Bildgröße

Übergang

Übergang

Übergang

Übergang

Navigation mittig positionieren

Navigation mittig positionieren

Animation

Animation

CSS Formatierung

CSS Formatierung

CSS / Farben

CSS / Farben

CSS / Farben

CSS / Farben

CSS / Farben

HTML/CSS Hilfe..