I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
Related
I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
I'm new to this forum so hello to all.
I'm working on a WordPress website theme called tesseract. I am new to WordPress so have limited experience working with it.
The problem I'm experience is with the menu at the top of the page. If you visit www.avoinvents.co.uk and take a look you'll see that the categories don't sit on the same line. If I remove one of the categories the page looks much nicer and neater. All categories are necessary so I could not delete any.
Could anyone on here suggest how I make the necessary changes to fix the menu.
Many thanks
Here's the CSS that I changed in my browser to make the menu appear in all one line:
#masthead {
padding-top: 10px;
padding-bottom: 10px;
}
#site-banner-left {
width: 100%;
}
The main problem was that the site-banner-left CSS definition had a width of 60%, causing the text to wrap around its border, so I changed its width to 100% and added the padding to make the navigation area a little bigger. If this messes with other parts of the theme, try making the text size of the site-banner-left definition smaller instead of changing its width. Hope this helps.
You have limited the available width because an ancestor element, #site-banner-left, has a width of 60%. Increase this value or remove this rule to allow the entire menu to fit naturally.
Additionally, since the menu items are inline-block elements, you can force them to be on one line by setting the parent element's white-space to nowrap:
.nav-menu {
white-space: nowrap;
}
My page: http://www.acuity-sports.com/procage-batting-tunnel-net-42.html
I'm trying to get the upsell to align on the far right side of the page. The original template had a 2 column left setup and I changed it it a 1column. It seems like I need to change something to keep it from mashing up to the left side.
After a few hours of looking around I can't seem to find the code I need to change.
All the span classes have a float: left property in the bootstrap style-sheet. To align the "Related products" block in your page to the right side, give a float: right to the parent div "span2" of the 'col-upsell-product' div.
Try adding this to your style-sheet
.yt-product-detail .row .span2{
float: right;
}
I suggest you add another class name to the div span2 containing the related products, so that the above css property won't apply to any other span2 divs on the page.
I got two divs, and ive given the divs backgrounds.
They have exactly the same attributes/css.. But one div is fully clickable (the entire image inside the div area is clickable), the other one is only clickable here and there.. Any ideas?
http://romeon.net/deffrage
Its the two buttons
"Deffrage" "Josef"
its the deffrage button that is not working..
Your .backlava item is obstructing the link below it. You'll need to adjust the dimensions of this item. You might be able to simply remove the explicitly-declared height from the li. A quick test revealed that this fixed the problem, without affecting the layout (you should test further though if you decide to go that route).
In following code, change height from 53 to 3.
<li class="backLava" style="left: 9px; top: 0px; width: 66px; height: 53px; overflow: hidden;"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>
Both link for me. But one of them has the end tags in the wrong order (</span></div></a> where it should have been </a></span></div>).
And this CSS
.robin {position: relative;float: left;margin-right: 100px;}
applies to only one of them.
(And what's the point of the span without either a class or an id? That's a no-op, I'd say).
There seems to be Javascript setting the height of the backlava class to 53px instead of it's default of 16px. Remove whatever Javascript is doing that and you should be good.
I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page
Pretty page!
Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -
/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}
I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page.
This is how the page looks now w/missing bgcontainer.gif:
Current page
Please help - thank you
With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:
But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.
The "#container" div of the "wrong" page spans the whole witdh.
By the way, I like your design.
EDIT:
This is the look of the page with float: left; and left:107px; added to the ".container" div.
Here's your biggest problem:
The structure of the HTML pages is MUCH too different to pin this problem on one single line of code. In the "old" page there are 5 stylesheets including your own; in the "new" page there is only one stylesheet.
The reason your old and new pages don't look the same when you add your default.css stylesheet is because the old page has FOUR other stylesheets also applying styles, many of which are overriding your own.