I want to implement the bullet style for each unordered list.I have the sprite image for that.And I implemented it.I took the example form the below link.
http://www.cssbakery.com/2012/08/css-list-with-icon-sprites.html
It works fine except in IE7.The same tutorial I want to run in IE7 also.How can I achieve it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Sprites for Bullets</title>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<style>
div
{
width:30%;
float:left;
}
.bullet {
list-style-type: none;
margin:0; padding:0;
}
.bullet li
{
// padding-top: 5px;
padding-left: 20px;
//margin-bottom: 15px;
//line-height:1.5em;
//position: relative;
}
.magento li:before
{
display: inline-block;
position: absolute;
margin: 9px 0 0 -20px;
min-height: 9px;
background: url(images/bulletsprite.png) no-repeat -116px 0px;
content:"";
// vertical-align: middle;
width: 9px;
height: 9px;
float:left;
}
</style>
</head>
<body>
<div>
<p>Magenta</p>
<ul class="magento bullet">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
</ul>
</div>
</body>
</html>
IE7 does not support the :before pseudo selector, so the majority of those styles will not work.
See the :before/:after browser support chart.
You can use IE8.js to make :before work in IE7.
Before test page: http://ie7-js.googlecode.com/svn/test/before.html
Related
How can I hide the overflow of this image without removing it from the flow? If I made it a background image or positioned it absolutely, the text would flow right through it, and I don't want that. Applying overflow:hidden to the parent only expands the height of it to contain the whole image. What I want is:
The image to float right
The text to wrap around the image
The height of the section to be determined by the height of the text only
The image to be cropped if necessary
https://jsfiddle.net/krishunt/e7mzo54c/
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-family: helvetica;
color: #333333;
}
section {
background-color: #E3E2DE;
padding: 20px 30px 30px 30px;
max-width: 1200px;
}
.pull-right {
float: right;
margin-left: 20px;
}
</style>
</head>
<body>
<section>
<img class="pull-right" src="http://thomasprintworks.com/temp/copier.png" />
<h2>Title of Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id.</p>
</section>
</body>
Add overflow:hidden to the <section>, this should work!
I set color-background for .header and .footer to yellow. But it also sets same background colors for the content div, why ? It isn't logicial.
<html>
<head>
<title>
</title>
<style type="text/css">
.header {
background-color: yellow;
}
.footer {
background-color: yellow;
}
.column {
width: 50%;
}
div.right {
float: right;
}
div.left {
float: left;
}
img {
float: right;
margin: 0 0 1em 1em;
}
</style>
</head>
<body>
<div class='header'>
header
</div>
<div class='left column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='right column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='footer'>
footer
</div>
</body>
</html>
You haven't cleared the floats so the divs are collapsing
You can fix it with
.footer {
background-color: yellow;
clear:both;
}
JSfiddle Demo
Mathiasaurus is spot on. You could clear your non floating elements, mainly the footer.
.header,
.footer {
width: 100%;
clear: both;
}
or add
.header,
.footer {
width: 100%;
float: left;
}
to include them in the flow.
Putting display: inline-block and setting widths to your header and footer seem to remedy the issue!
http://jsfiddle.net/MathiasaurusRex/jm78Z/4/
div{
display: inline-block;
width: 100%;
}
.header{
width: 100%;
}
.footer{
width: 100%;
}
because u have the same class name for the different div's! And Also the same id's i guess!
<div class='header'>
header
try doing dis for your next div tag
<div class='header1' >
header
in order for the css to work in different manner for different div tags u must have different identites of each div tag!
I think this link will help you
http://www.w3schools.com/css/css_selectors.asp
I would like to know if for the demo index page of this site url, I can prevent the text from overflowing or let say use optional scrolling bar when the text goes over the bottom of the blue box? I would like the layout to be similar to this 'production' site (with server stats visits).
Can I do this using html 5? Should I include div so to limit text overflow under a certain screen resolution. Please find the html and style sheet code used (thanks for the author of this design and also Aayushi Jain who has help me with a few style sheet adjustments from another question here on this site).
style sheet
html {
overflow-y: scroll; }
div#wrapper {
width:90%;
margin: 10px auto;
position: relative;}
header#site {
height:80px;
padding:10px;
background-color:#0033FF;
margin:10px 0px;
text-align:center; }
footer {
font-size:0.8em;
clear:both;}
footer .col {
width:30%;
margin:1% 1.1%;
padding:2px;
height:100px;
background-color:#F63;
float:left; }
nav {
background-color:#0033FF;
position: absolute;
left: 0;
bottom: 0;
top: 110px;
width: 29%; }
nav ul {
list-style:none;}
nav ul li a {
display: block;
background-color:#CCC;
margin-right: 20px;
width: 110px;
line-height:1.5em;
text-align: center;
text-decoration: none;
color: #000; }
nav ul li a:hover {
color: #fff;
background-color:#39C; }
article {
background-color:#0066FF;
float:right;
width:69%;
margin-right:10px;
height:50%;
overflow-y:scroll;
}
article header {
background-color:#F90;
padding:15px; }
section#abstract {
font-size:1.09em;
font-style:italic;
margin:10px 0px;
text-align:justify;
padding:5px 80px; }
section#main {
font-size:1em;
padding:20px;
text-align:justify;
float: left;
margin: 0;
padding: 0;
display: inline; }
.ads {
height:50%;
width:30%;
background-color:#0033FF;
margin-bottom:1%;
float:left;}
.ads p:first-child {
padding:15px;
font-size:2em;}
.ads p:last-child {
padding-left:15px;
font-size:1em;color:#CCC;}
the html file
<!DOCTYPE html>
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web site</title>
<link href="style.css" rel="stylesheet" />
<style>
</style>
<!-- Tell IE we are using html5 + CSS -->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<header id="site">
<h1>WEBSITE</h1>
</header>
<article>
<header>
<h2>This is the article header</h2>
<time datetime="25-11-2010" pubdate="">25th November 2010</time>
</header>
<section id="abstract">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p>
</section>
<section id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p>
<p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p>
</section>
</article>
<nav>
<ul>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<div class="col">
<h4>Contact</h4>
<adress>
<p>Janet Griffith from Public Relations</p>
<p>Jil Sanders, webmaster</p>
</adress></div>
<div class="col">
<h4>Sites of interest</h4>
<aside>
<p>Site A</p>
<p>Another one</p>
</aside>
</div>
<div class="col">
<h4>Legal stuff</h4>
<p>Copyright</p>
<p>Terms of Service</p>
</div>
</footer>
</div>
</body></html>
thanks
Pascal
If you don't want to see the scroll bar then use overflow: hidden or overflow: auto.
Now if you want the header part to be static then put your section main and abstract in a div and make its height: 500px (or something you want) but make it fix and then use overflow: hidden in the newly mad div if you don't want to show the overflow part or use overflow: auto if you want to show the overflow part but not the scroll bar.
How do I make the right div be at the top instead of at the bottom?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
padding: 0;
margin: 0;
}
#all
{
width: 955px;
margin: 0 auto;
background: #F4FEC0;
}
#dleft
{
margin-right: 200px;
}
#dright
{
float: right;
width: 200px;
margin-left: 755px;
}
</style>
</head>
<body>
<div id="all">
<div id="dleft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et odio elit. Praesent ut sem nibh, non ultricies purus. Integer viverra dapibus nulla. Nulla quis quam mauris, et faucibus arcu. Integer quis est a libero lacinia tincidunt. Duis dignissim dui nec quam vehicula nec eleifend dolor scelerisque. Cras vehicula, mauris quis pretium gravida, justo tellus tincidunt nunc, faucibus euismod enim sapien at neque. Fusce quis elit ut elit commodo pulvinar id sit amet urna. Mauris sapien lacus, auctor eu posuere at, mattis in elit. Sed congue ultricies diam, sit amet placerat quam rutrum ac. Vivamus pellentesque tristique nisi, a consectetur sem dignissim in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus dolor nibh. In ornare mattis lectus, id mattis felis iaculis vel. Maecenas quis tellus eu est luctus mattis eu id urna. Vestibulum eu elit eget magna malesuada adipiscing. Vestibulum sem neque, condimentum eget luctus vel, rhoncus vel tellus. Donec egestas quam id erat dignissim tempus. Cras volutpat erat ac enim fermentum eu convallis quam porttitor. Quisque ac tellus sit amet libero interdum sodales.
</div>
<div id="dright">
menu<br />
menu<br />
menu<br />
menu<br />
</div>
</div>
</body>
</html>
#dleft
{
float:left;
width:755px;
}
#dright
{
float: left;
width: 200px;
}
#dright
{
position:absolute;
left:775px;
top:0;
width: 200px;
}
If you don't mind moving around some of your HTML, this is an easy solution:
From #dright, remove the margin-left property.
In the HTML, move <div id="dright"> to before <div id="dleft">.
To #all, add overflow: auto - this is required to clear the float if your right <div> becomes higher than your left.
Your dleft div doesn't have a width set and will therefore try to fill the whole of it's container. Either set a width for dleft, seeing as the width of the container is 955px then this should be no more than 755px, or have position:absolute; top:0; in the CSS for dright.
so here is the problem i'm trying to solve, i want to use a background image that is 500px wide for my divs that has a drop shadow on the right edge however i want the text to stop and wrap after 475px and i still want the entire image to show up to include the dropshadow. is there anyway to accomplish this?
html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="tech/sandbox2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page1top">top</div>
<div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div>
<div id="page1btm">this is the bottom</div>
</body>
</html>
css code:
#charset "UTF-8";
/* CSS Document */
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
Use nested <div> tags. While #Robusto's suggestion is not incorrect, it is not semantically desirable. It mixes a design element with a style descriptor. Your block elements should determine such design spacing, and then use your element styles to control the margin/padding of the text itself.
CSS:
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
.content_container{
width: 475px;
overflow: inherit;
}
HTML:
<div id="page1top">top</div>
<div id="page1mid">
<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p>
</div>
</div>
<div id="page1btm">this is the bottom</div>
Keep the div at 500px wide and put the text in a p tag inside it, setting the p tag to 475px in width.
<div class="shadow-div" style="width:500px">
<p style="width:475px">
Text here blah blah blah.
</p>
</div>
If you declare units on your padding, this would probably happen for you automatically. Change padding: 30; to padding: 30px;. If you need more padding, just adjust the number. If you don't want the padding to be even on each side, write it like this: padding: 10px 25px 10px 10px;. The measurements travel clockwise so it goes top, right, bottom, left;
Can you modify your HTML?
<div class="fancybackground"><div class="text">something</div></div>
CSS:
.fancybackground { background: url(...) }
.text { margin-right: 25px; }