Externe CSS-Höhe funktioniert nicht

Ich versuche, meine Seite mit einer externen Stilseite zu stylen. Einige meiner Divs nehmen das ganze Styling auf und manche nicht. Insbesondere nehmen alle mit einer Bilddatei das gesamte Styling außer der Höhe und/oder Breite. Die Z-Position, links, oben usw. funktionieren alle gut. Ich überprüfe den DOM-Explorer und es zeigt nicht an, dass es seine Größe vom body-Tag erbt, aber ich kann nicht herausfinden, warum es sie nicht richtig sortiert.Externe CSS-Höhe funktioniert nicht

HTML:

<!DOCTYPE html> 
    <html lang = "en"> 
    <head> 
     <meta charset = "utf-8" /> 
     <link rel="stylesheet" type="text/css" href="race_inprogress.css"> 
     <script type='text/JavaScript' src="race.js" language=javascript></script> 
    </head> 

    <body> 

     <h1 class = "amazing"> The Amazing Race For an A! </h1> 

     <h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1> 

     <div id="traffic-light"> 
     <div id="stopLight" class="bulb"></div> 
     <div id="slowLight" class="bulb"></div> 
     <div id="goLight" class="bulb"></div> 
     </div> 

     <input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;"> 

     <div class = "racer1"> 
      <img src=images/teacher.jpg id='i1'> 
     </div> 
      <br><br><br><br> 
     <div class = "racer2"> 
      <img src=images/meis.png id='i2'> 
     </div> 

     <div class = "road1"> 
      <img src=images/road.jpg> 
     </div> 

     <div class = "road2"> 
      <img src=images/road.jpg> 
     </div> 

     <div class = "winners"> 
      <img src=images/winner_ford.png id='image1' onclick="reset()"> 
      <br><br><br><br> 
      <img src=images/winner_meis.png id='image2' onclick="reset()"> 
     </div> 

     <script> 
      illuminateRed() 
      hideImage() 
     </script> 

    <div class="vertical-line"> 
    </div> 

    </body> 
</html>

CSS:

html 
{ 
    height: 100%; 
    width: 100%; 
} 

body 
{ 
font-family: sans-serif; 
background: url("images/checkback.png"); 
background-repeat: no-repeat; 
background-size: cover; 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
overflow-x: hidden; 
} 

div.racer1 
{ 
    width: 10px; 
    position:absolute; 
    left: 25px; 
    top: 325px; 
    z-index: 2; 
} 

div.racer2 
{ 
    width: 10px; 
    position:absolute; 
    left: 25px; 
    top: 500px; 
    z-index:2; 
} 

div.road1 
{ 
    position:absolute; 
    left: 30px; 
    top: 325px; 
    z-index: 1; 
    height: 133px; 
    width: 1180px: 
} 

div.road2 
{ 
    position: absolute; 
    left: 30px; 
    top: 500px; 
    z-index: 1; 
    height: 133px; 
    width: 1180px; 
} 

div.winners 
{ 
    position:absolute; 
    left: 5px; 
    top: 0px; 
    z-index: 3; 
    width: 100%; 
    height: 100%; 
} 

h1.amazing 
{ 
    font-size: 30px; 
    position: relative; 
    top: 150px; 
    left: 20px; 
    color: gold; 
} 

h1.fordmeis 
{ 
    font-size: 30px; 
    position: relative; 
    top: 90px; 
    left: 700px; 
    color: gold; 
} 

#traffic-light 
{ 
height: 200px; 
width: 100px; 
left: 500px; 
position: absolute; 
background-color: #333; 
border-radius: 40px; 
margin: -100px 0; 
padding: 20px; 
} 

.bulb 
{ 
height: 50px; 
width: 50px; 
background-color: #111; 
border-radius: 50%; 
margin: 15px auto; 
transition: background 500ms; 
} 

div.vertical-line 
{ 
width: 0px; 
height: 315px; 
top: 55px; 
position:relative; 
left: 1200px; 
color: gold; 
border: 10px inset; 
z-index: 1; 
}

Quelle

2016-05-02 Michael Meis

Sie müssen Bilder Höhe und Breite inline in img-Tags definieren. <img src="path/to/image" height="42" width="42">

Quelle

2016-05-02 04:53:01

Es arbeitet mit Inline-Tags ganz gut, aber das ist für ein Schulprojekt und die Lehrer zu Beginn des Kurses angegebenen Blätter externen Stil zu verwenden, um diesen eine .racer1 img –

try { height: 100%; Breite: 100%; } –

Ah, width = "" auf einem Tag ist kein CSS, sondern ein echtes HTML-Tag-Attribut. Wenn Sie mit Seitenrendern und Maltechniken arbeiten, wird empfohlen, dass die Bilder mindestens eine Breite haben, damit es keine Mehrfachberechnungen gibt. Das Hinzufügen eines Attributs wie style = "width: 100px" würde als Inline-Stile betrachtet werden. –

Schwer zu sagen, ohne die Bilder als Referenz. Ein funktionierendes Beispiel wäre hilfreich, um dies zu bestätigen (es scheint auch ein externes JS zu sein). Eine der Hauptverantwortlichen Fragen: sind die Bilder größer als die Container in ihnen? Wenn dies der Fall ist und Sie die Bilder nicht auf eine maximale Breite von 100% einstellen, werden sie außerhalb der festgelegten Layoutbreiten/-höhen liegen. Wenn Sie die Bilder stattdessen beschneiden möchten, würde das Hinzufügen von overflow: hidden diese exakten Breiten beibehalten und nicht das gesamte Bild anzeigen.

Quelle

2016-05-02 04:54:00

Ich bin mir nicht sicher, ob ich dem, was du sagst, völlig folge. Es gibt auch js, ich glaube nicht, dass es relevant war, also habe ich es nicht aufgenommen. Die exakt gleichen Stile funktionierten gut, solange ich Inline-Tags verwendete. Es funktioniert nur, wenn ich es in ein externes Stylesheet verschiebe. Die Bilder sind beide größer als das, was ich ihnen zeige, aber ich dachte, die Tags für Breite und Höhe würden sie verkleinern, ist das nicht genau? –

Wenn Sie den vollen Code sehen wollen, kann ich es mit Ihnen auf Google Drive teilen, ich habe versucht, eine Geige arbeiten zu lassen, aber konnte es nicht herausfinden. Ich bin nicht sehr gut in diesem Zeug. –

Das von Ihnen gepostete Beispiel enthielt keine Bilder mit festgelegten Inline-Höhen oder -Breiten. Wenn Sie keine Inline-Breite festgelegt haben (z. B. ), ist dies wahrscheinlich der Täter, da Sie erwähnen, dass die Bilder tatsächlich größer sind. Wird das Problem durch Hinzufügen von img {max-width: 100%} zu Ihren Stilen gelöst? Wenn du sicher bist, dass JS keinen Einfluss hat, dann mach dir da wohl keine Sorgen. –

Externe CSS-Höhe funktioniert nicht

Antwort

Verwandte Themen