CSS Formatierung

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?

basti1012 · 1. Mai 2018

Code

  <body bgcolor=#81BEF7>

Hat in der Css Datei nix zu suchen.

Deine ganzen sind für ein reponsives verhalten wohl auch nicht Vorteilhaft.

Deine ganze css könnte man auch noch etwas kürzen.Hat aber mit den Problem jetzt nix zu tun,

Dann hast du doppelte id's ,die zum Fehler beitragen könnte oder dir irgendwann Fehler machen werden.

Benutzt man eigentlich auch nicht mehr und vor allem wenn man es benutzt muß man es auch wieder schliessen .

Sowas kann natürlich auch den Fehler machen

m.scatello · 1. Mai 2018

Autsch! Siehe https://validator.w3.org/nu/?doc=http%3A%2F%2Fjakobhd.de%2F

53 Fehler sind bei den paar Zeilen HTML-Code deutlich zu viel.

basti1012 · 1. Mai 2018

Zitat von m.scatello

Autsch! Siehe https://validator.w3.org/nu/?doc=http%3A%2F%2Fjakobhd.de%2F

53 Fehler sind bei den paar Zeilen HTML-Code deutlich zu viel.

immer wieder erstaunlich was die Browser alles mitmachen.

Die meißten Fehler sind ja der und Müll und auch andere kleinigkeiten, die er ohne große Probleme beheben kann.

Nur mit der Css wird es spaßig wenn er die ganzen `s löscht ,dann kann er erstmal einiges neue einstellen.Ich weiß jetzt nicht wie weit flexboxen ihn da die arbeit erleichtern könnte ?

Ich werd es es heute auch nicht testen ,obwohl es mir in den Fingern juckt

Arne Drews · 1. Mai 2018

Naja, ist nicht erst seit gestern eine schlechte Wahl für Formatierungen.

Abstände zwischen Elementen macht man idealerweise mit margin, sofern es nicht tatsächlich schon über flex sauber ausgerichtet wird.

Die Fehler sollten schon weites gehend alle bereinigt werden, bevor es weiter geht.

Die Browser machen zwar viel mit, aber früher oder später heißt es: "Es wird überall korrekt dargestellt, nur im ... nicht?!"

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 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

CSS Formatierung

Jetzt mitmachen!

Teilen

Tags