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!
Related
I wanted to create an html page where I want a full screen image on the first section.
<header>
<div class="menu"> </div>
<div class="logo"></div> <div class="sub-menu"></div>
<div class="main-banner"></div>
<div class="bottom-menu-bar"></div>
</header>
Here, I want the main-banner to be flexible according to the screensize. This image should auto-adapt to the screensizes. The bottom-menu-bar should be always at the bottom of the splash page (first view section of a loaded webpage) but go up as we scroll down along with the main banner.
How can I achieve this? (A good example is PayPal website-though I inspected the elements but hard to understand it. Any quick and easy way?)
Thanks for your help. If Any information is needed, just let me know. I found similar questions some other websites but not a clear answer.
To get the bottom-menu-bar to stay at the bottom of the page add this css:
.bottom-menu-bar{
position: fixed;
bottom: 0;
}
To get the main banner to be resizable use width:100%; instead of an explicit width like 600px.
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'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 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