I need to create HTML rows where there is a text (with variable width), a line (or an hr) and an image.
Text is with a variable length, and the image have a fixed width.
I need something like:
VARIABLETEXT----------------------------------IMAGE
and this rows may be always 100% width.
I tried with the same CSS, but without result.
How I can do it?
Thanks
I've done this before by making the line go 100% of the width and floating the end elements. Using position you can then place the line behind the other two.
Set the background-color of the two floated elements to the same color of parent background such that it doesn't show the line behind them, and will appear like the line is expanding/contracting
Here an example https://jsfiddle.net/0sqL5bc9/2/
There are several ways to achieve this
Follow this thread you may find answer How to repeat a character in HTML?
Example
<div class="line">
<span ><label for="text">VARIABLETEXT</label></span>
<span class="image">image</span>
</div>
CSS:
.line{
border-bottom:1px dotted black;
position:relative;
height:16px;
}
.line span{
display:inline-block;
position:relative;
background:white;
bottom:-2px;
height:100%;
padding:0 5px;
}
.line .image{
position:absolute;
right:0;
}
Link here for fiddler
Related
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?
After practicing some of the CSS i have been learning i have encountered a problem and despite trying numerous things i cant seem to get what i want. I transformed the text to fit in the grey divs vertically, but i cant seem to get it so the words are all displayed on one line. How do i acheive this? I think once i get that it should be easy to position them centrally.
http://jsfiddle.net/#&togetherjs=DGHlFmn0Hg
You should center the text first using transform and absolute positioning. Then just apply the rotate transform (around the center point by default):
#headline .buttons {
height:100%;
width:50px;
background:#a5a5a5;
float:right;
margin-right:3px;
color:#fff;
/* add this */
position:relative;
}
#headline .buttons p {
margin:0;
text-align:center;
position:absolute;
width:260px;
top:50%;
left:50%;
transform: translate(-50%, -50%) rotate(-90deg);
}
Jsfiddle demo.
Note that the width of the <p> element will just fill the width of the containing button which is just small (hence the text wrapping). So you have to set the width explicitly as large as possible (it does not really matter) so that the text will span on a single line.
Good approach to vertical text that is placed in one line and takes as much vertical space as needed is described in this article: http://kizu.ru/en/fun/rotated-text/
The 1st example there seems to be exactly your case (compact table headers).
I am creating an HTML\CSS tabless layout starting from a psd file and I am having a litle problem.
This is my final result that I would obtain:
and this is my HTML\CSS result: http://onofri.org/example/WebTemplate/
As you can see I have some problem with the left sidebar because the last blue box (the #c div) does not extend vertically to the end of the #container div and so don't match with the footer background immage.
The pnly "solution" that I have found (but this is not a correct solution) is to increase the value of the min-height* property of the **#c div of my sidebare. For example if I increase this value from the original 234px to 334px it seems to work well.
But this is not a real solution because if the amount of content change of the page change this problem occurs again.
How can I solve? What can I do to extend the height of the #c div until the end of its container
Tnx
Andrea
Here's a little trick I use sometimes:
What you need to do is have both the #content and #sidebar divs within a container div. You tell that container div to have a class of "clearfix" and it will stretch itself to be the height of the tallest column. You can then give the container div a background image if you want to make the background of each column look like it stretches the whole length.
For example, a 1px high repeating background like this might work: http://i.stack.imgur.com/W84Xa.jpg
THE CSS:
.clearfix:after{
content:”.”;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;}
.clearfix{
display:inline-block;
}
html[xmls].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
#container{
width:770px;
}
#content{
width:542px;
float:left;
}
#sidebar{
width:228px;
float:left;
}
THE HTML:
<div id="container" class="clearfix" >
<div id="content">
Content Div Text
</div>
<div id="sidebar">
Sidebar Div Text
</div>
</div>
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).
Take a lok at this site: http://www.naaf.no/fersking
If you hover the mouse over the three article boxes, you will see that both text and image changes.
I've placed the text in a DIV which floats above anothe div (image) with opacity set to 60%. But can anyone explain to me why the first article is approx 5px lower than the two other boxes? The first article is aligned with the bottom - it should be 5px higher up.
Here is the CSS for the text box:
#articleImageList .introText {
background-color:#000000;
color:#FFFFFF;
height:50px;
margin:0 2px;
opacity:0.6;
overflow:hidden;
padding:5px 20px;
position:relative;
top:-75px;
z-index:0;
}
Make all your images the same size. Resize /upload/Ferskingen/COLOURBOX1021676.jpg (the image in the first article box) so it´s 440x239px (like the other images, it´s 430x239 atm).
The image makes the div.articleImage higher then the other two hence makes your position: relative; bottom: -75px; not render the result you want (but it behaves right).
Or:
remove min-width in the #articleImageList img-selector in main.css line 439.