For example, I have a div, and some text content inside of it, like this:
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu sapien
sed massa placerat rutrum. In tristique purus eget porta pharetra.</div>
Now I want to add an icon from FontAwesome into the background, like this:
Notice that, I'd like the div to "crop" the icon a little bit, which I failed to do. Because when the icon is displayed as a block, you cannot crop it by using overflow: hidden.
Does anyone know how to achieve this effect?
You can do this using relative and absolute positions.
Here is a rough example to get you started: http://jsfiddle.net/n57uf/1/
<div class="parent">
<i class="icon-star-empty icon-4x child"></i>
<p class="content">Lorum ipsum lorum ipsum etc tect</p>
<div>
.parent {
position: relative;
border:1px solid black;
height: 200px;
width: 200px;
overflow: hidden;
}
.child {
position: absolute;
top: -15px;
left: -20px;
}
.content {
padding: 10px;
font-size: 16pt;
}
you can try the following code inside any div.
It will not interfere with other elements.
<i class="fa fa fa-microchip fa-10x" style="color: white;position: absolute;right: 10px;top: 10px;opacity: 0.3;"></i>
I came up with a solution:
<div class="wrapper">
<i class="icon-star"></icon>
<div>Lorem ipsum dolor sit amet ...</div>
</div>
and float both children to the left, and set them to have negative margins.
Update: Awww ... Jason beat me to it.
Related
I need to design the below elements:
1st Parent element - Menu
Child element - popup
2nd parent element - Body
I need to bring popup to the front then body and then menu.
is this possible?
Html
<div class="menu">
<div class="popup">
Test content
</div>
</div>
<div class = "body-content"></div>
CSS
.menu {
z-index: -1;
}
So now my body content will come front ,menu will go back. But now i tried to click popup div. it just behind the body content. I need to bring that front.
Stack layer
1. Popup
2. Bodycontent
3. Menu
Thanks in advance.
Your Question is not that easy to understand without an example, code showcase, or any other example.
But I think you can do what you want to do by using negative z-index.
Edit: I see you have edited your question, but it is still not that easy to know what you mean.
But here is my best guess:
http://codepen.io/Type-Style/pen/rjOzWa
.popup {
/* decoration */
border: 2px dotted;
background: rgba(255,125,0,0.6);
/* place above menu and body-content */
position: relative;
z-index: 1;
top: 30px; /* create overlap for demo */
}
.body-content {
background: rgba(255,0,0,0.6);
position: relative;
z-index: -1;
bottom: 30px; /* create overlap for demo */
}
div {
/* just decoration styles */
width: 350px;
margin: 0 auto;
padding: 10px 0;
}
.menu {
background: rgba(50,50,255,0.6); /* opaque background color for understanding */
}
.popup {
/* smaller for decoration */
width: 300px;
border: 2px dotted;
background: rgba(255,255,0,0.6);
/* place above menu and body-content */
position: relative;
z-index: 2;
top: 25px; /* create overlap for demo */
}
.body-content {
background: rgba(255,0,0,0.6);
position: relative;
z-index: 1;
bottom: 40px; /* create overlap for demo */
}
<div class="menu">
Menu Test Content: 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 class="popup">
Test content popup. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div class="body-content">
Body-Content and more random Text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. <br />body-content test-content: malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
</div>
I think what you want is a popup over everything.
I don't understand the need of having the content above the menu.
But this is the way I did it.
Note: the position: relative; is needed in order to make z-index work on the particular element.
By using relative, the dimensions the element occupies still remain.
If you don't want that, you can define
position: absolute;
This makes positioning a little bit trickier, since it is placed to its nearest non-static parent element.
I have a weird issue with some of my divs. Right now my divs are set up to take up the whole screen then have a background color then a background image over it. However, while everything displays properly, if I try to add any content specifically everything disappears except for my background color. I've never had this problem before and I believe it has something to do with how my images and my div are set up. But I can't find a solution so I was wondering if any of you guys could help! I've included the html and css down below!
Here is the jsfiddle that might help: http://jsfiddle.net/e7C87/1/ the red section is the section where I'm trying to place a nav bar and where the background image dissapears
Html (the area with the is the div that's giving me issues all the other divs displays correctly):
<div id="induoIntro" class="divide">
<div class="graphic" style="background-color:#ff837b">
<p id="introGraphic"></p>
<nav>
Designers
Developers
Directors
</nav>
</div>
<div class="textBody">
<p>A rag-tag group of desginers, directors and developers hoping to collaborate with you in an effort to satisfy your endeavours, beautify the web, and enginneer a functional interaction; we'll even guaraantee affordability.</p>
</div>
</div>
<div id="designers" class="divide">
<div class="graphic" style="background-color:#FFB37B">
<p id="designGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="developers" class="divide">
<div class="graphic" style="background-color:#CEE28F">
<p id="devGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="directors" class="divide">
<div class="graphic" style="background-color:#C195DA">
<p id="directGraphic">
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
CSS:
.divide {
height:200%;
}
.graphic {
display:table;
height:50%;
width:100%;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#introGraphic {
background-image: url(../images/WAInduo-02.svg);
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
}
#designGraphic {
background-image: url(../images/WAdesign-03.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
#devGraphic {
background-image: url(../images/WAdevelop-04.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: bottom center;
}
#directGraphic {
background-image:url(../images/WAdirect-05.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
.textBody {
display:table;
height:50%;
width:75%;
margin:auto;
}
.textBody p {
display: table-cell;
vertical-align: middle;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size:45px;
margin:auto;
}
Okay, you have a lot of irrelevant code there. Here is a JSFiddle and the code that is relevant to your problem (it can be difficult to determine, but if possible, it really helps to provide only the requisite code that we need to solve your problem): JSFiddle
HTML:
<div id="header">
</div>
<div id="induoIntro" class="divide">
<div class="graphic">
<p>Graphic Test</p>
<nav>Test</nav>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#header {
position: absolute;
height: 70px;
top: 0;
width: 100%;
background-color: #fff;
}
.divide {
height: 200%;
}
.graphic {
display: table;
height: 50%;
width: 100%;
background: #ff837b;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
As you can see from the JSFiddle, the <p> contents of "Graphic Test" are appearing properly, but the <nav> content is not. Well, if you look at the CSS, you see that any <p> element that is a child of an element with the .graphic class has special instructions, namely display: table-cell, vertical-align: middle;, and text-align: center;.
The <nav> class, however, has no such special instructions. If you remove those instructions from your .graphic p selector, you'll see that "Graphic Test" disappears as well. Where is it going? You can find it using your browser's built-in code inspector, but I'll just tell you: it's moving up to the top of the document.
But wait, isn't that where your header is? Exactly. You have an absolutely positioned header, which means it is removed from the normal document flow and placed on top of the document. So, in effect your <nav> element is being hidden by your header. To illustrate this, we'll give some opacity to your header and see the element sitting behind it:
JSFiddle
Now, if we go back to your original provided JSFiddle and do the same thing to the header there, this is what you'll see: JSFiddle
So to solve this, you should take the CSS properties you have for .graphic p and copy them to a new selector, .graphic nav, or something similar. Hope this helps! :-)
So I have two divs next to each other which have the class .category and they are supposed to be responsive.
<div class="content">
<div class="category">
<img src="images/category1.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor.
</p>
</div
<div class="category">
<img src="images/category2.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
</p>
</div>
</div>
This is my CSS:
.content {
width: 100%;
background: red;
}
.category {
max-width: 470px;
background: #ffffff;
display: inline-block;
vertical-align: top;
position: relative;
}
When I start resizing the window, the second .category block moves underneath the first .category block. However, I want both the .category blocks to reduce in width and stay next to each other.
Anybody got any suggestions?
First, you have some typographic errors in your HTML Markup (you are missing the > sign on the closing div tag of the first category div).
Second, you should be using percentage widths for responsive elements like this :
FIDDLE
CSS :
.content {
width: 100%;
background: red;
}
.category {
max-width:470px;
width: 50%;
background: #ffffff;
float:left;
vertical-align: top;
position: relative;
}
add float:left; to .category in css and use either % or a css media query
#media(min-width:something;){
.category {
width: something;
}
}
to set the width of the elements.
I am trying jQuery Mobile for a project and am constructing a list. For the element, I would love to find a way to write to 2 lines, and then generate an ellipsis. Currently, the ellipsis generates after a single line like so:
Lorem ipsum dolor sit amet, consectetur...
I would like to know if there is a relatively feasible technique to have it display such as this:
Lorem ipsum dolor sit amet, consecteturadipiscing elit. Phasellus pretium...
My HTML is as follows:
<ul data-role="listview">
<li>
<a href="#">
<img src="images/thumbs/sample_photo.jpg" width="300" height="225" alt="Sample Photo">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium consectetur.</h3>
<p>Vestibulum risus mi, eleifend quis gravida.</p>
</a>
</li>
</ul>
jQuery Mobile's CSS for the element is as follows:
ui-li-heading {
font-size: 16px;
font-weight: bold;
display: block;
margin: .6em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Thank you for any tips.
I think you can just set the height to be equivalent to 2 lines of text. Add these two lines to the css for ul-li-heading:
height: 32px; // font-size * 2
display: block; // just to be sure
Of course, combine it with your original CSS above.
My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solution is:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}
<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>
I get the following with above code:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|
Please advise. Many thanks!
Remove the float on the left column.
At the HTML code, the right column needs to come before the left one.
If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)
Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.
Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).
Example HTML:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Example here: http://jsfiddle.net/jackJoe/fxWg7/
See http://www.alistapart.com/articles/negativemargins/ , this is exactly what you need (example 4 there).
<div id="container">
<div id="content">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
#container {
width: 100%;
background: #f1f2ea url(background.gif) repeat-y right;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: right;
Best to avoid placing the right column before the left, simply use a negative right-margin.
And be "responsive" by including an #media setting so the right column falls under the left on narrow screens.
<div style="background: #f1f2ea;">
<div id="container">
<div id="content">
<strong>Column 1 - content</strong>
</div>
</div>
<div id="sidebar">
<strong>Column 2 - sidebar</strong>
</div>
<div style="clear:both"></div>
<style type="text/css">
#container {
margin-right: -300px;
float:left;
width:100%;
}
#content {
margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
width:300px;
float:left
}
#media (max-width: 480px) {
#container {
margin-right:0px;
margin-bottom:20px;
}
#content {
margin-right:0px;
width:100%;
}
#sidebar {
clear:left;
}
}
</style>
Simplest and most flexible solution so far it to use table display:
HTML, left div comes first, right div comes second ... we read and write left to right, so it won't make any sense to place the divs right to left
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
.right {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
Cases examples:
// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}
// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}
I'd like to suggest a yet-unmentioned solution: use CSS3's calc() to mix % and px units. calc() has excellent support nowadays, and it allows for fast construction of quite complex layouts.
Here's a JSFiddle link for the code below.
HTML:
<div class="sidebar">
sidebar fixed width
</div>
<div class="content">
content flexible width
</div>
CSS:
.sidebar {
width: 180px;
float: right;
background: green;
}
.content {
width: calc(100% - 180px);
background: orange;
}
And here's another JSFiddle demonstrating this concept applied to a more complex layout. I used SCSS here since its variables allow for flexible and self-descriptive code, but the layout can be easily re-created in pure CSS if having "hard-coded" values is not an issue.
This is a generic, HTML source ordered solution where:
The first column in source order is fluid
The second column in source order is fixed
This column can be floated left or right using CSS
Fixed/Second Column on Right
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Fixed/Second Column on Left
#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Alternate solution is to use display: table-cell; which results in equal height columns.
Hey, What you can do is apply a fixed width to both the containers and then use another div class where clear:both, like
div#left {
width: 600px;
float: left;
}
div#right {
width: 240px;
float: right;
}
div.clear {
clear:both;
}
place a the clear div under left and right container.
I have simplified it : I have edited jackjoe's answer. The height auto etc not required I think.
CSS:
#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}
#leftCol {
background: #e8f6fe;
width: auto;
}
#rightCol {
float:right;
width:30%;
background: #aafed6;
}
.box {
position:relative;
clear:both;
background:#F39;
}
</style>
HTML:
<div id="container">
<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
<div id="leftCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>