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;*/
}
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.
Hello I need help setting the .content and .footer to stick to the bottom of the page.
I did a WordPress template.
my website
you can see the black line is not all the way at the bottom. I add CSS to the .footer
clear: both;
position:fixed;
right:0px;
left:0px;
bottom:0px;
which did the trick but only to the footer. the .content which is the center screen in cut off. the only way to bring it down is by setting the min height to a higher number. please help
Thanks You
You can do the same thing to the content class:
.content{
position:fixed;
bottom:0;
}
Keep in mind, the moment you do this, the content div will disappear since you have nothing in it. In this case, just add a min-width.
Wondering if anyone has a solution for this.
I would like to present an archive of thumbnail images oldest at the bottom and newest at the top. I would also like the flow itself to be reversed... something like this:
The page should be right aligned, with future images added to the top of the page. I am creating the page dynamically with PHP pulling image filenames from a MySQL DB. The catch here is I would love this layout to be fluid, meaning most PHP tricks for counting images and building the HTML accordingly go out the window.
Is there a way to do this with Javascript or even just CSS?
See: http://jsfiddle.net/thirtydot/pft6p/
This uses float: right to order the divs as required, then transform: scaleY(-1) flips the entire container, and lastly transform: scaleY(-1) again flips each individual image back.
It will work in IE9 and greater and all modern browsers.
CSS:
#container, #container > div {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
#container {
background: #ccc;
overflow: hidden;
}
#container > div {
float: right;
width: 100px;
height: 150px;
border: 1px solid red;
margin: 15px;
font-size: 48px;
line-height: 150px;
text-align: center;
background: #fff;
}
HTML:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
..
</div>
CSS Flexible Box Module was made for this type of thing. See a quick example I whipped up: http://jsfiddle.net/c6QLC/2/ (look at this in Firefox)
Now the bad news: you can't really rely on it yet. Not only is the spec being rewritten, the current implementation doesn't support box-lines (which I did include in the example), which would allow the items to be in multiple rows as opposed to being overflow.
The new spec is being written into dev versions of some browsers, so it will happen. It's just a matter of time.
In the meantime, perhaps something like Isotope might fit your needs.
Should you want to check out the spec, you can find it here: http://www.w3.org/TR/css3-flexbox/
This can be solved with jquery masonry plugin. It's a bit like isotope but free of charge for private and commercial users.
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.