Is there a way to solve this problem using CSS or do I have to fix it on per-article basis by adding newlines? I have article structure:
<div>
<img style="float: left" src="image_src.jpg">
<h3>Heading #1</h3>
<p>Paragraph 1....</p>
<h3>Heading #2</h3>
<p>Paragraph 2....</p>
</div>
Now, the problem is that very often heading "catches" the image and has to be indented while it's paragraph appears below it. Here is an example:
Is there a way I can force heading to go below the image, following it's paragraph or do I have to add newlines manually whenever I have such a problem?
Sure, you can use the CSS nth-of-type selector to clear the float on all but the first h3 element.
h3:nth-of-type(n+2){
clear:left;
}
jsFiddle example
Related
let's say I have some markup like this:
<div id="content">
<h2>Post 1</h2>
<img src="dummy.jpg">
<iframe src="youtube.com/foobar"></iframe>
<p>Sample text.</p>
<p>Second paragraph.</p>
<h2>Post 2</h2>
<img src="dummy2.jpg">
<iframe src="youtube.com/foobar2"></iframe>
<p>Sample text2.</p>
<p>Second paragraph2.</p>
</div>
How could I style this, so that all the images and iframes are in a sort of "left column" with iframe under the image, whereas the paragraphs are on a right sided column?
float:left; for img and iframe obviously doesn't work, because the iframe floats left to the img.
Thanks for any input, by now I read too much about inline elements, paddings and floating to make it all work together.
As I want to implement this into a getsimple Site (with users who can't to much html markup) it should work without div-containers.. (also if I needed them I would actually doubt this content/design seperation that CSS always promises, but makes it so hard to implement ;))
If I work with floating, I am aware that I should clear this with the h2 headings as to get a new block for each post.
#content h2 {
clear:both;
}
I am using markdown to write my text, so I do not have control over the HTML elements. Therefore, this is given:
<h2>Headline</h2>
<p>A paragraph</p> // standard bottom-margin to next <p>
<p>Another paragraph</p> // double bottom-margin should apply here because the next element is h2
<h2>Another Headline</h2>
<p>And another paragraph</p> standard bottom-margin to next <p>
Is there a css-related approach --- or any at all --- to apply a larger margin between <p> and the next <h2> than between all the other <p> to <p> transitions?
I'd like to explicitly control those <p>s that come before a new <h2>, but not any other.
I'm using float so that a simple <h2> top-margin does not help.
This is what my site looks like:
How about the sibling selector?
h2+p {/*your styles here*/}
Reference: http://css-tricks.com/child-and-sibling-selectors/
Edit: As per your edit this isn't what you're looking for.
You can control the h2's instead, for instance:
h2:not(:first-child) {
margin-top: 10px;
}
This will create a margin of 10px above every h2 except the first.
h2:before {display:block;margin-top:20px;height:20px;content:"";background:#aaa;}
rough example http://jsfiddle.net/eHreL/
normally for a html link:
<p>this is link</p>
<h1>this is link</h1>
<span>this is link</span>
Can a href link wrap outside of other element like so?
<p>this is link</p>
<h1>this is link</h1>
<span>this is link</span>
and also outside a div?
<a href="#">
<div>this is div
<p>here is the paragraph</p>
<div>and nested div</div>
</div>
</a>
Yes. There isn't any "prohibited" elements for <a> in the spec (except for the standard <html>, <body>, <head>, <title>, <meta>...). <a> links, and everyone deserves to be linked.
Keep in mind tho that <a> is inline, so you will have to set display: block to use it like <div>
Yes, you could do this. It looks a little odd, but it will work. Take note that in your second example the text will all map to the same link "#".
See the code below, I need to chnage the font-size of H2 tag within the second 'content-block', I can not modify the Div Tag or the h2 tag themselves directly, I can only modify the content below the h2 tags.
<div class="content-block">
<h2>Title here</h2>
<p>this is some text.</p>
</div>
<div class="content-block">
<h2>Modify This title only</h2>
<p>this is some more text.</p>
<style>## I can add CSS here ##</style>
</div>
Edit: I can not be sure how many 'content-block' divs will be above the one I want to modify, it chnages from page to page. (A shopping cart)
How is the possible?
Thanks.
.content-block + .content-block h2 {/* your css */}
Demo: http://dabblet.com/gist/4013393
+ is what we call Adjacent Sibling Selector.
Use CSS3 :nth-child() Selector hope it may solve your problem
check the Example Here: http://www.w3schools.com/cssref/sel_nth-child.asp
I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.