I am using sprite image for my website, My Icons are stacked horizontally and vertically.
The issue is when i try to use one particular sprite icon from the sprite image, I am not able to use only the corresponding sprite icon(rounded in blue in SS below) instead i got the entire image is spanning my div as below in Screenshot
I want to use only the particular Icon in left of text using padding-left (i gave 30px). I tried using background-size also, it is not working.
Please help me in this. Thanks in advance for any help.
My code is
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<style>
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</body>
</html>
See this JS BIN Demo http://jsbin.com/yojaj/1/edit
You need to add width and height rules in the sprite class to match the size of the icon in the sprite that you need.
Also try adding the icon as a pseudo element - like so:
.sprite:before {
content:'';
display: inline-block;
background:url("http://lorempixel.com/400/200/food") -50px -50px no-repeat transparent;
margin-right:5px;
color:red;
width: 20px;
/* icon width */
height: 20px;
/* icon height */
vertical-align: middle;
}
FIDDLE
You need to specify width and height for the .sprite class e.g
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<style>
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</body>
</html>
Try this:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<style>
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
margin-right:30px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite"></div><p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</body>
used to this
Define your html sprate icon class as like this
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
}
<div class="">
<div>
<span class="sprite"></span> // add this icon try this way
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
------------------
------------------Updated
than do this only for css
.sprite{
position:relative;
}
.sprite:after{
content:"";
position:absolute;
left:0;
top:0;
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
}
Related
I am trying to create two navigation bars with a Title and an image in between. This is what i currently have:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
float: right;
}
.site-info {
float: right;
}
.site-avatar {
float: right;
height: 120px;
margin-left: 15px;
}
</style>
</head>
<body>
<header>
<div class="topbar">
<nav class="site-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>
<img class="site-avatar" src="http://i.stack.imgur.com/xkF9Q.jpg">
<div class="site-info">
<h1>Title</h1>
<p class="site-description">Subtitle</p>
</div>
<nav class="content-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>
</div>
</header>
</body>
</html>
I would like to keep the text, navigation bars and the image floating to the right.
Image of what I am trying to achieve:
I'm trying to design the following block, given in image
The background image of building is separate from the human image, how can I use bootstrap grid system to align the images and text in this way, also keep the aspect ratio of images?
The background image is spread to 100% but the the content and human image is centered and aligned with other content
Use the building image as background for your body tag and the human image as an background for either .container or .row class.
Also the human image should be aligned right.
Something like
body {
/* image just for reference*/
background: url('http://www.eliteconcreterestoration.com/blog/wp-content/uploads/concrete-office-park-buildings.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.container {
height: 100%;
/* image just for reference*/
background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS2-Dj0_UAhag-zIDaVGoV2LuCIy62nGvt_zNJoeILF1VqM3EXOdK20qR6N');
background-repeat: no-repeat;
background-position: right;
}
.jumbotron {
background: transparent !important;
}
.jumbotron h1 {
font-size: 36px;
color: white !important;
}
.jumbotron .text{
color:white;
font-size:12px;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>A good <span style="color:lightgreen;">investment</span> pays the best <span style="color:orange;">interest</span></h1>
<p class="text">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p><a class="btn btn-primary btn-lg" style="background:lightgreen;" href="#" role="button">Register</a><a class="btn btn-primary btn-lg" style="background:orange;" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</body>
</html>
With this design, you don't (strait forward that is) The hand part will mess up your grid layout. Or merge images, or use a smaller version of your human image that will stay inside the grid (all blocks are squares with Bootstrap, and there is NO layering beyond background image of parent element.).
* Edit As Kishore Kumar Points out, you can. Something like this:
<body> <!-- has CSS background with buildings -->
<div class="container"> <!-- has CSS background with human, float: right --> <div class="row">
<div class="col-md-3">And more stuff for layout...</div>
</div
</div>
</body>
Here is how i would do.
create a section and give it the background image with background-size: cover; property and then use a container inside the section and put my grid.
<section class="building-bg">
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- text content -->
</div>
<div class="col-md-4">
<!-- png image with some negative margins or translate property -->
</div>
</div>
</div>
</section>
I need apply a style only whit content "something"
Here is an example on how you can do that :
<style>
.small {
color: #000 !important;
}
.small[value^="something"] {
font-size: 12px !important;
color: red !important;
}
</style>
<div class="small" value="soething">Lorem ipsum dolor sit amet.</div> <!-- Not working -->
<div class="small" value="something">Lorem ipsum dolor sit amet.</div> <!-- Working -->
It's as simple as that ! :)
I am using Bootstrap3 for my responsive page design here. I am adding a box inside the banner content with some text inside it as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<section id="slider">
<ul class="rslides" id="modest-slider">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/350x150&text=slider1" alt="slider1" />
</div>
<div class="slider-caption container">
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ui>
</section>
It is working fine in full screen. When I am resizing the browser the alignment is not working correctly. The box with content is not fit with the page. Any help will be appreciated!!
Try the solution with minor changes
Demo http://www.bootply.com/p6wIuR17QB
/* CSS used here will be applied after bootstrap.css */
#modest-slider {
position: relative;
}
.slider-caption {
position: absolute;
bottom: 0;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<section id="slider">
<ul class="rslides list-unstyled" id="modest-slider" stye="position:relative;">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/600x300&text=slider1" alt="slider1" class="img-responsive">
</div>
<div class="slider-caption container">
<div class="col-xs-10 col-sm-8" style="background: rgba(255, 255, 255, 0.6);">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ul>
</section>
Try this:
<div class="row" >
<!-- changing width to 100% with 600px maximum -->
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
This will not make the height change though, for that try:
change "height:130px;" to "height: 100%; max-height: 130px;"
You really need to read more about how Bootstrap works though as this is not a good way to use it
First, you should not assign width to your div, in case you are using bootstrap.
<div class="col-md-7" style="...width: 600px...
Using class col-md-7 assign a particular width to your section, which is in %, so that when you resize your browser, the div resizes accordingly.
But, you overwrote the width with 600px, which is a fixed width and does not flex with browser resize.
I want to expand my div height by 100%, but it is not working:
So far, my code is:
.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}
And the HTML:
<div>
<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
</div>
You should have specified the height of the outer div. Something like this will work:
<!doctype html>
<html>
<head>
<style>
.add
{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}
</style>
</head>
<body>
<div style="height: 768px;">
<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
</div>
</body>
</html>
From the CSS 2.1 Spec:
percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'.
So, since the containing block has no specified height, the floated element's height is auto.