I am currently experimenting in WordPress an am using the theme Encounter Lite. I have an image within the header that was Center aligned and now for some reason it isn't. I have tried different code in the style.css sheet like float: center; but that hasn't made any difference.
I am using the current WordPress application (4.7.5).
Does anyone have a solution or suggestion to this?
center is not a valid attribute of the float property.
I'm not familiar with the Encounter Lite theme, but text-align: center applied to the header element may work.
Specifying the width of the image and setting the left- and right- margins to auto is another option. In this case, make sure the image is a block-level element: display:block
Related
Sorry if this has been asked before. I'm very inexperienced with CSS. I tried looking through previous threads to see if I could solve this problem myself, but I've had no luck so far.
The website is http://greenemusiceducation.com/
The container right underneath the site's header is forcing all content (in this case a slider) to align to the right. In the 'site-inner' and 'wrap' classes (the classes that are listed right underneath the header in the sites source-code), I've tried editing the parameters but the changes don't seem to have any effect whatsoever. This container alignment issue is consistent across different pages for the site.
On mobile devices, the site loads fine and operates as expected. On Chrome, everything is right-aligned. On IE 11, the slider doesn't show up at all.
I would be grateful for any help!
.content has float: right;. If you want to center it, remove the float, and use margin-left: auto; margin-right: auto; to center it horizontally. Since the element has a defined width, that will center it horizontally. Here's a good resource on how to center things - https://www.w3.org/Style/Examples/007/center.en.html
You can nest the style that is sliding to the right within a paragraph html heading with an inline style that sets the text for that to center. Even though there are other things beside text, it will still center the content of the container nested within it.
<p style="text-align:center;"><div="container></div></p>
I am embedding a free Bravenet Guestbook (http://pub20.bravenet.com)onto a page of a site I am currently building.
You can see it here: http://portabledogpotty.com/customer-reviews.html.
As you can see if you go the site, the guestbook is aligned to the left. I want it to be centered. I have tried various ways of trying to move it over with using the site css, to no avail. I am not sure what I'm doing wrong, or if I actually need to be editing the Bravenet specific css file, which if that is the case, how do I access it? Any help is appreciated.
You can horizontally align something like that by defining a width and setting margin left and right to auto.
Since #bn-guestbook-1-1-1641477518 already has width: 700px; all you have to do is add this
#bn-guestbook-1-1-1641477518 {
margin: auto;
}
This site is displayed properly in chrome, firefox and also IE9. But it does not display properly in IE8.
I tried all thing like margin:0px auto, display : block but it does not display properly.
Please help me.
Thanks in advance.
The site look nice in IE8... write exacty what do you want to change...
Some tweaks that you should make:
for Search side:
add a vertical align for the number in the rounded thing;
changeSearchForm .number_bg{ display:table;}
changeSearchForm .number_bg span { display: table-cell; vertical-align: middle; }
make the inputs and inputs images smaller
use some font awesome icons
fix the margins for the footer in IE
if you want to make a circle, all the border with 50%, so it's always a circle, does not matter the with and height.
P.S. Next time work in % for the 'skeleton', base site architecture :)
I am able to see the issues you mentioned in IE quirks mode, actually IE8 is working fine.
Still if you need to fix this issue, Do this -
Add text-align center to the main div(class-skin) or even body tag - this will center the content and then add text-align:left to the content div(class = outter-wrapper) so that again text-align will be set to default for the content.
.skin{text-align:center;}
.outter-wrapper{text-align-left;}
Thanks,
Karthik.
Here's one for you that has me stumped:
I'm using background:url to put a small image in the bottom right corner of my container within css which works nicely. However, when users are on the account creation page, the section that has the "create account" and "cancel" buttons is overlapping with my image, obscuring half of it. Here's what it looks like:
I have looked into using z-index to fix this issue to no avail (since the image is a part of the container, if I decrease the z-index for the obscuring div, the whole section with the buttons is put behind the container which makes them impossible to see). I also don't want to go into each page individually and put the image into the html, especially since I'm using Joomla and the template html structure is pretty confusing for me. (Using Joomla 3.0.3 with the default Protostar template)
Am I missing something obvious? I feel like I am...
Thanks in advance!
You're funny :) Using a background image but wanting to put it in the foreground.
Just use an image tag and position it absolute in the bottom right of the container (don't forget to give the container position: relative)
http://jsfiddle.net/Weach/1/
This is the problem: I created a background image using the css which you can see in the JSfiddle. I center aligned it so it always comes in the center horizontally and starting from top.
There is an image I want to always come above the menu option. It's not really an image but I will make some effect using JavaScript. I always want this image to appear above the menu option irrespective to the browser or the resolution of the screen.
Did you consider using your background as a css background?
Position your other image inside it, using margin, hard defined width (or float).
(Also, cleaned your demo a bit).