Meine Seite erstreckt sich nicht über die gesamte Seite

Ich habe zwei Fragen. Der erste ist, dass wenn ich in mein html-Tag schreibe, ich meinen Hyperlink nicht verwenden kann, wenn ich die Seite ausführe. Der andere und wichtigste Grund ist, dass sich mein Code nicht über die gesamte Seite erstreckt.Meine Seite erstreckt sich nicht über die gesamte Seite

Hier ist die CSS-I

body { 
    background: #B2906F; 
    font-family: arial; 
    margin: 0; 
    height: 100%; 
} 

.maincontainer{ 
    width: 100%; 
    margin: 0 auto; 
} 


.picture{ 
    display: inline; 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    z-index: -1; 
    background-size: 100%; 
} 

.button{ 
    padding: 10px 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    background-color: #05280c; 
} 
.button-primary:hover { 
    background-color: #05370c; 
} 

h1 { 
    display: inline; 
    margin: 0; 
    background-color: #2c421f; 
    padding: 5px; 
    position: absolute; 
} 

ul{ 
    margin: 0; 
    display: inline; 
    padding: 0px 0px 0px 250px; 
} 
ul li { 
    display: inline-block; 
    list-style-type: none; 
    padding: 15px 10px; 
    color: #050c0c; 
    margin: 0; 
    border-radius: 5px; 
} 

ul li a { 
    color: black; 
} 

footer{ 
    clear: both; 
} 

nav { 
    color: 
    height: 100%; 
    margin: 0; 
    background-color: #2c421f; 
}

für das Styling der Seite geschrieben und das ist mein html ich für die Seite geschrieben. Jede Hilfe wäre großartig. Ich bin hier seit ein paar Tagen festgefahren.

<!DOCTYPE html> 
<html> 

<head> 
    <title>NWWolfPack</title> 
    <link href="main.css" rel="stylesheet" /> 
</head> 

<body> 
    <div class="maincontainer"> 
     <h1>NW Wolf Pack</h1> 
     <div class="picture"><img src="camo.jpg" width="100%" height="150"> 
      <header> 
       <nav> 
        <ul> 
         <li class="button"><strong>Home</strong></li> 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 
     <footer>2017 Dillan Hall</footer> 
</body> 

</html>

Quelle

2017-02-10 Dillan Hall

Was war die Frage wieder ...? : | – Leo

Sorry, ich habe das furchtbar formuliert. Ich möchte nur, dass mein CSS von links nach rechts über die Seite läuft. Im Moment geht es nur halbwegs –

Überprüfen Sie Ihre Anfang und Ende div Tags in Ihrem Code. Ich glaube nicht, dass Sie das Header-Nav im Bild div haben wollten. – Adrianopolis

Folgen dies:

body { 
 
    background: #B2906F; 
 
    font-family: arial; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.maincontainer { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.picture { 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    background-size: 100%; 
 
} 
 

 
.button { 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
    background-color: #05280c; 
 
} 
 

 
.button-primary:hover { 
 
    background-color: #05370c; 
 
} 
 

 
h1 { 
 
    display: inline; 
 
    margin: 0; 
 
    background-color: #2c421f; 
 
    padding: 5px; 
 
    position: absolute; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    display: inline; 
 
    padding: 0px 0px 0px 250px; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    padding: 15px 10px; 
 
    color: #050c0c; 
 
    margin: 0; 
 
    border-radius: 5px; 
 
} 
 

 
ul li a { 
 
    color: black; 
 
} 
 

 
footer { 
 
    clear: both; 
 
} 
 

 
nav { 
 
    color: height: 100%; 
 
    margin: 0; 
 
    background-color: #2c421f; 
 
}

<div class="maincontainer"> 
 
     <h1>NW Wolf Pack</h1> 
 
     <div class="picture"><img src="camo.jpg" width="100%" height="150"> 
 
      <header> 
 
       <nav> 
 
        <ul> 
 
         <li class="button"><strong>Home</strong></li> 
 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
 
        </ul> 
 
       </nav> 
 
      </header> 
 
     </div> 
 
     <footer>2017 Dillan Hall</footer>

Quelle

2017-02-10 07:33:03

Sie sind die Besten. Danke, das hat perfekt funktioniert. –

Es ist die position:fixed auf dem .Picture in Ihrem CSS, die das Problem verursacht. Auch habe ich gerade bemerkt, dass dein Hauptcontainer nicht das schließende div hat.

Quelle

2017-02-10 07:35:29 Adrianopolis

entfernen position:fixed aus Ihrer Klasse picture

.picture{ 
    display: inline; 
    margin: 0; 
    padding: 0; 

    z-index: -1; 
    background-size: 100%; 
}

Und Ihre Hyperlink scheint working..Isnt zu sein, dass, was Sie gemeint?

Quelle

2017-02-10 07:37:34 affaz

verwenden ein:

<!DOCTYPE html> 
<html> 

<head> 
    <title>NWWolfPack</title> 
    <link href="main.css" rel="stylesheet" /> 



</head> 

<body> 
    <div class="maincontainer"> 
     <h1>NW Wolf Pack</h1> 
     <div class="picture"><img src="http://www.dvd-ppt-slideshow.com/images/ppt-background/background-5.jpg" width="100%" height="150"> 
      <header> 
       <nav> 
        <ul> 
         <li class="button"><strong>Home</strong></li> 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 
     <footer>2017 Dillan Hall</footer> 
</body> 

</html>

STYLE:

<style> 
    button{ 
    padding: 10px 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    background-color: #05280c; 
} 
.button-primary:hover { 
    background-color: #05370c; 
} 

h1 { 
    display: inline; 
    margin: 0; 
    background-color: #2c421f; 
    padding: 5px; 
    position: absolute; 
} 

ul{ 
    margin: 0; 
    display: inline; 
    padding: 0px 0px 0px 250px; 
} 
ul li { 
    display: inline-block; 
    list-style-type: none; 
    padding: 15px 10px; 
    color: #050c0c; 
    margin: 0; 
    border-radius: 5px; 
} 

ul li a { 
    color: black; 
} 

footer{ 
    clear: both; 
} 

nav { 
    color: 
    height: 100%; 
    margin: 0; 
    background-color: #2c421f; 
} 
    </style>

Hope this Ihnen helfen. Wenn irgendeine andere Frage mich wissen lässt?

Quelle

2017-02-10 07:44:13 Sangrai

Meine Seite erstreckt sich nicht über die gesamte Seite

Antwort

Verwandte Themen