|
HTML - I Need A Hand With Aligning Background Image.
I wanted to get my background image in the center of my page.
The Html code I'm using is as follows. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #FFFFFF; background-image: url(http://i14.photobucket.com/albums/a3...HomePage.jpg); background-position:center; background-repeat: no-repeat; } --> </style></head> <body> </body> </html> When i do it. Half the image dissappears at the top of the page. Can anyone help? Similar TutorialsJust so you know I am new to all of this stuff. I have been arranging a web site for myself, as a project to learn from. I made myself a nice title/banner picture for my site and would like to align it to the very edge of the page(top/left/right). There are a few PX as a boarder, this is what I DO NOT want. I have it as a larger sized image then I'm displaying at the moment. And was hoping that I might be able to have it stay aligned at all times( If user changes the window size, or their window is large or small, etc.), and have this image be "fixed" at the top (there no matter how far down the user scrolls). I do not know if this should be in the .html or in the .css portion of my page, at the moment it is in the .html . ***A close example of what I want would be the top of htmlforum.com. The title banner boarders the entire top edges of the frame... except the "pic" does not go across the entire top, and the banner stays at the top.*** the code I'm using at the moment is: <img src="http://naluolapa.com/images/Titlepic2.jpg" width="1024px" height="126" alt="title banner, nalu olapa's domain" align="top" > This is a link to what I'm talking about and working on: http://www.naluolapa.com/home/HTML-2.html (yes, I do know that the page is full of errors in the displayed text, I'm more focused on the looks and style then the content at the moment.) I have google-ed many sites, and used lots of different sources for codes. Though none gave me what i want. so I decided to post on here, after looking through many threads too. Thanks for your time! Hi guys I've spent the best part of two hours attempting this and have been failing. Miserably. What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap. All help appreciated, thanks in advance. Antonz Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? I am using FrontPage I have an image that I have created in Word and copied over into FrontPage as it was done using auto shapes. The shape is a star. I need it in the div to keep it aligned with stuff below. It works fine except the left hand corner of the star is cut off by about 3-4 pixels whilst the rest of the image is perfect? Any Ideas? Thanks as always I created a table with about 100 rows down in Dreamweaver. Anyways I want to align a few pictures to the left of the table. Everytime I add the picture it places it above the table. I tried using every code I can think of to align it to the left but it will not go to the left, any advice? Hi, Does this look right i cant to have a header image and align come copy over it: <body> <!-- NEWS 1 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 1</h2> <!-- NEWS 2 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 2</h2> </body> h2 { position: relative; top: -37px; left: 135px; text-align: right; width: 150px; } Hello, I need help aligning text underneath an image. It seems that all the info I read shows how to align at the top, middle or bottom of an image, but to the side...not underneath. Here is my code. <td><a href="images/zc_shop_hdr1_111k.jpg"><img src="images/zc_shop_hdr1_16k.jpg" alt="Zion Cycles 5rd year in business" width="290" height="193" border="0"></a>February, 2008. Now in our 5th year, we're looking forward to many, many more!</td> If there is such a code that I am looking for, where would I insert it? Thank you in advance for any help! Regina hello, i've placed an image gallery to my website . i am unable to align it to the center, Hello everyone, my first post here, I was wondering if anyone could help. I'm pretty inexperienced with websites, but I've been drafted in by a friend to help the online side of his business. I've been updating his website and come up with www.amarininn.com However, the fading javascript image is being placed in the middle of the page in IE and in Firefox and Chrome the Booking button and other image links are sitting behind the image, not underneath it. How can I fix this? Secondly, it seems www.amarininn.com ( the old website) is hosting malware. Is there an easy way to diagnose and fix this? I'm tempted to just format the whole thing and start afresh. This is a great looking forum and I hope to learn a lot here. Any help with my questions would be most appreciated. JonnieO Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? Hello, I have following div tag where I have a need to change the mouse pointer to a "hand" when it loads. However, this works perfectly fine on IE, but does not work at all on FF. <div id="Div1" class="panel" style=" cursor: hand; margin-right:0.5%; margin-bottom:0.5%;" onclick="javascript:window.open('img_1440.html', '','width=600px,height=400px');" > Please help Thanks, Ruchir Hi Folks, Back in the day (circa 1995), I learned HTML by looking at the source code of some pages and then doing my own thing with the code I saw. This was OK just for simple pages, but that's was all I really wanted or needed. Then came family commitments, job changes etc., and I sort of left HTML behind. Now in my forties, I cycle a lot and want to do a webpage for my travels, with some photographs etc. I tried RapidWeaver, and it does produce some nice results. However, it's still someone else's template, and besides, any more than six pages on my site and it continuously crashes. Saving the document takes about twenty minutes each time, and so I postpone saving it until I've done say, two or three pages. Then it crashes, so I have to redo those pages... Not ideal. So I scouted around and found Flux 3.0. I have to say, it's an impressive bit of kit, but because I stopped using HTML a while back, there are loads of things there that I don't know: CSS and div to name but two. I think the only option for me is to learn (or "relearn") HTML, but all of the sites I've found from my google searches so far, are either for complete beginners, or else for people whose knowledge far exceeds mine. And a google search for 'Flux tutorial' isn't much help, either. Could someone please point me in the direction of an 'intermediate' tutorial, or else one that will help me to hone and update my skills to the point where I can hand code the entire site myself? Many thanks. Hi all, Im afraid im getting a little frustrated. My fault.. Im new here but need your help. I run a forum, phpbb3 based but the style im currently using is very much HTML based. I am looking to have a left hand column within my forum but really dont know how to do it, well to add to what i already have. I think for you to know what style docs i have you would have to have a look yourself or look at my existing source code.. http://www.pricelessparrots.com/phpbb3/ Ok i have the new style ' VistaX '. This link will take you to the original download: It can be found he It seems this style is mostly created using HTML. Could someone please tell me how to add a left hand column to the page. I would like it to be on the left hand side all the way down after the header. I thought i would have a go at it but becoming increasingly frustrated with it. such a simple thing but i cannot get it. Do i float it, using css or what? I thought about using a seperate page to create the table and then include it into the doc but this doesnt work either. Plz help.. Paul Hi all, I'm having some trouble getting my website complete enough to be up and running. I can put up 1 page, but visitors would have no way to navigate my site. I'm new to HTML and know a little bit. I've read up on a few tutorials, but nothing that talks about navigation. does HTML even do this?, or is this a CSS or JavaScript thing? I'm new to this and would really appreciate the help. Thanks a million. -Andrew Im trying to figure out how to make my page borders absolute. So that the text I enter is forced to the next line and the table expands to accommodate whatever text is entered. Instead, whats happening is the page is expanding to the right, to accommodate the excess text. I've not messed with any html in a long time, used to be I could just use nested tables to accomplish this but no longer. I plan to use this code for an ebay store template so trimming the text or manually splitting it from line to line isn't an option. if anyone could help me or point me in the right direction so I can fix this or learn how to fix it It would be much appreciated. page in question is located here surrenderyourwings(dot)com/layout(dot)html http://surrenderyourwings.com/layout.html a fragment of the code is shown below, <form id="frmmain" name="frmmain" method="post" action="index.php?page=login"> <!--<form id="srch" name="srch" onsubmit="return blockSubmit();">--> <td valign="top" style="padding:4px;text-align:center;height:50px;margin:0 auto;"> <input style="height:20px;background:none;color:#fff;border:1px solid #fff;width:160px;" type="text" value="<?php echo 'Enter WinkedAt code here.';?>" name="wa_id" id="wa_id" onclick="javascript:document.frmmain.wa_id.value=''" onmouseover="return onMouseOver2('You must <a href=index.php?page=login>Login</a> first to add WinkedAt code or <a href=index.php?page=Signup>Sign-up</a> for a free new account.');" onmouseout="onMouseOut2();" /> </td> <td valign="top"> <input type="hidden" id="my_id" name="my_id" value="<?php echo $my_id;?>"/> <input type="hidden" name="error" value="<?php echo $error;?>"/> <input type="hidden" name="msg" value="<?php echo $msg;?>"/> <input style="border:none;" type="image" src="<?php echo _DEFAULT_TEMPLATE_PATH;?>/images/goarrow.png"/> </td> </form> but when i validate it, it prompts errors such as these --document type does not allow element "td" here --Attribute "name" exists, but can not be used for this element. i tried putting divs but still the error prompts..what did i overlook? Hi board members I've been hard at this for hours and can't get it working. Following the tutorial on facebook in order to specify the image which is associated with the page in question, my daughter's blog which I coded in notepad Please be advised the facebook links are not positioned where they will finally reside on the page. I have tried the iframe method first which doesn't have image control of this, then tried html5; and then the supa dupa xfbml methods. The latter two are called open graph. However ALL three methods return the rss icon image - so frustrating. The image I want to use is within their parameters and is in my images folder on level above the root. Can you please look at my code and shed some light on this. Note all of this code has been generated by their engine - copy/paste. the lines you are interested in are 11-16; 24-31 and 62 Good luck, Mal from Cessnock Hi, Does anyone know how to turn keep an image input type as well as keep have the ability that when you hover over the image you have the hand cursor. In addition its using post method to go through. My goal is to do it without using the A HREF or it wont work. Currently doing: <input type="image" src="images/graphics/art" > What I want to do: <input type="image" src="images/graphics/art" onMouseOver="cursor:hand" > Thanks. |
|||||||