|
CSS - Images With Captions
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? Similar Tutorialshttp://www.tonglebeak.com/articles/styletablecaptions.php After searching for a way endlessly to style table captions cross-browser wise, I finally found that way, and wrote an article on it (can't you tell I passed my AP english test @_@). What I'm wondering is if anyone else discovered this? http://tonglebeak.ath.cx/boards/ In firefox, it renders as I expect it to: the caption is half the width of the table, and the caption is centered. In IE, however, it doesn't want to become half the width of the table. Hell, setting a px amount doesn't even affect it. What can be done to fix this in IE? 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? 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? 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. . 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? Resolved. Shoddy layout from a so called web developer . ========================================= Hi. Could anyone advise me on the following issue: The following URL, links to a page with an image (boat) in the second content column. The image is 200px wide and the column is 235px wide with a left and right padding of 15px. Bluestone development The column is controled by the following style: td.datacolumntwo { padding: 0px 15px 10px 15px; } The issue I have is that the image causes the column padding to kick out. I have used hspace (out of curiosity) settings to no avail. I get the padding levels back only by cutting the width of the image to nearly a quarter. Any advice would be much appreciated. Eddie 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. Test Site I'm working on a new design, and it works in Firefox and Safari no problems - and in IE it works mostly with the exception of one thing. None of the background images load. I've tried in 5.5, 6, and 7 and in all 3 nothing loads. How can it load the backgrounds in FF but not in IE. Am I doing something wrong here? Does IE not support: background: #000 url("someimage.jpg") no-repeat; ??? I have 2 images that are not working the same in IE and FireFox take a lookhere My header image and menu looks ok in Opera and FF but why is IE rescaling it? It looks like crap. thanks in advance www.jefspalace.be/blog/ Jef 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? Alright, this seems to be tricky, but here's the story: I've got a photography gallery I made for a friend, and the last thing that needs to be taken care of is cross-browser compatability. I'm down to one problem of image resizing for thumbnails in IE. I've seen a few solutions, but none of them seem to work, so maybe I'm just doing things wrong, but then again no site has talked about resizing both horiz. and vert. For the site, any image thrown on the page needs to be resized to no greater then 105x100. But please, don't tell me to use PHP for this - I'm very attached to the fact that the entire site weighs in at under 300 lines. Thanks, Brian Ziemek 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. Hello all I am putting together a design based almost entirely on ems, so that if text-size is altered, line-length will remain consistent. Obviously, images are by definition of pixel dimension, so they would not enlarge or contract in the same way when the text size is changed. How about enclosing images in DIVs of em dimensions, clipped. Would that mean that, as the text size is increased, the DIV would keep its relative size in the design, and more of it would be revealed? Has anyone tried this? Thanks Tom |
|||||||