|
HTML - Web Page Structure.
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? Similar TutorialsHi 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 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! 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, 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 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>
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. 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. 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 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 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! 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 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> 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 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, Background: I have a small page that need to be embeded into a bounch of other html pages. Help needed: 1. Please provide the html chunk that I can use to embed the small page in to other html pages. 2. Is there a way of not using iframe? Can I use <Object> or <embed>? How? --------------------------- mba colleges in london hospitality management diploma Some mouses today have horizontal scroll, some call the tilt. It looks something like: http://www.htmlforums.com/attachment...1&d=1242556560 I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward) How do I code like that? Or any examples? I believe in thread titles that get to the point. I have a basic page, when the page loads I want people to see the top of the page for a few seconds while a flash starts to load but then I want the page to scroll down a bit so the visitor can see the flash load progress status. I just want code that I can copy into my page. I don't have access to the flash code. Greg (the page under design) www.mytcanada.com/designer.html I have a programmer in the US who starts pages for me and then I much around with them until it's looks like I want. He helps me when I get stuck but he's on holidays. Any help would be great. |
|||||||