I'm attempting to have text flow around images in the following fashion:
eg, images in two columns, with one image in the "center" column and a number of them in the right column. I tried "floating boxes" via display:inline-block; and I tried a table-like config using display:table/display:table-cell, but I was unable to provide the correct (changing) width for the text on the left.
(The apparent alignment of the 2nd parag of text with the bottom of the center image is not necessary.)
Appreciation for your assistance!
Here's a demo using float - does this accomplish what you want?
.column {
float: right;
}
.column img {
clear: both;
float: right;
margin: 5px;
}
<div class="column">
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
</div>
<div class="column">
<img src="http://via.placeholder.com/200x200" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
Related
<div class='card'>
<div class='cardleft'><img class='imgcard' src="..." alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>lorem ipsum...</div>
</div>
</div>
css
.card{
display:grid;
grid-template-columns: 320px auto;
}
.imgcard{
display:block;
width:100%;
margin:0 auto;
}
.cardright{
overflow:hidden;
}
.cardintro{
margin-top:9px;
}
Sometimes, cardintro content (lorem ipsum...) is too long and change the height of entire card.
I want the max-height of entire card to be the height of imgcard which is not fixed, and prevent overflow of cardintro text over that card's height.
I suppose this is solvable by javascript, but I hope by grid-template-rows or somehow using css.
Any help?
You could use absolute positioning of the cardright div that contains cardintro and set overflow hidden on the card. Here's a snippet with the same amount of text on three cards that all have different image height.
.card {
display: block;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.imgcard {
display: block;
width: 100%;
margin: 0 auto;
}
.cardright {
position: absolute;
left: 330px;
top: 0;
right: 0;
bottom: 0;
height: 100%;
}
.cardleft {
display: inline-block;
width: 320px;
}
.cardintro {
margin-top: 9px;
}
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x150" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x250" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x350" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
I have built a very basic responsive web page here:
https://codepen.io/beckytownsend/pen/wqaoRR
I want to split the main content into who sections, paragraphs on the left and the sidebar on the right when it expands past 1200px, like so..
P= paragraph, S= Sidebar
P S
P
I also want the two section to sit in the center of the page. I can't seem to figure out how to get this to work! Please could someone have a look at my code and let me know what I can do?
.main-content{
justify-content: center;
align-items: center;
display: inline-flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/*Paragraphs within main content*/
.paragraph {
float:left;
width: 60%;
order: 1;
flex-direction: column;
}
/*Sidebar*/
.sidebar {
background: teal;
float: right;
width: 30%;
order: 2;
}
<div class="main-content">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br>
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br>
Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia. Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br>
Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc, consequat nec purus non, volutpat egestas mauris.
</p>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
Wrap the paragraphs in a new container and give that the following:
.left {
display: flex;
flex-direction: column;
}
You can then remove all the flexbox properties from the paragraph. Note that float does not work in a flex container.
.main-content {
justify-content: center;
display: inline-flex;
display: -webkit-flex;
-webkit-justify-content: center;
justify-content: center;
}
.left {
display: flex;
flex-direction: column;
padding-right: 50px;
}
/*Sidebar*/
.sidebar {
background: teal;
min-width: 30%;
}
<div class="main-content">
<div class="left">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non
euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est
lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br> Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui
sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna
ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br> Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia.
Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br> Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit
amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida
nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc,
consequat nec purus non, volutpat egestas mauris.
</p>
</div>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan
aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque
id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
I am able to display content on image in desktop but when i am resizing my browser my content not showing properly.
So issue is how to set background image with full content?Please check my below images you will get idea what i am asking?
My background image height is 500px.
Would you help me in this?
Thanks in advance.
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
p{
color: red;
}
.test-1
{
background-image:url('images/images-bg.png');
background-repeat: no-repeat;
width: 100%;
height: auto !important;
background-position: center;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="test-1">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
</div>
</div>
</div>
In Desktop There is no issue in this
After resizing
Just edit the CSS, and add background-size
.test-1 {
background-image:url('images/images-bg.png');
background-size:cover;
background-repeat: no-repeat;
width: 100%;
height: auto !important;
background-position: center;
}
You can read more about background-size in HERE
remove the width 100% and set background-size: cover and also remove the html, body section. Your using bootstrap so you don't need to define that
p {
color: red;
}
.test-1 {
background: url(http://www.hollanders.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/i/sil370523644_1_2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="test-1">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
</div>
</div>
</div>
</div>
Goal:
Make the candy picture as a link that the user can press them.
Problem:
I don't know how to do it based on the code below.
Info:
*Please remember that the link is a actionlink from asp.net mvc.
*Please remember that it is the candy picture should be the link, not the text.
*Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<a href="#" id="foo">
<span>aaa</span>
</a>
<a href="" id="fooo">
<span>bbb</span>
</a>
You would need to use Url.Action to get the URL corresponding to the relevant action. The following code snippet would map to the "Foo" and "Fooo" actions of your controller.
<a id="foo" href='#Url.Action("Foo", "ControllerName")'>
<span>aaa</span>
</a>
<a href='#Url.Action("Fooo","ControllerName")' id="fooo">
<span>bbb</span>
</a>
seeing the containing div is position fixed, you can make the a tag absolute and define left, right, top and bottom...
#foo a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px
}
I bet that's the shortest way. But i really don't like inline js...
Still:
<div
onclick="javascript:window.location.href='#Url.Action("Foo", "ControllerName")';
return false;"
id="foo">
</div>
Also it's better to add div { cursor: pointer; } to your css, if you want to show that's the href.
The structure of my image and paragraphs is as follows:
<p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.</p>
<div class="_idGenObjectLayout-3">
<div id="_idContainer062" class="ObjExpOpt-Images">
<img class="_idGenObjectAttribute-1" src="image/animal.png" alt="" />
</div>
</div>
<p class="All-Book-Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet elementum ex, a porttitor arcu vulputate vitae. Mauris ac finibus nisi. Etiam at tellus vitae quam pretium eleifend. Donec at dictum nisi, id condimentum dui. Donec in tortor ipsum. Etiam sit amet turpis vulputate, maximus erat in, lacinia leo. Cras placerat lobortis fermentum. Phasellus vulputate libero et pellentesque mattis. Aenean tristique ante egestas nibh aliquet, a sagittis sem aliquam. Aenean sit amet diam elementum, cursus arcu non, vehicula lorem. Sed vitae ante id augue consectetur euismod. Suspendisse ac metus ut tortor mollis semper eget eu mi. Vivamus eleifend leo at felis bibendum rutrum. Proin condimentum consectetur velit, at tristique elit accumsan vel.</p>
When the page renders, the text of the lower paragraph overlaps over the image. How can I prevent this and make sure that the distance between the image and the parapgraph is 5 px and no overlap occurs whatsoever. Thanks!
Here's a live demo with my problem http://jsfiddle.net/zvnjnxnf/
Everything looks ok here: JsFiddle
p {display: inline}
img {display: block}
first, you should remove all the style for All-Book-Text and _idGenObjectLayout-3
then add the following css :
._idGenObjectLayout-3{
padding : 5px;
}