I'm trying to get a div to be centered on the page. however WordPress isn't cooperating and doing it like it does in my testing HTML document. Any ideas?
HTML
<div class="propreq grid_4"><h2>Request a Proposal</h2></div>
CSS
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
Looks like it's because of a couple things. Try adding the styles below to your current definition (or changing them, if they're already there):
.propreq {
display: block;
float: none;
}
Before, .propreq had display:inline, float:left applied to it, making the styles you were applying to it ineffective. I hope this gives you what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
There could be Several reasons.
1st: Try examining the CSS using Developer's Tools (in Chrome/FireFox).
There could be another CSS rule which is OVER-RIDING your this one.
2nd: Try using
<div align="center" class="propreq grid_4"><h2>Request a Proposal</h2></div>
My best guess is, Another CSS-Rule is overtaking the Center Property.
.propreq {
margin: 0 auto;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
background-color: #0e7bd0;
}
TIP: Do a quick search on "Examining using FireFox Developer Tools" | Check out for the text-align: center; in .propreq section.
Related
I have a Contact form 7 on my home page here: http://grownowsma.com/
I have been trying to get the input fields to be centered. I tried a few tricks I've used before and answers from other Stack Overflow questions and for some reason no luck.
I tried this trick: http://www.screencast.com/t/ygBP3eQn9jQu
I tried these in the CSS:
.contactform input[type="text"],form .contactform input[type="email"]{
margin: 9px auto 0 !important;
}
And this:
.wpcf7-form-style {
max-width: 800px;
margin: 0 auto;
float: none;
display: block;
}
Both no luck. I've been messing around in the inspector for a while and haven't been able to change it. Any other suggestions for selectors or attributes to try?
You don't have an element with the class contactform, so you can't select inputs beneath it. Either add that around the form shortcode in your post, or use a different selector e.g. .home .wpcf7-form input[type="text"], .home .wpcf7-form input[type="email"] assuming you don't add a second CF7 form on the homepage where you don't want to center the inputs.
Other than that, margin: auto; should work nicely.
If you want it globally, use this CSS:
.f7-form-control, input[type="text"].wpcf7-form-control,input[type="email"].wpcf7-form-control, input[type="password"].wpcf7-form-control, input[type="tel"].wpcf7-form-control, textarea.wpcf7-form-control,.post-password-form input[type='password'],input[type="email"] {
margin: auto;
}
If you want for only a page then you can use this plugin https://wordpress.org/plugins/wp-add-custom-css/ . It will give you a option to put custom css in individual page.
Assume that your contact form ID is: 4579
And here is the CSS for that specific form only.
#wpcf7-f4579-p4004-o1 .wpcf7-text{
display: block;
margin: auto;
}
It finally worked for me:
label, .wpcf7-submit{
margin-left: 50% !important;
}
You can also add a <div style="text-align:center"> directly in your form if you want.
Please add in you style.css:
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
margin-left: 250px !important;
}
I wonder if anyone has a solution for this. I want a grid of images 6 columns by two rows. At the moment it works fine: http://oaeyewear.4pixels.co.uk/brands.html
and I'm using:
.gallery {
list-style-type: none;
}
.gallery li {
float: left;
height: 130px;
width: 130px;
margin-bottom: 26px;
margin-right: 26px;
}
.gallery li:nth-of-type(6n+0) {
margin-right: 0px;
}
But I know IE8 won't recognise the nth-of-type selector. Is there a way of
Make IE8 play along. Selectivizr won't do this with jQuery and
I don't want to introduce another library
Using some other conditional CSS just for IE8
javascript?
Ideally the solution needs to work responsively as the site is based on the Foundation Framework. At the moment it works well as it sizes down to two columns and I can just change the <li> with a media query to work across 300px.
In this case I would use a negative margin approach.
.gallery {
list-style-type: none;
margin-left: -26px;
}
.gallery li {
float: left;
height: 130px;
width: 130px;
margin-bottom: 26px;
margin-left: 26px;
}
You could try using ie7.js | ie8.js | ie9.js instead of Selectivizr.
That does support adding nth-of-type for IE, without needing any other libs.
On the flip side, it also implements a whole raft of other features and fixes into IE, which may or may not be what you want. If you're using other polyfills, you'll need to check that it doesn't conflict. It's worth trying though.
This page and this page have a space over the header. They just appeared after an update but I am missing where the problem could be.
Note: This only happens in FireFox.
The first thing I'd check is whether your markup's valid. According to the w3c validator, you've got an unclosed div somewhere. In my experience that's exactly the kind of thing that'll cause different presentation in different browsers.
.column, .columns {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
In this class float:leftinside is redundant, remove he is normal. and the two class to write it separately. like this:
.columns {
margin-left: 10px;
margin-right: 10px;
}
.column{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
I would remove the columns or entire sixteen columns class from header, it has no use there, only a small left padding for the logo, that's all what you'll miss. Now it's in conflict with .columns css styles.
Or you could rewrite the css for that class that would apply only for header.
After removing columns class in chrome and ff on mac:
Just found the issue. I had
#artists {margin-bottom: 40px}
#album-design {margin-bottom: 40px}
I changed it to:
#artists {padding-bottom: 40px}
#album-design {padding-bottom: 40px}
I know this is the issue because it was only happening on the portfolio and music page, the only two pages with that particular CSS.
Anyone out there care to check it?
Thanks for all of the answers. Most let me know of other issues I will fix.
Thank you all.
Remove margin-top: 16px; from #header.
Also reduce padding-top: 5px; from #header .inner,
.column, .columns in this class float:left; and display:inline causing problem... please try to remove those two properties but it may effect in some other places.. do one thing in the header id place the float:none; so it will effect only for header.
#header {clear: both; display: inline-block; float: none; margin-top: 16px;}
I'm currently working on a website design and need to make some changes to an advertisement. The CSS I apply to the main div (.ad_728x90_home) I'm targeting doesn't work. I have applied a margin-top to the div but that doesn't work, tried other CSS but it's not getting picked up.
Any help would be greatly appreciated! The advert is located below the second post.
.ad_728x90_home {
height: 130px;
}
.ad_728x90_home_text {
margin-top: 40px;
}
span.ad_728x90_home_h3text {
color: #FFFFFF;
float: left;
font-family: LeagueGothicRegular;
font-size: 23px;
line-height: 34px;
margin: 13px 0 22px 10px;
text-transform: uppercase;
width: 185px;
}
.ad_728x90_image {
float: right;
margin-right: 10px;
}
<div class="ad_728x90_home">
<div class="ad_728x90_home_text">
<span class="ad_728x90_home_h3text">Need more quality fonts? Head over to myfonts.com</span>
</div>
<div class="ad_728x90_image">
<img class="scale-with-grid" src="images/ad_728x90.jpg" alt="Blog Post" />
</div>
</div>
Be sure you have the right class names between .ad_728x90_home and .ad_728x90_home_text and double check your HTML nesting.
I checked your items with Chrome's inspect element and the <div class="ad_728x90_home_text"> seems to start above your ad, at the top of the page.
Try going to make it a position:relative as it seems like a main div element
.ad_728x90_home {
Postion:relative;
top:10px;}
I cannot say the exact pixel amount of it as the margin-top doesnt work try using it as relative.
I am attempting to make a simple column system I can use on a site and embed into any element that is cross browser and easy to use. I am trying to do this with pure CSS if at all possible. Everything works except the borders don't line up.
Everything I've tried to do hasn't worked.
View the css here:
http://jsfiddle.net/JamesKyle/8H7hR/
Script Version:
http://jsfiddle.net/JamesKyle/8H7hR/3/
You use display:table-cell for your span like this:
.columns .col {
display: table-cell;
position: relative;
width: 49.9999%;
text-align: justify;
border-left: 1px solid #ccc;
background: #f5f5f5;
}
Check this fiddle http://jsfiddle.net/8H7hR/5/
Here's an article that should help: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks