|
HTML - Folder Structure
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 Similar TutorialsSo 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>
Hello, 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>
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. 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. 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? 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. 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 am having problems with a table i need to add a text box of size 3 max length of 3 right next to the Phone number box. but when i added as a new <td> it moves the whole table and it gets broken. you can see it in this link what's the table like http://www.heartofgoldprogram.com/charities/index3.php i need to add the text box right next to the phone number with a little space in between... its actually to add the box for a Extension... so you will have the phone number digits and in case you have an extension in your number you will put it in this box that i am trying to figure out how to do it. if anyone can help me it will be great... the code where that box need's to be is this one <tr> <td valign="middle" height="44"><b>Phone: *</b><br /> <input type="text" name="phone1" id="phone1" value="" size="3" maxlength="3" style="margin-bottom:10px; float:left; border-left:none; padding-left:4px; margin-right:0px;" onKeyUp="autoTab(this,'phone2'); buildPhoneNumber();"/> <input type="text" name="phone2" id="phone2" value="" size="3" maxlength="3" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTab(this,'phone3'); autoTabBack(this,'phone1'); buildPhoneNumber();"/> <input type="text" name="phone3" id="phone3" value="" size="4" maxlength="4" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTabBack(this,'phone2'); buildPhoneNumber();"/> <input type="hidden" name="phone" id = "fullPhoneNumber" value="" size="27" /> <td valign="middle" height="40"> </td> <td colspan="1" height="40"> <input name="submit" type="image" src="images/joinbutton2.jpg" alt="joinus" align="right" border="0" style="margin-right:1px; margin-bottom:6px" /> <td width="11" height="39" valign="middle"> </td> </tr> thanks Federico 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! Hello All, I've been having trouble with this table because I have interior cells adding to the confusion. I've included the current code, what you will see is three item images with their descriptions on the right side. You will also see a "view cart" button on the far right of the page. What I want is a simple 2 row 2 column set up for all four components. "Item 1" in the TOP LEFT cell. "Item 2" in the Bottom Left. The "view cart" feature in the TOP RIGHT cell. And finally "Item 3" in the BOTTOM RIGHT cell. I know I only need a few <td> or <tr> lined up in the right place but I've tried everything. THANK YOU IN ADVANCE!!!! <!--// Document Style //--> <style> .product-image { border:none; } .product-title, .product-price, .product-shipping { font-weight:bold; } .data-cell { padding:0px 50px 0px 10px;vertical-align:top} .align-cart { padding-left:280px; top:30pt;} </style> <!--// Document Table //--> <table class="data-cell"> <tr class="product"> <td><img src="images/stainless_thumbnail.gif" width="65" border="0" align="absmiddle" class="product-image"/></td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 1 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item2_image.jpg" width="65" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 2 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item3_image.gif" width="66" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 3 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> </table> <!--// Document Script "View Cart" //--> <script id="googlecart-script" type="text/javascript" src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=xyz" currency="USD" post-cart-to-sandbox="fale"> </script> Hi all, Im trying to link to a section of one page from a different page. Normally it's quite simple but i am using a different linking setup and it's confusing me, i'm afraid. Basically my page setup is I have separate folders for each page, than inside those folders is an index.html page. the page url does not show the .html it only shows the folder name. This is done via my htaccess file (can't remember where i found this solution from). Any way this setup causes problems linking to sections of other pages, has anyone encountered this before, am i missing something simple? Any help is appreciated! Basically I want to integrate the CSS of tumbler into my website with my HTML. that is I want to integrate the css from tumbler and html is designed by me. How is it possible because I google it but not found any proper solution for integrate tumbler css to my html Thanks Im in the process of uploading my site to my server and I set up some folders server side so things would be somewhat organized. My problem is setting up the links in my html docs. I cant go back a folder in the directory structure. Right now I can only get links to work if they go deeper in the folder structure or if Im linking to another html doc thats in the same folder as the one Im currently on. How do I go back a level? For instance my index doc is at the very top level, how can one of my pages deeper in go back to the home page? Thanks. Hi Html Gurus, Please help me out the with structure shown in the file I have attached. Thats the site map of my website and I want to display it on a jsp page. Can someone please suggest me the code to get that structure. Thanks in advance. Hello. I am trying to code a "simple" webpage. It will have two drop downs. Each drop down will have a few selections. You, the user, choose two selections from each drop down. The you press submit/go button. if you house apples for dropdown 1 and green for dropdown 2, it would then insert these keywords into a link such as www.test.com/apples11green.html or www.test.com/apples/green.html, etc etc... basically i want to specify to variable spots in a link, and have the drop down selections place into those links. Hi i need help i need to make a webpage that lists folders and subfolders within a folder and it needs to automaticaly update when a new folder is added Please help Hallo, I am very much a beginner with HTML and need some help. I have a very big photo gallery. What I want to do is make a link on an HTML page that will open up the folder so that you can browse through the photos. Thanks in advance. Ive got a url address connecting to a shared offline drive, for some reason it doesnt work when i put it into a link, although when i paste the address into a browser it works fine. The link is '<A HREF="file://atlefs0027/dept$/Supply_Management/01 Bids JTB & WB & BB">Access Supply Management Drive</A>' When i click on the link, the link removes the 'file://' and goes to 'atlefs0027/dept$/Supply_Management/01 Bids JTB & WB & BB'. Which ofcourse doesnt work. How do i keep the 'file' part of the link? |
|||||||