|
CSS - Question About Images
i have a design which i sliced in photoshop and as per the requirement i had to slice into 5 images and each slice had a different width however the total of the 5 images is 900px and fixed height of 200px
so each of the 5 images have a height of 200px and width with different values which add upt0 900px which is the total width of the photoshop design i used a center layout page with the wrapper set to 900px, when i used 5 image tags all the images were sitting next to each other except for the last 5th image which was starting in the next line however in the design all should appear next to each other, i total width of the div which holds the images is 900px and also the total width of each images is 900px. so i created 5 inner divs inside a containing div and i set the width and height of the inner divs based on the width and height of each images and this worked fine however i tried another method of using 5 img tags inside just 1 div and in the css i mentioned #div img{ float: left; } after i used this method all the images were sitting next to each other as per the design, if i remove float: left; then the last image starts in a new line any reason why when i was using all 5 img tags with giving float: left the last image was starting in a new line as the total width is 900px thanks. Similar Tutorialshi 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. I have an image background in the body, and I like having the content have 85% opacity in this instance, but I don't want the images to be at all transparent. How can I fix this? I tried giving the images individual opacity values, and I thought it would work because the opacity was set in the content div, which was lower down on the CSS page than the img divs. You can check out the page here. In my ongoing project I am making a complex fixed footer that has downloadable resources. I am placing three social network 64x64 thumbnails linking to those sites side by side. The question I am conflicted with is should I make the images available in the xhtml mark up between the <li> tags or should I create images in the css as separate divs inside the footer with floating properties so that they line up next to each other? I know it is a matter of file size vs preference but in this case it seems there would be less code all around by placing it in the <li> tags in the xhtml and styling the <li> as inline rather than creating three separate divs and styling those in the css that goes along with it. Or is there an easier way entirely? Thanks for your thoughts LB So, I'm pretty new to all this, and any help is really key. So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it. The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box. Is there a way to tell the browser not to show that selection box?? 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? Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. 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? 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? 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. Ok, don't blame me if this looks like a bad idea as it's not my code. I just have to make it work. Our navigation is basically a div that has a background which is three times the height of that div (and the background file contains different versions of each button or so I am told). Our code is below. We want to have a div behind the menu that will obviously show up if images are disabled but I can't get it working. Presumably because the nav div uses a background file and is not actually filled. Code: PHP Code: <div id="mainmenuText">text links to go below...</div> <div id="mainmenu"> <ul id="mainmenulist"> <li id="menu_homepage"><a href="index.php" title="Homepage" name="Homepage">Homepage</a></li> <li id="menu_apartments"><a href="apartments.php" title="Apartments" name="Apartments">Apartments</a></li> <li id="menu_villas"><a href="villas.php" title="Villas" name="Villas">Villas</a></li> <li id="menu_prices"><a href="prices.php" title="Price Matrix" name="Price Matrix">Price Matrix</a></li> <li id="menu_contact"><a href="contact.php" title="Contact Us" name="Contact Us">Contact Us</a></li> </ul> </div> CSS: PHP Code: #mainmenu { z-index:1000; height: 20px; background: transparent url("../images/layout/navigation.jpg") no-repeat top left; margin-left: 0px; } #mainmenuText { z-index:10; width:100%; height:100%; position:relative; top:10px; display:block; margin-left: 0px; } I have a series of DIVs on a page , each contains some links and an image. The DIVs seem to expand to accommodate the text but not the images. An example can be seen he http://193.82.99.145/ICISTest2/ How can i get the DIVs to expand to fit the images? HTML: <div class ="boxes"> <div class="boxheader">Are you looking for information?</div> <img src="./images/box_information.gif"> <ul id="navlist"> <li><a href=".\FindInformation\faq.htm">Search for services that can help</a><br> <li><a href=".\FindInformation\sports.htm">Sporting opportunities in Sussex</a><br> <li><a href="http://193.82.99.145/ICISforms/Enquiry/index.htm">Ask us for information</a><br> <li><a href=".\FindInformation\events.htm">Events and activities in your area</a><br> <li><a href=".\FindInformation\newsletter.htm">ICIS newsletter</a><br> <li><a href=".\FindInformation\noticeboard.htm">News items</a></ul> </div> <div class ="boxes"> <div class="boxheader">Are you looking after someone?</div> <img src="./images/box_caring.gif"> <ul id="navlist"> <li><a href=".\ForCarers\index.htm">Help for carers</a><br> <li><a href=".\ForCarers\carerscard.htm">Emergency Alert Card Scheme for carers</a><br> <li><a href=".\ForCarers\wellspring.htm">Newsletter for children with special needs</a><br> <li><a href=".\ForCarers\carersonline.htm">West Sussex carers website</a><br></ul> </div> <div class ="boxes"> <div class="boxheader">How do we help other organisations?</div> <img src="./images/box_organisations.gif"> <ul id="navlist"> <li><a href=".\ForOrganisations\roomhire.htm">Hire of ICIS rooms and equipment</a><br> <li><a href=".\ForOrganisations\index.htm">Other resources for organisations</a><br></ul> </div> </td><td valign="top"> <!-- HOTSPOT BOX --> <div class ="boxes2"> <a href="./FindInformation/newsletter.htm">Summer newsletter now available!</a><br> <a href="http://www.carersweek.org">National Carers Week</a><br> 13-19 June 2005<br> <a href="./AboutSite/whatsnew.htm">What's new on this site</a> </div> <!-- END HOTSPOT BOX --> <div class ="boxes"> <div class="boxheader">About ICIS</div> <ul id="navlist"> <img src="./images/box_about.gif"> <li><a href=".\AboutICIS\contact.htm">Our contact details</a><br> <li><a href=".\AboutICIS\index.htm">What we do</a><br> <li><a href=".\AboutICIS\volunteering.htm">Volunteering at ICIS</a><br> <li><a href=".\AboutICIS\jobs.htm">Jobs at ICIS</a><br> <li><a href=".\AboutICIS\feedback.htm">Tell us what you think of our service</a><br> <li><a href=".\AboutICIS\donations.htm">Make a donation</a><br> </div></ul> <div class ="boxes"> <img src="./images/box_sports.gif" class="floatimgright"> <b><a href=".\FindInformation\sports.htm">Sussex Disability Sports Database</b></a> </div> <div class ="boxes"> <img src="./images/box_carerscard.gif"> <b><a href=".\ForCarers\carerscard.htm">Carers Emergency Alert Card Scheme</b> </a> </div> <div class ="boxes"> <img src="./images/box_news.gif"> <b><a href=".\FindInformation\newsletter.htm">ICIS newsletter</b></a> </div> <div class ="boxes"> <img src="./images/box_news.gif"> <b><a href=".\ForCarers\wellspring.htm">Wellspring Newsletter</b></a> </div> <div class ="boxes"> <img src="./images/box_question.gif"> <b><a href=".\AboutSite\guide.htm">Do you need help using this website?</b></a> </div> CSS: .boxheader {padding: 2px; background: #ffffff; color: #000000; font-weight:bold; font-size:medium; border-top: 0px solid #cccccc; border-bottom: 0px solid #cccccc; height: 10px; text-align: left; } .boxes {height: auto; text-align: left; background: #ffffff; padding: 5px; border: 1px solid #663399; margin: 10px; margin-top: 0px; line-height: 1.5em;} .boxes a {color: #660099; font-weight:bold; text-decoration: none; } .boxes a.active {color: #660099; font-weight:normal; text-decoration: NONE; } .boxes a:hover {color: #666666; font-weight:bold;text-decoration: none; } .boxes a:visited {color: #660099;font-weight:normal;text-decoration: none; } .boxes img{float: right; overflow: auto; height:100%;} .images {padding: 5px; } /* Hotspot Box on home page */ .boxes2 {text-align: left; background: #ffffff; padding: 5px; border: 2px solid #99cc00; margin: 10px; margin-top: 0px; line-height: 1.5em;} .boxes2 a {color: #99cc00; font-weight:bold; text-decoration: none; } .boxes2 a.active {color: #339900; font-weight:normal; text-decoration: NONE; } .boxes2 a:hover {color: #666666; font-weight:bold;text-decoration: none; } Thanks for your help If I place an image in a <td> there will be a three or four pixel gap under the image and the end of the cell. The only way to avoid this is to do Code: <td><img></td> instead of Code:
<td>
<img>
</td>
are there any other ways? Hi, I'm creating a website for a new local buisness (Hat Hire Shop). I'm having some trouble with IE and getting images to overlap two <div>'s. If you look at this page using Firefox: http://209.123.229.141/hatz/index.html User: hatz Pword: hatz Then you can see the correct layout. If you view it in IE, then you will see that the images are in the top <div> only and will not overlap. CSS He http://209.123.229.141/hatz/css/ (Images used are only examples found on the Internet. Client will be providing images of their actual hats.) I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box. In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="fieldset"> 1: dfas <br />
<hr />
<img src="../../imageApp/images/smallrear.JPG"
width="160"
height="120"
border="0"
align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
<hr />
<img src="../../imageApp/images/small100_1737 (Small).JPG"
width="89"
height="120"
border="0"
align=right hspace="12"/> </div>
</body>
</html>
Hi CSS masters, I am building a site for a friend who's starting a concrete business. I just finished making all the BG images, and am now starting the coding process, all CSS based. Well, I'm highly mediocre at CSS design, and could use some help. The build site is here. As you'll be able to see, the entire BG is actually made up of 4 images. The top image repeats along x, the bottom left along why. The other two are to remain static and unrepeated. In IE, the problems are as follows: 1. On top, there is a small white area, and I don't know why. I can't seem to find why it's padded. The two images should but right up against each other to create a seamless piece visually. 2. The part that is currently in the middle should be on the left. Why is it not? 3. The tan portion of the left part should repeat downward along y. It doesn't. Why? In FF, the problems are as follows: 1. The body is not centered. 2. Everything else is fine regarding BG placement (damned IE), but the bottom part of the left image is still not repeating. Help is, as always very much appreciated! Thanks, folks, Chris good evening all, i am new here. tonight i tried to upload a web page that i had already made. i had already seen what it looked like, and the images were displaying just fine, but then when i uploaded the file and viewed it (from the website as opposed to from my hard drive)the images were not showing (except for the first one which was just a test). i don't know why there should be a difference, since the file is exactly the same. any help would be greatly appreciated! thank you. Hi I have a table which i want to add 2 background images too. what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible? |
|||||||