HTML - Problem With Site Structure.
I'm not too skilled in web design, but I've picked up HTML over the years, mainly just using tables. Well, my problem is that I have to put a site together for my work, so I drew up a design in Photoshop, and broke it up into tables in dreamweaver.
Everything looks fine in Dreamweaver, so I upload everything, and it looks great on my Mac. Now when I switch over to a windows PC and look at it online, it gets all screwed up. The graphics on the tables are out of whack and it just looks messed up. And on top of that, the banner does not show up, I think it has something to do with a <div> tag I used to make a drop down menu below it. Any help would be greatly appreciated. Thanks. Similar TutorialsHello, I need help with my navigation menu. I need it to stretch the full length as the content area. Here is my css code Code: * { margin: 0; padding: 0; } html, body { height: 100%; } #header { background-image: url(../img/logo.png); background-repeat: no-repeat; background-color: orange; height: 8em; } #header img { position: relative; left: 550px; } #nav { background-image: url(../img/menu.jpg); height: 100%; width: 20%; float: left; } #nav a { text-decoration: none; color: black; font-family: verdana; font-size: small; display: block; padding: 15px; } #nav a:hover { background-image: url(../img/back.png); } #nav #on { background-color: red; } #content { background-color: tan; height: auto !important; height: 100%; width: 80%; float: right; } #wrapper { width: 800px; background-color: transparent; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } #footer { color: white; font-size: small; font-style: italic; text-align: center; width: 800px; position: relative; clear: both; background-color: maroon; height: 4em; } and here is my index.php code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>Fall For The Arts</title> <link rel="stylesheet" href="css/reset.css" type="text/css"> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"><img src="img/ballet.png" alt=""></div> <div id="nav"> <a href="#" id="on">Home</a> <a href="#">Organizations</a> <a href="#">Where is it?</a> <a href="#">Location</a> <a href="#">About</a> </div> <div id="content"> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> <p>Your content goes here.</p> </div> <div id="footer"> <p>Copyright © 2009</p> </div> </div> </body> </body> </html> Hi I have this problem that my comment script is located at public_html/comments but the page that needs it is at public_html/hamburgerbar/fish/dish so in the code when i have the php include pointing at /comments, its not working how do i make the browser understand where the comments its? cause i tried with http://www.mysite.com/comments and it says permission denied. However when i move the target page in the comment folder it works like a dream. So how do i point my include link there? Thanks for help! My "BYO AUDIO" had a problem where it was fine with Firefox, but on IE it would keep playing even if it was paused! So, I got some guy to fix it and now it works great in IE, and the audio dragbar or anything doesn't even show up in Firefox!! I have no idea how this could have happen, all I know is he did something related to "Playweb". If anyone knows, that would be great. Thanks! Link: http://tinyurl.com/yhwe37e I have found a problem recently with my photography site where the scroll bar does not show up on the right hand side of the page unless if I am running Safari. I have checked it on other computers and the same thing happens. I think that the big flash app in the middle of the page may be causing it in some way. Anyone got any ideas? Here's the link to my site: http://www.benellett.com/ Hello guys, i have little problem with my website. www.tvfm.mk/tv.html when you go to that link it redirects you to a website with gay porn. Is there any way to stop that redirect ? hey guys so I just published my first site you can find it at www.palmettogoldandsilver.com If you visit you can see the problem i am having. The links are supposed to change colors when moused over and go back to normal if moused out. Why are my links disappearing? Also on the jewelry page my second picture is not loading. All of this works perfectly when i preview the site in dreamweaver. Any help is awesome thanks! Hi there Been a while since i posted Need a bit of help if possible. Its pretty basic but hope someone can help. When i change the size of the window me writing and graphics in my page move to fit. i want to try keep them so they are stuck down where they are. Can anyone help ? for reference my site is http://uk.geocities.com/onix36div@bt...com/index.html Thanks in advance Hello Ive got a bit of a problem which is really doing my head in trying to figure it out. It could be related to a script ive just used to produce a small slideshow/gallery, or could be to do with the tables. Ive highlighted the two areas with a red box in the attachment below, the main problem is the yellow line in the top left corner. on the other pages its not there... I noticed that there is a gap between the top page and the design of the site (which isnt meant to be like that), the whole design should be a little higher. Ive also attached the site code, im hoping someone can look and apologies if the code is messy (which it may well be..) thanks for any help Hi, i have a site with iframes. By opening the page with IE is ok, but Mozilla can't open it. So, this is the code: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <frameset rows="*" cols="80,*" frameborder="no" border="0" framespacing="0"> <frame src="file:///C|/frame2.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"> <frameset rows="80,*" frameborder="no" border="0" framespacing="0"> <frame src="file:///C|/frame3.hml" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame"> <frame src="file:///C|/frame1.hml" name="mainFrame" id="mainFrame" title="mainFrame"> </frameset> </frameset> <noframes><body> </body> </noframes></html> Can somebody help me to find the problem? Hi guys, Quite new to web design and having trouble getting the form on my sites contact page to work, it simply just isn't doing anything! Tried playing around with the code for hours with no luck, the form can be found he http://davidgeaney.co.uk/contact.html Any help at all would be greatly appreciated Thanks Dave Hi, I am helping a client get his forum to work properly in arabic. If I go to http://www.q8sportway.com/forum/toast.asp it looks fine. But if I try to go to http://www.q8sportway.com/test1.asp and then click the forum screenshot at the bottom left, it looks funny. The problem is that the link goes to the excact same page that worked before. Please help! hi i created a new site so i created one folder name "new site" inside this folder i have three folders "pics" , "pages" , "text" and my index.htm file when i open my smart ftp and put my server addres i connect with no problems so i copy and paste my "new site" folder into my ftp and the transfer goes perfect no erros , but when i type my web addres i get this error message "403" can you please help me solve thid problem am using awardspace hosting . Hi Guys. I have to start by saying I am considered a newbie when it comes to html so please bear with me. Here is where I am having the problem: http://www.fbdopewars.com/eddie/print.html As you all can see the images have spaces around them. Now this was all written in notepad so I need specific assitance in the html code. My dillema is 2 things: Why does my page have these horrible gaps between the images even though I THINK I entered it all right? Is there a more efficient way to write the code then what I am currently doing and how compatible is it on cross-browser (This is mostly experimental so I dont mind hacking it up and starting again). Thanks in advance for your time and help! Hi all, Up until recently, my HTML and CSS skills have been (at best) messy and probably not the correct way of doing things. I am attempting to re write a site I wrote about a year a go, using HTML5 and CSS3. At the moment, I have a basic layout which looks like this: (Screenshot cut off a little bit of the right side of the site) http://i146.photobucket.com/albums/r...30790/site.jpg Anyway, what I wanted to do was, within the element containing "Main Content", have two divs side by side. I want to have a photo on the right side and text on the left side. However, I am unsure as to how to do this. I have given it a go and searched the web but cannot find a solution. I want to avoid using a table for this. I have a couple of things I need to ask but these can wait until another time! Code: <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="nav.css"> <meta charset="utf-8"> <meta name="keywords" content="Wells","Somerset","Weddings","Wedding Planning,Wells, Somerset,Parties,Events,Events Management, Weddings in Somerset, Catering, Catering in Somerset."/> <title>Gert Lush Events - Weddings, Catering, Parties, Functions - Based in Somerset</title> </head> <body> <header>HEADER (Banner)</header> <!-- Done --> <nav> <table id="links" width="100%" height="100%"> <tr> <td> <a href="index.html">Home</a> <a href="services.html">Services</a> <a href="food.html">Menus</a> <a href="gallery.html">Gallery</a> <a href="reviews.html">Testimonials</a> <a href="contact.html">Contact</a> </td> </tr> </table> </nav> <div> <div class="left">MAIN CONTENT</div> <div class="right">MAIN CONTENT</div> </div> <aside class="left"></aside> <!-- Done --> <aside class="right"></aside> <!-- Done --> </body> </html> Code: header{ width:80%; height:20%; background:#FFDC97; color:white; text-align:center; position:fixed; top:0%; left:10%; } nav{ font-size:62.5%; display:block; width:80%; height:5%; background-image: -o-linear-gradient(bottom, #3C2414 40%, #A68153 90%); position:fixed; top:20%; left:10%; } div{ display:block; width:80%; height:100%; background-image: -o-linear-gradient(top, #FFDC97 0%, #FFFAE8 100%); color:black; text-align:center; position:fixed; top:25%; left:10%; } aside.left{ height:100%; width:10%; background-image: -o-linear-gradient(right, #494949 0%, #767676 100%); position:fixed; top:0px; right:0px; } aside.right{ height:100%; width:10%; background-image: -o-linear-gradient(left, #494949 0%, #767676 100%); position:fixed; top:0px; left:0px; } Any ideas? Thanks [] Hi Experts, I want to create the page structure shown in the snapshot below using CSS and HTML. The header part is an image which is off same size as shown in the snapshot. All the blue boxes are links, along with the lists in the bottom of the page. Hi, I have been following advice that I have read elsewhere to restructure my site to reflect the different parts, so splitting up images and html files into subfolders to make it all more manageable with regard to quickly identifying pages/images etc that relate to different parts of the site. Previously I have kept all html pages in public_html and all images in a folder public_html/img. If I split them up as I have started to do, the only thing is I cannot see is how I can then link back from html pages in folders lower than the root back to the html pages actually in the root folder. To explain what I mean: If some of my html pages are in subfolders of public_html but they all contain the links on the main 'tabs' of my site (home, contact, about etc) that reside in the public_html, how do I link back to the main pages from the pages stored lower down the structure? Have I interpreted advice on folder structure incorrectly or am is there something I don't know? Thanks Greetings, So I have my page done. It works too (imagine that). I structured my page like a laymen tho. With my page, I have only one element changing and all the media gets placed in this "window" (see attached image). So here is what I did: if you click on the icon for A.mov you go to A.html. A.html is an identical page the previous EXCEPT it holds A.mov... and so on. The problem is that this of course reloads everything in the window. It isn't the worst thing but seeing how much time I put into this website it would be nice to get it perfect. I know a possible solution is to put in an inline frame, i don't really want to do this... I was wondering if there was anything fancy you boys know about to fix this problem... besides the inline frame? So basically I have a page with the following structure (using "HTML5" elements). What I need is clarification on if this is acceptable usage of elements. If not guidance in the right direction. Thanks much. Code: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>..........................</title> <link href="lbcstyle.css" rel="stylesheet" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Kristi' rel='stylesheet' type='text/css'> <?php include "kd_obj/lbcfunc.php";?> <!--[if lte IE 8]> <script type="text/javascript"> // HTML 5 entities for IE. document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("section"); document.createElement("nav"); document.createElement("aside"); </script> <![endif]--> </head> <body> <section class=layout> <header><h1 id=pgtitle>Lorem Ipsum Dollar</h1><p id=pgsubtitle>Lorem Ipsum Dollar</p></header> <hr> <nav> <?php lbc_nav(); ?> </nav> <aside class=bible> <p class=scripture> <?php lbc_scripture(); ?> </p> </aside> <article> <h1>Lorem ipsum dolor</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </article> <article> <h1>Lorem ipsum dolor</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </article> <article> <h1>Lorem ipsum dolor</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </article> <footer> <p>This website makes extensive use of new web based technologies and coding. <br>We recomend that you make sure you are running the <a href=#>latest version</a> of your current web browser. </p> <p id=copyright> © 2011 Lorem ipsum dolor || liamhockley@hotmail.com </p> </footer> </section> </body> </html> I am building a page for a wordpress template and I'm trying to figure the best way to structure the HTML for this payout. The larger box will be more of a featured section. The other boxes will be placeholders for links. Does anyone have any good suggestions how I should tackle this? Thanks. Its been many years since I did any HTML programming so I know next to nothing. I want to create a very simple local site that will show a layered bill of materials based on files and folders that were already created. I have a large number of folders and files in Windows Explorer. These files and folders make up an assembly's BOM and is structured in WinExp where the top folder is the very top level assembly (ASY1). Inside this folder are the next level of subassemblies (SUBASY1, SUBASY2, SUBASY3, etc.) Inside SUBASY1 there will be a list of parts or more subassemblies (PART1, PART2, PART3, etc...) Since these already exist is there a way using html code to show them in a web page in this nested/layered format, where if I click on a SUBASY it will bring up its contents on the page. etc...) Which I guess is almost like windows explorer itself but as a web page. Thanks Patrick |