|
HTML - Content Starting Above Image
Similar TutorialsHi everyone, I've just recently started to teach myself XHTML and CSS and so far have been having a very enjoyable experience However I'm having problems with coming to grips with the various languages and software packages. I've just been using notepad so far and Photoshop for images. Is it worth just sticking with note and photoshop that or would their be more benefit from using a package such as Dreamweaver etc? Also I do intend to take it quite seriously maybe even as a job so which other languages would be most useful, Javascript or any others? Thanks a lot to anyone that replies Hello all, I am designing my first website and have taught myself the very basics of HTML/CSS but am at a bit of a loss where to start. I want to start by creating the layout. Is this the usual way? I want about 5 pages and so would like to create the navigation bar down the left and drop down menus at the top which will then link to blank pages - all laid out, ready for text/photos etc to be added. I realise that the layout should be created in CSS. Tables, I believe, are bad practice for layout design. What should I use instead? I am grateful for anyone's help to get me off the starting blocks! All the best Phil Hello everyone, I'm a Computer Science student mainly trained in mathematics and programming languages like C/C++ and Java; I wanted to branch out more into web design and decided to start with learning HTML. So far, I've signed up for free hosting with Xtreemhost to give myself a sandbox to play with and familiarized myself with Classic FTP. I'm teaching myself using Sam's Teach Yourself HTML and CSS Eighth Edition. My main frustration comes from my understanding that HTML 5 is the newest standard, but the book I use is using XHTML 1.1 as the standard for teaching. Will this really make much of a difference? Is there anywhere/anything I'm better off learning HTML from if I'm just going to be learning a bunch of deprecated stuff from XHTML 1.1? It is also my understanding (correct me if I'm wrong) that even though the standard has been issued for HTML 5, browsers are generally slow to add in support for it. So does it really matter at this point in time what standard I am using (HTML 4, XHTML 1.1, HTML 5, whatever) to learn? Would it be correct to say that I can use XHTML 1.1 if I really want to, but if I want to take advantage of all the pretty features of HTML 5, I need to abandon some of my apparently deprecated XHTML 1.1 ways first? On the other hand, if not all browsers are at this point in time supporting the HTML 5 features, why create a website that uses it if it's not going to work consistently across all browsers? As you can see, I'm a little confused =/ I'd appreciate if someone could shed some light on this for me and give me some guidance on... well... where to start learning, really; my Googling gives me conflicting information. My plan was to learn HTML, CSS, and Javascript, then learn how TCP/IP works, pick up some proficiency in Photoshop and Dreamweaver/Frontpage, then branch out into server-side technologies like PHP, ASP, etc... I already have some knowledge of SQL from my database design and programming class. I did try learning from w3schools.com, but I have a sneaking suspicion that the material isn't quite comprehensive, which bugs me. in fact how to achieve this sequence: 1) user requests index.html, style css 2) preloading image.jpg 3) loading and displaying content in <body></body> these things didn't work for me: <SCRIPT LANGUAGE="JavaScript"> Image1= new Image(498,527) Image1.src = "body_bg-contacts.jpg" </SCRIPT> and #preload img { height: 0; width: 0; border-width: 0; position: absolute; bottom: 0; left: 0; z-index: -30; } <div id="preload"><img style="visibility:hidden;position:absolute;top:-1000px;left:-1000px;" src="images/body_bg-res.jpg" /></div> When I used the above or similar I still had smaller images and buttons loading before my main body_bg-contacts.jpg was actually loaded. Any ideas of how to really control image preload? I've tried some css and javascript codes, but as I said the MAIN IMAGE is not being loaded first. Hi all, I'm working on a personal website and I'm stuck on this one little piece of coding. I'm desperate, no one will help me one the forums! Here's my code: HTML: Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>owr // home</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <span class="text"><strong>owr</strong> // home</span> <p class="text"><img src="images/block.png" width="20" height="18"></p> <p align=left><a href="index2.html"><img src="images/home.png" width="20" height="57" alt="Home"></a></p><p align=left><a href="music.html"><img src="images/music.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="pics.html"><img src="images/pics.png" width="20" height="35" alt="Pictures"></a></p> <p align=left><a href="vids.html"><img src="images/vids.png" width="20" height="35" alt="Videos"></a></p> <p align=left><a href="links.html"><img src="images/links.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="projects.html"><img src="images/projects.png" width="25" height="50" alt="Projects"></a></p> </body> </html> CSS: Code: @charset "utf-8";
.text {
font-family: MankSans-medium;
}
.content {
font-family:MankSans-medium;
font-size:14px;
}
.content2 {
font-family:MankSans-medium;
font-size:16px;
}
A:link {
text-decoration:none;
color:#000
}
A:active {
text-decoration:none;
color:#444
}
A:hover {
text-decoration:none;
color:#999;
}
Images: http://yfrog.com/bfblockfp http://yfrog.com/06homecsp http://yfrog.com/6glinkscp http://yfrog.com/0imusiclkp http://yfrog.com/2opicsdnp http://yfrog.com/63projectsp http://yfrog.com/mzvidsp I need to put content to the right of the image links, but I'm not sure how to separate the links from the content so I don't end up writing text under the pictures. I think I'm being clear but if you need me to expound, please let me know. But I really need some help with this. Thanks a bunch! Matt Hey, so I want to learn html and I was just wondering what books you guys would suggest starting out with? Here's my code in TextEdit: Got that first bit of code from horus' tutorial on this site. I saved it as a .html, then proceeded to open it in Google Chrome, Safari, and Internet explorer; all the same result. Why does it spit out this? Should i not be using textedit? I've been looking into the CSS, what about those? So I designed some websites in Photoshop and I'm still learning it, but recently I saw many people talking about Fireworks and how it is a way better way of producing web design work than Photoshop. They say FW is a more efficient tool, as it was strictly built to create web design. That in terms of web design, it can do everything Photoshop can, but in a more simple way. Is it true? If it is, I think learning Fireworks is a good idea. But..there are soooo many Photoshop tutorials and so much less Fireworks tutorials. And that's my second question: Can I apply Photoshop web design tutorials to Fireworks? I mean, can I watch/ read Photoshop tutorials and figure out how to do the exact same things in Fireworks? I'd like my MP3 file to play continuously, without starting over each time a new page is opened. Is there code for telling the mp3 to not start over when opening a new page? Here's the code I use now: <EMBED SRC="Jaded.mp3" AUTOSTART="true" HIDDEN="false" LOOP="true"> Thank you for your assistance! Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe All: Working to update a previously designed website. Original design uses an <img> tag to create a top banner and another <img> tag to create a side banner. In each case there are mapped coordinates on each banner as links for the subsequent pages. Basic page design is as follows: Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td>
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<div>
***PAGE CONTENT***
</div>
<tr>
<table>
The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages to be much longer or shorter than others. This causes some inconsistencey in the relationship between the side banners height and the page content. In other words in some cases the banner is exceptionally longer than the page content and the reader must scroll past significant "dead-space" before being brought to the lowest mapped links in the side banner; or... ...in some cases the side banner is significantly shorter than the page content causing the banner image to appear "poorly-fit" to the page design. I considered altering the 2nd table instance in the above design so that the banner is carried in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the image to size relative to the <td> tag carring the content.... Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td size="100%">
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<td size="100%" >
<table>
***PAGE CONTENT***
</table>
</td>
<tr>
<table>
The problem I've found with this is that as the content size causes the image to "flex", either readablilty or image quality or both are effected, AND the mappings become inconsistent as the image coordinates constantly change. I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there are better ideas I'm overlooking. One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a "defalut" page size that would never be smaller than a standard for the side banner. Problem: larger page sizes are still a problem as are the changing map coordinates My other idea was to return to the original page design listed first above and again settle on a standard side banner "height"... ...any page that was significantly longer than that height would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to the additional content. Problem: ...possible complications splitting content... Benefit: ...consistent page design that allows a consistent side banner with navigable links... Question for the group: Does this sound reasonable? Are there better alternatives I am overlooking? THANKS IN ADVANCE FOR ALL INPUT!! Heyy im new to all this but i was woundering if someone could tell me the HTML codes for a sucsessfull FORUM Because i have being usein these free ones but i think now its time to get my own real one please help me out Thanks Haydn Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long. I was just wondering how I can replace a word or number with a specified word or number. What I want to achieve: I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image. But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified. ------------- Man I really wish I remembered how to do this haha. Thanks guys. Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. First I would like to know if there is a better way of doing this. <div></div> is the only way I know of doing it although others have told me they didn't even know it could be done with <div></div>. Second I would like to know if there's some way to control the speed at which the box scrolls. Third If the content is text then I want the scroll function to be vertical. There's other times I need the scroll to be horizontal. Here is the code: HTML Code: <div style="background-color: black; border-bottom-color: rgb(212, 47, 212); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(212, 47, 212); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(212, 47, 212); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(212, 47, 212); border-top-style: solid; border-top-width: 2px; font-size: 11px; height: 200px; overflow-x: auto; overflow-y: auto; width: 200px;"> <span style="color:#ffffff;">CONTENT HERE</span></div> This is what the code looks like when viewed in Chrome and Firefox. However when used in IE the content can often move through the boarders. Hey guys. I need a little help with my HTML image rotator. Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated. Code: <!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#sliderwrap {
height: 403px;
}
#sliderleft {
width: 10px;
height: 100%;
float: left;
background: #efefef;
border: 1px solid #ccc;
}
#sliderleft div {
height: 100px;
border-bottom: 1px solid black;
}
#slidercontent {
position: relative;
width: 650px;
height: 100%;
float: left;
border: 1px solid black;
overflow: hidden;
}
#sliderimages {
position: absolute;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#sliderimages img {
display: block;
}
.s0 #slide0,
.s1 #slide1,
.s2 #slide2,
.s3 #slide3 {
background: #ccc;
}
.s0 #sliderimages {top: 0 }
.s1 #sliderimages {top: -500px}
.s2 #sliderimages {top: -1000px}
.s3 #sliderimages {top: -1500px}
</style>
<script>
var slide = 0;
var interval_id = 0;
function stop_timer() {
clearInterval(interval_id);
if (this.getAttribute("data-slide")) {
slide = parseInt(this.getAttribute("data-slide"));
document.getElementById("sliderwrap").className = "s" + slide;
}
}
function start_timer() {
clearInterval(interval_id);
interval_id = setInterval(
function() {
slide = (slide + 1) % 4;
document.getElementById("sliderwrap").className = "s" + slide;
},
3000
);
}
window.onload = function() {
start_timer();
var el = document.getElementById("slidercontent");
var divs = document.getElementById("sliderleft").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = stop_timer;
divs[i].onmouseout = start_timer;
}
el.onmouseover = stop_timer;
el.onmouseout = start_timer;
}
</script>
</head>
<body>
<div id="sliderwrap" class="s0">
<div id="sliderleft">
<div id="slide0" data-slide="0"></div>
<div id="slide1" data-slide="1"></div>
<div id="slide2" data-slide="2"></div>
<div id="slide3" data-slide="3"></div>
</div>
<div id="slidercontent">
<div id="sliderimages">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
I have a page that is not being centered on the background in both IE 6&7 but looks perfect in FF. I am not sure what is wrong because the template I used is vaild Here is the page http://www.mesquitechristmas.com/wea...Z119&icao=KHQZ I have been banging my head all day an maybe just need another pair of eyes. -Thanks Hello to all experts in HTML, I want to know, because when I try to print the contents of a DIV I print all text except the images. I created a DIV centered on my page, and inside there is some text and a background image. I haven't used the <IMG> tag for the background image but the style: background-image:#; <div> <a class="print" href="#" onclick="window.print()"><img src="icon.png" /><br />Print</a> <div id="content"> <p> eccc...... </div> </div> Can you please explain me, why I did not print from what I see from my browser? Thank you! ps. Sorry for my bad English. |
|||||||