What I have now is this page.
And I want the section title block "Employer Information" to be 40px wider than it naturally is, breaking out of its parent, as shown in this image.
Thus far I tried:
.content form ol {
position: relative;
z-index: 50;
}
.content form ol .section {
position: absolute;
left: -20px;
width: 110%;
z-index: 100;
}
And tried several other parent elements to be position:relative but it never worked.
Any idea? Thanks!
Your main class has overflow: hidden, so it's masking the parts that are outside of it. Try your code with overflow: visible on .main.
Also Use position: relative in .section, or else it will be taken out of natural flow and the rest of the content jumps up behind it.
As "freejost" said, remove overflow:hidden in the class main and add the style position:relative for li
i.e
#submit_form li{
position:relative;
}
#empInfo {
left: 0;
position: absolute;
right: -20px;
top: 0;
}
The HTML edits are :
<div id="empInfo" class="description section" >
<h2>Employer Information</h2>
<div>General information regarding the employer business or organization.</div>
</div>
This should fix it.. there are a few other edits which u have to make to make it work,but this should get you at a comfortable level
Related
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/
I'm building a web application that occupies all the browser's visible area without scrollbars. The window is divided into panes that will have their own scrollbars when necessary.
I've laid out the elements neatly with absolute positioning. Demo: http://jsbin.com/adozul/6/edit
Extract:
<body>
<header id="header"></header>
<div id="main">
<section class="pane"></section>
<section class="pane"></section>
<section class="pane"></section>
<section class="pane"></section>
</div>
</body>
#header, #main, .pane {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#header {
bottom: none;
height: 35px;
}
#main {
top: 36px;
}
.pane:nth-child(1) {
left: 0;
right: 75%;
}
.pane:nth-child(2) {
left: 25%;
right: 50%;
}
.pane:nth-child(3) {
left: 50%;
right: 25%;
}
.pane:nth-child(4) {
left: 75%;
right: 0;
}
Everything looks fine except that a wild horizontal scrollbar appears (both in Firefox and Chrome).
The weird thing is that according to FireBug, the blank space at the right side does not belong to any element on the page, and no element has any margins either.
UPD: as Passerby pointed out, there IS an element that exceeds the width, it's inside the fourth pane, so the solution is pretty obvious.
I've tracked the issue down to this rule:
.pane:nth-child(4) {
left: 75%;
}
When i disable this very rule, the horizontal scrollbar disappears. Disabling any other panes' positioning rules doesn't affect the scrollbar.
I can get rid of the scrollbar with html { overflow: hidden; }. But why does the scrollbar appear in the first place and how do i prevent it from appearing (rather then dealing with it when it's already there) without breaking the four-pane layout?
PS If you feel that the task could be solved in a more elegant way, please don't hesitate to point that out. But please take into consideratoin that i'm going to let the user resize panes with jQuery UI Resizable.
It looks like it's your <iframe> inside 4th panel that exceeds the width;
Add this
.pane:nth-child(4) iframe {
width:100%;
}
seems to solve the problem on my 1024 width screen.
http://jsbin.com/onotur/1/edit
Edit:
Seems this would be better:
.pane .editor {
width:100%;
}
I have web pages on http://rygol.cz/qlife/ and when I zoom out, the id="contacts" goes anywhere every iteration when I zoom out. I need something like
border: 0;
Because I need that text of will be every of bottom of
any ideas how to do that?
To align a div at the bottom of the content add {position: relative;} to the content div and {position: absolute; bottom: 26px;} to the div you want to align.
CSS:
#content-wrapper {
position: relative;
}
#leftcolumn {
padding-bottom: 110px; /* this will prevent the normal content in the left column to go under the aligned div */
}
#contacts {
margin-top: 0;
position: absolute;
bottom: 26px;
}
Demo: http://jsfiddle.net/NMDCF/
First of all, try to validate your HTML by using the following link : HTML Validation
try to fix those errors before trying to fix your id="contact"
as for the id="contact" use position:absolute or position:relative; that may solve your problem. if that did not work, use this display:block; or display:inline-block; both could help you achieve your goals.
I'm having CSS question on aligning an element vertically.
Please take a look at this URL:
http://leisureonly.com/gravedigger/grow-up [Possibly NSFW]
If you look at the sidebar to the right, at the bottom there's a block with an image saying 'Grave Digger'. I want this block to be aligned at the bottom of the sidebar.
I've tried wrapping it in a div and applying vertical-align: bottom to the grave-digger element, but that doesn't offer the desired results.
What is the correct way of doing this?
Well, beginning with, sidebar_gravedigger is at the bottom of the side_bar, so, the first problem is that the sidebar is that long. If you want that element positioned at the bottom of the container (the parent container of the side_bar), I recommend this:
.sidebar_gravedigger {
position: absolute;
bottom: 20px; /*container padding*/
}
#sidebar {
padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}
.container{
position: relative;
}
Something like this might help:
.sidebar {
position: relative;
height: 100%;
}
.module {
position: absolute;
bottom: 0;
}
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}