Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
Related
Problem
I have a header with the basic HTML structure
<div id="header">
<div id="logo"></div>
<div id="navigation"></div>
<div id="userInfo"></div>
<div class="headRight"></div>
<div id="callCenter" class="headRight"></div>
</div>
I cannot change the HTML. Currently it is laid out with floats, and navigation was aligned to the bottom of the header using padding-top. However, it only works when userInfo is 2 lines, and it can be 3 or 4.
What I need to do
Using only CSS, align navigation to the bottom for all nav heights while maintaining the original layout.
What I've tried
Half a dozen stack overflow solutions including the classics position:absolute and vertical-align:bottom on parent. (The former breaks the document flow, and the latter seems not to work because other elements get in the way.)
The fiddle
Cleaned fiddle best I could, but inspect will probably still be easiest.
https://jsfiddle.net/ohrhe4u5/1/
Notes:
The tabs should just touch the bottom of the header.
callCenter is misaligned in this example as well, but you can ignore. It's much lower priority.
New fiddle
I changed header, logo, and navigation to display:inline-block, allowed userInfo to float right, gave the nave extra height to make sure there's always room, and absolute positioned the headRight items.
That leaves me with this. A little janky due to the absolute positioning and forcing the nav height larger. Any better ideas?
https://jsfiddle.net/ohrhe4u5/2/
I generally dislike float for positioning where i can help it (this is a personal preference because i find it sometimes painfully unpredictable), as such, using a combination of position:absolute, min-height and margin i believe i have recreated what you're after.
Basically this solution works by position:absolute'ing the elements that we have some idea of consistent sizes of (the logo and the navigation), then have the header element take its height from the user data and links on the right. We add a min-height to the header element though so that should the user data be reduced to 2 lines, the height is still enough to accommodate the absolutely positioned elements (given they no longer affect the height of the header element by being absolute).
JSFIDDLE
CSS
/* new parts of the css */
#header {
min-height:112px; /* in case user data is made smaller */
padding:10px 10px 0 20px;
position:relative;
}
#logo {
width: 210px;
position:absolute;
top:50%;
width:210px;
height:62px;
left:20px;
margin-top:-32px;
z-index:1; /* bring logo above the user data */
}
#navigation {
position:absolute;
bottom:0;
left:210px;
font-size: 20px;
height: 40px;
z-index: 1; /* bring navigation above the user data*/
}
#userInfo table{
margin:0 0 0 auto;
}
.headRight{
text-align: right;
padding-bottom: 0.2em;
}
I am having a problem with my footer. I have a page with some content and on some devices (like mobile - in zoomed out view), my page content does not fill parent device height while on some devices, it does.
The footer is creating a problem with these different heights. When the content doesn't fill the parent device height, the footer is shown correctly at the bottom of the page but when the content fills the parent device height and overflows, the footer is shown over the content.
Footer with content not filling Parent height (shows correctly)
Footer with overflown content (doesn't show correctly)
Picture quality is not that clear but the issue is clearly visible.
This is the CSS code I have been using till now.
#footer{
display:block;
margin-right:auto;
margin-left:auto;
position:absolute;
bottom:0;
height:100px;
width: 60%;
text-align:center;
color:green;
font-size:18px;
font-family:Times;
}
How can this be fixed? I want to show the footer at the end of the page when content is overflown.
on your #main element right before the footer (assuming you are using id="main" for the item with the green border, do the following:
#main {
margin-bottom: 100px;
}
EDIT:
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
#wrapper {
position: relative;
padding-bottom: 110px;
}
whenever you position something absolute you take it outside of the DOM, meaning in this case it sits bottom 0 (based on your css) to the the nearest relatively positioned element. I put the footer html after your wrap or content block and just have it centered by saying
margin 0 auto;
If you need the footer to be absolutely positioned, you could always add a margin-bottom or padding-bottom to the body element. Just make it the 100px of your absolutely positioned element and it should force the content above your positioned element.
Alternatively, you could just set the footer to be positioned static, but you'll lose the ability for the footer to be at the bottom of the screen when your content is too short.
I do not understand why a <footer> element in my code is not located at the very bottom of it's page.
Here is a fiddle:
http://jsfiddle.net/Kd5Xx/
I've set the position of both the footer and its parent, and i also gave it a specific height. HTML and body are set to height: 100%.
So why does this not work?
you have to make position:absolute; http://jsfiddle.net/Kd5Xx/1/
footer {
position:absolute;
}
I've been working on a website with a pretty standard layout, header, content, footer, each being a DIV with a 900px width inside of a page-wide DIV, just like the one described in this question:
Full width background, without a wrapper
Now the problem itself is that whenever the browser window becomes less wide than the specified DIV width (900px) the background of the wrapper seems to disappear, showing the background color of the website itself. This also happens while using the code in the aforementioned question.
This is the CSS code:
#headerwrapper {
height: 229px;
background: url(imagenes/header.gif);
background-repeat: repeat;}
#header {
width:900px;
height:229px;
padding:0px;
margin:0 auto;
}
And this one is the HTML code:
<div id="headerwrapper">
<div id="header">
Content goes here.
</div>
</div>
Any suggestions are appreciated.
you probably can't see the background in the scrollarea. You need to set min-width: 900px; or max-width: 900px; so that the background will be shown in the scrollarea.
If you do not specify width for the #headerwrapper, browser makes it 100% of parent container (div or body). So if width of view area is less than 900px - #header becomes wider than #headerwrapper, so background is not showed for overlapped part. You may add overflow:auto; to #headerwrapper so scrollbars will appear, but i do not think that is a solution. So it is better to add background for the #header or add min-width for #headerwrapper.
P.S. Specifying
min-width:900px;
width:auto !important;
for #headerwrapper should do the trick.
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;