We overlap two Divs using "postion:absolute" and z-index.
http://jsfiddle.net/z5GXV/
The text in the green zone (div id="Zone2") is hide by text in the yellow zone (div id="Zone3"). Any help on how to display the text?
Edit1: We can't use nested divs.
I'm not sure what all the absolute positioning is good for, but you might want to put the yellow zone into the green-zone div, and use a float.
Solution with a float within the green zone
Solution with padding
Simplest way I can possibly think to do this:
Uses one nested div inside the Zone2 to wrap your text and make it appear as if it's wrapped to Zone3.
This is similar to using a <p> or <span> with display: block;.
jsFiddle example.
Related
Two columns of boxes, and sometimes, left-column boxes can be larger than the column, and have to move down rigth-column boxes to avoid collision.
Boxes of right or left column can be contained or not, but I don't know # of larger box. Anything can be floated, block or inline, etc.
I have this:
I want this:
Is this somehow possible with CSS only?
JSFiddle (first screenshots)
Thanks!
Got it! Setting greens to inline-block and float: left on blues (and not their parents) works as expected. No JS ;)
JSFiddle (I inverted blue and green in my attemps)
I have to apply the same style for a set of paragraph. The top border have to be look the same like this.like this
I don't want to make it for me, I just need some advice where to start!
Thank you!
It looks like there are 2 out-of-the-ordinary things you need to do for this:
Have "partial" left and right borders.
Add a diamond (or is it a circle?) to the center of the top border.
To achieve number 1, you can add a ::before and ::after pseudo element to the container. If you make them shorter than the main element, fill it with white, you can position it so that it overlaps the main element's left and right borders, causing a partial overlap and the partial-border effect.
For number 2, you can add a separate element and position it over the center of the top of the main element's top border.
Does this make sense?
If you don't want to / cannot use images but may add additional code to your paragraphs, this should work for you:
http://jsfiddle.net/Moonbird_IT/3rafe27z/2/
This draws the additional time line with the dot above your paragraph:
<div class="head-info">
<span class="year-left">2000</span>
<span class="year-right">2005</span>
<div class="yellow-dot"></div>
</div>
The rest is just CSS positioning the years to the left and right and the dot showing up in the middle. You may have to add an additional <br> tag to clear the floated years.
Horrible title of this question, I know. Sorry.
I have four divs similar to this . What i want to do is simply to make the vertical space between div number 2 and 4 to be removed, and without changing the structure of the HTML. Is it possible to do with just CSS (of course without negative margins or other non generic solutions)? And I also want the div 1 and 3 to be without the vertical space in the case of a longer div 2 than 1.
The desired result would graphicly look something like this.
Thanks.
Well, not with just floats. That would be to use absolute positioning, or change the structure of the html so you have div number #2 and #3 hare right floated, and then a left float on div #4.
Absolute positioning and negative margins is another option, not very dynamic, but it works.
The best option would be to use a bit of jQuery to solve your problem.
Check out: http://masonry.desandro.com/
Add to the code of 4th div
position:relative;
top:-100px;
look for the class added to the 4th div
http://jsfiddle.net/eZGTm/1/
Is it possible to style text wrapping ALL AROUND an element as it appears in the image attached? (Either CSS, or JQuery)
.
Thank you
As far as I'm aware, there's only an ugly hack where you cut your image into "slices" and have them sitting inside your paragraph text at the right spots. Needless to say, that's not very nice nor very dynamic.
Floating only allows you to move elements to the left or right.
I know about margin auto. However, it does not work for me here.
I'm trying to center a (possibly long) line of text over a (relatively narrow) image. If the text is longer than the image, it should spill out of the resulting box on either end, so the whole complex is only as wide as the image.
The markup is something like this:
<div class="bb">
<a href="blahblah">
<b>CaptionAbove</b>
<img src="blah.png"/>
</a>
<b>below</b>
</div>
.bb is an inline-block so these bb's pop together horizontally in a row. CaptionAbove may be longer than the img is wide, but should not make the neighbors spread out! elements a and b are display:block, so everything inside here stacks up vertically.
If I give the <b> a specified width like 1em so it doesn't grow to surround the text, then the overflow of the text is on the right only, and the artificial box is flush left within the enclosing <a> block.
I like the markup grouping the img and the caption together, and a table would not only lose that but the mouse-over effects knowing that the vertical stack is all one item.
Any suggestions welcome.
How's about something like this?
http://jsfiddle.net/UvbQJ/1/