Search the Community

I have a problem When I put a background image and after I put a padding value The position of the pictures changes. I do this: .actual { height: 255px; width: 805px; margin-left: 329px; margin-top: -255px; background-color: #555555; position: absolute; background-image: url(imagens/menu_actual_02.jpg); padding: 20px; } how I can fix this?

I am an absolute beginner at HTML. I was doing OK I until I had tried to include an image sourced on my computer. I have used the address of the source file on my computer, but the browser only shows a small square icon. What am I doing wrong? I am saving the file as .html (all files) ANSI. Another question. When files are uploaded to a website containing files housed on my computer, how does the browser locate the files when they are addressed to my computer?

Hello, when I use images, do I always have to “Save for web and devices” through Photoshop in order to speed up the downloading process? It seems to me that the photos always lose on their quality/sharpness.

Good day, I appreciate that this is a popular query but I've been searching the web for answers and I've been unable to get my code to work. I'm trying to create the effect of an animated button on a website. I have a div which contains an <img/>. This image is the "animated button". I have already prepared the additional images to represent the following frames. Now, the JavaScript code I have (which I've pulled together looking at examples) is below. var navAniButton;var aniImgs;var imgAniTimer;var index;var maxImages; function updateVar() {navAniButton = document.getElementById("navAniButton");aniImgs = ["images/Frame1.png", "images/Frame2.png", "images/Frame3.png", "images/Frame4.png", "images/Frame5.png", "images/Frame6.png", "images/Frame7.png", "images/Frame8.png"];imgAniTimer = setInterval(changeAniImg(), 500);index = 0;maxImages = aniImgs.length - 1;} function changeAniImg() {var curAniImg = aniImgs[index];index = (index == maxImages) ? 0 : ++index;navAniButton.src =curAniImg;} The updateVar(); function is called in the body "onload" to update the global variables. When the page is loaded the image src is loaded correctly and then it appears that the JavaScript attempts to change the src, because the image changes to a cross (you know, as if it can't locate the file). But, I can't figure out why it does this. I've opened the debugger and, originally, it advised that the maxImages variable had not been defined. It hadn't. So, I amended that, but now I'm not receiving any errors in the console. I apologise if I've missed something extremely obvious or if I'm omitted something that would help you all out. Let me know if I can help at all.

Hi! I'm experiencing a wierd thing when I open my website in Firefox and Opera. The images loading in with a preloader is shown at actual size shortly before resizing to percentage-size according to my CSS. In Chrome the images appear as they should right from the start. What's the problem here?http://mace.macework.se/trycksaker/ Grateful for help!Thanks

I am trying to copy and paste code from our footer and place it into our header. We wanted to move the social media icons from the bottom to the top of the page, among other things. There are a lot of div tags and a few CSS class tags as well, in the footer. However, I copied only the link and imagde code into the header so that it doesn't try to link to class and css for the footer. My problem is that when I put the code into my header, it ends up bliowing up the first icon and discplacing everything else on the page (in fact, everything else is now missing completely. See the image I've uploaded.) I've tried resizing manuaaly using style="width:;height:;" and I've tried using the width and height within the img tag itself, but nothing is working. The website is www.cleantelligent.com. I can't find any styling within the header that would be affecting this either. We want the social media icons right under the "get started" button. Any thoughts would be very helpful. Thanks!

Hi all, My first post on the forum. I've learn a fair few bit from W3 website that has helped me with my blog site but I'm struggling with a couple of things that the users here might be able to help me out with. First of all, on my home page, I cannot seem to get a space between the text and image in the article list. Any ideas? 2. Also, on an article page, how can I set the padding around a gallery? I seem to get really large amounts of space below the gallery which I can't seem to remove. Any suggestions or tips would be greatly appreciated. Thanks, Lexi

I have a div that contains an image. I would like the image to change, approximately every 5 seconds, to another image. There may be up to 10 images that I would like to have rotate (although I suppose the amount of images is, perhaps, irrelevant). I know that this is possible with Java Script. I've seen it work and suspect it's actually fairly straight forward (I'm sure there's countless tutorials on the internet, if I really get stuck). What I'd really like to know is if this is possible without using Java Script and instead using CSS? I believe it's possible in CSS3, as I read an article earlier with someone suggesting it was possible (but their demos weren't working in Internet Explorer). But that is, of course, a problem. I'd like a solution that I can use in most "major" browsers (IE, Chrome, Firefox, Safari etc.). CSS3 is only supported on the latest browsers and, even then, not all features are compatible. So, I don't think that's the answer. Does that leave me with no choice but to use Java Script?

Hi, I need to display a picture on a web page. The picture is located on a third party's server. If the picture does not exist on the other server I need to display an alternate picture located in my directory. I am able to do this with a php script by using the get_header function and if I get a 200 ok returned I place the external url in the image tag and if I don't get the 200ok code I place the local path and file name in the image tag. I am a novice with asp.net and could use any help pointing me in the right direction to accomplish this. Thanks....

I am almost a newbie at css3 and html5. when I was looking up image sizing in w3schools it said something to the effect that html5 no longer supports image sizing in per cents? I have Internet Explorer 8 for one design veiw browser, firefox, Chrome and safari are the other ones. Anyway the per cent sizing seems to be working in all browsers except IE8, is there a work around for the IE8 issue. The width works fine it's the height that is the problem. I'm not going to spend $100.00 just for an Internet Explorer browser. I know I need to update my os to windows 10 is it? but not at this time. Personal reasons. I do responsive website designing and px is not responsive. Isn't responsive the future way of the internet any more, with all the mobile devices out there?

So i have this website wich i first uploaded on a private free web hosting server. Now some images do not show, and i first thought it got to do with t´because it is a slow free server! But that was not the problem since i now uploaded it on fast pay web hosting domain. This one: http://iphonetryck.se/index.php The images are not shown there either! I tried everything i know from making all the images small equaly(because UNIX does not recognise with one big and rest small or something like that...), to make the pictures from indexered to RGB, or to jpg. Neither work! I need help on to why this is happening. I tried to reupload also btw. I attach a picture on how it is suppose to look like - on the index startpage. As you see the index picture to the top left is not there, and the colorimages for the menylinks is not there either. Also some other pictures like the iphone too in one other page.

Hey guys, I am currently in the process of building the HTML and CSS structure of a website for a friend. The website will use images, but the images that will be used will most likely be from Google image searches. I understand that any images used will belong to a third party. Will I be able to use any images I wish, as long as I reference them correctly somewhere in the HTML code? If so, how will I go about doing so? Would it be within the "alt" attribute? Any help with using third party images and referencing will be greatly appreciated. Unfortunately the organisation I am building the web site for doesn't have a photographer and are highly unlikely to employ one. I will be happy to answer questions regarding the web site if it will help me get an answer. Thanks in advance.

I'm having some issues with our HTML. Attached is the new version of our website that I'm working on but the pictures need to be in a horizantal line rather than the diagonal that they're currently in. The images are coded from our /admin.php site so they aren't directly linked in the code- is this what is causing the issue? Below is the code- any thoughts? I've tried everything that I know. The //fixed highlights are the smaller images up top and the //slideshow is the larger image... The website before hade the slideshow at the top and the fixed highlights at the bottom and we just want to flip it. // fixed highlights $html = ''; $displayed = 0; $slide = unserialize(file_get_contents('images/home/highlights.txt')); if (count($slide)) { foreach ($slide as $key=>$param) { if ($param['active'] && ($displayed < 3)) { $html .= '<td>'; if ($param['URL']) $html .= '<a href="' . $param['URL'] . '">'; $html .= '<img src="/images/home/' . $param['image'] . '.jpg" width="250" height="150" border="0" alt="" style= float:left;/><br />'; if ($param['title']) $html .= '<h4>' . $param['title'] . '</h4>'; if ($param['URL']) $html .= '</a>'; $html .= '</td>' . "\n"; $displayed++; } } } if ($displayed) { print('<tr valign="top">' . "\n" . $html); if ($displayed < 3) { for ($i=$displayed; $i<3; $i++) print('<td style="width: 250px;"></td>' . "\n"); } print('</tr>' . "\n"); } // slideshow $html = ''; $slide = unserialize(file_get_contents('images/home/spotlight.txt')); if (count($slide)) { foreach ($slide as $key=>$param) { if ($param['active']) { $html .= '<div class="slide">'; if ($param['URL']) $html .= '<a href="' . $param['URL'] . '">'; $html .= '<img src="/images/home/' . $param['image'] . '.jpg" width="800" height="400" border="0" alt="" />'; if ($param['URL']) $html .= '</a>'; if ($param['title'] || $param['subtitle']) { $html .= '<div class="caption">'; if ($param['title']) $html .= $param['title'] . '<br />' . "\n"; if ($param['subtitle']) $html .= '<span class="subtitle">' . $param['subtitle'] . '</span>' . "\n"; $html .= '</div>' . "\n"; } $html .= '</div>' . "\n"; } } } if ($html) print('<div id="slideshow">' . "\n" . $html . "\n" . '</div>' . "\n" . '<div id="slidenav"></div>' . "\n"); // open lower grid print('<table cellpadding="0" cellspacing="25" border="0" style="margin: 0px -25px 0px -25px;">' . "\n"); // second row -- feeds and connect links if (dbconnect()) { print('<tr valign="top">' . "\n"); // news $sql = 'SELECT *,DATE_FORMAT(posted,"%M %e") AS pdate FROM news ORDER BY highlight DESC, posted DESC LIMIT 1'; $result = mysql_query($sql); if (mysql_num_rows($result)) { print('<td><h5>News</h5><p>' . "\n"); $row = mysql_fetch_assoc($result); mysql_free_result($result); print('<a href="' . ($row['url'] ? $row['url'] . '" target="_blank' : '/about/news.php?id=' . $row['ID']) . '">'); print($row['title'] . '</a><br />' . "\n" . '<span class="date">Posted ' . $row['pdate']); if ($row['source']) print('</span></p>' . "\n"); print('<p><a href="/about/news.php" class="social news">more news...</a></p>' . "\n"); print('</td>' . "\n"); }