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>
Related
This is my HTML structure for my site
<body>
<div id="container">
::before
<header></header>
<article></article>
<article></article>
<article></article>
<article></article>
<footer></footer>
</div>
</body>
The header is normally position:fixed but on short viewports it's static so it scrolls out of view as normal.
#container::before has my site's photo background, position:fixed, so that it remains in place while the glass-effect opacity:.9 <article>s scroll over it. It's maybe a bit old-school, but it's a pleasing effect that I like and want to keep.
It's important to me though, that the background photo starts immediately below <header>, without any of it being cropped off underneath that element. This is easy enough by modifying the top rule of that pseudo-element to match the (set) height value of the <header>.
...right up until the point where the position:static <header> scrolls off the page on a short viewport.
What I want to happen
I'd like for the background to scroll up along with the <header>, up until the point that the <header> is off the screen, and for it to then stick in place, as if it had position:fixed;top:0.
What's my best option so far?
top:0 on the pseudoelement background if the <header> isn't fixed. It works once the header is off the top of the screen, but it means an important part of the photo is cropped off when the header is on screen.
I could fix this with a JavaScript on-scroll event, but I know that'll be jerky and unperformant. Is there some CSS trickery I can pull with my current HTML setup to overcome this? Even if it's only supported in some browsers, it'd be better than nothing.
I'm working on a mockup but keep running into issues with the navbar and main content layout. The page needs to look like the mockup image below on desktop.
I've tried everything I can think of and read up on the bootstrap site but continue running into problems.
First the navbar should be fixed so it scrolls with you. I've copied from one of their templates but it doesn't scroll like the demo unless I change it to pull-right. But if I use pull-right it removes the top spacing and first container spacing needed. I've tried the body tag padding-top but all it does is create more space between the nav and main container not above the nav.
The other issue is the row and column layout in desktop. The col-md-8 doesn't line up with the other col-md-4. It looks ok in mobile with 320 wide.
I'm pulling my hair and not sure what needs to fixed. If anyone can spare some time and have a look I'd really appreciate it.
Live links to the files are below.
link to image mockup
link to live webpage mockup
link to css override
On your CSS override you have the attribute .navbar (position:relative;) This overrides your navbar fixed top property.
As far as your col-md-4 goes..you have it wrapped in an html descriptor..which is this: <!-- -->. This just gives descriptions of what html attribute is listed. These descriptors are on a lot of your actual html and need to be removed in order for the code to work properly. Remember though some of them are actually descriptors...like <!--fixed navbar-->
hii just checked your live website all problems is the way you are using div tags .. so for first section of image and nav bar it should be in one div tag
<div class="col-md-12">
<div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY
</div>
</div>
and soo on
HOPE THIS HELP IN YOUR FORMATTING OF PAGE
Everything seems to be fixed now. Perhaps the biggest issue I was having was getting the navbar in proper locations both desktop & mobile. Originally I was using an override for .nav to modify the margin in order to get the placement right in desktop, but in mobile view it would be in a different position, not to mention it kept sharing the margin ratios of 80px top and 120px right. This would force the toggled menu to be 80px further down rather default 0px. I couldn't figure a way around this so I figured why not try adding a div tag just for the margin spacing. Apparently this seemed to work after adding new info into the media queries. Also fixed a spacing issue when in tablet widths with nav and hero image.
As for the rest of the layout, I used col-md-3 and col-md-7 which pretty much lined everything up right away except for some padding needed. Everything else like h1 and h3 I used a simple class for mobile to adjust the margins again.
If there's an easier way or more efficient way of coding this I'm open to suggestions if anyone has some. Updated Live Link
Somewhere along the way something went wonky with the CSS on this site. One some posts, the side bar is in the correct position to the right: http://emgraphics.net/legacyjar/category/the-civil-rights-movement/. But on the Pages and other Posts, it has scooted below the #wrapper area (http://emgraphics.net/legacyjar/). I had only made changes to the #comments section css but I don't see anything there that could have affected it. Have fooled around with all the elements' widths, clear settings, etc. and just cannot nail this down. Any help is appreciated!
Two things:
You're making your CSS work harder than it has to. You're setting container to 100% width then trying to use negative margin to give the sidebar room. Instead, give the main container a set width. Your site isn't fluid, so make life easier for yourself!
Here's the relevant CSS:
#container {
float: left;
width: 720px;
}
You're prematurely closing one of your divs. You have one too many close divs somewhere in the page that has the sidebar pushed down. If you're in FF or Chrome, hit F12 and investigate the sidebar nav. You'll see the div isn't in #main on the bad page, but it is on the good page.
It's not the CSS, it's the HTML layout.
<div id="primary" class="widget-area" role="complementary"></div>
is supposed to be enclosed within
<div id="main"></div>
like so...
<div id="main">
<div id="primary" class="widget-area" role="complementary"></div>
</div>
but on http://emgraphics.net/legacyjar/,
your primary div is outside of the main div like this...
<div id="main"></div>
<div id="primary" class="widget-area" role="complementary"></div>
Once you move the primary div back inside the main div, everything should work fine.
Ahha! This would all make sense if it was a standard html site. But I'm using a generic twenty-ten template for WordPress with css that I've edited. All the pages have the same index/head/sidebar php files. However, there was an extra div tag on the comments.php file. So pages where comments were not allowed worked. But pages/posts where they are allowed went wonky, EVEN if there were no comments OR even a comment form visible. Thanks for the tip-off on the extra div tag!
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.
Basically I'm having some problems with Z-Index. Although I'm not amazing at CSS I would reckon I was reasonably good, but really can't work this out.
You'll see at the URL...
http://howcode.com/code/
... that my problem is that links in the returned 'Popular' results aren't clickable or anything. I've concluded this is due to their Z-Index being messed up. I had to fiddle and tweak with Z-Index to get the tabs - Popular, Top Rated, Featured etc. - to show above the codebg div.
When I adjusted the Z-Index so that the results were definitely on top, they acted as normal - text could be selected, the ratings images hovered, etc. etc. However the downside to this was that my Popular, Top Rated, Featured tabs were all placed BENEATH the background image for the returned results.
If anyone can post a workaround or alteration to my CSS that would be much appreciated.
Please don't forget this is a test site and design and any other URLs are likely not to work, I haven't uploaded any database configs yet or whatever!
Attached are a couple of screenshots to clarify what I mean:
This is what I WANT to happen (not that in actual fact in this screenshots link aren't clickable, just to demo my point though):
This is what DOES happen when I adjust the Z-Index properties (I don't want this!):
Thanks y'all!
You need to remove this:
z-index: -1 !important;
From your .codebg class, which will result in your #2 screenshot above. (As a side note the children can't have a higher z-index than their parent, so everything inside .codbg is -1, behind the page) Then, you need to fix the tab images :) The problem is not that they're behind the background, it's that they're transparent, and look darker on top of a darker background. Here's the image (may change in this answer once you update it, pointing directly to it):
alt text http://howcode.com/images/tabs.png
They look fine here because of the white background, but if you open them up in an editor, you'll see they're transparent, just make the the three tabs fully (or at least more) opaque since that seems to be what you're after.
not the best solution but here it goes.
inside the content div move tabs div after codebg so this
<div id="content">
<div id="tabs">
</div>
<div id="codebg">
</div>
</div
becomes this
<div id="content">
<div id="codebg">
</div>
<div id="tabs">
</div>
</div
then add to #tabs
position:absolute; top:232px;
to #content
padding-top:53px;
this is a quick and dirty fix. otherwise you have to rethink your whole layout
You could also put your background-image from code-bg on content instead, and adjust content's width and border-radius