I have added a small newsletter subscription text box to the footer of my website, and I'm having some alignment issues.
Form code on its own: http://liveweave.com/hAK1q6
What it looks like on its own:
Footer code after adding form to it: http://liveweave.com/k3L5h7
Switch to Split V or View mode to fully see the Footer preview
Alignment issue:
As you can see, padding appears all screwed up in the background, and the overall form is also not center aligned.
How do I fix this issues ?
give your form-wrapper cf `display:block;
this will solve (mostly) the appearance problem
and afterwords change some margin and padding of elements
Reduce margin value in margin: 150px auto 50px auto from .form-wrapper class and give float: left or display properties. such as block or inline-block.
Add these style in .form-wrapper
margin: 0 auto;
display: block;
Check it here http://liveweave.com/d4cUjW.
screenshot:
Related
I am now using the Envo Magazine Theme for Wordpress. I switched themes recently. I have a wider post area to work with. However, that means for older posts with smaller images, the images are floating on the left and text is wrapping around the images.
I don't want any text wrapping around images.
How do I force all post images to be center-aligned and not floating?
I tried forcing the post area to be a smaller width and that takes care of the overflow text, but that defeats the purpose of switching to a wider theme. I can't seem to find the right code to select all post-attached images. Please advise. Thank you!
Here is one example of a code I tried. I wanted to force all post images to be center-aligned with no text overwrap.
.single-entry-summary img {display: block; margin: 0 auto;}
It looks like you can't simply select all images on the page, because they are not build with the same structure. You can prevent the text from wrapping around the first image by removing the class pibfi_float_left from the span that is surrounding it. Or you can edit the class and remove the float: left.
For the other pictures, you need to remove the class alignleft from the surrounding div. Or you can edit the class and remove the float: left.
To center the images, you also need to add display: block to the surrounding span:
.single-entry-summary span {
display: block;
}
.single-entry-summary img {
display: block;
margin: 0 auto;
}
Important note: For all images except the first one, you need to adjust the width of the attachment divs (which have an id starting with attachment), otherwise they won't be centered. You can do it like that:
.single-entry-summary div[id^='attachment'] {
width: 1000px !important;
}
I wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.
There seems to be a left margin to the menu that I want to get rid of.
On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
I would like to reduce the margins between list items
Normally this wouldn't be a problem for me, but I've not really worked much in percentages.
.flexnav {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
FIDDLE
Add padding: 0; to .flexnav style definition.
To remove padding just use css:
padding:0;
You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:
*{
padding:0px;
margin:0px;
}
This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.
I use this approach on all websites I make.
I am trying to tweak a wordpress site but can't seem to get one of my parent div's backgrounds to be visible through the child divs on top. I've got the background image set for #main. The image I'm using fades to white at the bottom but, in the rendered page, I can only see about the top 23 pixels or so before the rest is blocked...I think by #primary.
The site uses a child theme based on Responsive and can currently be viewed here. I would copy/paste code for your convenience but I'm no longer certain what part of the code is responsible for what I'm (not) seeing. So I apologize in advance if this is not enough information to go on :-/
Looks to me like you have a float problem and the div#main is collapsing. Try one of the various clear-float techniques to prevent that.
For example, try #main { overflow: hidden } as a test - that will normally prevent the collapse.
Classic clear fix issue. Give #main an overflow:hidden or try the micro clear fix if any content is spilling out of the box.
#main {
background: url("http://wp.massosteopathic.org/wp-content/uploads/2013/02/headerhand-contd.jpg") no-repeat scroll 0 0 transparent;
clear: both;
overflow: hidden;
padding: 1.625em 0 0;
z-index: 1;
}
The #main div is only 24px high. This is because all child divs are floating.
add a
<div class='clear'>
with
.clear { clear: both}
just before the closing tag of your #main
Amazing...something I have gotten to work in IE and NOT Firefox! Quite the turn of events, eh?
Anyway, here's the problem. Check out the following page in both IE and Firefox:
http://www.lolstrategies.com/test/button_sample.html
I'm using this file to put together the button.
(http://www.lolstrategies.com/test/composite__V153767378_.png)
Obviously this button is centered in only IE.. what gives?!
I'm using a span for the background that is under the text and another for the tip and then floating them together with float: left as you can see by viewing the source.
So, what can I do to get this span centered in Firefox?
Thanks in advance.. please let me know if there you have any questions about this that I can help answer!
Your span.buttonLarge contains two uncleared floated block-level elements, hence no centering. In order to fix this, you could apply display: inline-block and margin: 0 auto to it.
P.S. You don't have a DOCTYPE specified, that's why your current solution works in IE - it is rendering it in Quirks mode.
Remove float: left; from .primaryLargeButtonSpan and .primaryLargeButtonEnd
after that change display: block; to display: inline; from .spriteButton span.button_label
OR change it to display: inline-block; and then, set the background property to url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;
You might notice some "defect" in the ending image though...
I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}