- This topic is empty.
-
AuthorPosts
-
June 30, 2008 at 9:39 pm #22867nickcallaghanMember
I’m trying to develop a american football themed site for a friend who’s looking for a website for his amateur team.
I have a gap between the footer div and the div containing main content but just cant work out what is causing the gap. I want to move the blue footer section so that it is flush with the white content section, removing the gap which shows the grass background underneath.
Any suggestions would be most appreciated!
[img]http://i101.photobucket.com/albums/m52/nickc01/jets.jpg[/img]
html:
Code:
A Cool American Football Website
Last Match
Jets :49 Rockets: 10 Next Match
Jets vs Cannons Another Victory for the Edinburgh Jets
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
©Footer Goes Here
CSS:
Code:@charset “utf-8″;
/* CSS Document */
* {
margin:0;
padding:0;
}
.clear {
clear:both;
background:url(images/body-bg.png) repeat-y;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}body {
background-image:url(images/bg.jpg);}
h1 {
font-size:1.3em;
}p {
margin:15px;
padding:15px;
color:#666666;
}h1, h2 {
margin:15px;
padding:15px;
color:#0066FF;
}h3 {
margin:5px;
padding:15px;
color:#0066FF;
}
#page-wrap {
margin: 0 auto;
width:683px;
}div#header{
background:url(images/header.png) no-repeat;
width:691px;
height:206px;
}ul#menu {
list-style:none;
margin-top:150px;
margin-left:410px;
position:absolute;
top:22px;
}
ul#menu li {
display:inline;
}
ul#menu li a {
text-indent:-999px;
display:block;
width:86px;
height:20px;
float:left;
}
ul#menu li a.team {
background-image:url(images/images/midnav-normal_01.png);
}
ul#menu li a.results {
background:url(images/images/midnav-normal_02.png);
color:#CCCCCC;
}
ul#menu li a.news {
background:url(images/images/midnav-normal_03.png);
}
ul#menu li a.team:hover {
background-image:url(images/images/midnav-hover_01.png);
}
ul#menu li a.results:hover {
background-image:url(images/images/midnav-hover_02.png);
}
ul#menu li a.news:hover {
background-image:url(images/images/midnav-hover_03.png);
}#main-content{
background:url(images/body-bg.png) repeat-y;
padding:50px 20px 0 0;
padding-left:30px;
}#scoreboard {
width:185px;
padding-left:20px;
padding-bottom:20px;
}div#score-top {background:url(images/one.gif) no-repeat; height:20px;}
div#score-mid {background:url(images/scorefill.jpg) repeat-y; color:#FFFFFF; font-family:”Courier New”, Courier, monospace; padding:10px;}
div#score-btm {background:url(images/scorebottom.jpg); height:92px;}div#score-mid table{
margin-left:15px
}#footer {
background:url(images/footer-bg.png) repeat-y;
text-align:center;
padding:10px;
clear:both;
}July 2, 2008 at 12:46 am #48296nickcallaghanMemberhey cybershot many thanks for your help! Space now gone and page looking good.
I wonder if anybody could clarify something for me and help fill in the gaps in my understanding of the box model?
It was my assumption that as the that as the margin was applied to the <p> tag and it was within a <div> i thought that there would be a 15px margin between the end of the <p> and the end of the containing <div> leaving the footer <div> flush against the <div> before. Where am I going wrong :-)
Thanks, Nick
July 2, 2008 at 5:35 am #48304koewnetMemberThere’s tons of explanations out there when it comes to the Box Model. Wikipedia has a good and neutral article about it too.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.