|
CSS - Displaying Parts Of An Image
Hi there,
I have an image.gif 50x24px I using the css below to display diffrent parts of the image in a table and it works fine in FireFox but not in IE? Can someone please help me I have tried everything. Code:
// CSS
.image1 {
display:block;
width: 50px;
height: 12px;
background:url(image.gif) no-repeat 0px 0px;
}
.image2 {
display:block;
width: 50px;
height: 12px;
background:url(image.gif) no-repeat 0px -12px;
}
// HTML
<table>
<tr>
<td>1st</td>
<td><a href="page.htm" class="image1"></a></td>
</tr>
<tr>
<td>2nd</td>
<td><a href="page.htm" class="image2"></a></td>
</tr>
</table>
Similar TutorialsHello, I placed this under the css section but to say the truth I do not know if it is possible to achive only with css and wonder if some (deep) javascript will be required. Basically what I am trying to achieve is showing the background from parts of an image that are cut off. I do not wish to achieve this by editing the image with gimp or some other tool. I would like to be able to cut off parts of an image purely with css (or javascript). For example, given the following image; I would like the user to be able to see the background from the white area. This is like subtracting one object by another object. However as I said I would not like to do this with gimp. I achieved the above result through the following code; Code:
<html>
<head>
<style>
.wrapper {
position: relative;
border: 2px solid red;
width: 200px;
height: 200px;
}
.layer1{
position:absolute;
background-image:url('layer1.png');
width: 200px;
height: 200px;
}
.layer2{
position:absolute;
background-image:url('layer2.png');
width: 200px;
height: 200px;
}
</style>
</head>
<body style="background-color:#333333;">
<div class="wrapper">
<div class="layer1"></div>
<div class="layer2"></div>
</div>
</body>
</html>
The code is very simple, I am showing the image on one layer and I am loading another image on top that image. The other image has part of it hidden, from this part I show the part of the background image I want to show. However I do not know how I can show the the background (page background that is) from the white area. As I said I do not wish just to paint this white area as the background since the background may be textured as well (or have some text). Does anyone have any ideas on how this may be achieved? I need some help desperately. I am a mediocre CSS guy I am working on a site for a friend of mine. I, for the life of me, can't seem to get an image displayed in IE8 It displays fine in FF. I have a zip file with the whole site so that someone who is an expert in CSS can show what is wrong. I would be very grateful if someone can help me with this. I am not allowed to provide my email since I am a new user. I promise not to be an annoyance to anyone who is willing to share his/her email me so that I can send the files for him/her to look at. I know I am asking too much, but I have no choice I don't know what's wrong, but this HAS to be something simple I'm missing. In my XHTML I have Code: <div class="curved"></div> and for the CSS I have Code:
.curved {
background-image: url(Green_wavy_thing.jpg);
background-color: #ffffff;
background-repeat: no-repeat;
}
The image isn't even displaying in any browser. What am I missing? I've tried quotes, etc to no avail. Is my code wrong? The image is in the same directory as the html and CSS files. Thanks, Chris I'm using ASP.Net with Firefox and IE. I'm at a loss as to why this isn't working. I did the exact same thing in notepad and it worked fine but when I use ASP.Net, it doesn't show. CSS Code:
.headbg
{
width:auto;
height:125px;
background-image:('test.png');
}
#headercontainer
{
width:auto;
height:125px;
text-align:center;
background-image:('test.png');
}
ASP.Net code Doesn't display Code:
<div class="headbg">
test
</div>
Doesn't display Code:
<div id="headercontainer">
test
</div>
Displays Code:
<img src=test.png />
Hi Guys i wondered if someone can help with a little problem I have, I have got a little contact form with an image submit button. I have included the source code that displays in firefox ie7 and ie 8 but doesnt display in IE6 and I am pulling my hair out. Please help guys Css .button { width:200px; height:80px; margin: 0; padding: 0; border: 0; background:url(images/button.png) no-repeat center top; text-indent: -1000em; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ HTML <td colspan="2" class="boldenquire2"><input name="send" type="submit" class="button" onclick="return checkForm();" value="" height="80" width="100" /></td> </td> thanks I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is. The file validates (with some minor color warnings). I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg Another issue with the url for the page is that I can't seem to get the width of the right pane smaller. Any help would be appreciated. Thanks/Hal I have edited this page down to be bare-bones for ease... The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made. When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education. http://www.centerpointpilates.com/welcome2.html code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding">
<h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content">
<div id="navigation">
<ul>
<li><a href="/welcome.html">WELCOME</a></li>
<li><a href="/studio.html">STUDIO</a></li>
<li><a href="/getting-started.html">GETTING STARTED</a></li>
<li><a href="/classes.html">CLASSES</a></li>
<li><a href="/schedule.html">CLASS SCHEDULE</a></li>
<li><a href="/workshops.html">WORKSHOPS</a></li>
<li><a href="/pricing.html">PRICING</a></li>
<li><a href="/instructors.html">TEACHERS</a></li>
<li><a href="/contact-us.html">CONTACT US</a></li>
</ul>
</div>
<!--end navigation-->
<div id="text">
<h2>Welcome</h2>
<p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each
individual on a program of exercising the body and mind. Our certified teachers
provide exceptional guidance in private, group, and class settings. The
studio is equipped with classic and contemporary exercise apparatus and
boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>
</div>
<!--end text-->
</div>
<!--end content-->
</body>
</html>
style sheet code: Code:
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
list-style: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/* normalizes links */
a:link {
text-decoration: none;
color: #6b9d98;
}
a:hover {
color: red;
}
a:visited {
text-decoration: none;
color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
background-color: #F6EEC2;
text-align: center;
}
body {
font-family: Arial, sans-serif, Geneva, sans-serif;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: relative;
}
bodyBold {
font-family: Arial, sans-serif, Geneva, sans-serif;
font-weight: 700;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: absolute;
}
/*html#orchid {
background-image: url(/images/orchidYellowOverlay2.jpg);
background-repeat: no-repeat;
background-position: top left;
}*/
#branding {
background: url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
height: 70px;
margin: 0 0 30px 0;
}
div#content {
position: relative;
width: 100%;
}
div#navigation {
position: absolute;
left: 0;
width: 13%;
padding-top: 1em;
}
div#navigation li {
font-weight: bold;
font-size: .9em;
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: center;
margin: 0 0 20px 0;
}
div#text {
position: absolute;
left: 17%;
width: 80%;
border-left: 1px solid #6B9D98;
padding-left: 10px;
}
div#site_info{
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif, Geneva, sans-serif;
font-size: .9em;
font-style: italic;
color: #6B9D98;
padding-bottom: 3px;
}
h2 {
font-size: 1.35em;
}
indentBox {
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: left;
margin: 0 0 0 0;
}
Hi there, I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!! The relevant part of the code is at follows: Code: <h2 class="title">
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a>
<div style="clear:both;height:0px;"></div>
<?php else : ?>
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div>
<div style="clear:both;"></div>
<?php endif; ?>
</h2>
In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i'm not focusing on that now) In firefox, I can see the content loading correctly but just before the page finish loading the image disappears... I just can't understand why!! You can take a look at this url: Can anyone please help?? Thanks My page http://www.doylecompanylaw.com/doyle.html uses images for the bullets along the left navigation bar. They display perfectly in Opera and Firefox but position themselves too far up in IE. Anyone got any ideas on how to fix this problem? Thanks in advance. Thanks for taking the time to read my question. Is is possible to have different link attributes on different sections of a page? For example: I'd like to have all links on the menu section be white font, visited be black font, hover to be green font and active to be yellow font On the rest of the page, I'd like all links to be green font, visited to be blue font, hover to be yellow font, and active to be whtie font. here is my css: Code:
@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
/*background-color: #d8d8d8;*/
}
#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}
#header {
width: 640px;
height: 100px;
background-color: blue;
}
#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
text-align: left;
text-transform: uppercase;
font-size: medium;
background-color: #FD9800;
font-size: 16px;
border: medium solid #E0E0E0;
padding: 4px;
}
#menu a.nav {
width:92px;
/*How can I have different colored links in this section v.s. the rest of the page?*/
}
a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-weight: bold;
font-size: 12px;
}
a {
color:green;
font-size: 12px;
}
My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery hi, i am setting up a webstore with php and css and all that. FF is just fine and i love it. IE is a bad bad bad boy and does weird things when hovering over a button, like it makes the background of a certain object disappear ... when you scroll down the page just a little and then hover over the same button it re-appears. please someone tell me that it is not just me going nuts here? if i cannot resolve this issue, i am kinda forced to use tables and all this stuff i do not want to use, because i invested sooooo much time into this ... uh well, here is the url: www.chocolateriewanders.com/store and please - no purchases (yet) .... the whole payment thing is a worry for itself Hi, I'm trying to write a simple website but I can't get it to run correctly in Internet Explorer. It looks fine in Firefox and Safari, but in IE none of the CSS is used, it looks like a regular html document. I've run the Validations for both files and they pass (aside from the html file throwing errors about the css styles). Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Date: 2009-08-10 --> </head> <body bgcolor="#D5D5D5"> <center> <banner> <img src="toptile.jpg" height="150px" width="100%" alt="topbanner"> </banner> <br> <logo> <img src="bannerlogo.png" alt="logo"></logo> <navbar> <img src="navbar.png" width="100%" height="650px" alt="background"> </navbar> <blackbar><img src="black.png" width="100%" height="20px" alt="blackbox"></blackbar> <br> <middle> <table border="0" width="800px" cellpadding="10" bgcolor="#DBFBFF"> <tr> <td width="50%" valign="top"> <br><br><br><br><br> <center> Coming Soon... </center> </td> </tr> </table> </middle> </center> </body> </html> and the CSS: Code: logo
{
position:absolute;
display:block;
margin-left: auto;
margin-right: auto;
top:10px;
width:100%;
z-index:3;
}
banner
{
position:absolute;
top:-10px;
left:-10px;
right:0px;
z-index:2;
}
middle
{
position:absolute;
display:block;
top:100px;
margin-left: auto;
margin-right: auto;
width:100%;
z-index:1;
}
navbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:-1;
}
blackbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:4;
}
I realize I'm probably not using all the best practices, but it displays fine on everything but IE. Can someone please help me out here. Thanks I'm working on a site (here) that has a two column style layout. Everything works fine in almost any browser OTHER than IE... In IE, the main (right) column shifts so that it is below the content length of the left (floated) column. I want them to be side by side... I've been playing with different solutions for several days. Can anyone help? (link to css file). relevant html: Code: <div id="wrapper"> <div id="container"> <div id="content"> <div id="left"> <!-- Left Block Start --> <!-- Left Sidebox Start --> <!-- Left Sidebox End --> <!-- Left Block End --> </div> <div id="main"> <!-- Center Sidebox Start --> <!-- Center Sidebox End --> <!-- BEGIN: Default News-index Article --> <!-- END: Default News-index Article --> </div> </div> </div> <div class="clearing"> </div> </div> relevant css: Code: /* styles to create table-less layout */
#wrapper {
padding-top:10px;
background-color: white;
text-align:center;
}
#container {
width: 770px;
height: auto;
margin: 0 auto 0 auto; /* sets the left and right margins to auto for everything else */
border-top: 1px solid white;
}
#content {
/*width: 770px; */
text-align:center;
}
#main {
text-align: left;
margin-left: 175px;
width: 595px;
}
#left {
text-align: left;
float: left;
width: 160px;
}
/* utility clearer class */
.clearing {
height: 0px;
clear: both;
}
thanks in advance for the help! I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page). Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds. Code: #header-photo {
clear: both;
height: 200px;
width: 790px;
margin: 0 auto;
background: #FFF url(header-photo.jpg) no-repeat center center;
} Hi, I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it. I've done a few searches for hiding lists in CSS but to no avail. Thanks, Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated. here is the CSS Code:
<style type="text/css">
html, body {padding: 0;
color: #000; background: #eee;
font-family: Arial, Veranda, sans-serif;
margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 3em 1em 0; margin: 0 0 0 0;
border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
margin: 0; padding: 2.5% 12.5%; clear: left;
border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
text-decoration: none; font-weight: normal;
border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc;
border-color: #eee #CCC #eee #ccc;}
</style>
and here is how it is being used in the html Code: <h1></h1> <ul id="nav"> <li><a href="/render/">?</a></li> <li id="current"><a href="/newmed/">contact us</a></li> <li><a href="/photos/">about globalhotel</a></li> <li><a href="/design/">my account</a></li> <li><a href="/webdev/">hotels</a></li> </ul> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> and finally here is a link to the page where i am having probs. thanks in advanced RF |
|||||||