I installed this plugin on a theme. This theme had a slider, but I didn't like it. So I installed this one.
http://wordpress.org/extend/plugins/content-slide/
I tried using this
#wpcontent_slider_container{
position:relative;
margin: 0 auto;
}
And this
#wpcontent_slider_container{
position:relative;
margin-left:auto;
margin-right:auto;
}
And nothing happens.
Do I have to put something in div?
Change width
#wpcontent_slider_container{
width: 500px;
margin:0 auto;
}
I had the same problem. This is how I solved it:
#wpcontent_slider_container {
margin-left: auto !important;
margin-right: auto !important;
}
#wpcontent_slider {
/* Your styling here */
}
Without the "!important" thingy the CSS didn't work fo me either.
In #wpcontent_slider_container's parent element add
text-align:center;
to center align your #wpcontent_slider_container
If you know the width of the slider, here is a little fix that worked for me when center align was being stubborn.
#sliderDiv{
position:relative;
left:50%;
margin-left:-(half the width of the div);
(ex. if div is at 500px it would be margin-left:-250px;)
}
It's not pretty, but it works. You might have to hide the horizontal overflow of the outer container though.
#wpcontent_slider_container{
text-align: center;
}
or use <center> Tag
Finally I can fix the problem with the slider ubication in my web page.
Just modify the style.css , .main_img { float:left; margin:15px 10px 0 60px}, change the values.
Using the 'margin-right' and 'margin-left' on auto !important worked for me as well. It actually also worked even without using the !important command.
Related
My website I'm creating for a company looks great but I just don't know the right CSS to put in the to make the "WELCOME" title show underneath. I understand that I should put a height, but then if I do that it will show a height for all pages as it is wrapped in an if statement. If on the home page show this widget, if not don't show it. So if I have a set height even if the widget isn't visible on the about page the height will still be in the way. So I thought height:auto; would do it but it's not doing that.
#home-services {
width: 100%;
height: auto;
clear: both;
margin-bottom: 30px;
margin: 0px !important;
}
#home-services section {
float: left;
width: 240px;
height: auto;
margin-right: 10px;
background-color: #aaa685 !important;
}
This is what it looks like across all browsers.
What else do I have to put into my CSS to have the WELCOME title move down just on this page? Any help is appreciated!
Hey now add this css
Already add in your css style sheet this css
#home-services img{
margin: 0 0 -25px !important;
padding: 0 !important;
}
Now put this css Used this one
#home-services .textwidget img{
margin:0 !important;
}
Do this
#home-services .textwidget img{ margin-bottom:25px !important;}
Try inserting padding-top:30px in the h1 css.
It will clear the problem. If this gets you into trouble with the layout and you need to eliminate the padding, have a javascript function called on load that checks if that h1 is displayed or not and modify the padding accordingly. This is in no way elegant, but it will solve your problem.
you can also use jquery in if statement to change CSS like
$(".yourclass").css("CSSproperty", "value");
Can anyone tell me what I need to do in order to get the following page to center the contents correctly?
I've been trying to work with something else I used earlier in the day from here:
#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}
But this isn't working for me. One of the pages I need help with is here:
REDACTED
Thank you for any help, I'm just trying to get this fixed before I can head off to bed :\
#main-inner {
position: relative;
width: 960px;
border-top: 3px solid #DADADA;
margin: 20px auto 0;
overflow:auto;
zoom:1;
}
try this one. replace the existing with this. it should center the content.
It needs a width! to work correctly.
Give your #divWrapper a width. By default the width will expand as far as the containing element, so to create the appearance of it being centered, its width needs to be less than its containing element.
You can only center elements with margin:0 auto when you provide a fixed width from which the margins can position themselves from automatically. So add a fixed with to your wrapper and it should work.
You might also need to specify text-align:center; if you want the actual div contents centered.
Try this #divWrapper {margin:0 auto; text-align:center;width:960px}
#div {text-align:left;width:500px}
Edit:
There are typing mistakes in your CSS.
Check this updated CSS for margin-inner & margin-inner-right. It will fix your problem
#main-inner {
float:left;
position:relative;
width:100%;
border-top:3px solid #dadada;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#main-inner-right {
position:relative;
width:640px;
text-align:left;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
I have an input in a form that I am trying to align in the center. Usually margin-left:auto and margin-right: auto fail to respond when display: block isn't added to the CSS. I have added display: block to my CSS but still it isn't display as I would like it to.
I've made a JSFiddle to keep easier to understand: http://jsfiddle.net/XnKDQ/97/
In order for margin: 0 auto; to work, in addition to display:block a width needs to be specified.
In my case, it was float: left that I forgot about. So, make sure you apply float: none to your input field.
You already have display: block and margin: 0 auto, you just need to set width too.
Example that should work:
input{
width:50% !important;
margin:0 auto !important;
display:block !important;
float:none !important;
}
If that doesn't work try adding !important to the values or make sure your style is not overwritten by something else.
I found the solution for you
you should specify element width
input {
display: block;
width: 60px;
margin: 10px auto;
padding: 3px;
}
You have can do something like this:
input {
width: fit-content;
margin: auto;
}
You want the three forms together to be aligned in the center? Wrap them in a single div and center that div instead.
in addition to specifying width and display block also check if the float property is set to none.
In addiction to everything, you may check if your body have the parameter position. It may be set to fixed.
http://jsbin.com/uqafo4
Please check the white area: it should go all the way, as I used width: 100%, but it doesn't.
#container {
background-color:#FFF;
background-position:center bottom;
background-repeat:no-repeat;
height: 440px;
width: 100%;
}
By default the body tag in some browsers have a margin set on them in the User Agent (default) stylesheet. Simple use
body { margin: 0; }
to remove this margin. You should also consider using a reset stylesheet, such as this one by Eric Meyer.
The problem is that the <body> element has some default area around there, add this to the body rule to be safe:
margin: 0;
You cant test the updated version here, no space :)
Following Yi Jiang's advice should solve your problem.
If you don't have a background-image, you can remove
background-position:center bottom;
background-repeat:no-repeat;
I would also suggest adding some padding, for example:
padding:10px;
but perhaps you're thinking about doing that already, only you haven't added the code yet. Or perhaps you don't want to use padding for some reason or another.
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.