2017-03-02 3 views
0

Immer, wenn ich meine Website Resize es wird immer vermasselt, und ich habe alles versucht, es zu beheben, aber ich kann es nicht herausfinden. Ich habe versucht Bootstrap, aber hörte nicht auf zu verstehen, was es bedeutet. Ich bin so wird Beratung geschätzt und Dank für dasMeine Website hält squezed und verwirrt wird, wenn rezied

helfen Regard Hussein M.

body { 
 
    color: white; 
 
    font-family: sans-serif; 
 
    background-repeat: round; 
 
    background-image: url(Gaming.jpg); 
 
    background-position: -430px -100px; 
 
} 
 

 

 
h1 { 
 
    font-family: sans-serif; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 10px; 
 
    padding: 0px; 
 
} 
 

 

 
ul { 
 
    
 
} 
 

 
table { 
 
    padding-left: 50px; 
 
} 
 

 
body { 
 
    min-width: 800px; 
 
    position: relative; 
 
    font-family: sans-serif; 
 
} 
 

 
img { 
 
     margin: 0; 
 
    position: absolute; 
 
    top: 500%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    border-color: red; 
 
    border-width: medium; 
 
} 
 

 
#menu1 { 
 
    float: left; 
 
    padding-left: 25px; 
 
    
 
} 
 

 
#menu2 { 
 
    float: right; 
 
    padding-right: 50px; 
 
} 
 

 
.nav { 
 
    font-size: 17px; 
 
    font-family: inherit; 
 
    position: relative; 
 
    top: -9px; 
 
    padding: 9px 0px 50px 0px; 
 
    margin-bottom: 0px; 
 
    
 
} 
 

 
.nav ul,li,a{ 
 
    display: inline; 
 
    padding-left: 10px; 
 
    text-decoration: none; 
 
    color: rgb(22, 239, 239); 
 
} 
 

 

 

 
.main { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 5px; 
 
} 
 
    
 

 
.h1z1 { 
 
    border-radius: 5px; 
 
    border: 1px solid #fff; 
 
    margin: 1 auto; 
 
    padding: 0px ; 
 
    margin-top: 60px; 
 
    width: 20%; 
 
    text-align: left; 
 
} 
 

 
.h1z1-img { 
 
    border-radius: 5px; 
 
    display: inline-block; 
 
} 
 

 
.h1z1-description { 
 
display: inline-block; 
 
margin-left: -25px; 
 
top: px; 
 
} 
 

 

 
.Buy { 
 
text-decoration: underline; 
 
margin-left: -8px; 
 
} 
 

 
.H1Z1head { 
 
    margin: -10px; 
 
    margin-left: 40px; 
 
} 
 
    
 
.go { 
 
    color:aqua; 
 
    position: fixed; 
 
    top: 190px; 
 
    left: 380px; 
 
} 
 

 
.go { 
 
    text-decoration: underline; 
 
    font-size: 25px; 
 
}
<!DOCTYPE HTML> 
 
<html> 
 

 
    <head> 
 
<!--Start of Zendesk Chat Script--> 
 
<script type="text/javascript"> 
 
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s= 
 
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set. 
 
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8"); 
 
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$. 
 
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script"); 
 
</script> 
 
<!--End of Zendesk Chat Script--> 
 
     
 
     <title>Gaming Library</title> 
 
     <link rel="stylesheet" type="text/css" 
 
       href="Stylesheet.css" /> 
 
    </head> 
 
    
 
<body> 
 
    <div class="nav"> 
 
    <ul id="menu1"> 
 
     <li><a href="file:///Users/mac/Desktop/index.html">Homes</a></li> 
 
     <li><a href="http://www.gaminglib.com/pages/about-us">About</a></li> 
 
     <li><a href="a">Affliates</a></li> 
 
     <li><a href="https://www.paypal.com/signin?country.x=DK">Donate</a></li> 
 
    </ul> 
 
     
 
    <ul id="menu2"> 
 
     <li><a href=""http://www.gaminglib.com/"">Old web</a></li> 
 
     <li><a href="a">Sign Up</a></li> 
 
     <li><a href="a">Login</a></li> 
 
     
 
     <li><a href="http://www.gaminglib.com/pages/contact-us-1">Contact Support</a></li> 
 
    </ul> 
 
    </div> 
 
    
 
    
 
    
 
    <div class="go"> 
 
    <h1><a href="http://www2.ea.com/featured">Go to feautered games</a></h1> 
 
    </div> 
 
    
 
    <!-- Næste side 
 
    <div class="h1z1"> 
 
    <div> 
 
     <ul> 
 
      <h2 class="H1Z1head">H1Z1</h2> 
 
     </ul> 
 
     <img class="h1z1-img" src="KOTK.jpg" width="250" height="180"> 
 
    </div> 
 
    <div class="h1z1-description"> 
 
     <ul> 
 
     <li> 
 
      <p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p> 
 
      <h3 class="Buy"><a href="http://store.steampowered.com/app/433850/?l=danish">Buy Now only $20.99 </a></h3> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    --> 
 
</body> 
 
</html>

+0

Aus irgendeinem Grund erscheint mein Bild nicht in Snippet .. –

+0

Bild erscheint nicht aus zwei Gründen, stackoverflow erlaubt keine CORS-Anfragen (domainübergreifender Ursprung) und auch weil die URL den Root-Pfad verwendet. So versucht es bei 'somecodesnippethostingsite.com/KOTK.jpg' aufzulösen, das eine 404 nicht gefunden zurückgibt, weil' somecodesnippethostingsite.com' nicht Ihr Image hostet. –

+0

menu1 und menu2 verwenden unterschiedliche Ausrichtungen, wenn Sie ändern waren, dass beide auf „links“ und dann margin-bottom nur Marge ändern und sagen, geben sie einen zufälligen Wert von 5. – Gugg

Antwort

0

Hier ist ein einfaches Beispiel, wie Ihre Inhalte in Reaktion mit Bootstrap zu bekommen, dass Sie didn‘ ich verstehe nicht. https://jsfiddle.net/qaxhxcb3/1/ (Hier können u die Größe und so)

body { 
 
    font-family: 'Montserrat', sans-serif !important; 
 
} 
 

 
.navbar { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    border: 0; 
 
    border-radius: 0; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
} 
 

 
.navbar-nav li a:hover { 
 
    color: green !important; 
 
} 
 

 
section h1 { 
 
    color: white; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.pink { 
 
    background-color: pink; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <!-- Navbar --> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Gaming Library</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Homes</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Donate</a></li> 
 
      <li><a href="#">Affliates</a></li> 
 
      <li><a href="#">Support</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <!-- First section --> 
 
    <section> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-4 green"> 
 
      <h1>Lorem ipsum</h1> 
 
     </div> 
 
     <div class="col-sm-4 red"> 
 
      <h1>Lorem ipsum</h1> 
 
     </div> 
 
     <div class="col-sm-4 blue"> 
 
      <h1>Lorem ipsum</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
    <!-- Second section --> 
 
    <section> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-12 pink"> 
 
      <h1>Lorem ipsum</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body> 
 

 
</html>

Wie Sie sehen können, setzen Sie Ihre Inhalte innerhalb der Klasse „Container“, dann „Zeile“ nach als u wählen, wie Sie angezeigt werden Dein Inhalt mit dem Grid-System. Das Bootstrap-Grid-System erlaubt bis zu 12 Spalten auf der Seite.

und das Gittersystem hat vier Klassen:

  • xs (für Handys)
  • sm (für Tabletten)
  • md (für Desktops)
  • lg (für größere Desktops)

und es gibt auch verschiedene Spalten, die entscheiden, wie sie auf dem Bildschirm angezeigt werden. Im Beispiel habe ich drei col-sm-4 und es muss immer bis zu 12 für jede Zeilenklasse hinzufügen. Im zweiten Abschnitt, den ich erstellt habe, gibt es col-sm-12, und das füllt das ganze Raster. Hoffe das hilft ein bisschen.

Aber ich schlage vor, Sie einige Bootstrap-Tutorials von w3school lesen einen Fall von ihm zu bekommen.

Verwandte Themen