I have tried the following approaches but they do not seem to work for me (I'm sure I am doing something wrong - I need help in figuring out what it is). The image is in the HTML header section (not body).
I have bootstrap in the HEAD section (before the image and it gets picked up from the browser cache so hopefully it gets used for the image in the header)
I have tried adding the following to the CSS for the image (and when it did not work, I tried adding a div around the image and assigned the class to the div):
display:inline;
text-align:center;
margin:auto;
I also tried the following in the CSS when option 2 did not work:
display:inline;
margin:auto;
horizontal-align:center;
I tried display:block in place of display:inline as well. Any thoughts on fixing this (specially without relying on bootstrap would be quite welcome). Thanks in advance!
General css properties for centering elements:
{
display:block;
margin: 0 auto;
}
First, you can't set a margin on an element that is set to display:inline.
Here is a great guide that you should read:
http://www.tipue.com/blog/center-a-div/
Place the image in a div, and then put text-align:center on the div. That's it.
http://cdpn.io/aDBhq
Related
I'm trying to make all product images the same height. I feel like I should just be able to add the following to ".product-image":
height: 300px;
width: auto;
position: absolute;
but that doesn't work here.
Here is a link to the page with the issue:
http://www.hothothot.com/shop/product-category/enter-at-your-own-risk-10/
How can I make these images the same size? again, I think that they should be governed by .product-images, but the only thing that seems to work is when I change the more generic "img" for media=All which then messes up other images on the site.
Please help. Thanks!
Remove height:auto; in your code and if you want a specific height on it then use height:50px; or whatever you would like.
img{
border-style:none;
vertical-align:top;
max-width:100%;
height:auto; // <--- Remove that
}
Online tools like picresize are great help in your case http://www.picresize.com/. You can resize the images so even with height:auto; it would work perfectly.
You can reference them via
.product-images img {
// css here
}
There appears to be no class called product-image, so this references any image within the a tag with the class product-images.
However, increasing the height when all the images are different sizes and the outer tag has a max-width may well lead to some images being stretched and looking odd.
Stretching small images can also make them quite blocky.
If the idea is for a tidy alignment, you are probably better setting a height on the .product-images tag and making the images vertically align within it.
(Also, the simplest way to make them the same size may well be to edit the images and upload them the same size)
The product-image class is on the link that surrounds the image.
The image itself has two classes: attachment-shop_catalog and wp-post-image.
So, you could try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px;
}
The other issue is that the img has width and height specified in the html.
To make sure the image scales properly you should set the width to auto.
Try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px !important;
width:auto !important;
}
I added !important so that it will override the hard coded html dimensions.
Hope this helps
The website I am making is here: diyhelp.es
If you re-size the browser you will see the white background behind the content actually get smaller (even though the div gets larger) I've looked in the CSS and cannot see a problem. Since I don't know what is causing it I cannot paste any code (unless you want me to paste the full CSS?).
It's only a plain white background - no image.
In your css.css find line:438, that looks like this:
section.content, aside.sidebar, .footer-col { float: none; width: 100%; }
remove the float:none; and it should solve your problem. Why? I'm not sure totally, but float:none; is known to mess up other floating divs. It is better not to use it. I can't even think of a reason why you might need it. In you markup, you don't need it there, because when floating div is set to width:100% there is no room for anything to float beside it anyway.
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
I was just reading this article :-
http://css-tricks.com/perfect-full-page-background-image/
Please note this css :-
#bg td {
text-align:center;
vertical-align:middle;
}
What is text-align doing in here? If i just remove that property, it stops working. CSS can be quiet difficult to understand sometimes :(
Thanks in advance :)
Image elements are inline-block by default which basically means that things that normally apply only to text applies to images as well, but it also means that you can put e.g. padding and margin on the element, which you cannot put on elements that are normally "inline" such as span.
So what I'm trying to say is that since images are inline-block, the CSS property text-align applies to them.
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.