HTML - Header Image That 'floats' As A % From Edge Of Page Question.
I've seen (and cannot find again) a header piece of artwork that was justified a percentage distance from the left of the page.
Another plain slither of header artwork was repeated seamlessly across the total width of the page. It went 'behind' the prime piece of artwork and reappeared. The 'joins' were invisible. The header seemed / appeared to be one piece of artwork that went across the page regardless of how wide the page was with the piece of artwork always remaining between the centre of the page and the left hand edge of the page. The distance of the piece of artwork got nearer to the left hand edge of the page the narrower the page got. How does one achieve that? Both images were hosted by ImageShack. I barely understand all that myself! My knowledgebase is a little above zero. Thanks in advance, MD. Similar TutorialsI need to go to the experts here , what I need to do is the following. I have an Adobe Edge animation, I need to take that animation along with a JQuery dropdown menu and put both on one html page. I have basic html knowledge to the point where the edge animation is saved as an html page ( edge automatically does this which includes all the Javascript files separately) So far I'm able to take the edge <div> and ad it to any html page as long as I copy the scripts to the head of that page. The trouble I'm having is adding the JQuery dropdown. It would be impossible for anyone reading this to know EXACTLY wht I mean without seeing the code, I do not want to add abunch of it or add a link to the files until someone replies and can actually look. any help? RD alright, i have an ad (which is in an iframe from the advertiser) on the right side of my site thats a little bigger (by 30px) than the rest of the content on that side. http://www.greendayauthority.com/ You'll see it on the rightside. You'll also see how because it's bigger, it forced that cell it's in to stretch, and pushes the other stuff to the side (you can see that by looking at the top banner, and how it's smaller than the content when they should be lined up). What i want to do is maybe place that ad in a div or something so that it'll hang over the right side of the table, instead of pushing the other things away from it. Can anyone help me out? Hello all, First time posting to the forums here. I'm creating a table and each row represents a "tab" of the UI. Each cell has a background image that looksl ike this. however, when I render my table and have text in the cell, the right edge of the tab is chopped off like this.. Any recommendations on some CSS or table attributes that I can aplly to make both rounded ends of the background image appear? I've tried turning off table borders, cell spacing and cell padding. Any help would be greatly appreciated. Thanks. Hello! I've got a question regarding proper header usage. First, I'd like to describe how I want my page to look like (both layout-wise and semantically): Code: [ Short description] TITLE OF BOOK Short description here... blah blah blah... Once upon a time... Summary here... [ User Reviews] Review #1 Review #2 Now, the text in brackets [ ] is basically the description of the next text section. Intuitively, I'd use <h1> for them, because they are the top-most headers. But here are the problems: I've read on more than one occasion that it is good for SEO to have a meaningful text inside <h1> that describes the page content. If <h1> contains just "Short Description" or "User Reviews" and that on every book review page, this is bad. The more appropriate way to do this, it seems, is to use <h1> for the BOOK TITLE only, and use something else to introduce sections. So something like HTML Code: <h2>Short description</h2> <h1>BOOK TITLE HERE</h1> <h2>User Reviews</h2> but this also seems like a bad idea. So, how do it correctly (with respect to HTML and SEO) without having to redesign my layout in any way? (That is, I don't want to put the book title anywhere else, e.g. not above the section title) Thanks in advance hi I need to know how you would create a header that simply just displays a picture . Can someone please post the code on here for that ? I have a current background image for my forums, but I want to add another background image that will "float" to the bottom no matter how long the page is. How would I do that? I wanted to add a header image to my Tumblr (blog) theme. This is a link to the theme I use so you can see what it looks like http://safe.tumblr.com/theme/preview/5136 Basically I wanted to have a rectangular image appear on every page on my site (kind of like this website and most others). I wanted it to be at the very top, above all links and appear on every page. I also want the image to be a link to the homepage (like the one here on htmlforum.com) Other than that if you could tell me what code I need to center everything instead of having it be on the left (as in the preview link) that would be great. I really don't know much about this stuff so thorough instructions will be much appreciated. I dont know whether to put this in HTML or CSS, but I will send my HTML if you want, it was just too long to paste here. Thanks a lot. HI I have a .htm file in which i dynmically insert the data. Now wht i want that i want to put header and footer in each print page of thta html file , dynmically thoroght VB.NET Code. The header and footer can contail , the company logo, Title of page and so on. can u big boss please tell me how can i do this. Thanks I have a web page that has a gap between the main content page (lower) and the header piece(upper) and I can't figure out how to close this gap. If you're interested in taking a look at it. Here's the code and i've attached an image for a visual aid. Thanks. Code: <table width='770' border='0' cellpadding='0' cellspacing='0' id='maintable' align='center' table valign='top' align='left' cellpadding='0' width='770' height='500' table style='background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:'770' height:'500'></td> <link href='custom.css' rel='stylesheet' type='text/css'> <td id='menu' align='left' valign='top' rowspan='500' width='165'> <br> <img src='images/bullet.gif' alt='' width='10' height='10'><a href='index.php'><font color='#DDCEA2'><font face='Arial' size='2'>Home</a></font><br> <img src='images/bullet.gif' alt='' width='10' height='10'><A href='index.php?command=signup_page'><font color='DDCEA2'><font face='Arial' size='2'>Sign Up</font></A> <br> <img src='images/bullet.gif' alt='' width='10' height='10'><a href='faq.html'><font color='DDCEA2'><font face='Arial' size='2'>FAQ</a><br> <img src='images/bullet.gif' alt='' width='10' height='10'><a href='legal.html'><font color='DDCEA2'><font face='Arial' size='2'>Terms of Use<br></a> <form method='POST' action='index.php'> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='signup'> </form> <tr><td> </td></tr> <td valign=top colspan='2' class='pageTitle'><div class='hLine'><b> <font face='Arial' color='#EE7600' size='3'>Select The Payment Button Below To Continue</b></font></div></td></tr> <td class='fieldLabel' width='30%'> <font face='Arial' color='#A30100' size='2'><b>Transaction Type:</b></font></td> <td align='left' class='text' ><b>[account_type_title]</b></td> </tr> <tr> <td class='fieldLabel' width='30%'> <font face='Arial' color='#A30100' size='2'><b>Price:</b></font></td> <td align='left' class='text' ><b>$ [price]</b></td> </tr> <tr> <td class='fieldLabel' width='30%'> <font face='Arial' color='#A30100' size='2'><b>Subscription Period:</b></font></td> <td align='left' class='text' ><b><font face='Arial' color='#000000' size='2'>[period]</b> (month)</font></td></tr> <tr valign='top' height='55px' '> <td valign='top' class='fieldLabel' width='30%'> </td> <td valign='top'> <p><font face='Arial' color='#000000' size='2'>[payment_code]</font></p></td> </tr> <tr><td> </td></tr><tr><font face='Arial' color='#000000' size='2'></font> <tr height='30%' ><td colspan='2'><div class='hLine'> </div></td></tr> </table I want to update the header/footer on each page of the site I'm working on without having to manually edit every single page. So I've been told to use sitetools - in that folder is a file called "makesite" in which I input all the pages that I want these changes to be on. Then I login thru PuTTy, an SSH client, and type in these commands: "cd sitetools" and then "makesite." Except when I type in "makesite," it says "Command not found." I've never dealt with sitetools before - I just took over the webmaster job for my professor as a (VERY) part-time gig so all I ever do is edit, I don't know a whole lot beyond basic HTML. If anyone can offer me any guidance, I'd really appreciate it! I have a web page that has a banner at the top. It is in a div. the main part of my page is also in a div. Using the Z-index parameters and the position parameters on each div, I have the main part of the page scroll underneath the banner. I have a link at the top of the page, <a href="#mondaymtgs">Meetings on Monday</a> Which points to a name anchor on the page. When the link is clicked, it goes to (or scrolls to) The named anchor: <a name="mondaymtgs">Meetings that are on Monday.</a> The problem is this, when it does scroll to the named anchor, It does it such that, the named anchor is at the top of the page, Underneath the banner. I suppose I could just keep moving the named anchor up a little at a time, each time when I move it up, testing the link to see if the page scrolls such that, the point I want I to scroll to appears just below the banner. I am going to have numerous links at the top of the page, pointing To various places on the page. I hate to have to do this for each link. I would rather just put the named anchor where I want it to page to, and have that line show just under the banner. Is there any way to do this? Thanks in advance. Laurence Ok, I've tried everything I can think of, and I'm still getting a 'jumping header':\ The header is jumping from the Homepage, to the SubPages. When navigating to other Subpages, everything is fine; So, the problem is with the Homepage. http://www.khaus.com/sites/Asongo/html/ (click on About Us, then back to Home, and you'll see the 'jump') It must be in the code of the Homepage, so I've tried: - attaching the javascript - all the code for the top parts of the page are the same - rebuilding the page, with one of the interior pages format. Any help or suggestions, would be greatly appreciated. Thank you Reply With Quote why does my local copy of my site look like this http://img106.imagevenue.com/aAfkjfp...m_122_61lo.JPG but after I upload it to my webserver at http://shellsite.okinawapc.com it looks correct?? Hi experts, would it be possible for any advice on a header issue please. I have created a website at www.ukdecals.com the website expands to fit most browsers and i've tried it in IE9 and Firefox, to me everything looks fine at my monitor settings of 1152 x 864 pxls But a friend has just sent me a screen shot from his screen on his computer in IE9 and the header seems to not be expanding in length across the page, would anyone one be able to view the source code and see if they could spy the problem, i've looked at it myself and i can't see it, but only learning html in the last couple of months, i'll admit that this ones got me stumped. I'd appreciate any help you could give. Kind Regards Jas.... Http://www.nonvoicebpo.co.cc In the above site, the header image is not opening properly in Opera Browser, Header image as a small gap in the right side corner. Hi, This is my site: http://www.theticketsguide.com I want to know how to add text, buttons, images, etc to my home page header without adding it to my header on all other pages of my site. So, something similar to this: http://www.coveractionpro.com I'm using Wordpress's Thesis theme. Thank you very much, Brandon When I view my main page, it looks fine. It is centered on the screen with some background space between the top of the screen and the top of the web page. And has background space to the left and right. But when I select the sign-up link which is basically: http://www.website.com/index.php?command=signup_page When the sign-up page is viewed, it has moved up to the top of the screen and loses the top part of the header border. How can I get it to view exactly like the home page? To experiment I went to the css file and changed the top margin from 50px to 500px. It only effected the home page, didn't effect the sign-up page at all. Code: body { background-color: #6B6B6B; text-align: left; margin-top: 500px; What do you suggest I do to keep the top of the sign-up page from being cut off? Thanks. Hey Guys, I am a graphic designer and don't know much about HTML (but am taking a class and about to start a few books). I am using tumblr right now and I am try to replace the automated header ("black atom studio") with a jpg banner. Anyone know where in the HTML I would do this and what code I would need to swap in? (the website I am working at is www.blackatomstudio.com ) (not a plug, just incase you guys need to see what I am talking about) Here is the code I need help on. http://snipplr.com/view/8582/blackatoms-tumblr/ Hi all, I'm trying to make my background (which contains my logo and site name) to be clickable to my site's URL. Seem to be having difficulty because I am using a modified WordPress template along with linking to a stylesheet. Not very good or familiar with php and css, unfortunately. Anyone have some energy to crank this one out with me? sorry for being vague in my initial post. Here is the header php code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>[TITLE]</title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> </head> Here is the css code: .header{margin:20px 0;} .header .top{background:url(images/logo-graphic.jpg) top left no-repeat; height:120px; width:960px; margin:20px auto;} .header .top #secondary{float:right; width:468px; height:60px; margin:20px 0 0 0; border:1px solid red;} .header .navigation{background:url(images/navigation-bar-bg.png) top left repeat-x; height:61px;} .header .navigation .nav-wrapper{width:960px; margin:0 auto; height:49px;} .header #searchform{float:right; width:325px; height:40px; margin-top:6px;} .header #searchform #s{font-size:14px; padding:6px 4px; border:1px solid #666; outline:none; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; -moz-box-shadow: inset 0px 1px 3px #888;-webkit-box-shadow: inset 0px 1px 3px #888;box-shadow: inset 0px 1px 3px #888; } |