chainboost
Gebruiker
- Lid geworden
- 6 sep 2012
- Berichten
- 91
Hallo allemaal,
Ik ben een website aan het maken voor mijn eigen bedrijf en heb een voetbalk gemaakt die over de hele breedte wordt gebruikt onderaan de pagina, maar als ik naar de tweede pagina ga dan heeft de voetbalk maar een breedte van ong. 940px. Ik snap er niets meer van.
Hier zijn een paar foto's van het probleem:
Dit is op de eerste pagina en zo hoort hij ook te zijn:
En hier is hij op de tweede pagina maar dan verkeerd:
Hier is de HTML code:
En hier is de CSS code:
Ik hoop dat jullie mij kunnen helpen.
Ik ben een website aan het maken voor mijn eigen bedrijf en heb een voetbalk gemaakt die over de hele breedte wordt gebruikt onderaan de pagina, maar als ik naar de tweede pagina ga dan heeft de voetbalk maar een breedte van ong. 940px. Ik snap er niets meer van.
Hier zijn een paar foto's van het probleem:
Dit is op de eerste pagina en zo hoort hij ook te zijn:
En hier is hij op de tweede pagina maar dan verkeerd:
Hier is de HTML code:
HTML:
<!-- FOOTER -->
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Contact us:</h4>
<a href="index.html"><img src="images/logo_footer.png" alt="Img"></a>
<p>
Telefoonnummer:<br> 06-488-185-45 of 06-228-420-20<br><br> Of e-mail naar: <A HREF="mailto:info@compas-media.nl">info@compas-media.nl</A><br><br>
</p>
</div>
<div>
<h4></h4>
<ul class="posts">
<li>
<span class="time">No cure, no pay!</span>
<p>
<a href="apk.html">APK onderhoudsbeurt - </a>Geen computerprobleem gevonden? Dan betaalt u alleen voor de voorrijkosten.
</p>
</li>
<li>
<span class="time">24 uurs contact garantie!</span>
<p>
<a href="contact-us.html">Contact maken - </a>U heeft gegarandeerd binnen 24 uur contact met ons!
</p>
</li>
<li>
<span class="time">Klant is koning!</span>
<p>
<a href="pckopen.html">Computer kopen - </a>Uw computerwens staat bij ons centraal!
</p>
</li>
</ul>
</div>
<div>
<div id="connect">
<h4>Social Media</h4>
<MAP NAME=logos>
<AREA HREF="https://www.facebook.com/Compasmediahengelo?ref=stream" ALT="Facebook" COORDS="0,0,63,63">
<AREA HREF="https://twitter.com/Compasmedia" ALT="Twitter" COORDS="96,0,160,63">
</MAP>
<img src="images/facebook-twitter.png" alt="Web Logos" usemap="#logos" />
<map id="imgmap201397133317" name="imgmap201397133317"><area shape="rect" alt="Facebook" title="" coords="0,0,63,63" href="https://www.facebook.com/Compasmediahengelo?ref=stream" target="" /><area shape="rect" alt="Twitter" title="" coords="96,0,160,63" href="https://twitter.com/Compasmedia" target="" /></map>
</div>
<p id="footnote">
<br>
<br>
© Copyright Compas-media - 2013
</p>
</div>
</div>
</div>
</div>
Code:
/* FOOTER */
#footer {
background-color: #000000;
border-top: 1px solid #fff;
padding: 28px 0 14px;
width: 100%;
}
#footer p {
color: #ffffff;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#footer > div {
width: 940px;
margin: 0 auto;
padding: 0 10px;
}
#footer .posts {
float: left;
height: 300px;
width: 302px;
padding: 0;
font-size: 18px;
}
#footer .posts li {
width: 276px;
margin: 0 0 30px;
padding-left: 10px;
}
#footer .posts p a {
line-height: 24px;
margin: -3px 0 3px;
}
#links {
background: url(../images/separator-dark.png) repeat-x left bottom;
color: #009DE0;
display: inline-block;
width: 940px;
padding: 0 0 20px;
}
#links h4 {
color: #009DE0;
font-family: "Oswald";
font-size: 23px;
font-weight: normal;
line-height: 24px;
margin: 0 0 12px;
padding-left: 10px;
text-transform: uppercase;
}
#links > div {
float: left;
background: url(../images/separator-dark-vertical.png) repeat-y left top;
height: 300px;
padding-left: 20px;
}
#links .showroom {
background: none;
width: 293px;
padding-left: 0;
padding-right: 15px;
}
#links .showroom h4 {
padding-left: 0;
}
#links .showroom img {
margin-bottom: 12px;
}
#links .showroom p {
font-size: 13px;
margin: 0;
}
#links .showroom p em {
color: #009DE0;
display: block;
font-style: normal;
margin: 0 0 20px;
}
#links .showroom p a {
color: #009DE0;
display: block;
}
#links .showroom p a:hover {
color: #ffffff;
}
#newsletter {
background: url(../images/separator-dark.png) repeat-x left bottom;
width: 284px;
margin: 0 0 16px 6px;
padding: 0 0 20px;
}
#newsletter h4 {
padding-left: 0;
}
#newsletter input {
color: #4b3a33;
height: 26px;
line-height: 26px;
width: 269px;
border: 3px solid #af8112;
margin: 0 0 6px;
padding: 0 4px;
*margin-left: -6px; /** Needed for IE7 **/
}
#newsletter input.btn2 {
color: #fff;
width: 83px;
border: 0;
padding: 0px 0 2px;
}
#image-fb {
float:left;
}
#connect a {
display: inline-block;
height: 33px;
margin: 0 10px;
}
#connect a.facebook {
background-position: -46px -112px;
vertical-align: middle;
width: 33px;
}
#connect a.twitter {
background-position: -46px -112px;
width: 33px;
}
#connect a.facebook:hover {
background-position: 0 -112px;
}
#connect a.googleplus:hover {
background-position: 0 -153px;
}
#connect a.twitter:hover {
background-position: 0 -194px;
}
#footer ul.navigation {
float: right;
display: inline-block;
line-height: 24px;
list-style: none;
margin: 0;
padding: 0;
}
#footer ul.navigation li {
float: left;
margin-left: 15px;
}
#footer ul.navigation li:first-child {
margin-left: 0;
}
#footer ul.navigation li a {
color: #ffffff;
font: 11px/24px "Oswald";
text-decoration: none;
text-transform: uppercase;
}
#footer ul.navigation li a:hover {
color: #009DE0
}
#footer #footnote {
color: #ffffff;
font: 11px/24px "Oswald";
margin: 0;
text-transform: uppercase;
}
Laatst bewerkt door een moderator:
