|
CSS - Round Images With Css? - How
I am trying to put a image as the background of a menu and when I place it as the background of the <ul>, the corners of the box show? how do I manipulate it so that the corners of the <ul> or <div> do not show with a round image?
Thanks! Similar TutorialsI am developing an information page for my company. I make a round tab using css, see www.julycenter.com (the tab they use for state name, eg. CA, FL etc.) Following is what I use (borrow) to create the tabs. .nav A { -moz-border-radius: 0.7em 0.7em 0 0; border-top: 2px #ccc solid; border-left: 2px #ccc solid; border-right: 2px #ccc solid; line-height: 2em; white-space: nowrap; } It works quite well and nice display on Firefox, but the round tab become rectangle on IE (and other browsers). It also displays incorrectly on that site julycenter does anyone know what I should do to make it consistent across browser? Hi, I have a popup span within links, giving extra information. Ideally I wish to specify it as position fixed for non-IE5 and 6 browsers, but (because IE can't handle it, make it position absolute for them instead. This is easy with PHP and works fine. But I am also offering it in code for others to use as syndicated content, so for them, PHP is not necessarily possible. If I have position:fixed; left:10px;top:10px in my general style sheet then I cannot use position:absolute afterwards in a style for IE within conditional IE tags. because 'position:absolute; does not over-ride 'position-fixed' for IE, even if it is lower down the page. I can think of no way of hiding 'position absolute' from IE. And it does not help to put, in the IE-only style, anything like position:absolute;top:none;left:none to try to cancel out the effects of the general style sheet. Is there any work-around for somehow hiding or cancelling the position:fixed CSS, for IE, so that it will respond to position:absolute instead. many thanks Tony Hi all, I am trying to find a code for a CSS for Dreamweaver in order to create a round table Do you now sth? Hi, I have 5 images to display in my rounded corner. It works fine but i can't resize the whole image below 350px in height.The width seems fine for what i want about 140px. The height sizes of the side,trc,brc image are all 120 px each and total 360px. If I set the height to below 350 then i get the bottom chopped off with squarish corners. Why can't this image resize itself because i specify in % size? Code:
div#t3 {
height:350px;
background: url(../images/tlc.jpg) top left no-repeat;
color: black;
width: 100%;
}
div#tr {
height:10%;
background: url(../images/trc.jpg) top right no-repeat;
}
div#mr{
height: 80%;
height: 100px%;
background: url(../images/side.jpg) top right repeat-y;
}
div#ft {
height:10%;
background: url(../images/blc.jpg) bottom left no-repeat;
}
div#ft2{
height:100%;
height:50px;
background: url(../images/brc.jpg) bottom right no-repeat;
}
//html
<div id="t3">
<div id="tr">
</div>
<div id="mr">
gdfgdg<br>fsdfds<br>asdasdasdasdasdasd
</div>
<div id="ft">
<div id="ft2">
</div>
</div>
</div>
Hi guys, I've applied a clearfix to contain two floating elements (the checkbox and submit button - see below), unfortunately, this doesn't seem to work too well with the rounded corners technique I'm using. Before adding floating elements and clearfix http://www.soapshoe.co.uk/testa.php After adding floating elements and clearfix http://www.soapshoe.co.uk/test.php Anyone got any advice on what's going wrong? Please take a look at this mumbo jumbo example: Testing page The objective is to adjust the images of the four round corners of a content rectangle. Now the problem is that the two bottom round corners are not showing properly in Firefox 1.0. They bleed outside the rectangle towards the bottom, with a few pixels. And no matter what I change or try, it won't work. Second, the corners don't look even close to right in Internet Explorer 6.0. Do you have any idea how to correct this thing? Thanks a lot for anyone taking the time to help and give tips. Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? Hi, I can't believe I'm posting this but I can't seem to get this to work. I cannot load a background image through a simple div tag. It works if I switch the id selector to the BODY tag in my code and displays the image but does not work if I use the selector with the DIV tag. I have no idea why. Please help My HTML file Quote: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <LINK REL=StyleSheet HREF="styles.css" TYPE="text/css"> </head> <div id="header"> Div Tag here </div> <body> The content of the document...... </body> </html> My CSS file Quote: #header { background-image: url(navtext.png); background-image: no-repeat; } Use any image you have to test. i can only find the script to show background images in a css style sheet..but how would I go about for example showing an image not as background? i have style switcher, but I'm wanting to use buttons aswell for example blue.gif and red.gif using 2 different styles. how would I show the image in css?, which I can also put a link on maybe in the html or css? HElP! thanks I'm trying to get the 2 tabs of this mini calendar to be right next to each other. I've changed the names of all the divs surrounding the images and still can't get it to take out that padding. I've also tried img { margin:0px; padding:0px; } and it still doesn't work. Any ideas? hey guys.. I was thinking about changing my site from being mostly table based for the layout to css based but for some reason theres a small gap between images in IE... no gap in FF though.. I made two example pages 1 without using images, and just a colored background, and one with images... the height and width for the backgrounds and for the images are both the same. small gap at the bottom of each of the divs after the image ends. www.wmbclan.com/test.php just some background colors.. without any gap between the colors. www.wmbclan.com/test2.php anyone know how to fix this? Hi, currently the css is set up to display a grey box behind whatever is rolled over...i would like to make it so that doesn't apply to images, kinda looks wonky. Here's the site, you'll see what i'm talking about, and the css code follows; Code:
.borders {
border: 1px solid #666666;
}
.footer {
border: 1px solid #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #333333;
}
.prodborders {
border: 1px dotted #999999;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
.headtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
font-weight: bold;
}
table.menu {
border:1px solid #666666;
background:#FFFFFF;
}
table.menu a, table.menu a:link, table.menu a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:12px;
color:#333333;
text-decoration:none;
}
table.menu a:active, table.menu a:hover {
color:#333333;
background:#CCCCCC;
}
.noborder {
border:0px;
margin-top:0px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 92px;
border-bottom: 1px solid #666666;
backgound-image: url(images/no-pic.gif);
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 91px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #CCCCCC;
background: #FFFFCC;
padding: 5px;
border: 1px solid #666666;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block;
}
Thanks! Hi All, I am trying to fix a problem with IE 6. In Firefox everything lines up correctly. in IE6 the images in the gallery on the left side of the page and the full size image have 5px of padding underneath. I cannot get this to disappear no matter what I've tried. Any ideas? Top shots l:andy p:andy Here is some code of the thumbnails.. This will probably look like a mess since I am programming on a huge monitor.. But anyway. Code:
<div id="pagebody">
<?php include 'mainmenu.html' ?>
<div id="contentpane">
<div id="content_port">
<div id="port_menu">
<span id="gallerymenu1">
<span id="submenu1" class= "submenu" > <a class="portmenu" href="#" id = "portmenulink1" onClick="changeCategory(1);return false;"> --Wedding--</a> </span>
<span id="submenu2" class ="submenu"> <a class="portmenu" href="#" id = "portmenulink2" onClick="changeCategory(2);return false;" > --Promotional--</a> </span>
</span>
</div>
<span id="thumb">
<div id="thumb1div" class = "thumb">
<img src="images/blank.gif" title = "1 <?php echo "$title"; ?> 1" alt = "<?php echo "1 $alt"; ?> 2" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(1);"
width = "<?php echo $thumb_width; ?>" name = "thumb1" id = "thumb1">
<input type="hidden" id="t1" value="">
</div>
<div id="thumb2div" class = "thumb">
<img src="images/blank.gif" title = "2 <?php echo "$title"; ?> 2" alt = "2 <?php echo "$alt"; ?> 4" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(2);"
width = "<?php echo $thumb_width; ?>" name = "thumb2" id = "thumb2">
<input type="hidden" id="t2" value="">
</div>
I have a table with a width of 100%. At the right end, I want to position an image with its top right corner relative to the top right corner of the table. I cand quite figure out how to do it with CSS. Can someone give me a hint? Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images- Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size. -Images displayed correctly- This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right. Code:
/* Set the style for image(s) displayed */
img.left
{
margin-left: 10em;
}
img.center
{
margin-left: 3em;
img.right
{
margin-left: 3em;
}
Hope that makes sense, Gerbill currently at my site i have rollover images on my menu which are gif files and have parallel gif files that are "lit up" which show when the user puts their mouse over the gif which looks very pretty and i like it, unfourtnatly it uses javascript. this creates a couple issues, one is that the user needs javascript for this too work, the other is i think it's casuing my page to load slow. someone said something about doing rollover images with CSS. im willing to try it but i don't understand or have a clue how to do this. also is using CSS any better? (speed wise most importantly) hi all ! Im getting image not found errors and I need some help. Im using this format to load the images for my template Code: background:url(../images/date_bg.gif) The url for my image should be: http://joomla.mydomain.com/template/mytemplate/images/logo.jpg but instead Im getting: http://joomla.mydomain.com/images/logo.jpg Wich is the correct way to do it? I know the easy way is to just copy the path at the CSS, but if I change the domain or any other setting then it become useless unless I edit it again. Well I have images that I am using as link: Code: <dl class="links"> <dt><a href="index.html"><img class="border" src="images/home.gif" alt ="home" /></a></dt> <dt><a href="aboutme.html"><img class="border" src="images/aboutme.gif" alt ="About Me" /></a></dt> <dt><a href="blog.html"><img class="border" src="images/blog.gif" alt ="Blog" /></a></dt> <dt><a href="guestbook.html"><img class="border" src="images/guestbook.gif" alt ="Guestbook" /></a></dt> <dt><a href="tutorial.html"><img class="border" src="images/webtutorial.gif" alt ="Web Tutorial" /></a></dt> </dl> What I am trying to do is get this into the CSS of my page as I want to make multiple skins for the page. But I am at a loss of how to get the image name of the link into it, so that in different style sheets I can use different pictures. Please Help, Bumfluff Can someone please help this newbie to css figure something out? In firefox, the images in my sideboxes seem to appear fine. But in IE, they don't work at all. For example, please look at http://www.kettlebell.com/brandnewsite/five-minutes-with/tyveculus.html The CSS is found he http://www.kettlebell.com/brandnewsite/css.css Any ideas why this is not working in IE but does in FF? I had a problem earlier with my "snippets" not appearing in IE but working in FF. I was able to fix it by changing to "absolute" positioning. (which I don't understand why, but it worked). However, with these images, I've tried different compinations of positioning, but it doesn't seem to matter. Please, someone help! This is keeping me from wrapping it up! Thanks very much in advance. |
|||||||