I'm fairly new to CSS / HTML, but usually can figure something out. Not with this issue though... I've spent 2 days trying to fix it with no joy
Using WP 3.9.1 and WooThemes Mystile which comes with a custom css to make changes in; no child theme needed. When I place images with captions on a page using left align, some will and others vigorously refuse. In older WP, it was always align all images left to create rows, but not with 3.9.1 it seems. I've tried everything I can think of, but those images that are supposed to be aligned left are actually right of center.
Using Firebug or Safari Inspector, I've tried to align them left and even using a negative margin-left will not place the image where it belongs. It's almost like there's some kind of page break, for lack of a better term, that is making it set right of center. Like it thinks that position is left.
I am not using any gallery or plugin, just adding images to the pages with captions in the text box, not visual. Most of my Galleries under Store are a mess. :(
Here's an example of one: Tuscany Gallery Most of the Galleries I want 2 landscape in a row or 3 verticals. Sometimes with an odd number of images I might center 1 - 3 images, but most are left align.
Any help would be very appreciated! Thanks!
Re: the Body css code
I have a few color changes and more div#attachmet_number (didn't think you needed all them), but this is about it.
:active, :focus {
outline-style: none !important;
-moz-outline-style:none !important;
}
a {
outline-style: none;
-moz-outline-style: none;
}
a:before {
outline: none !important;
}
a:imag {
outline: 0px none;
}
#sidebar .post-46 {
display: none !important;
}
article.post-46 img.alignleft {
margin: 0 1.618em 1em 16px;
}
.post .alignleft, .type-page .alignleft {
margin-bottom: 50px;
}
.post-282 .wp-caption img, .type-page .wp-caption img {
margin: 0 0 0 0.4em;
}
div#attachment_283 {
margin-left: 42px;
}
div#attachment_286 {
margin-left: 42px;
}
div#attachment_291 {
margin-left: 42px;
}
I'm not quite sure if that's what you need or not. The div#attachment_number is the image within a box with caption (title) below it.
HTML of images with caption
[caption id="attachment_516" align="alignleft" width="407"] Duomo di Pisa[/caption]
Following your comments above on your question, your fourth photo (Autumn Drive) specifically is getting pushed to the right by the bottom edge of your second photo (Duomo di Pisa).
It appears that you've added a specific width to each div in your HTML. If you were to add there also a specific, equal height to each div, then they would align and allow the divs below to float to the left.
A greater ideal might be to declare a class for your landscape-oriented divs in your CSS, define a uniform width and height there, and assign that class to all landscape-oriented divs. That way, you could easily change that width and height in one place, and it would apply to all divs with that class assigned (and multiple classes can be assigned to a single div; just separate them by spaces, like class="landscape framed dark" for example).
Related
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
I'm using Zurb Foundation 4 for the first time to build a friend's small picture folio site.
Testing # http://wagonbroadcastservice.org/ktest/
The layout is meant to be quite simple: a grid of images. Using "block grid" seemed appropriate, but the problem that I've run into is that I need each image to be vertically aligned to the middle, rather than the top of each row. I'm having issues figuring out what code I need for that.
I came across one thread that I thought might have answered my questions, but the proposed answer doesn't seem to work at all.
Can't get image to align to bottom of div with Foundation block-grid class
Does anybody have an idea what I might be doing wrong?
Your actual "problem" is caused by this style rule (in app.css line 1123):
[class*="block-grid-"] > li {
display: inline;
float: left;
height: auto;
padding: 0 0.625em 1.25em;
}
You can test it by changing the rule-set to:
[class*="block-grid-"] > li {
display: inline-block;
height: auto;
padding: 0 0.625em 1.25em;
}
inline-block has some other drawbacks, like the white-space issue. There are 2 options to avoid the unwanted margins between the elements:
1. remove any white-space and line breaks from your HTML markup
2. set the font-size of the parent element to '0'
Using Frameworks isn't always the best/ easiest solution! ;-)
And as I don't know "Zurb Foundation 4" I cannot help you more - sorry.
div contains single line texts as li elements
div width is determined by widest item width.
If mouse is over some item, its font style changes to bold.
If mouse is placed hover wide items, bold font causes width increase and this causes div width also
to increase.
This looks very ugly if mouse is moved in list.
How to disable this increase without using hard-coded width?
I tried overflow: hidden style as shown in code below but div width still increases.
html:
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product2</li>
...
css:
.site-leftpane {
background-color: #FBFBFB;
clear: left;
color: Black;
float: left;
margin: 0;
overflow: hidden;
padding-top: 1em;
}
.tree {
line-height: 1.6em;
list-style: none outside none;
margin: 0;
padding: 0;
}
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
.tree li:first-child {
font-weight: bold;
}
.tree li a:hover {
color: #E47911 !important;
font-weight: bold;
}
Update
I chaged style according to proposed answer to
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
But problem persists. Web page can used in different screen resolutions. Texts are created by customer at runtime. Right side of contains other div which automatically uses remaining space.
I do'nt knwo how to use hard-coded max-width in this case. max-width specifies maximum allowd div width. Usually in this case div width is smaller, hover causes its increase and thus max-width does not solve the issue.
I had a similar problem and found one way to fix it was by using some jQuery, simple and works:
$('.menu-item').each(function() {
$(this).css( 'width', $(this).width()+'px' );
});
Basically you have jQuery "hard-code"/set the initial width of each of your class elements that was calculated by the browser based on text length and font settings, so that when you hover over each element which say changes the font-weight of the text, then the width won't change, it will remain the same as it was initially.
Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)
Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product It's a product, yes.</li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>
And in the CSS I added this to the end:
.tree li.pad {
line-height: 0;
font-weight: bold;
visibility: hidden;
}
What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.
However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).
Try adding padding:0px and margin:0px to your :hover, also you could add a max width to your div to keep your width at a single size. This in my opinion would fix your problem.
I don't think you can be certain of the actual pixel width when your server builds your page.
The users browser does all of those calculations, and it doesn't really expose them (though client-side scripting languages & toolsets like jQuery can see the end results).
Honestly, your best bet is to either assign a fixed-width to the items, calculated well ahead of time, and accept that long text might line break. If this doesn't work for you, the other option you have is to change the hover behavior. Perhaps instead of making the text bold you could change the text/background color? This would be an alternate way to indicate the currently hovered item and it won't change the character size or spacing.
I am trying to create a block of photos on my webpage (Which has a set width, I didn't copy that part of the code over). I have put the code into the JSFiddle link below.
http://jsfiddle.net/T2qHR/12/
I will recreate what I am trying to do on a graphic editor. Click here to view it: http://www.flickr.com/photos/adpartners/6630840127/in/photostream
I'm not sure what I am doing wrong with my css/html. Everything is stuck on the left because I used float left in one of my div tags. I really want the background to be centered, which it is, then have the images over the top of it, like so: 3 photos, 2 photos, 1 photo, 2 photos. They will all link to youtube videos, which I have already got the links already for that part of it.
Any help would be much appreciated. I have done 10-20 different versions of this code with
p, div, table, ol/li tags, and honestly don't know which one to use for this now.
If you see what I am doing wrong, please fill me in. I'm at a loss of code!
Many thanks for any help you might offer,
R
Use display: inline-block and text-align: center instead.
div.floatingPic { display: inline-block; padding: 12px; }
div.containerVid { border: 2px solid #99cc99;
background-color: #000000;
padding: 45px;
height: 890px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center; }
As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).
fiddle: http://jsfiddle.net/T2qHR/20/
Line-height causes gaps between images and other elements but changing its value to 0 makes any text impossible to read, is there any easy fix for that?
Imagine some repeatable DOM element like a shadow, how would you erase gap between this element and anything that is above (may be an image, div, span, button, form)?
Setting class for this .shadow and giving it line-height of 0 of course doesn't work as line-height works a bit differently.
I made 3 images, the first one shows what I'm talking about, the second one fixes it, the third one shows how the second one in fact destroyed the whole layout:
http://jsfiddle.net/J5PLf/
I'm thinking about something like:
body {
line-height: 0;
}
p {
line-height: 1.2em;
}
But I guess it's a bit risky, what if there will be some free text not within tags?
Don't mess with the line-height propety, and set display:block at the images.
Fiddle: http://jsfiddle.net/J5PLf/1/
#example1, #example2, #example3 {
width: 200px;
float: left;
}
img {
display:block;
}