I've come here before with great results and appreciate the help. I've been searching and searching through my code to figure out what is going on and I can't quite get it. At my site http://www.hirelogo.com underneath the navigation there is a random space insert. I've removed div ".top" as I thought maybe that was causing the issue, but this is not to my knowledge. I've been dissecting with firebug, but find no overlap issues that may cause this. The area of random space I'm referring to is below the navigation "home,design team..ect" and the "step1, step 2 graphic" . I hope someone give me a little nudge to whats going on here.
Thanks
The following div is causing a space of 8px.
.top {
clear: both;
height: 8px;
margin-left: auto;
margin-right: auto;
width: 920px;
}
The image to the left has padding and line-height added to it as well:
.descrSplash {
clear: both;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
line-height: 150%;
padding-top: 40px;
width: 436px;
}
Finally the right image has 10px added above and below it. Also the image is large and can be cropped to raise it up unless you want to set a negative margin.
Related
I have a checkout system I am designing and I cannot get the footer to not eat the bottom div I have setup, unless I continually adjust the margin-bottom figure.
I have three divs nested into one. These nested divs show/hide as I proceed to the next one. The only one I will ever have an issue with is the last one because it will never be static. I use it to show a customers order, so if they have 10 different products then 10 images, name, price, etc show.
Every other area of my site that gets new things added to it, the footer responds and continuously goes down.
My fiddle isn't the best and my issue is really hard to generate as it isn't a static issue. Two products could be added and it would be fine.
https://jsfiddle.net/pfar54/rc5yffy7/
.footerOut {
width: 100%;
background-color: #202020;
position: relative;
padding-top: 30px;
left: 0px;
right: 0;
margin-bottom: 0px;
bottom: 0px;
clear: both;
}
.footer {
height: 420px;
width: 960px;
}
/*----------Main div for Checkout Process--------*/
.checkoutprocess {
margin-bottom: 150px;
display: relative;
}
I have set everything to relative...added padding: bottom (took it out because it didn't do anything). Everything I try doesn't help.
The height of the container and border are irrelevant as I am just using those to test.
Anyone see why?
I guess Your problem is footer is overlapped with content, And I found some Html Dom Structure issues ans css property Mistakes, I have cleaned up your code please verify this link below in comment
Hi I have a website I am trying to tidy up. I have tried resetting all the margins, paddings, specifying size etc. All haven't lined up these buttons.
It can be found on this link: http://hpif.propertyinfrance.co.uk/app/index.php?action=details&pid=42052&res=rent
Just under the title you will see a "<back" button this needs to be inline with the larger button like divs below it. For some reason nothing I do will get it to line up.
Can someone point out where Im going wrong?
You forgot to add float left to your back button.
#backbutton {
width: 50px;
height: 45px;
margin: 0px;
padding: 0px;
overflow: hidden;
z-index: 199;
float: left;
}
http://booksandloafers.blogspot.co.uk/
As you see, underneath the search bar there is a gap before posts start. My layout is from a template, and the gap was created when I removed some gadgets from that area.
I would like to know if there is anyway I can remove this space without having to put those gadgets back in?
I am for sure a HTML novice, but I've tried other suggestions such as 'overflow: hidden;' but I have not found anywhere that worked. Any advice would be helpful! :)
Remove height from banner id
Change
#banner {
height: 300px;
margin-bottom: 30px;
margin-top: 20px;
width: 940px;
}
to
#banner {
margin-bottom: 30px;
margin-top: 20px;
width: 940px;
}
When working with HTML/CSS, I prefer to use the "inspect element" feature when working in Firefox/Chrome.
It allows me to noodle around with a problem without saving my work, so that I can figure out what's causing my problem(s).
In your case, #banner has a height of 300px, which is causing your current problem. Remove it from your CSS and things should look normal.
I'm making a tag-cloud-esque display of words, each contained within small divs, and floated so that many appear on each line. However, if I start changing the font size in some of the divs, the line structure gets broken up and huge gaps appear, as in this screenshot:
Can anyone offer any advice on how to resolve this? I'm not looking to do anything fancy, like having multiple lines of smaller tags alongside larger ones: I just want the divs to obey a normal looking line structure.
Here is the relevent css:
div.example {
background-color: #8C7D80;
padding: 2px;
margin: 2px;
float: left;
color: #96888B;
text-align: center;
position: relative;
}
Try upping the line-height.
The brackets seem too be too large, thus breaking the line.
div.example {
// other stuff here
line-height: 1.5
}
Is it possible you have set a fixed line-height?
I would suggest setting the height explicitly and/or changing the line-height property.
div.example {
background-color: #8C7D80;
padding: 2px;
margin: 2px;
float: left;
line-height: 25px;
height: 25px;
color: #96888B;
text-align: center;
position: relative;
}
I have a movingboxes jquery plugin on my web site, and the left side of the panels in the box are shifted over approx 40px.
I suspect this has something to do with my stylesheet padding something but I can't seem to find it. Can anyone explain what is shifting this over?
My site is www.generationd.com and the movingboxes is found at Products | High Availability Asterisk, then click Screen Shots tab.
Thanks!
If you are referring to the weird space on the left of the screenshots slider thingy, the offending css seems to be:
.mb-scrollContainer, .mb-scroll {
width: 830px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
position: relative;
left: -35px;
top: 0;
font-size: 18px;
}
It's a bit half assed as i changed the width to acomodate pretty much the width of your slider thingy, and had to move it 35px to the left.
It may take a bit more work, but at least you have an idea of where the problem is.