|
CSS - Embedded Images Vs Css Images
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?
Similar Tutorialshey 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, 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'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? 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 have a web page with three images: (http://www.stud.ntnu.no/~rasmusal/). The first one is the background image (backcenter.jpg) which repeats as it is supposed to. Then I have the image on the top (backtop.jpg) which is centered at the top and shows ok in FF but is one or to pixels off in IE. The last image is backbottom.jpg which should be at the bottom of the page, but for some reason is below the top-image. Could someone tell me how to position the images so that they are all vertically centered (in at least FF and IE), and so that top is at the top and bottom is at the bottom? The css is as follows: body { color: #444; background-color: #fbfbfb; background-image: url(backcenter.jpg); background-position: top center; background-repeat: repeat-y; margin: 0px; padding: 0px; } #topImage { background: url(backtop.jpg) center no-repeat; margin: 0 auto; width: 800px; height: 350px; } #bottomImage { background: url(backbottom.jpg) center no-repeat; margin: 0 auto; width: 800px; height: 50px; } And the html: <body> <div id="container"> <div id="topImage"> </div> <div id="bottomImage"> </div> </div> </body> Thanks!!! In my STYLE section, I have this: .midback { background: url(file:./images/midFace.gif) no-repeat; } Yet, when I use it as the class for a table, and then have some text in a SPAN tag inside that table, it comes up blank. Why? Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <style> .midback { background: url(file:./images/midFace.gif) no-repeat; } </style> </head> <body> <table> <tr> <td class="midback"> fasff </td> </tr> </table> </body> </html> It works when I do this: Quote: <td width="250" align="middle" valign="top" STYLE="background-image : URL(images/midFace.gif); background-repeat: no-repeat;"> But, not when I put it in the header STYLE tag. I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience. I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can. I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file. base.html Code:
<body>
<div id="header">
<div id="title">
<div id="innertitle">
{% block header %}{% endblock %}
</div>
</div>
</div>
index.html Code:
{% block header %}
<h1>Signal Auctions</h1>
{% endblock %}
main.css Code:
#header {
margin:0 auto;
}
#title {
padding:20px 20px;
margin:0 auto;
background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}
#innertitle {
width:90%;
margin:0 auto;
}
h1 {
font-size:3em;
padding-left:10px;
}
The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them. Any thoughts? Hi. I'm new here as well with cSS. Hope someone can explain this to me...darn it...cSS can be frustrating. Here is my CSS code for an external style sheet: #header { background-image: url(images/penpal-inner.jpg); height: 168px; background-repeat: no-repeat; background-position: center top; border-bottom: 20px blue solid; width: 640px;} Here is the xhmtl code: <div id="header"></div> Why won't my background image center horizontally? It stays to the left of the page. If I take out the width (640px), it will center, but than I have a problem with the bottom border. I want the border to be the same width as the image but it is the width of the entire page. So with the width (640 px) in the #header rule, I have the border the same length as the image, but not centered. Without the width, the image centers but the border is now longer than the image. how do i get the image to center on the page horizontally and still keep the bottom border the same width as the image? Help please. thanks Steve. We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder). I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it. Here's the way part of the original file is set up: /* Images */ div#specialties ul li a.hospitality span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.hospitality:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } And here's what I changed it to: /* Images */ div#specialties ul li a.apartments span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.apts:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } Help! You can check out the current look at Connell Insurance dot com. . Hi, I would like to superimpose (overlap) one small image over the second larger one, to a left bottom corner of that larger. The thing is I do not know the width & height of larger image as it is loaded dinamicly with php. I tryied puting large image to table than position small image to div with style="position:relative; left:0px; bottom:0px; z-index:33;" not working, can you help? I'm having some problems getting rid of the border which appears around an image when you turn it to a link. What I'm after happening is like on this forum, where it says new topic there's no blue border around it. I've looked at the source but can't figure out the bit that controls it, so if anyone could help it would be great. i want to place images: top right, middle right, bottom left, these images should float above any other images or content that is on the page, the must also stay in there positions when the browser is resized. I'm still new to css so can any body help me pls Hello, I'm new to Dev Shed, I hope I won't seem like a fool here Is there any way to have to background images? I mean, I want to have a heading background image, and a footer background image to the same table. longing to your replies>>>> Hi I have been asked to supply : examples of in-content images with and without captions should be included with the relevant style attributes What does this mean i did not know an image could have a caption applied to it? I'm back... I want to click on a link and display a group of images (thumbnail) in a CSS box on the same page. For instance: lets say I have two links on my web page. I want to load different thumbnails in the same page depending upon which link I click. Make sense? Thanks for taking the time to read my question. I am having problems centering my navigation images below the event calendar on my page (link below). I think I know why, but can't get around it. In my general css page (http://www.pierced.ca/Pierced.css) I have the line Code: img {float:left; margin:0; padding:0;}
. I don't know what it does exactly, someone on this forum told me to put it on my page. Without it, my top margins on all my pages don't work. I think it is this code that is affecting my nav images. without the Code: td.centercalnav {
padding: 1% 0 0 44%;
}
which is in (http://www.pierced.ca/PiercedEvents.css) they center to the page, not the table row. With the current code it looks kind of ok in Fire Fox, but worse in IE. What can I do to center the nav images under the calendar. Thanks again, Brad http://www.pierced.ca/pierced-events.htm i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. 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? Hi Folks, I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins. Is it possible to somehow attach an image to one side of an element? Thanks John |
|||||||