I'm working on a blog that has large runs of text with interspersed images that are floating to the right. In a maximized browser, this looks fine; however, on smaller screens/windows, the text has a tendency to be squashed by the images. When that happens, I'd like to prevent the text from running on either side of the images, e.g. by setting float: none on the images.
The CMS uses <br><br> instead of <p>...</p>, so we can't easily set a min-width on the text. It looks something like this:
<article class="content">
Text
<div class="float-right">
<img>
</div>
Text
<article>
.float-right could be any width, and, in some cases, could change width as the user interacts with the page.
Is it possible to prevent the text from getting "squashed" with just CSS? If not, I'll likely look into modifying how the CMS generates the HTML; I'd rather not use JavaScript for this.
Related
Im learning html and css for now. Anyway, I am following a course, and have a queston.
This is my example code with logo of BBC and text next to it: http://i.imgur.com/kii6UPi.png
And once I add float: left; to logo, text moves up: http://i.imgur.com/SIDrCVx.png
Can anyone explain to me why this happens?
This is because by default your browser is rendering the image and the text as inline elements, therefore the baseline, or bottom of the image and text is lining up.
When you apply float:left to the image, it forces the image to display as a block rather than inline, so the text no long aligns baselines with it.
you can control them using different divs. <div class="wrapper"> <div>logo</div> <div>text</div> <div> you can control them separate, but try using float:left on the text as well, that might help.
Put simply, an img in html by default will take up the entire line that it's height occupies.
When you give an element the property of 'float', you tell it to become part of the regular flow of the page, and other elements can now wrap around it.
You may want to read up on both the float property and the inline-block
I want to have an image above some text, where the width of text is determined by the image (I don't know what the dimensions of the image will be). I want it to be responsive so that the image shrinks when the screen is smaller than the image. And I want do to it in the most correct, modern way possible (no silly 2005 hacks).
My HTML would be:
<body>
<div>
<article>
<img src="laksdjfalksdjf">
<p>Lorem ipsum blah de blahhhhh asdfkj fasdjk</p>
</article>
</div>
</body>
And my CSS would be
article{width:-moz-min-content;width: -webkit-min-content;max-width:100%}
img{max-width:100%}
Interestingly, in Firefox this works fine. If the screen is larger than the image, the image's width is set to its normal size how it is on the server, and the width of the article tag is set to the same width as the image, with the text going underneath. If the image is too big for the screen, then the image and article both shrink accordingly. This is what I want, but...
In webkit browsers, the max-width attribute of the image messes with the min-content attribute of the article. Min content decides that the image's width is unknown due to the max-width attribute, and then shrinks to the longest word in the p tag.
I tried to read w3's docs to determine the correct behavior but I'm not used to reading those and it's really difficult for me to read.
I want to know the correct behavior so that I can use the correct one in my CSS and use a javascript workaround for the one that is wrong (that's how I like to do things).
Also, whichever one is wrong, can someone issue a bug report for me?
Fid: http://jsfiddle.net/nickmanning214/uy9pe5f6/
I just installed Foobar on my blog but the customer support hasn't responded yet after a few weeks to my query.
I'm basically applying this custom modification offered by them (http://codecanyon.net/item/foobar-wordpress-notification-bars/full_screen_preview/411466) to add a Like button to the toolbar at the top.
What I'm struggling with is to align some Text before the <div id="social_target"></div>, so that the text and the Likebutton will be aligned to look like "Like Us On Facebook! LIKEBUTTON".
Right now when I add text before the <div id="social_target"></div>, the text appears but the Likebutton appears underneath the text so it isn't visible at all.
How would I do this?
I don't know exactly how wordpress works and if you have access to the html code, but if yes, try putting the text inside a div and applying some css to it, something like this should work:
<div style="width: 400px;">
<div style="float:left;">Like us on Facebook!</div>
<div id="social_target"></div>
</div>
The value of the width is just a guess, you can adjust it.
A few things to check:
Is the Div that your entire code (the text and the social_target div) being put into too small? If so, it'll push the Div onto the next line. You'll need to edit the size of the Div you're putting this stuff into.
Make sure you apply CSS to the Div so that it stays on the same line. Alternatively, you could use a span:
<span id="social_target"></span>
Otherwise, Divs will get pushed to a new line unless you specify something like:
#social_target { display:inline-block; }
or
#social_target { float:right (or left); }
Like Lucas has in his code above.
This question relates to Why are the images no wider than 500px in Chrome?
See http://abmphotography.beta.cjbm.net/aileen-kevin
This has now been fixed, but now when the page initially loads in Chrome, the wider images overflow their div.thumbnail containers. See:
Weirdly, if you have the inspector open, focussed on <html> or anything within, the issue immediately corrects itself. Also if you have the console open and evaluate "$('body')" it immediately corrects (this doesn't work when in the javascript file).
Additionally, if you resize the browser above or below width:980px, then it also corrects itself (this is the point that the media queries switch, and the padding between the li's changes.
Update:
I have worked around this issue with the following jQuery:
$('ul.thumbnails img').each(function() {
$(this).closest('li').width($(this).width());
});
However I'd welcome a pure CSS solution.
Any particular reason why you're not using the row and span classes? I think I've had my divs spill outside of the window too, but immediately noticed that I wasn't using those. My structure for one row of content will generally look like this:
<div class="row">
<div class="span12">
<h1>Some Heading</h1>
<p>Some content</p>
</div>
</div>
span12 can be any size you'd like. Since it's a 12 column grid, 12 would use the whole width of the grid. This may not necessarily solve your issue, then again maybe it will! Either way it's just good practice in general.
Basically I'm having some problems with Z-Index. Although I'm not amazing at CSS I would reckon I was reasonably good, but really can't work this out.
You'll see at the URL...
http://howcode.com/code/
... that my problem is that links in the returned 'Popular' results aren't clickable or anything. I've concluded this is due to their Z-Index being messed up. I had to fiddle and tweak with Z-Index to get the tabs - Popular, Top Rated, Featured etc. - to show above the codebg div.
When I adjusted the Z-Index so that the results were definitely on top, they acted as normal - text could be selected, the ratings images hovered, etc. etc. However the downside to this was that my Popular, Top Rated, Featured tabs were all placed BENEATH the background image for the returned results.
If anyone can post a workaround or alteration to my CSS that would be much appreciated.
Please don't forget this is a test site and design and any other URLs are likely not to work, I haven't uploaded any database configs yet or whatever!
Attached are a couple of screenshots to clarify what I mean:
This is what I WANT to happen (not that in actual fact in this screenshots link aren't clickable, just to demo my point though):
This is what DOES happen when I adjust the Z-Index properties (I don't want this!):
Thanks y'all!
You need to remove this:
z-index: -1 !important;
From your .codebg class, which will result in your #2 screenshot above. (As a side note the children can't have a higher z-index than their parent, so everything inside .codbg is -1, behind the page) Then, you need to fix the tab images :) The problem is not that they're behind the background, it's that they're transparent, and look darker on top of a darker background. Here's the image (may change in this answer once you update it, pointing directly to it):
alt text http://howcode.com/images/tabs.png
They look fine here because of the white background, but if you open them up in an editor, you'll see they're transparent, just make the the three tabs fully (or at least more) opaque since that seems to be what you're after.
not the best solution but here it goes.
inside the content div move tabs div after codebg so this
<div id="content">
<div id="tabs">
</div>
<div id="codebg">
</div>
</div
becomes this
<div id="content">
<div id="codebg">
</div>
<div id="tabs">
</div>
</div
then add to #tabs
position:absolute; top:232px;
to #content
padding-top:53px;
this is a quick and dirty fix. otherwise you have to rethink your whole layout
You could also put your background-image from code-bg on content instead, and adjust content's width and border-radius