I keep staring with firebug at this page:
http://www.comehike.com/outdoors/parks/park.php?park_id=54603
and I can't figure out why the right side is overlapping with the bottom div. It might be because it is past midnight for me, but could anyone tell what is going wrong there?
Thanks,
Alex
Remove the
height:325px;
in the containing div, that comes after <!-- End of photos from this park -->. Note that it's always a bad idea to manually add style information to HTML, you should rather use classes for that.
Also, some of the syntax looks garbled:
<div width:400px;">
should be:
<div style="width:400px;">
You have a DIV with a height set of 325px;
<div style="height:325px; width:400px;">
<p></p><h2>Hikes Coming Up In The Area</h2><p></p>
.....
Removing the height or setting overflow:hide/scroll in CSS will fix this.
Related
Hi this is my first time on this page.
Lets get straight to it, I have a website http://harrimanpcrepair.com/index.php and when you look at the footer with something like firebug you can see the div footer itself not the children doesn't show up specifically cause it has no height. Also the entire footer area including it's three children aren't part of my page div. Is there a way to fix this without hacks or anything please. last time I used overflow to fix this it caused some issues on my contact page. I've been looking and see all hacks to fix this I'm really not into hacking to get what I want but rather doing it how it's meant to be done with no hidden drawbacks that sneak up on you.
<div id="footer">
<div id="footerLeft"> </div>
<div id="footerMiddle">Designed by Shawn Harriman</div>
<div id="footerRight"> </div>
</div>
I have though now decided to just force a height not realizing that it works if I do that though I hate knowing that the size doesn't affect the parent but I dont' really need it to due to the fact I don't like double lined footers. it's rare I'll ever have one so the way I have it now should work for now. Would like to hear things people have to say though and other solutions please I am still looking to fix this with better means
EDIT: I didn't feel CSS in this was very neccessary but they are floating divs within footer. They all float left while they footer itself is clear: both. Having 3 does serve a later purpose.
Try the below css for your footer in main.css
#footer {
position:fixed;
text-align:center;
width:100%;
height:20px;
padding:5px;
bottom:0px;
}
Hope this helps
I'd be glad if you could help me with some positioning. Here is the website.
Problem is my footer. I can't make it show always below container (if text container goes below img). If text is short enough to not go below img its ok. I tried many solutions, but non of them seemed to work for me. Solution to this could be making slider div with background, but I can't use it because I want it to fit the screen (so I need to use <img> inside it.) Any help would be much appreciated. Long story short:
<div id="container">
<div class="slider"><img with background</div>
<div id="page absolute div">
content
</div>
</div>
<div id="footer"></div>
Another solution could be stretching "container" height when "page" div keeps getting bigger, but its not possible (from what I know) because its position is absolute.
[EDITED]
www[dot]fami[dot]nazwa.pl/cc/apro/wp-content/themes/apro/style.css
div id dol is footer
how website looks to me: http://i.stack.imgur.com/yjY2a.png
i want footer (div id dol) to be below that absolute div with content
I see nothing wrong with your page, so I don’t understand what you are trying to do. However, have you considered using floats and clearing with your footer?
using firefox to see the code and css, I can't find a 'footer'....?
I'm having an issue with a last minute change request, basically client decided to change the footer color and I cannot find a viable solution expand it on the hole site when displaying on big screens and do not cut the color and back to the body color.
Website
I thought doing something adding the push class, however I breaks with the responsiveness of the site, I would appreciate any advice on this. I'm looking to NOT change the html or body color to white, I would like to make it work as it is.
Thank in advanced.
The site looks pretty good.
Unfortunately I don't think you can change the footer background color, and everything below it, without having to change the body color, you can easy get a work around by just adding a wrapper that starts before the header TAG and ends before the Footer tag.
<div id="wrapper">
<header>...</header>
....
</div>
<footer>...</footer>
I know this is want you want to avoid, but I don't think that there's any "better" solution, any other solution will imply Javascript to make the footer grow and it is not nice :P
Good luck
So basically your goal is to make sure that the entire footer area (from the top of the footer to the bottom of the window) is white?
If that's what you're going for, then I'm afraid that changing <body> is really your best bet (you should always assume that <body> will be dictating the footer background).
What you need to do is wrap everything above the footer in a container div, and then switch your body styling over to the container. The good news is that, depending on how your site is templated, this should just be a matter of tweaking one or two layout files.
The end result is that the background of <body> gives the illusion that the footer extends to the bottom of the window.
Like so...
<body>
<div id="container">
<!-- all your stuff -->
</div><!-- #container -->
<footer>
<!--footer stuff-->
</footer>
</body>
I have a div called #background. I have most of my content in it and I want it to resize when I add more content. As far as I know the way to do this is to assign it no height?
I have done this in my layout.css file.
As far as I can see, my #background doesnt close until after the last bit of content which is what I want, but it's not working. It seems to be just stopping after my #special offers div, I#m not sure why this is?
Colm
I didn't find any background div but a backdrop one..
I guess this is the one you are talking about. You should assign "overflow: auto;" to it.
Also make sure none of its content elements are not floated, and if there are (or better yet in any case) just put a <div style="clear:both;"></div> just before you end the #background div.
I'm having a problem adjusting the layout of my site.
I have 2 div tags, one has a welcome message and a picture. The other div is empty until the user enters information in a form, at which point I use jquery to hide the welcome message and display content relevant to the users data.
The problem is that the browser thinks it needs vertical space for both divs, even when they are stacked on top of each other, this results in a lot of empty space at the bottom of the page and a long unwanted scrollbar.
I'm using position: relative for both divs because it make the page look good on small screens and big screens that way.
I'm using left: and top: values to move the welcome div on top of the empty content div.
Thanks in advance for your help! Please let me know if you need more info. here's an example of my HTML sample_G is in front of browsable.
<div id="browsable" class="scrollable">
<div id="graphs" class="items">
</div>
</div>
<div id="sample_G">
<p class="Welcome">Welcome to the graphing tool!</p>
<img src="pics/Sample_graph.jpg" />
</div>
Just figured out a good answer... I'm going to leave this on here in case someone else has a similar problem.
Set the display of browsable to "none" until sample_G is hidden, then use jquery to 'show' browsable.
If anyone sees a problem with this or has a better answer please feel free to post.
Thanks!