HTML - Complex/unique Situation, In Need Of Advice...
Hi! This isn't really a technical issue so much as just a plea for a little advice on how to handle this. There may be some technical solutions to help me out, but I don't know of any.
I am currently working on a website for clients who happen to be very very particular about EVERYTHING. I have run into a bit of an issue and am confused as to how to solve this. Maybe you all could help me out? Lend some advice, tell me what you'd do if you were me, etc... I am going to start from the beginning. The people I'm designing for are architects that design 5 million dollar homes. They wanted a clean design with a gradient background and it took us a long time to get to the background we came to. The problem with the background is that although I designed for 1024x768 (it also displays well at resolutions up to 1440x900), my clients are working on computers with large monitors with a much higher resolution. As a result, the browser window gets stretched so far that the gradient background image isn't large enough to cover and begins to tile itself. Here is an example of one of the pages, the photo gallery, on the website. http://aciwebsites.com/dev/vanBrouck/photo.html I am in the process of trying to fix some things so I wouldn't suggest clicking around too much. Now, notice that I use PNG in my design. I had to find a way around that, as my clients wanted an HTML website (not a Flash website) with semi-opaque graphic elements and IE doesn't support PNG files. The code I use works on single images but will not work on tiled background images (I needed to use a tiled semi-opaque PNG on the sub nav and body content section backgrounds so the gradient background could show through slightly)...So I had to find a way around that as well. I ended up slicing up the background gradient image at the appropriate places in photoshop and changing the lightness on it so that when placed as the background image in the div layer, it would appear to be just a semi-opaque box with the gradient showing through. But really, it's just a jpg. (I know this is really confusing. I'm trying my best to just write it all out and explain it the best I can.) So. What my clients are seeing on their high-resolution screens is a lot of empty space filled with this tiled gradient background. This is what I need to do: Remedy the background gradient situation so that the background is no longer tiled. Why I can't decide how to do this: 1 - Stretching the background to fit the screen using a background div layer (code on how to do that he http://www.htmlcodetutorial.com/help/ftopic4503.html) will interfere with the background images in the "subnav" and "body content" boxes which were cut at specific points in Photoshop and placed within the backgrounds of the div layers as a sort of faux-opaque div layer. Basically, it'll just mess everything up and won't look right anymore. 2 - I really can't mess much with this background image. My clients are very happy with it as it is. I considered possibly messing with it a little so that it fades to one solid color at both edges and I think this may be my best bet. However, doing this would take a very very long time, as I'd have to go in and change the backgrounds on all of the pages as well as go into Photoshop and redo all the faux opaque backgrounds. 3 - I could also use javascript to automatically resize the browser window upon page load, but I often find that to be annoying and I can see how it won't go over very well with these people. Another problem is that because they're looking at this website at such a high resolution, the page content is smaller than they'd like it to be. But they don't seem to understand that their resolution is in the minority and I don't quite know how to explain to them that I optimized the website to fit on MOST screens. They just don't seem very confident about this and I feel like I'm misleading them or doing something wrong. What do you all think? I know this was a bit long-winded, but if you're up for a challenge or just feel like throwing some ideas around, feel free to take a look at the website page and go through my code. Thanks for your time. Similar TutorialsI am attempting to put some things together, for my MySpace, and I can not figure out what I am doing wrong on one of these things, and I am completely lost on what to do regarding the second thing (of which I shall make another thread about labeled "Complex challenges Part 2"... I am hoping that someone here can help me, as the on the MySpace forums, I have been blatantly ignored... The first thing I am trying to accomplish is this... I have the speaker here... and the cat here... The code for video display is as follows... Code: <center><p style="visibility:visible;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="350" width="450" align="middle" border="0" data="http://assets.myflashfetish.com/swf/video/lcd.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://assets.myflashfetish.com/swf/video/lcd.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="myid=87517&path=2008/08/18&mycolor=D13272&mycolor2=000000&mycolor3=E1FF00&autoplay=false&rand=true&f=&vol=100&pat=5&grad=true" /> </object></center><br /> Now here is my problem, I was trying to accomplish what you see in the first picture, by modifying the code Code: <center><img src= http://i35.tinypic.com/282gpya.jpg><img src= http://i38.tinypic.com/2emnzvk.jpg><p style="visibility:visible;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="350" width="450" align="middle" border="0" data="http://assets.myflashfetish.com/swf/video/lcd.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://assets.myflashfetish.com/swf/video/lcd.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="myid=87517&path=2008/08/18&mycolor=D13272&mycolor2=000000&mycolor3=E1FF00&autoplay=false&rand=true&f=&vol=100&pat=5&grad=true" /> </object><img src= http://i35.tinypic.com/282gpya.jpg></center><br /> But instead of getting what is in the picture... like (speaker cat (on top) video display speaker) I get it all spaced out like... speaker paragraph break cat paragraph break video display paragraph break speaker Can some one please explain what I am doing wrong here code wise and how I can go about fixing it so that I can have the desired effect that I have displayed in the first picture that I have provided. I would appreciate any sort of help on the matter, as I am truely frustrated. Thanks guys. Ok the second challenging task... This one I am so baffled by, I am told that it is possible to accomplish, but I can't make heads or tails of how to do it at all... I am again, hoping that someone here can help me, as the MySpace forums are ignoring me for the most part... Ok I hope I can explain what I am trying to accomplish, in a way that someone can help me achieve the desired effects. So here goes... I am working with some hover effects and imagery... I am starting off with two pictures. and Here is the code I am using: Code: <center><style> a.letsRoll {width:150px; height: 300px; display:block; background-image:url(http://i35.tinypic.com/23ww3k3.png);} a.letsRoll img {border:0px;} a.letsRoll:hover {cursor:default;} a.letsRoll:hover img {visibility:hidden;} </style> <a class="letsRoll" href="#"> <img src="http://i38.tinypic.com/20hsgup.png" /> </a></center> All this code does is switch my pictures from smirking to a toothy grin. Which is exactly what I was trying to do in the first place. Now here is where I am stumbling and having an aneurysm due to frustration... I want to do a side pop-up as well as the grin change upon hover, I was told that it can be done... People have provided me with this link... but I do not understand how to change it from links to pictures to give me my desired effects... Here's the link maybe someone can understand it and tell me how to change the code, because I don't... http://views-under-construction.blog...r-myspace.html What I want exactly is this... Upon hovering, the smirk changes to the toothy grin, and then at the same time a pop up (that was invisible until the hover, but will then stay visible upon moving the mouse cursor over to the right after it shows up) of a smaller picture... This is the picture that I would like to use. Now underneath it, I would like a link to a website... The link is... http://www.hide-city.com/ But instead of actually showing the link, I want it hidden, with text that reads... "hide's Official Website" instead. I would also like the pop-up (the little "Pink Spider" picture plus the link to hide-city) to be enclosed inside a solid or outset colored (the color I want is #ff00cc) border. See, when I said it was complex... I wasn't kidding... well it's complex to me anyway... As I said in the other "challenge" thread, I have asked around, and have been ignored... I am hoping in coming back here, my experience will be different. Thanks guys. I've created a frameset, and on the top frame I have a flash animation, and on the main frame is where my stuff is loaded! The thing is, the top is aligned to center, and the main frame too! but on the main frame isn't aligned with the top one, I think is because of the scrollbar! It aligns between the left end of the browser and the scroll bar instead of the right end of the browser... is there a way to align without the scrollbar?? i can't disable the scrollbar because i need it LoL Hope you understand what I'm saying ... LooL check this link http://black1c3.awardspace.com/ so you can see what i'm saying the two images are not aligned... thanks for your time!! Hey if any1 can help please do, i want my submit button to first check all the if statements and if all correct then i want it to to mail me the form otherwise alert with the message stated, using only that button to do everything please can any1 help ??????? Heres my code please can any1 help Code: <script> function validate() { var fname=document.getElementById("fname").value var lname=document.getElementById("lname").value var card=document.getElementById("card").value var verification=document.getElementById("verification").value submitOK="true" if (fname.length<3) { alert("Please Enter Your Name") submitOK="false" } if (lname.length<3) { alert("Please Enter Your Last Name") submitOK="false" } if (isNaN(card)||card<0||card>10000000000000000000000000) { alert("Please Enter a Valid Card number") submitOK="false" } if (card.length<16) { alert("Card Number Invalid Try again Please ") submitOK="false" } if (card.length>25) { alert("Card Number Invalid Try again Please ") submitOK="false" } if (verification.length<3) { alert("On the back of your card, find the last three Digits Please") submitOK="false" } if (verification.length>3) { alert("On the back of your card, find the last three Digits Please") submitOK="false" } if (submitOK=="false") { return false } } </script> <BODY BACKGROUND="http://img452.imageshack.us/img452/9413/wallpaperox6.jpg" BGCOLOR="white" TEXT="blue" > <form action="choice.html" onsubmit="return validate()"> Name (Max 9 chararcters): <input type="text" id="fname" size="20"><br /> <p> Last Name (Max 9 chararcters): <input type="text" id="lname" size="20"><br /> <p> Phone Type: <select id="cardtype" onchange='alert("You selected "+ cardtype.value)'><br> <option value = "MasterCard/Eurocard">MasterCard/Eurocard </option> <option value = "PayPal Credit Card">PayPal Credit Card </option> <option value = "American Express">American Express </option> <option value = "Switch/Maestro">Switch/Maestro </option> <option value = "Solo">Solo </option> </select> <p> <p> Card Number: <input type="text" id="card" size="20"> <IMG SRC="Card.gif"> <p> Expiry Date: <select id="expdate_date" name="expdate_date"><option value="1">01 </option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select id="expdate_year"><option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> </select> <p> Card Verification Number: (Max 3 Digits): <input type="text" id="verification" size="2" maxlength="3"> <IMG SRC="verif.gif"> <p> Start Date: <select id="start_date" name="start_date"><option value="1">01 </option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select id="start_year"><option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> </select> <p> <b>Please Click Submit to Continue</b> <input type="submit" value="Submit"> <input type="Reset"> </form> </body> </html> PLease can any1 one help ERGENT thank you Hi I have a Normal Div area: <div style="width:300px;height:300px;overflow:auto;border-width:0px;border-color:000000;border-style:solid;"> Text is here Text is here Text is here </div> I want when the page is loaded, the div area shows the bottom automatically i.e. The last Line I dont want users to take it down manually with the mouse everytime the page is loaded Do you know how this can be done? This table contains 4 columns and 5 rows. I tried it but felt. I am sending you link of that table. http://sites.google.com/site/1024768images/Home Please resolve my problem Thanks Hi. I have NO experience with website building, but i need to build a site. I am using wix and I think it's turning out pretty well. However, I now need to create a box for people to fill out specific info for others to see. Ill explain what it'd look like, and hopefully you have the time to post a code??? thanks a lot if you do. It's look like this: We need: (here we would post for others to see what we need. somehow i guess i need to have administrator privileges to edit what is said. For example, "We need a baseball bat.") People see that then they need to "check" the box next to it to say they have it, and the click "okay". When they click okay i want it to link them to a login page where they fill out contact info(address, phone, email, date of availability, etc) once they do that then i want the box to appear shadowed/crossed out/whatever so that others viewing the site don't check the same box that someone else checked. Hope that makes sense. Thats the basic idea of it. All help is so greatly appreciated. Thanks a lot! Say I have 3 .htm files that make up a Website, and they all ask for a persons name via text input. Would all 3 input boxes have to have different ids if I want to change their size via CSS? Say they all had the id="firstName" Could I go to my CSS file and use #firstName {length: 10} or would I have to use a class? The fact that they are in separate files makes me wonder if I have to use a class. Hi, I have been asked to rename the CSS for our website navigation to a unique name. I am told that we should not use generic names in your CSS. What did this mean? Pl help possibly with an example. Ok, I've never really heard of this before, but my boss wants me to set it up, against my better judgement. basically, we're building a new site for a client, but he's got two domain names that he wants to use, and each one needs to go to a different home page. Is it possible to set up a redirect for a site that can understand which domain name has been entered and then send the customer to the appropriate page? or better yet, set up a home page like normal, but redirect only if the secondary domain name is entered. And how does this affect SEO? The other way I can think of to do this involves hard coding some links and one person jumping back and forth between domain names durring a single visit. Either that, or duplicate the whole site and drop it in a sub folder. Hello everyone, I am new here, and would like some help from you. I am planning to start a website for my business to sell online. I will be using PayPal's services to accept card payments. However, I am having a bit of difficulty in using their services to meet my specification without integrating some of my own HTML codes. First of all, I sell one of a kind of items like paintings. That means, if a customer buys an item, a second customer cannot buy it. In this case, I would like the buy now/add to cart/view cart buttons of this item to either be disabled or even better be replaced with "Sold Out" button. Do you know how I can do this? Besides, on items like this, can I really use the shopping cart, or do I need to ask customers to pay each item seperately? Any help would be greatly appreciated. Thank You. Below is the HTML code given by PayPal for Add to Cart and View Cart buttons. Add to Cart: <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="image" src="https://www.paypal.com//fr_FR/i/btn/sc-but-03.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> <input type="hidden" name="add" value="1"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="pradchalise@hotmail.com"> <input type="hidden" name="item_name" value="Test Pendant"> <input type="hidden" name="amount" value="15.00"> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="return" value="http://www.pradnie.com"> <input type="hidden" name="cancel_return" value="http://www.pradnie.com"> <input type="hidden" name="currency_code" value="EUR"> <input type="hidden" name="lc" value="FR"> <input type="hidden" name="bn" value="PP-ShopCartBF"> </form> View Cart: <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="pradchalise@hotmail.com"> <input type="image" src="https://www.paypal.com/fr_FR/i/btn/view_cart.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"> <input type="hidden" name="display" value="1"> </form> Hi I have a web form that, on submission populates a mySQL database through PHP. Each question on the form can have up to 5 different answers. What I am trying to achieve, either through radio groups or drop-down menus is to have unique values for each number so effectively ranking them. Example: Rank your favourite colours from these: Red [1][2][3][4][5] Blue [1][2][3][4][5] Green [1][2][3][4][5] White [1][2][3][4][5] Orange [1][2][3][4][5] Now for each one, I only want the user to select a UNIQUE value so that the same two numbers cannot be submitted. On submission there must be a 1,2,3,4 & 5 (ie with no two questions having the same number) Scratching my head on this one. Any help would be most welcome. Thanks I have a website up www.sheridangroupdc.com When I use safari the bottom corner doesn't always display. I'm wondering if someone could provide some insight as to why this is happening. Thanks so much. the code for that portion is as follows... HTML Code: <div id="index_bottom_container_02"> <div id="index_right_text"> <div id="text_header"><img src="images/headers/new/index.jpg"/></div> <div id="txt_index_02"><img src="images/index_text.jpg" /></div> </div> <div id="index_right_flash"><img src="images/footer_small.jpg" alt="sheridan footer" /></div> </div> I'm a lover for making websites and I never used to be able to make my own designs, because I'm racking up experience I have started deisgning but I don't have enough HTML knowledge to code it. I know the basics and some CSS but I need some Advice on what HTML Tutorial Books you recommend? I'm new to coding of all kinds and I was just wondering if there was a better way to do this. I have my menu displayed through css. But when I want to display another link through the <a href> it comes up formatted like my navigation bar. Ill upload the .html file so you can check it out, it seems I have to upload it in .txt format. Please help. Thanks in advance, Fuzzycuzzy Hello i am new to web design and after i made a site i want to put to text inputs on my site and when the quest iputs a number in each text field after he presses a button a msgbox will pop having the answer text1 * text2. Thank you Hello, I'm trying to get as much help as i can to do with HTML ; I understand most of it all now thanks to alot of help on the WWB. A quick question, My friend is on about me doing a portolio to help me get a job in web design - could anyone give me any tips of what to do or how? Please have often told me to creat my own forum? or many a couple of websites? & also does anyone know any good FREE web hosts? Thank you. I just changed the header on my main page http://www.bestsellersworld.com The red bar on the left does not reach all the way to the top and bottom. How do I extend this to make it lok more even? Do you think I need to make the background color where I have "All Reviews", etc. at the very top a different color to make this stand out more or does it look ok as is? Thanks. Hey everyone! I own an airbrush graphics shop and decided to make my own website rather than pay for someone to do it for me so I've read a ridiculous amount of info on html but still need help. Heres my website twizteddezign.com I just got dreamweaver 8 and redesigned the site but uploaded from nvu because all my ftp settings were in nvu. Now for some reason I cant get the pages centered in dreamweaver or nvu (Im sure its something REALLY stupid) so could someone help me out with that? I know there are probably a hundred other things I could do better also, but like I said I'm an airbrush artist-not a web designer so any other tips would be great also. Thanks in advance I really appreciate it. Hello, I have recently been asked to run the website for my church. (peacegaylord.org) If you go there, you will notice how simple it is. If you look at the source, it is REALLY messed up. I asked the previous webmaster and he said all he had done was take the one created in Word by our pastor, and converted some of the tags to work with older browsers. What this leaves me with is very messy and jumbled code. Now, what I really want to do is to simple re-write the entire site. If I did this I would: Use a style sheet instead of in-line styling Use non-deprecated tags (Obviously) Change the layout completely General clean-up/re-styling etc. Note: If I did this, I would try to make the entire thing HTML 5 compliant. However, a large amount of the people that use the site are older individuals, who may have old computers and therefore, old browsers. I know there is a way to make a browser recognize new tags by adding some javascript, but which tags would I have to do this with? OR I could simply go through and clean the current version up. What my question is: What would some of you do? If you would do the complete re-write, what kind of things would you add? Just looking for some advice Edit: The site is currently down as I am editing it a bit. Edit2: Site back online. |