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.
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 my page's logo and articles to be in the center of the site. At the moment everything is on the left.
I just can't make it work.
For Example I tried to delete the wrapper and set margin-left:auto; margin-right:auto; in the logo's class. nothing works.
And for the posts i just don't know where to start. probably i would have to put everything in a container and make that central? (There should be three posts in a row, at the moment the theme stacks them up to the right screen border if you have a big screen)
Thank you so much.
EDIT: The Text align in the image class did the job. Thank you guys, question answered!
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
That will do it for you :) Your header takes up 100% of the space, so the content inside has no fixed dimensions to center against. The text-align value assists with that.
Try:
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
To center the logo you can do the following in CSS:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
The img element is inline by default, which means your margin styles won't be applied to it. When it is set to block level the margin settings will work.
To center the articles I suggest you give a width to the container div like this:
#post-area {
width: 85%;
margin-left: auto;
margin-right: auto;
}
I'm not sure if that's the best way, but it seems to work.
I am working with the site cardinalmma.com/ but you can see that the menu is not centered. For example see the news menu its in the left portion but with some padding. I want it to be centered can anyone help me.
thanks
Somdeb
You want the individual navbar labels centered, correct?
li.menu-item {
text-align: center;
}
This targets the <li> tags in your menu, identified by the .menu-item class. The text-align: center; rule takes care of centering the <a> tag with your text in it.
In my browser, this modification makes it look like this:
Try something in your css stylesheet to make the menu items be align center.
try something with the class menu and the li part:
.menu {
text-align: center;
}
Or something in that direction
Please update your css. This should resolve your issue.
.menu_top a {
color: #eee;
font-weight: bold;
line-height: 3.4em;
padding: 0 14px;
text-decoration: none;
height: 50px !important;
text-align: center;
display: block;
}
.menu_top ul ul li a {
text-align:left;
}
To center the navbar labels use this css courtesy of Surreal Dreams:
li.menu-item {
text-align: center;
}
Now to elaborate on how to find this solution. The best way to edit/develop CSS for wordpress is to use firebug or Chrome's developer tools to find the element you want to modify.Then you can add CSS right there and see the results real-time (these changes are not permanent). I would say it is likely this is how Surreal Dreams found the solution.
If you want to learn more about using the Chrome dev tools tool go to this page: https://developers.google.com/chrome-developer-tools/.
If you are new to CSS (I dont know if you are new to CSS or if youre problem is strictly editing CSS) for wordpress you should go check out http://www.codecademy.com/tracks/web
Im a beginner when it comes to building a site. Thats why i choosed to build with Wordpress.
The thing is that i got i responsive theme that should work with any browser.
I upload a logo by going to appearance>Customize>upload logo.
With Crome it looks great:
But with firefox, Iphone safari and IE it looks bad:
http://imagizer.imageshack.us/v2/800x600q90/838/8tl2.png
I've a Childtheme, and the only code i've put in is to get the logo to display a bit more towards the middle:
#import url("../realia/style.css");
.logo-wrapper { position: relative; left: 10%; }
Why is it looking like this, ive tried with .clearfix codes and to change the image height etc.
Have a great day and thank you in advance!
Just remove the height from your,
.logo class
Height is causing issue on Chrome as well, while resizing the window. Image is not able to resize. So, remove the height in px.
Good luck!
I have just checked your theme out, and noticed this class:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
float: left;
height: 90px;
line-height: 90px;
margin: 0;
}
Remove the height: 90px and it should look good in all browsers!
Remove float: left from the logo.
e.g:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
height: 90px;
line-height: 90px;
margin: 0;
}
I have recently faced this issue when my logo was not showing up properly in internet explorer, try with this code hope this will work.
max-height: 100% !important;
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;*/
}