Please see here: http://jsfiddle.net/gFTeG/
I'm having trouble discovering the necessary CSS to have this align to the right (I can do text-align:right; for the text inside of the container, but the container stays aligned to the left side of the action button).
Any ideas?
Thanks.
You have to use right: 0; on the .ILdropdown .ILdropdown_content class of your css, and you'll have it align to the right:
.ILdropdown .ILdropdown_content {
display: none;
position: absolute;
border: 1px solid #777;
padding: 0px;
background: white;
top: 100%;
right: 0;
}
Check this DEMO
Hope it helps!
Sorry, I misunderstood.
Add right: 0; to your dropdown, so it aligns to the right side of the action button.
If I understand you correctly, you want the dropdown menu to appear to the right of the button. As you have your .ILdropdown .ILdropdown_content with position: absolute, you could add the position: absolute to the parent class and add/change left: 100% and top: 0% to the content class as shown below.
.ILdropdown .ILdropdown_button img {
...
position: absolute;
}
and
.ILdropdown .ILdropdown_content {
...
top: 0%;
left: 100%;
}
That should give the right aligned effect, shown in this demo. You may need to add a position: relative to a parent class if you want them to align horizontally. If I did misunderstand you on the position of the drop down, simply adjusting the top and left or right attributes will position it wherever you want.
This article from A List Apart might help with the layers of position attributes. http://www.alistapart.com/articles/css-positioning-101/
Related
i have this jsfiddle which as you can see when you hover of the Link the Hidden link should display but because of the position absolute it doesnt. Any idea how to make the link display without changing the position: absolute
I tried z-index to no go
The hidden link has position: absolute; and top: 100%;, so it displays 100% from top (thats why scrollbar appears after hover). Change the top property to something different and you will see the result.
The link are displayed, but in the bottom of the page, if you change the CSS you must see the link:
.wrapper .nav ul {
display: none;
position: absolute;
width: 200px;
top: 10px;
left: 0;
}
It's actually appearing; however, it's relative to the previous element in the hierarchy that has a relative position.
.wrapper {
height: 33px;
position:relative;
}
I'm not sure which element you want it relative to. In my example, I made it relative to your wrapper.
In your css .wrapper .nav ul {}, you have the top: 100%;. If you change that to say, 100px, it shows. Of course position it where you want by adjusting the pixels.
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.
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
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
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;
}