I am completely new to CSS. I want to display a simple Gantt chart and I am looking for a way to position the text indicating the number of month within, left to or right to the colored gantt bar.
Right now all the text is within in the bar and as the bar gets narrower it increases in height as the text needs to be wrapped.
In contrast to what the screenshot currently shows, I would want to have the text for Step 1 to be displayed to the right of the bar, the one for step 5 to be displayed to the left. The rest of the text should remain the same as long as the next is not too long to be wrapped over multiple lines, in that case the next should be displayed on that side right next to the bar where there is more space.
<div style="background-color:green;
padding:10px;
margin-top:-10px;
width:10%;
margin-left:%;
border-radius: 10px;
color:white;
text-align:center;
font-weight:bold
">2months
<div/>
Check out the white-space: nowrap; and overflow: visible; properties. This won't completely solve your problem - it'll probably just stop the bar from getting too small to contain the text, I'm guessing.
See this link from CSS-tricks for some inspiration. You might be able to use the line-height trick to hide the inner text. To then show text outside the block, you could have a hidden div (either to the left or right) on 'stand-by' that gets displayed only when the inside one is hidden.
The easiest way is probably to just use the padding and margin properties to position your colored div blocks, then displace the text either to the left or right like so:
<div style="background-color:green;
padding:15px;
margin-top:10px;
width:10%;
border-radius: 10px;
color:black;
font-weight:bold">
<div style = "padding: 0px 90px;
white-space: nowrap;"
>2 months</div>
</div>
<br />
<div style = "position: absolute;margin-right: 225px;
white-space: nowrap;
color:black;
font-weight:bold"
>7 months</div>
<div style="background-color:red;
padding:22px;
margin-top:-10px;
margin-left:75px;
width:10%;
border-radius: 10px;
color:black;
font-weight:bold;"
> </div>
However, this will cause issues if your screen doesn't have a fixed size... you can see this by running the code snippet in full screen. If that isn't the case, hard coding the position like this will work, albeit not necessarily the most elegant solution.
Also, your initial code had a typo in <div/> instead of </div>.
Related
I've found HTML/CSS combinations that do one or multiple of these things but none that do all of them together. Basically I want:
a tile-style menu with six tiles
each tile to be a fixed height and width (maybe 10em - square)
wrapped text without creating a bigger tile (line-height has this problem)
background colour for the tiles but whitespace (margins) to the right and below
all text centred vertically and horizontally
wrapped tiles for smaller displays
Basically I'm looking for something like the collapse by rows option here but with centred text (and WordPress doesn't seem to recognise the #breakpoint rule, so it doesn't work for me). I've tried various methods with display:table/table-cell, display:inline-block, position:absolute/relative and different element types (div, a, p, tables...) but can't get anything to fulfil all the criteria listed above. Anyone got a solution (ideally with just standard HTML and CSS to make it easy to implement in WordPress)?
Below are examples of one of the methods I've tried. Example one shows how I'd like it to look (with a nicer colour scheme and proper link styling), except with smaller tiles and wrapped text. Example two has wrapped text, but because of using line-height the tiles with wrapped text double in height.
.big a {
display:inline-block; width:15em; line-height:15em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}
.small a {
display:inline-block; width:10em; line-height:10em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}
<p><strong>Example one</strong></p>
<div class="big"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>
<p><strong>Example two</strong></p>
<div class="small"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>
How about something like this... using display:flex and align-items: center;
NB: may not be compatible with some older web browsers.
.small{
display:flex;
flex-wrap:wrap;
}
.small a {
display:flex; align-items: center; height:10em; width:10em; text-align:center; background-color:#FFC107; margin-bottom:10px; margin-right:10px; padding:30px; box-sizing:border-box;
}
<p><strong>Example two</strong></p>
<div class="small">
<a><strong>Language change</strong></a>
<a><strong>Language diversity</strong></a>
<a><strong>Language and the media</strong></a>
<a><strong>Language and gender</strong></a>
<a><strong>Child language acquisition</strong></a>
<a><strong>Discoures and attitudes</strong></a>
</div>
a tile-style menu with six tiles
I would suggest a <div> with six display:inline-block <div> children.
each tile to be a fixed height and width (maybe 10em - square)
So of course we give your <div> children width:10em; height:10em;
wrapped text without creating a bigger tile (line-height has this
problem)
First we give each <div> child an overflow:hidden; so even if the content is larger than the tile, it will be cut. Then, since we know that the child is 10em high, if you can fix the number of lines of the text, you can define line-height as, say, 2em or even 20% which will be 20% of 10em.
background colour for the tiles
That's easy-peasy: background-color:#00FF00;
but whitespace (margins) to the right and below all text centred
I suggest you use border instead: border-width:0px 0px 0.5em 0.5em;. If you do it well, nobody will be able to tell it's border and not margin.
vertically and horizontally wrapped tiles for smaller displays
Inline block will do this for you. Since each <div> child is 10em wide, you can give the container <div> max-width:30em and it will shrink on small screens making the inline-block children skip to the next line.
Hope this gives you some useful ideas at least.
I put a header which contains three divs. One has an image and the other two contain text.I then tried putting an image under it which has the same width of the header. But when I first put it, it was over the header div( I thought it should go under it). I then tried pushing it down by increasing the top margin and it worked. But as I increase the width of it the text in the header moves although it is not touching it!
This is the html code:
<div id="header">
<img id="logo" src="...."> <!---the logo at the top right-->
<div id="name">JANE DOETTE<div> <!---the text that moves - top left -->
<div id="job">Front-End Ninja</div> <!--under the text that moves but doesn't move--->
</div>
<img id="image" src="...."> <!---the image-->
This is the css code:
#header {
height: 6em;
width:80%;
background-color: white;
margin-left:10%;
margin-right:10%;
border-bottom:2px solid #BCBBBB;
margin-bottom:10px;
}
#image{
margin-left:10%;
margin-right:10%;
height:10em;
width:80%;
}
#logo {
height:88px;
width:89px;
}
#name {
color: #BCBBBB;
text-align:left;
float:right;
font-size:2.7em;
font-family:sans-serif;
height:50%;
}
#job {
color: #BCBBBB;
text-align:left;
float:right;
font-size:0.5em;
font-family:sans-serif;
font-weight:bold;
margin-top:0.2em;
}
Those are my questions:
Why doesn't the image automatically go under the header div?
Why does the text move?
Why is the top text the one that moved although the one at the bottom is nearer to the image?
What should I do to get the image under the heading div?
I adjusted the width of the image to 80%. But it seems to be just 20%. Why?
Has it got anything to do with position or display?
***Sorry for not adding an image of it but I don't have a reputation of more than 10 ( I am not allowed to).
***Sorry for the long questions.( I am still a beginner).
***Your answers would be much appreciated.
Your question isn't all that clear (please clarify), I will try to answer regardless, but I might misrepresent your question.
1 / 6 . The biggest problem you have I think is that you don't tell the browser how to 'order' the divs. Should they be under eachother or next to eachother? Use the "display" property for this. Use "display: block" to make sure that page-elements like divs or images are stacked under eachother. Depending on the margin the browser uses the remaining space to stack elements next or above eachother.
2 / 3. Because it floats. A float is relative to other elements on the page. If you make it float right, but the content within it align to the left the box goes left while the content within it stays as far to the left as it can keeping with the contraints of the div container. Therefore it seems to move. Lose the float and use "display: block" to make the div be the full width of the header div.
#name {
color: #BCBBBB;
text-align:left;
font-size:2.7em;
font-family:sans-serif;
height:50%;
display: block;
padding-left: 10px;
}
4 / 5 . Lose the "height" property of the image. Because the image has a relative 'height' property next to a relative 'width' property it distorts the image scaling. Use only the width as a percentage and it will scale proportionally.
You are missing a slash. Instead of
<div id="name">JANE DOETTE<div>
it should be:
<div id="name">JANE DOETTE</div>
After adding the slash it appears fine to me in Chrome and Firefox (except for the missing images obviously). See fiddle. Does that solve all of your questions?
I set my <P> tag with fix height and overflow:hidden. and on hover effect of it, I set overflow:visible;
my problem is text is display but I want to set z-index and background color of <p>,background display only for max-width of <P>. i want change background color at height of text it covered.
CSS:
.oe_description {
overflow:hidden;
max-height:4.2em;
text-overflow: ellipsis;
}
.oe_description:hover {
overflow:visible;
position:relative;
z-index:100;
background: #e5f2f7;
font-weight:bold;
}
see: FIDDLE
JSFiddle - DEMO
You could use max-height: none; to .oe_description:hover
CSS:
.oe_description {
overflow:hidden;
/* 4 times the line-height to show 4 lines */
/*max-height: 5.6em;*/
/* 3 times the line-height to show 3 lines */
max-height:4.2em;
text-overflow: ellipsis;
}
.oe_description:hover {
overflow:visible;
position:relative;
z-index:100;
background: #e5f2f7;
font-weight:bold;
max-height: none;
}
HTML:
<div class="col-xs-10 non_padding">
<p class="oe_description">
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
When text must stay on one line, but there is not enough room for it all, this article provides a solution.
</p>
</div>
If you're ok with having a scroll bar, you could change the overflow option to :auto. Solves the content display issue, sticks to the same div height and transforms the background color accordingly.
.oe_description:hover {
overflow:auto;/*for scroll*/
position:relative;
z-index:100;
background: #e5f2f7;
font-weight:bold;
}
I am trying to build a simple div with a span of text inside of it.
<div id="bottom-text">
<span>ONE STOP</span>
</div>
And here is the simple CSS styling I have in effect for "#bottom-text":
#bottom-text{
font-weight:700;
font-size:50px;
text-align:center;
margin:auto;
position:relative;
padding-top:25px;
height:65px;
width:auto;
}
For some reason, the text "ONE STOP" displays partially outside of #bottom-text. (only the top portion of all the letters...) I've tried using padding to fix it but the text then overflows partially into the padding region!
Can anyone help me figure out why this text is displaying outside the div it is supposed to be contained within? (I've been testing Chrome and Firefox)
Thanks all.
.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
display: inline;
}
<span class="largefont">block level span</span>
Assign a class to the span and play with that.
look at your code, the #bottom-text is 65px height, the font-size is 50px, and padding-top is 25px
65-(50+25) = -10
So you will see only the top 10 pixel of your text.
Set padding-top to a lesser amount, and play with just so it is correct
Check your line-height. Only thing I can think of is you might have some styles elsewhere that are adding some in. Try adding "line-height: 1;" to your existing #bottom-text CSS so that your text is actually 50px high. Or, if you want the text to vertically center in #bottom-text make your line-height match the height of #bottom-text (65px).
Ok so in my table cells I have an image on the left, a link that I want top aligned, and then a small description below that.
Right now I have the image on the left and the link top aligned. My problem is that the link text is carrying over below the image, instead of staying to the right of the image and cutting off at the width of the cell.
Here is my css for the link. Setting the width does nothing. I have tried setting the display to block, but then that puts the link below the image. I am very new to html so bare with my ignorance.
.jobLink {
color:black;
vertical-align:top;
width:100px;
}
EDIT 1:
Thanks for all of your suggestions. I am going to try and test this out tonight. Also, thanks for the double check on whether or not I really needed a table. The more I thought about it I really don't need a table with the way I am setting up each list item. It makes more sense to use a list.
EDIT 2:
Ok so here is the look that I am going for.
I have switched from a table to a list using everyone's advice. The data isn't really tabular.
EDIT 3
Here is the updated css I am using on the list.
.jobList {
background: white;
color:black;
width:inherit;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size:10pt;
font-weight:bold;
list-style:none;
float:left;
padding:0;
margin:0;
}
.jobList li
{
float:left;
overflow:hidden;
width:inherit;
}
.jobList li a
{
color:Black;
vertical-align:top;
white-space:nowrap;
}
.jobList li img
{
float:left;
}
Edit 4
This is the image and here is the list item in question. Also, there is a wrapper div on the list itself and this is probably key. I have added that css.
.jobsListWrapper {
width:318px;
height:500px;
overflow:auto;
float:left;
}
<li>
<div>
<img src="/images/page.png">
<a id="5182" href="/jobs.aspx?rid=1016&jid=5182">MyJobID - This is my long title for the task that I need to complete</a>
</div>
</li>
EDIT 5
I JUST SAW IT. The wrapper is causing the list item to overflow automatically...ok so how do I only overflow vertically? Ok no that wasn't the problem.
Try adding:
position:relative;
display:block;
overflow:hidden;
To the <ul> css
and
postion:absolute;
to the <li> css.
The reason for this is that if the <ul> is absolutely positioned, it is removed from the flow of the document, which in turn means that the <li> will position relative to the viewport and ignore the overflow:hidden of the <ul>
Though I do not recommend using a table unless this is truly tabular content, the following solution should work for any container element, including table cells.
If you use a css rule of 'float: left' on the image, the image will, obviously, be floated to the left side of its container. This will make sure that the image stops pushing content bellow it and the content will simply wrap around the image.
In this case, that means the image will position itself to the left, and the link and descriptive text will be right next to that, to its right.
I am assuming the HTML inside your table cell is something along the following lines:
<img src="http://www.heliam.net/Gein/_Media/apple_icon.png">
Here is a link
<p>And here is some descriptive text</p>
Now, if that is the case, then your CSS should simply make sure that the image is floated to the left:
img {
float: left;
}
You can see all this in action right here: http://jsfiddle.net/aySEe/
Something to try might be wrapping each element in a DIV and using float. Excuse the inline CSS.
<td style="width: 15%">
<div style="float: Left">
<img alt="" src="Image.png" />
Hello!
</div>
<div style="float: Right">
<p>Hey This is something.</p>
</div>
</td>
You could then push them closer together using width on the table cell
<td style="width: 15%">
Let me know if that helps!