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.
Related
I am trying to get a waved vertical borders with a box-shadow like this.
I am able to get the waved vertical borders but when adding box-shadow, it overlaps the waves as the waves are not statically positioned and don't directly belong to the container's vertical borders.
Use a different div for shadow with exact or slightly fewer dimensions than that of the wavy-border div. Use position: absolute; on both divs and give the wavy-border div a higher z-index to make it appear on the top of the shadow div. Set the yellow shadow but on the shadow div as you want. This way the shadow won't interfere with the wavy border.
You may want to put both divs in the same parent div and set the parent's display to relative. If you don't the absolute nature of wavy-border and shadow divs will be based on body and not the proper position in your HTML.
You can also use filter: drop-shadow(...); as Temani Afif mentioned in the comment. When doing this, you won't need to use two different divs. You just set the drop-shadow directly on the wavy-border div. drop-shadow makes it possible to shadow exactly based on the content, instead of based on a box.
The following image shows how I would like a set of nested elements to appear.
However, the elements are actually appearing like this...
I've tried setting various overflow and white-space options but can't achieve what I'm hoping for. My best guess is that the float is causing the blue-outlined element to have no width and consequently there's no reason to break the text.
How can I fix this?
If the person's surname is long without any spaces then the blue bordered element cannot fit in the same level as of the left element.
To make the blue bordered element fit in the same level as the left element you have to give some width to it along with word-break property.
<div style="width:25%;background:#ccc;float:left;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="width:74%;background:#ccc;float:left;margin-left:1%;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
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.
I have this type of arrangement
...<td>
<div></div>
<div></div>
<div></div>
</td>
The div tags are filled with dynamic data. I have put the div tags in the td cell because the center div is filled with an image, which can be different heights. What I am trying to do is get the top div to align to the top of the cell, the bottom div to align to the bottom, and the center div, which contains the image, to fill the entire space in the middle and be center aligned. All my attempts so far have failed and for some reason (yes I have looked and there is no competing styling) I cannot get the divs to fill the available space. I have tried encapsulating the divs in a container div but this didn't work either. Your advice/help please :)
Thanks, R.
there are some handy CSS properties you should look.
box-sizing (pls, start googling for this one).
margin, padding, vertical-align...
table-padding..
consider using "auto" as value for some centering.
The easiest way is to forget the divs and use table cells instead. The advantage here is that when you set a height to the table, the cells will automatically fill all the space. This way you can define a fixed height to the top and bottom cell, and the middle cell will take up the remaining space.
Example: http://jsfiddle.net/KaWPS/
And if you don't use fixed heights you'll see that the cells take whatever they can get, and the rest is divided over the rest of the cells: http://jsfiddle.net/KaWPS/2/