Afbeelding plaatsen als achtergrond beneden aan de pagina

Status
Niet open voor verdere reacties.
C

canialegui

Gebruiker
Lid geworden
10 aug 2007
Berichten
17
Goedenavond, misschien is er iemand die mij kan helpen met de juiste code.

Ik ben een website aan het maken in Weebly http://family-dynamics.weebly.com/

Nou wil ik graag zoals de header waar de afbeelding in zit met de oranje rand deze ook beneden aan de pagina, alleen dan de oranje rand met witte binnenkant (afmeting 960px bij 200px) footer.jpg waarin ik dan mijn contactgegevens kan plaatsen. Dus niet onder de witte pagina.

Ik krijg het alleen niet voor mekaar hoe ik dat nu in de footer moet plaatsen. Alles wat ik probeer trekt de onderkant van de pagina uit zijn verband. Het liefst zou ik een code willen waarin ik een afbeelding als achtergrond kan plaatsen, zodat ik verder met het CMS alles er in kan plaatsen en dat dit op alle pagina's beneden aan de pagina verschijnt.

Alvast bedankt!!

Wat er nu bij de footer staat is het volgende:

#footer-wrap {
background: #eae9e8 url(footer-wrap.png) repeat-x;
min-width: 920px;
top: -38px;
position: relative;
}

#footer {
background: url(main-bot-footer.png) no-repeat;
font-size: 12px;
color: #6f6f6f;
padding: 95px 42px 50px;
width: 870px;
margin: 0 auto;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
font-size: 13px;
}

#footer a {
color: #8ba0b4;
}

#footer a:hover {
color: #4f8ac3;
}

#footer .paragraph ul {
margin:0px !important;
padding:0px !important;
}


#footer .paragraph li {
list-style:none !important;
}

#footer span {
vertical-align: middle;
}

#footer h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #4d4d4d;
font-size: 1.2em;
padding: .5em 0;
margin-bottom:2px;
border-bottom:#bbb 1px solid;
}

.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 15px;
}
 
Hallo Bron,

Bedankt voor de reactie, maar het werkt helaas niet. Kan er niet op schrijven.
 
Ha, ik wel
Code: 
HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Sticky footer</title>
</head>
<body>
<div id="page-wrap">
<div id="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu ipsum, suscipit non placerat non, egestas et diam. Donec eros mi, viverra et dictum id, vulputate vitae leo. Vestibulum pulvinar facilisis fringilla. Praesent est elit, feugiat eu tempor sed, condimentum sit amet dui. Nulla facilisi. Phasellus sed turpis a erat pellentesque dapibus id ac libero. Etiam risus quam, euismod vitae dignissim non, varius non nisi.</p>
</div>
</div>
<div id="footer-wrap">
<div id="footer">
<div id="footertext">
Dit is tekst in de footer.
</div>
</div>
</div>
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
#page-wrap, #footer-wrap {
  width: 100%;
}
#page-wrap {
  min-height: 100%;
  margin-bottom: -142px; /* ruimte voor footer */
}
#page-wrap:after {
  height: 142px; /* hoogte van footer  */
  content: "";
  display: block;
}
#footer-wrap {
  height: 142px; /* hoogte van footer  */
  background: #eae9e8 url('footer-wrap.png') repeat-x;
}
#page, #footer {
  width: 870px;
  padding: 0 42px 42px; /* 870+42+42=954 */
  margin-left: auto;
  margin-right: auto;
}
#footer {
  height: 142px; /* is footer hoogte */
  background: url('main-bot-footer.png') no-repeat;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}
#footertext {
  height: 122px; /* 122+10+10=142px */
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: arial,helvetica,sans-serif;
  font-size: 13px;
  color: #6f6f6f;
}

Suc6. Have fun.
 
Laatst bewerkt:
Hallo Bron,

Wederom bedankt voor je in-put!!

Zoals ik het zie heb je groot gedeelte van de CSS en HTML herschreven, maar er geen rekening mee gehouden dat ik in Weebly werk wat een CMS-systeem is en deze wijzigingen wel kan doorvoeren, alleen werkt het CMS niet meer :(
 
Beperkingen dus. In een eigen cms heb je dit niet en dat geeft meer flexibiliteit. Aan de andere kant is een weebly template kant-en-klaar, dus dat scheelt tijd. Alleen begrijp ik niet dat jouw css is gebaseerd op een stuk html, waar is de html die hierbij hoort?
 
Ja inderdaad beperkingen.

Dit is de HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class=' tall-header-page wsite-theme-light'>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-548623dd69a5780e" async="async"></script>

<div class="header-wrap">
<div id="container">
<table id="header">
<tr>
<td id="logo">{logo}</td>
<td id="header-right">
<table>
<tr>
<td class="phone-number">{phone:text}</td>
<td class="social">{social}</td>
</tr>
</table>
<div class="search">{search}</div>
</td>
</tr>
</table>
</div>
</div>
<div id="wrap" class="wsite-background">
<div id="page">
<div id="main-bot">
<div id="main-wrap">
<div id="nav-wrap">
<div id="">
<div id="topnav">
{menu}
<div style="clear:both"></div>
</div>
</div>
</div>
<div id="main">
<div id="banner-wrap">
<div id="banner">
<div class="wsite-header"></div>
</div>
</div>
<div id="content">

{content}

</div>
</div>
</div>
</div>
</div>
</div>

<div id="footer-wrap">
<div id="footer">{footer}</div>
</div>
</body>
</html>
 
Hieronder heb ik rekening gehouden met de html van weebly die ik niet aangepast heb. De css zorgt ervoor dat bij een korte pagina de footer helemaal onderaan blijft en dat bij een lange pagina de footer onder #wrap blijft.
Code: 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  min-height: 100%;
  position: relative;
}
body {
  margin-bottom: 142px; /* ruimte voor footer */
}
p {
  padding: 15px 0 0 0;
}
.header-wrap {
  width: 100%;
  height: 60px;
  background: #eae9e8 url('header-wrap.png') repeat-x;
}
#page-wrap {
  width: 100%;
}
#footer-wrap{
  width: 100%;
  height: 142px;
  background: #eae9e8 url('footer-wrap.png') repeat-x;
  position: absolute;
  left: 0;
  bottom: 0;
}
#container, #page, #footer {
  width: 870px; /* zelf aanpassen */
  padding: 0 42px 0 42px; /* zelf aanpassen */
  margin: 0 auto;
}
#container {
  height: inherit;
  background: url('main-bot-header.png') no-repeat;
}
#page {
  padding-top: 10px;
  padding-bottom: 30px;
}
#footer {
  height: inherit;
  background: url('main-bot-footer.png') no-repeat;
}
Er kloppen wat dingen niet in de html5 <head>. Dit moet minimaal zijn:
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Je website titel</title>
</head>
Suc6. Have fun.
 
Hallo Bron,

Heel hartelijk bedankt voor het meedenken. Heb uiteindelijk een flexibele footer gevonden die ik boven de footer in de pagina heb geplaatst en zo werkt het CMS systeem van Weebly nog. Krijg niet helemaal een border er omheen, maar goed.......

Fijne dag verder.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan