Adding a dotted line spacer/infill with CSS - html

I am working on a restaurant website. The design calls for the typical dotted line infill between a menu item and the price. I have been scouring the net and messing with it for an hour or so now and can't seem to find any good ways to do this with only CSS. I found a couple of other solutions on here that work great if you have a solid color background, however on this site it uses a background image and those solutions wouldn't work.
Example: Menu style "...." - fill in with periods has a good solution, but it sets the background colors to white of the menu item and price to hide the dotted lines behind them, but the page I am building has a background image so any solid color backgrounds would look bad.
I have tried using all kinds of combinations of table-row/table-cell or any other type of CSS display attributes and width settings on the elements, but no dice.
Here is some fake sample markup:
<ul>
<li><span>Soup</span><span class="dots"> </span><span>$2.99</span></li>
<li><span>Ice cream</span><span class="dots"> </span><span>$5.99</span></li>
<li><span>Steak</span><span class="dots"> </span><span>$20.99</span></li>
</ul>
I have been trying to get this to work by using the "dots" class element with a bottom border to fill in the gap, but nothing I try works. I also just put a bottom border on the LI element all the way across the bottom of each row, but that is not what the designer wants. I can only think of doing it in javascript as a last resort, but wanted to see if you guys had any ideas. Or, I can just use tables, but really wanted to avoid that as well.
Thanks!

I would go with something like this:
Example Fiddle
It uses the dotted border on the .dots element and shifts it some pixels to the top.
ul li {
display:table-row;
width:15em;
}
ul li span{
display:table-cell;
}
.dots{
min-width:10em;
position:relative;
bottom:4px;
border-bottom:1px dotted #777;
}
Nice sideeffect - you dont need to float the elements. However this solution uses display:table-cell so this won't work in old IEs (<IE8).
Depending on the background, you could use the li-border solution and replace the solid colors on the span-elements with the background-image itself.

I can be achieved by using definition lists (fiddle):
HTML:
<div id="wrap">
<div class="inner">
<dl>
<dt>$2.89</dt>
<dd><em>Lorem ipsum dolor sit amet </em></dd>
</dl>
<dl>
<dt>$21.89</dt>
<dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
</dl>
<dl>
<dt>$5.99</dt>
<dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd>
</dl>
<dl>
<dt>$8.99</dt>
<dd><em>Donec sed felis sit amet risus</em></dd>
</dl>
<dl>
<dt>$11.50</dt>
<dd><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd>
</dl>
<dl>
<dt>$5.99</dt>
<dd><em>Etiam ante ligula,</em></dd>
</dl>
<dl>
<dt>$5.99</dt>
<dd><em>Fusce condimentum</em></dd>
</dl>
<dl>
<dt>$7.55</dt>
<dd><em>Morbi nibh velit, sodales eu</em></dd>
</dl>
<dl>
<dt>$6.50</dt>
<dd><em>Etiam ante ligula,</em></dd>
</dl>
<dl>
<dt>$11.50</dt>
<dd><em>Fusce condimentum</em></dd>
</dl>
<dl>
<dt>$2.50</dt>
<dd><em>Morbi nibh velit, sodales eu</em></dd>
</dl>
<dl>
<dt>$21.50</dt>
<dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
</dl>
</div>
</div>
CSS:
* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
width:500px;
border:1px solid #eff2df;
margin:20px 20px;
background:#809900;
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
padding:20px 40px;
border:1px solid #4c7300;
position:relative;
left:-2px;
top:-2px;
background:#eff2df;
color:#4c7300;
width:418px;
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
position:relative;
width:100%;
border-bottom:1px solid #eff2df;
}
#wrap dd{
line-height:1.2em;
position:relative;
padding:0 5em 0 0;
text-align:left;
border-bottom:1px dotted #000;
clear:both;
margin:0 0 .4em 0;
min-height:0;
}
* html #wrap dd{
border:none;
background: url(images/dotted-leader.gif) repeat-x left bottom;
height:1%;
}
#wrap dt{
background:#eff2df;
padding:1px 0 1px 5px;
color:#809900;
position:absolute;
bottom:0px;
right:-1px;
z-index:99;
}
#wrap dd em{
margin:0 ;
position:relative;
top:.25em;
padding:0 5px 0 0;
background:#eff2df;
}
Reference Link

Related

Apply css only on the wrapped part of text

I have an HTML component that has an image floating to the left and text on the right. When the text's height is larger than the image, the text will wrap to the left. I want to add some padding between the image and the wrapped text. I could add a bottom padding to the image, but I don't want the padding to show up when the text is not wrapped. Here is what the component should look like when the text is no wrapped. The image should not have a bottom padding:
Here is what it should look like when the text is wrapped. There should be some padding between the image and the wrapped text:
Is there a way to do this through css?
An idea in case the image height is fixed or known:
.container {
border:2px solid;
min-height:200px; /* same as image height */
font-size:19px;
}
.container img {
float:left;
margin:0 20px 20px 0;
}
<div class="container">
<img src="https://picsum.photos/id/1014/200/200" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum quis mi vitae molestie. Sed scelerisque fringilla interdum. Duis ac purus nisl. Nulla vehicula vehicula turpis id convallis. Etiam nec nisl nibh. Mauris lorem mauris, vehicula nec massa in, accumsan egestas eros. Integer vehicula nulla sed enim laoreet maximus. Vestibulum at interdum sem. Sed interdum volutpat massa,
</div>
Yes, you can do it. Follow this example for HTML and css.
body {
margin: 20px;
text-align: center;
}
img {
float: left;
margin: 0px 10px 5px 10px;
}
p {
text-align: justify;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wraping an Image with the text
</title>
</head>
<body>
<div class="square">
<div>
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1024px-Image_created_with_a_mobile_phone.png" alt="Longtail boat in Thailand" width="300px">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>

How to move element relative to an element on top that varies in height

I added a ribbon effect to my h3 that looks like it's wrapped around my div. I just added a little triangle on the side and ordered it to be below the div and h3. I set the width of my h3 to 270px and the ribbon looks great is my h3 is a one-liner, but when the words occupy 2 or 3 lines, the h3 expands in height and blocks the triangle.
Is there a way to make the triangle move along with the height of the h3?
Fiddle: enter link description here
<div class="gray-bg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<div class="triangle-l"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet velit euismod, imperdiet purus a, semper eros. Aliquam lacinia tellus nec justo condimentum euismod non et dolor. Ut sit amet eleifend turpis. Pellentesque in adipiscing risus. Vivamus non accumsan nisl. Nulla accumsan velit ipsum, at aliquam arcu consectetur in. Integer vestibulum nunc a odio accumsan vehicula. Nunc at metus ullamcorper justo bibendum hendrerit. Aenean sit amet porttitor urna. Sed bibendum velit sed est eleifend, non cursus arcu hendrerit.
</p>
</div>
Also my z-index is acting weird. The triangle has a z-index of 1, the div has 50, and the h3 has 100... but the triangle is still on top of the div when it should be on the bottom.
*Not sure what the best approach is - CSS or jquery - so I'm tagging both.
I think I'd take a different approach, and create a pseudo element of the <h3> to create the triangle. Also, you can make a triangle the exact shape you want, meaning there's no need for z-index to hide the top half, and you can position it top: 100% meaning it's always correct irrespective of the content within the <h3>.
HTML:
<div class="gray-bg">
<h3>Lorem ipsum</h3>
<p>...<p>
</div>
CSS:
.gray-bg h3:after {
content:'';
display: block;
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width: 0 15px 15px 0;
height:0;
width:0;
position: absolute;
top: 100%;
left: 0;
}
Demo
Make position relative and adjust top and left
Fiddle : http://jsfiddle.net/feZbL/
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: relative;
top: -48px;
left: -49px;
z-index: 1;
}
Move the triangle into the h3, and position it relative to the bottom rather than the top.
http://jsfiddle.net/4pnXp/
Note that this requires you to change the z-index of the triangle to -1 to position it behind the h3.
For bonus points, you can also do away with the .triangle-l element altogether, and use :after pseudo element to make the triagle!
http://jsfiddle.net/kE27U/
My solution was to wrap h3 and the triangle in a div then position it relative
http://jsfiddle.net/MKMs6/8/
<div class="wrap">
<h3>Lorem ipsum</h3>
<div class="triangle-l"></div>
</div>
check your solution Demo jsFiddle
Update .gray-bg .triangle-l class
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: absolute;
bottom: -15px;
left: -15px;
z-index: -1;
}

Positioning of HTML elements with css

HTML Code
<header>
<h1>Event Heading</h1>
<div class="meta">09 JUL 2014</div>
<div class="textblock">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
</header>
Issue
I have this HTML structure which I can not edit/rearrange. I would like to position the h1, div.meta and div.textblock is as in the picture below.
I can't work it out with floats the way I want to because of the sequence of the HTML.
Illustration
This can be achieved with absolute positioning:
header {
position: relative;
min-height: 100px; }
div.meta {
position: absolute;
width: 100px; height:100px;
top:0; left:0;
border: 1px solid red; }
header h1 {
margin-left: 120px;
border-bottom: 2px solid red; }
header div.textblock { margin-left: 120px; }
See fiddle: http://jsfiddle.net/utsKx/
You can change the div.meta widths and h1/textblock margin-left to percentages if you want a responsive layout.
EDIT
Added min-height to header to ensure div.meta never falls outside the parent header block. (Thanks for MarcAudet for pointing this out)
See this example:
Codepen Example
I think this is what you're looking for!
You can use this demo
Code Pen Demo
HTML
<header>
<div class="meta L">09 JUL 2014</div>
<h1 class="R">Event Heading</h1>
<div class="textblock R">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
</header>
CSS
header
{
width:650px;
display:inline-block;
}
.meta
{
width:150px;
height:150px;
border:1px solid red;
margin:5px;
font-size:22px;
text-align:center;
}
h1,.textblock
{
width:400px;
text-align:left;
border:1px solid red;
}
h1
{
color:#B1003B;
margin-top:5px;
}
.textblock
{
margin-top:-22px;
}
.L
{
float:left;
}
.R
{
float:right;
}
.C1
{
color:#000000;
font-weight:bold;
font-size:36px;
}
.C2,.C3
{
color:#777777;
}
JQuery
var str = $(".meta").html();
s = str.split(' ');
$(".meta").html("<span class='C1'>"+s[0]+"</span></br><span class='C2'>"+s[1]+"</span></br><span class='C3'>"+s[2]+"</span>");

Problems aligning an element at the bottom of a parent element

I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle

Div with paragraphs with paragraph numbers aligned and outside the div (see sketch)

I need to do this in CSS
The red box is a <div> with several paragraphs <p>
I want to have the paragraph numbers to the right of the red box, and the paragraph numbers are aligned to the top of the respective <p>
Can I do this layout only with CSS?
I have tried so far to do this with javascript, recording the position of each paragraph element then positioning the numbers in the same y coordinate.
Thanks
You could do
<p style="position: relative;">
<div style="width: 30px; position: absolute; top: 0; right: -30px">#1</div>
Lorum ipsum...
</p>
You would probably want to use classes too, inline styles for example only.
Also, a valid argument is to use an ordered list. This is easily done by wrapping those p elements in li elements, which in turn will be wrapped by an ol element. Be sure to use ol { list-style: none; }, otherwise you will get 2 sets of numbers!
As for adding the numbers, you could use server side script and a DOM parser or use JavaScript
var p = document.getElementById('content').getElementsByTagName('p');
for (var i = 0; i < p.length; i++) {
p[i].getElementsByTagName('div')[0].innerHtml = '#' + (i + 1);
}
Of course, you can also use jQuery
$('#content p').each(function(i) {
$(this).find('div:first').html('#' + (i + 1));
});
This should semantically be an <ol>.
In any case something like this might work:
ol
{
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
p { border-right: 1px solid red; padding: 10px 0; }
span.number { vertical-align: top; float: right; }
.clear { clear: both; }
<ol>
<li>
<p>
content
</p>
<div class="number">
#1
</div>
<div class="clear"><div>
</li>
</ol>
Here's what I'd do:
<div>
<p>
content 1
<span>#1</span>
</p>
<p>
content 2
<span>#2</span>
</p>
<p>
content 3
<span>#3</span>
</p>
</div>
and the css looks like:
div {
padding:10px;
border:1px solid red;
width:500px;
}
p {
position:relative;
}
p span {
font-size:30px;
position:absolute;
top:0;
right:-60px;
}
and now just play around with positioning.
This answer builds on Graphain's answer (he's right on that OL should be used, since it's semantically correct). It uses jQuery to add the numbering.
jQuery
$(document).ready(function(){
$("ol li").each(function(i){
$(this).prepend('<span class="number">#'+(i+1)+'</span> '); // Append the number (using prepend, but the CSS will put the number after the box
});
});
CSS
ol {
list-style: none;
border: 1px solid red;
overflow: auto;
width: 500px;
}
li {
margin: 0.75em 0.75em 0.75em -28px;
}
.number {
position:absolute;
left: 560px;
}
HTML
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
</ol>