This is just a simple question about a gap in the divs’ layout. What you see at the page here is the header section. Obviously, it’s a brand new project. You can see the gap between #headerbody and #headerbotm divs. I’m wondering what is the cause of that gap. This should be pretty simple, but I’m still stuck trying everything I can think of.
Oh, and also, I’d like to keep #headercontainer on fixed positioning, so it stays in the same place as the user scrolls down the page of content.
p tags have a default top margin on them. Typically you should use a reset so you don’t run into these issues. However, overriding the margin on a case by case basis will also work.
OK, Ty. Obviously I’m not sure what the finished product is supposed to look like, so I threw together a few things mainly to give you some code to compare and play with (consider). It isn’t supposed to make sense.
/* Ship-a-motor.com and ship-an-engine.com site design */
body {
padding:0;
margin:0;
}
#headercontainer {
height:182px;
border:2px solid #f00;
background:url("headertop.jpg") repeat-x 0 0,url("headerbotm.jpg") repeat-x 0 100%,#096;
position:relative;
padding:0;
margin:0;
}
#logocontainer {
width:50%;
position:relative;
padding-top:28px;
}
#logocontainer a {
display:block;
color:#0f3;
font-size:1.625em;
text-align:center;
padding:0;
margin:0;
outline:1px solid blue; /* TEST Outline. ToBeDeleted */
}
#logocontainer a:hover {
color:#0f0;
text-decoration:none;
}
/* mac hide */
#logocontainer a {overflow:hidden;}
/* end hide */
#logocontainer a span {
background:url("headerlogo.jpg") no-repeat 0 -290px; /* 660 x 370 */
position:absolute;
left:0;
width:428px;
top:28px;
height:80px;
outline-:1px solid white; /* TEST Outline. ToBeDeleted */
}
#logocontainer a span:hover {
background:url("headerlogo.jpg") no-repeat 0 -210px; /* 660 x 370 */
}
p#slogan {
position:absolute;
bottom:20px;
left: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:1.625em;
font-style:italic;
color:#cc0;
margin:0;
outline:1px solid yellow; /* TEST Outline. ToBeDeleted */
}
I did not attempt to create a fixed header without knowing the exact height desired and more about the graphics. May I assume this is supposed to be a fixed width site? If not, you are presently allowing for a tall header that will use up a lot of screen space on smaller devices. Maybe you have something else in mind.
PS: the margin issue was about an “escaping” margin, not a “collapsing” margin (commonly misstated).
Hi Ronpat, and thanks as always for your continued support.
I will plug the new CSS in and work from there. I do want to switch as much units of measurement to % as much as possible, but I’m just in the stage of putting the initial layout, which I’ve seen some other responsive designers use pixels in the initial design.
The goal of the header is to have it sit in place on top with a logo picture. When user is scrolling, the menu stays at the top as the content scrolls under it. The logo that I am trying to place inside #headerbody is located here. I want First Rate Logistics text as an underlay, but I don’t know if I should use an h1 element. Similar things I’ve implemented are located at the h1 header at the WRG home page (the old version), but also you might take a look at the home page link at the bottom that has the hover effect on my section pages.
Ah, I do see the logo image making an appearance. I changed up the image. The main one to be displayed was way too large, so I sized it down, and I changed the CSS up to only show the top image. The smaller sprite available is in the graphics just to switch to when the viewport height is smaller (instead of showing the globe logo image, showing would be the slimmer one). I am also trying to make this logo change to its sprite effect when it is clicked. Simply hovering over the image and it changing is just a bit much and could be a little annoying to the user. Targeting the hover state on the logo has been much better for testing, though.
