HTML - Webpage Design Idea With Images
I am building a site that has a page with some bullet points, at the end of each point will be a link saying more info, the more info will be scanned in documents which I have had to make 750px wide so they are still readable, The best way I can see to do this is when the more information link is clicked the scanned document relating to the point will open in a new window with just this image only on the page.
Sadly the scanned images cant be typed up as text as it is the actual scanned document that needs to be seen. Just interested in anyback in case there is a better way of doing this. Cheers Ian Similar TutorialsHey, im fairly new to php and html etc and have created a design but am having issues getting the page to display correctly you may be able to fix this issue or help me fix it in seconds for me here is my link http://marksie.webhop.org/hyenahosting/untitled-1.html as you can see the background finishes under the menu instead of finishing below all the content please help Thanks Steve EDIT: Looks like in IE it displays better than Firefox but IE just misses the footer!! ok so now i have pinned it down to being my float:right which positions the text etc on the right to the sidebar now im stuck on what else i can use to float right I am trying to remove the black borders or lines around my friends website and cant seem to do it? any ideas http://www.lavonnebeauty.com/ Hey All! I am looking for a little help on this. I had a problem with my site (www.darose.ca) where I would change the size of the text and the page 'breaks' (refer to uploaded jpeg). However, I have managed to fix this by restricting CSS to show only a particular font. STILL, the problem persists as when I would test my webpage at http://browsershots.org/ it would show different browsers but still the page is "breaking". The weird thing is everything looks fine in IE !!! I am wondering if this is a simple CSS code...ex having the length and width pushed together as far as it could go (always). Does anybody know a way around this??? Brad http://www.darose.ca I'm in charge of doing the coding for a site that's been designed by a graphic designer with no knowledge of code. I like his designs, and the client wants me to make the site look exactly like them. They're .psd files representing each page. He sent me almost all of the images, but not the background and not certain key decorations (the guitar pics). I told him I needed the background, but his hard drive died (without being backed up) before he could send it to me. He doesn't seem to remember what font he used either. In light of all that, and the fact that the client wanted to get a basic version of the site up asap, I just converted the PSD's to JPEG's, uploaded them as whole pages, and used div's and image maps to add links and additional content. But that is obviously not a long-term solution. In fact, it's causing browser compatibility issues right now. And it's not accessible . . . etc. So I need to replicate these page design images using HTML or XHTML, and CSS. I can probably find a similar background and font to work with, but I just don't know where to begin. I haven't worked with CSS in years, but it looks like I'd probably need to use it. I'm not asking anyone to do my job for me. I'm just wondering how you would approach this task. Does anyone have time to look at the images and point me in the right direction? Here's the embarrassingly incomplete site: http://www.musicisrevolution.com The navigation works with Safari and Firefox. I'm also attaching one of the images so that it'll be clear what I'm talking about. Ok I need to take things like this forum: http://lmiinc.com/forum/ http://lmiinc.com/forum/calendar.php And make it active on the new site I'm building for LMI. So what files exactly do I need to copy to the new directory & then reference as a link in my navigation bar in all of my .html files? Sorry if i posted this in the wrong location. So im a real estate agent making a website. Im no pro and most of the stuff ive been using to build has been through layouts/generators/help of others such as yourselves. So ive been stuck on finding/making this code for the past couple of days. So all my listings are on my agencys website, not my personal agent website. Is there a code i could have where in the listings page my my personal agent website, i could have a window maybe 600x900 of the listing page on my agencys website? To kind of clear things up, you know how when you google something you have the magnifying glass, how it gives that preview. How can i have that preview coded onto a webpage, but me say what webpage to preview and how big to make the preview box? Tried to explain it as best i could. If you dont know the code, if you can tell me what its called so i can try to narrow the google searches. So far everything that has been coming up in the search restults has been preview boxes to preview html codes you have already written. Fail Blog Thanks For a while now I have been trying to figure out how publish RSS feeds for a website I am working on, I am somewhat a novice and recently stumbled across this code: http://snippets.dzone.com/posts/show/4083. I pretty much just pasted that code at random within my website. Not surprisingly it didn't work, in fact my page didn't even load... Can anyone advise me on how to better apply this code or at least recommend another way to publish RSS feeds. Thanks in advance. Ok, so I have this homepage with some code on it for weather... Code: <script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2.asp?partner=netweather&tStyle=normal&logo=0&zipcode=98662&lang=eng&size=9&theme=clouds&metric=0&target=_self'></script> Lets say you go to homepage.com for this. Could somebody help me make it so I could go to homepage.com/12345 it would insert 12345 into the zipcode field in that script? Thanks for any help Im not good at html writing so I thought I would ask. Im looking to generate a little extra income using just myspace for now. I want to create a new myspace centered around adult stories that I write. I would put a chunk of the story up as a blog to entice the reader to want more but to get more the reader would have to deposit $5.00 into my paypal. Basically what im looking for is a code for a form similar to one on an online store or something of the sort in which you enter your name, email address, and so on, along with a way for them to pay the money. Also I was wondering if there was a way that once the money is deposited the story would be sent to them via email automatically so that I could generate revenue when Im not on the computer. So if you could help me set this idea up I would greatly appreciate it. please email me at abrusnahan@yahoo.com if you can help me of if you have ideas for improvement. Hi Everyone, this may be very complicated but I am wanting to create a feature like facebook that allows users that have signed up to my site to be able create/join private groups, if the user is to create one then they will be the admin and be responsible for accepting people into that group if someone requests to join. to make the above better i would also like it if when someone creates a group for it then to go to a status for it to be approved by the website admin (Me ) if i approve it they are on there way or i can reject it with a reason why or be able ask them a question before rejection/approval. i know i have got no code examples or anything to go with this as i am unsure where to start, hopfully someone can point me in the right place to do this but like i said, the best example is facebook groups. Regards, Jamie I am looking for a little help or if anybody is interested in doing it for me I have approx $20 in my paypal and I will pass it on to you or a charity of your choice. I am looking for a form to be coded that will play videos in one page.This will need to be a web page that i can store one my desktop as it will not be published to the web. I want the form to build the remainder of a url after the base url. It needs to work a bit like this. To complete a URL. http://base url/base/ drop drop drop drop drop BUTTON = VIEW VIDEO This generates the url below ---------------------------------------------------------------------------------------------------------------------------- Example http://base url/base/option_option_option_option_option.wmv On click view video the video will open in the following or another better player. <div align="center"><embed src="http://base url/base/option_option_option_option_option.wmv " type="application/x-video"autostart="false" loop="false" allowfullscreen="true" wmode="transparent" height="420" width="640"/> </div> I want this to work on 1 page that that i can click on my desktop.I put in the options from the dropdown and it plays the video. ANY TAKERS ? Hey everyone. I'm just looking for general opinions or ideas on ways to make this website that I have in mind. I want to create a website similar to Craigslist where people can post things to sell and look for things to buy. And if I find something I like, I can send a message to the seller, but still maintain privacy in the sense that I cannot see the email address the message is being sent to and visa versa. What's a basic way to accomplish creating a site like this? Ideas are much appreciated! Thanks! I have already posted rollover threads, and my problem was solved. However, as I was building my online website, I realised that an end-user has to wait for music files to buffer and load before the sound actually plays. Basically, my rollover is this: Code: <TD ROWSPAN="1" COLSPAN="1" WIDTH="156" HEIGHT="156"> <a href="javascript:void(0);" onMouseOut="MM_swapImgRestore();stopSound(0);" onMouseOver="MM_swapImage('Image9','','musicplaying.gif',1);playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a></TD> - This plays music and an animation when a mouse is hovered over the original picture. My problem: when the mouse is hovered over the image, it takes about 30 seconds for the music to start playing as it is loading. To solve this, I want a line of text to appear when the mouse hovers over the image which lasts about 30 seconds, saying: "Please wait as music buffers." I have a line of code in mind: [code]<p class="time" begin="10" dur="5">text</p>[code] I also have all of the necessary coding to activate this code at the top of my page. But my question is: how do I put the timed writing, into the mouseover code? Any suggestions would be greatly appreciated. Hi everyone! I am redesigning my website. It is an illustration website, and it needs to have a portfolio. I need some help with the gallery navigation. I want people to use the arrow keys to move between images, and I want the image to be in the circle. How should I do this? I don't want to use frames, and I also don't want to make an entire new page for each image. Any tips? Thank you! http://imageupload.org/?d=4DA74E611 hello; I only recently discovered iframes, that you could load a webpage into them; I have decided to rebuild my online portfolio whereby when a user clicks a thumbnail the appropriate web app will load into the iframe; however before I go too far down that road I thought maybe someone could mention some pros and cons; one specific question: is there an alternative?? thanks dsdsdsdsd Well ive been coding games for BYOND (Build your own network dream) for a while it wasnt that dificult to grasp the coding style and i just recently started coding for windows phone 7 XNA games. Well as i was talking about coding for wp7 me and my friend came up with a really good idea for a new social networking website nothing like myspace or facebook so hey, what do we have to lose? Well the past 2 days ive learned basic HTML coding but i have no idea where to start. I really need help. Where do i run the HTML code i make to see how it would test as a web site is one of the main things i cant seem to figure out. I also need to know how to make different pages within the website Please help it would be greatly appreciated. Hi everyone. I've just been working on a little fun project that I wanted to be able to share with my friends, and I figured the easiest way to do that would be to put it up on a website (since the project is on google docs). I've got a lot of the content written, and I got a cheap website and free webhosting. After a few days, I sorted out the issues I had with that (had to get the DNS name to point to my webhost, or something like that), and now I have access to my cpanel. I have some experience with vBulletin code since I used to frequent a forum that used it, but have never used html. Anyway, since I know nothing about html, I decided to just use a free template. I found one with the basic layout that I want (called Travel Portal), and I figured I could just take the template, replace the words/pictures with what I wanted, and boom, I'd be done. However, it's not working out that way. Whenever I downloaded the template, here's what it gave me: PHP Code: body { margin: 0; padding: 0; background: #E5E5E5; font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; color: #666666; } blockquote { font-style: italic; } a { color: #135293; } a:hover { text-decoration: none; } .title1 { margin: 0; padding: 10px 0; background: url(images/img07.gif) repeat-x left bottom; font-weight: normal; font-size: 129%; color: #FFFFFF; } .title2 { margin: 0; padding: 10px 0; background: url(images/img09.gif) repeat-x left bottom; font-size: 227%; font-weight: normal; color: #135293; } .title3 { margin: 0; padding: 10px 0; background: url(images/img11.gif) repeat-x left bottom; font-size: 129%; font-weight: normal; color: #FFFFFF; } .boxed { padding: 5px 30px 20px 30px; } .boxed p, .boxed ul, .boxed ol { line-height: 180%; } .orange { margin: 20px 30px; background: #FF9523 url(images/img10.gif) repeat-x; color: #FFFFFF; } .orange a { color: #FFFFFF; } .col-one { float: left; width: 300px; } .col-two { float: right; width: 300px; } /* Page */ #page { width: 980px; margin: 0 auto; background: #FFFFFF url(images/img01.gif) repeat-y; } /* Sidebar */ #sidebar { float: left; width: 240px; } /* Logo */ #logo { height: 220px; background: #FFFFFF url(images/img02.gif) repeat-y right top; } #logo h1, #logo h2 { margin: 0; text-transform: lowercase; text-align: center; font-weight: normal; font-style: italic; color: #9C9C9C; } #logo h1 { padding: 100px 0 0 0; background: url(images/img03.gif) no-repeat center center; font-size: 36px; } #logo h2 { font-size: 14px; } #logo a { color: #9C9C9C; text-decoration: none; } /* Menu */ #menu { padding: 20px; background: #85C329 url(images/img04.gif) repeat-x; } #menu ul { margin: 0; padding: 0; list-style: none; } #menu li { padding: 10px 0; background: url(images/img05.gif) repeat-x; } #menu li.first { background: none; } #menu a { text-decoration: none; font-size: 129%; color: #FFFFFF; } #menu a:hover { text-decoration: underline; } /* Login */ #login { padding: 20px; background: url(images/img06.gif) repeat-x; } #login form { margin: 0; padding: 20px 0 0 0; } #login fieldset { margin: 0; padding: 0; border: none; } #login label { color: #FFFFFF; } #inputtext1, #inputtext2 { width: 194px; margin-bottom: .5em; font: bold 100% Georgia, "Times New Roman", Times, serif; color: #666666; } #inputsubmit1 { margin-bottom: .5em; font: bold 100% Georgia, "Times New Roman", Times, serif; color: #666666; } #login a { color: #FFFFFF; } /* Content */ #content { float: right; width: 740px; } /* Footer */ #footer { width: 980px; height: 120px; margin: 0 auto; background: url(images/img12.gif) repeat-x; } #footer p { margin: 0; font-size: 85%; } #links { float: left; width: 220px; height: 45px; padding: 35px 0 0 20px; background: url(images/img13.gif) repeat-x; } #links a { color: #FFFFFF; } #legal { float: right; width: 720px; height: 45px; padding: 35px 0 0 20px; } Well, I recognize that as an empty template. But I want it built in the same way that the preview site is built. So I decided to just open up the preview site's html, and change the words/pictures there, figuring it would be identical. The download for Travel Portal comes with the example site, so I figured if I just took the example site and replaced what I want to, it should end up being the same. Here is the code for the html preview: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates [url]http://www.freecsstemplates.org[/url] Released for free under a Creative Commons Attribution 2.5 License Title : Travel Portal Version : 1.0 Released : 20070618 Description: A two-column, fixed-width template. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Travel Portal by Free Css Templates</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page"> <div id="sidebar"> <div id="logo"> <h1><a href="#">Travel Portal</a></h1> <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2> </div> <!-- end header --> <div id="menu"> <ul> <li class="first"><a href="#">Home</a></li> <li><a href="#">Destinations</a></li> <li><a href="#">Travel Packages</a></li> <li><a href="#">Customer Support</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!-- end menu --> <div id="login"> <h2 class="title1">Customer Login</h2> <form id="form1" method="post" action="#"> <fieldset> <label for="inputtext1">Username:</label> <input id="inputtext1" type="text" name="inputtext1" value="" /> <label for="inputtext2">Password:</label> <input id="inputtext2" type="password" name="inputtext2" value="" /> <input id="inputsubmit1" type="submit" name="inputsubmit1" value="Sign In" /> <p><a href="#">Forgot your password?</a><br /> <a href="#">Register for Free!</a></p> </fieldset> </form> </div> </div> <!-- end sidebar --> <div id="content"> <div><img src="images/img08.jpg" alt="" width="740" height="220" /></div> <div class="boxed"> <h1 class="title2">Welcome to Our Website!</h1> <p><strong>Travel Portal</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p> <h3>Curabitur Sem Urna</h3> <p>Vel consequat, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdie:</p> <blockquote> <p>“In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.”</p> </blockquote> </div> <div class="boxed orange"> <div class="col-one"> <h2 class="title3">Lorem Ipsum Dolorem</h2> <ul> <li><a href="#">Semper vestibulum</a></li> <li><a href="#">Vestibulum luctus</a></li> <li><a href="#">Integer rutrum</a></li> <li><a href="#">Etiam malesuada</a></li> <li><a href="#">Elementum facilisis</a></li> <li><a href="#">Ut tincidunt</a></li> <li><a href="#">Odio sagittis</a></li> </ul> </div> <div class="col-two"> <h2 class="title3">Lorem Ipsum Dolorem</h2> <ul> <li><a href="#">Semper vestibulum</a></li> <li><a href="#">Vestibulum luctus</a></li> <li><a href="#">Integer rutrum</a></li> <li><a href="#">Etiam malesuada</a></li> <li><a href="#">Elementum facilisis</a></li> <li><a href="#">Ut tincidunt</a></li> <li><a href="#">Odio sagittis</a></li> </ul> </div> <div style="clear: both;"> </div> </div> </div> <!-- end content --> <div style="clear: both;"> </div> </div> <!-- end page --> <div id="footer"> <p id="legal">Copyright © 2007 Travel Portal. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p> </div> </body> </html> But for some reason that I couldn't even begin to guess, it didn't work at all. Here is what happened when I took what is supposed to be the identical html file and uploaded it to my website: http://www.avatarsrd.com/ I'm also hoping to have drop-down lists for each category in the green section, but if that's not some easy code then that's ok, don't worry about that part. I'm just trying to get the basics down right now. Any help would be greatly appreciated! Just stumbled across Frameset and realised how i could use it in my website to achieve modularity & abstraction, stops code duplication. Also prevents random browsers to look at my web code, good design, right? I've got a navigation bar that is the same for all pages so i dont want to replicate my code throughout my pages to achieve the same layout. So is Frameset good or bad? I just put this site online: http://brightfutures.ca/international It works properly in all the firefoxes and chromes, and Internet Explorer 8 and 9. The problem is that I'm losing the columns and some of the formatting when I view it in Internet Explorer 7. I'm even getting a broken image link icon! I have to look at it through an emulator (browserling), or get a coworker to send me screenshots, since I'm on a Mac. So, you can imagine, it's super hard for me to figure out how to solve this, especially since I'm not an expert on dated browser compatibility. Any idea on how I can fix this? Any help on how I can change/make some code to fix this would be awesome and really appreciated. Here's IE7: Here's IE8: Hi everyone, I am creating a new products page (Which will hold 4 products) My boss wants a Short description and a picture... I am creating the page but it looks very boring... wondering if anyone had any ideas of how to spice it up... I am okay with flash but I am trying to avoid using flash... I am pretty bad with html... so thats why i am browsing for ideas... maybe a picture and when you rollover it you get a description? Is that possible with javascript or html? Thanks M |