Ok I am not trying to get an element to a fixed position, im trying to get a div tag out of fixed position. i have a header that is at the top position relative. below it is just another div tag with content in it. when i went to preview it in IE6, the header was positioned at the very top, and was fixed. it stayed at the top when i scrolled down, but really it was position relative. no elements in my css are positioned fixed by the way. has anyone had this before and know a fix?
CSS:
#top { height: 168px;
display: block;
clear: both;
overflow: visible;
position: relative;
margin-bottom: 15px;
}
HTML:
<div id="top">
Link 1
Link 1
Link 1
Link 1
</div>
then just regular div tag underneath with content...
Wait I got it, I added position: relative; to the parent div and then it works now... wierd
Related
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
I want to customize a Wordpress theme (Attitude) in order to add a sticky footer. Unfortunately I am faced by two problems:
If there is not enough content to fill the complete page, a grey gap between the content and the footer appears: Demo
If there is enough content to fill the page, the footer is overlaying the content but I wont the footer to be placed at the end of the page, after the content
(if there is enough content to fill the page): Demo
This is my current CSS customizing:
body {
height:100%;
}
.wrapper {
min-height:100%;
position: relative;
}
#site-generator {
position:fixed;
bottom:0;
width:100%;
background-color: #fff;
max-width: 1038px;
}
Could you please help me by explaining what I can do to solve my problems mentioned above? Thank you very much.
For your Demo 1 example above please add this to your CSS style-sheet:
html {
height: 100%;
}
This will allow your body tag and it's other children to inherit the height of its main ancestor, the html tag. Extending the content to the bottom of the page. Make sure to always have height:100%for both the html and body tag, in order to have it work.
For your Demo 2 example above add this:
html {
height: 100%;
}
.wrapper {
padding-bottom: 65px; /* same value as footer .site-generator height */
}
#site-generator {
position: absolute; /* use absolute instead of fixed */
}
The reason I use position:absolute instead of position:fixed, is because fixed will always be on top in the same position in the browser viewport.
So, I have a button that is located at the bottom right corner of a page as shown in the picture ("current"):
The set up is pretty simple:
<div class="content">
Content
</div>
<div class="button" style="position:absolute;right:0px;bottom:0px;">
Button
</div>
Now, is there a way to locate the button at the bottom of "visible" screen and not necessary at the bottom of the content as shown on "need" picture?
Thanks!
I believe you are looking for position: fixed.
#myDiv
{
position: fixed;
bottom: 5px;
right: 5px;
}
JSFiddle
Yes, you can use position: fixed to attach it to the bottom right of the viewport.
selector {
position: fixed;
bottom: 0;
right: 0;
}
position: fixed
Fixed positioning is similar to absolute positioning, with the
exception that the element's containing block is the viewport. This is
often used to create a floating element that stays in the same
position even after scrolling the page.
I have this php file where I have 4 divs.
Header
Middle
Footer
Right Navigation
Now I also have a login system and when I am not logged in my middle div and footer div looks the way I want it to be. Like so:
Now when I log in, it looks like this:
As you can see, the page number at the right are being overlapped a little when I'm logged in and the border is gone. Which is probably also because of the overlapping.
Now I have made a jsfiddle but it doesn't look like it looks like when I run the php script though. I've changed the colors to make sure you see the divs although the result of the jsfiddle isn't right. The code on the other hand is how it is. http://jsfiddle.net/FcBeA/4/
Though I do think the most important thing to look at is the footer css:
.footer{
text-align:center;
clear:both;
position: absolute;
margin-left:10%;
height:15%;
width:80%;
background-color:white;
top:100%;
/*border-radius:12px;*/
}
What is going wrong?
Add z-index:-999; to your footer:
.footer{
text-align:center;
clear:both;
position: absolute;
margin-left:10%;
height:15%;
width:80%;
background-color:white;
top:100%;
z-index:-999;
/*border-radius:12px;*/
}
Ok so this might be very basic but I'm struggling here.
I've got limited space but I need a comments board so I need to be able to scroll through messages. I've got my database and php setup and the messaging works fine. I've done the layout with div's so that all the comments are within the master comments div with is set to overflow: hidden, hiding the messages that don't fit. Every message is then formed as a div (which has 2 div's inside for subject/sender and comment sections). Each of the message div's is automatically given an id by the script so I have something to target here.
What I would like to do is to have the messages scroll so that when you click 'down', the topmost message will disappear and the messages will move in line so that the next one is now topmost. Is this possible? I tried to play around with childNodes but couldn't get it to work.
Also, does my layout solution make any sense? Should I change it to lists?
CSS is
#kommentit { // <- all comments
position: absolute;
margin-top: 50px;
margin-left: 475px;
width: 400px;
height: 400px;
overflow: hidden;}
.sitoja { // <- this is the single comment binder
position: relative;
width: 400px;
background: #fff;
border-radius: 10px;
padding: 0;}
I assign id for every message so I get
<div class="sitoja" id="[i]">
in php
echo '<div class="sitoja" id="'.stripslashes($info2->id).'">';
You can view the dummy of the message board here: http://pohjis.site40.net/testi.php
There are many ways to do it.
The simplest is changing overflow: hidden; to overflow: scroll;.
You can also display: none; the topmost comment to make the lower ones move up.
And you can scroll the div with javascript.
BTW, with some adjustment of the css you don't need position: absolute; - not using that will make designing things easier.