IvoBookish
Gebruiker
- Lid geworden
- 12 feb 2010
- Berichten
- 111
Hallo,
Ik dacht dat het een eenvoudig zou zijn maar het wil maar niet lukken, wellicht zien jullie direct de oplossing.
Voor een site wil ik de footer iets over de main laten steken, ik dacht dat dat met een margin top van -10px zou lukken maar dat werkte niet, andere probeersels leverde ook niets op helaas..
Standaard:
Hoe ik het zou willen hebben:
HELP ;-)
code en css:
sorry voor de vele code!
Ik dacht dat het een eenvoudig zou zijn maar het wil maar niet lukken, wellicht zien jullie direct de oplossing.
Voor een site wil ik de footer iets over de main laten steken, ik dacht dat dat met een margin top van -10px zou lukken maar dat werkte niet, andere probeersels leverde ook niets op helaas..
Standaard:
Hoe ik het zou willen hebben:
HELP ;-)
code en css:
Code:
<body>
<div id="header">
</div>
<div id="menu">
<ul>
<li><a style="color: #396;" href="index.html">Home</a></li>
<li><a href="html/hivejar.html">Hive to Jar</a></li>
<li><a href="html/social.html">Social Impact</a></li>
<li><a href="html/aboutus.html">About Us</a></li>
<li><a href="html/documents.html">Documents</a></li>
<li><a href="html/media.html">Media / Links</a></li>
<li><a href="html/gallery.html">Gallery</a></li>
<li><a style="background-image: none;" href="html/contact.html"> Contact </a></li>
</ul>
</div>
<div><img src="images/divider.png"></div>
<div class="clearBoth"><!-- om de rest eronder te krijgen --></div>
<!--Main-->
<div id="wrapper">
<div id="main">
bla bla bla
<b>Mozambique Honey Company</b>, established in 2010, is an innovative business with a truly <em>inclusive business model</em> that specializes in production, processing and commercialization of honey and beeswax.<br><br>
</div>
<div id="leftmain">
<img src="images/image01.png">
</div>
<div class="clearBoth"></div>
</div>
<!--end Main-->
<div id="bttm">
<div class="bttm">Mozambique Honey Company, Zona Industrial, Chimoio, info@mozambiquehoneycompany.com </div>
</div>
</body>
Code:
*{
margin:0;
padding:0;
}
body {
width: 800px;
margin:0 auto;
padding: 0;
font-family:Verdana, Geneva, sans-serif;
font-size: 100.1%;
color:#633;
background-color:#FFC;
}
#header {
background-image:url(../images/header.png);
height:154px;
}
#menu {
background-image:url(../images/menu_left.png);
background-repeat:no-repeat;
width: 800px;
height: 30px;
margin: 0 auto;
text-decoration: none;
color: #633;
}
#menubar {
width: 749px;
height: 30px;
margin: 0 auto;
float:left;
}
ul {
list-style-type: none;
background-image: url(../images/menu_bg.jpg);
height: 30px;
width: 752px;
margin: 0 auto;
}
li {
float: left;
}
ul a {
background-image: url(../images/menu_.jpg);
background-repeat: no-repeat;
background-position: right;
padding-right: 11px;
padding-left: 11px;
display: block;
vertical-align:middle;
line-height: 30px;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
font-size: 13px;
color: #633;
}
ul a:hover {
color: #ffc;
}
#menuleft {
float:left;
background-image:url(../images/menu_left.jpg);
width:26px;
height:30px;
}
#menu a:hover,
#menu a:focus,
#menu a:active{
text-decoration: none;
color: #396;
}
.clearBoth {
clear: both;
height: 1px;
margin-bottom: -1px;
}
#wrapper {
position: relative; /* voor IE */
}
#main {
position: relative; /* voor IE */
margin-left: 25px;
margin-right: 10px;
margin-top: 8px;
display: block;
width: 360px;
float:left;
font-size:14px;
}
#leftmain {
position: relative; /* voor IE */
float:right;
}
/* vanaf hier footer */
#bttm {
width: 800px;
height: 179px;
background-image:url(../images/bttm.png);
background-repeat: no-repeat;
background-position: right;
overflow:auto;
margin-top: -50px
}
.bttm {
text-align:center;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
font-size: 12px;
letter-spacing: 1px;
word-spacing: 6px;
color: #c93;
margin-top:155px;
}Bijlagen
Laatst bewerkt:
