|
HTML - Problems With My Second Page
Hi,
I have finished my first ever page and am now starting on page 2 (I wanted to create the pages before learning how to link them) I want to use the same layout as my index.php page so i have copied and pasted the code and was just going to edit the text (tell me if i'm doing wrong!) My index page looks fine (www.thetenerifeapartment.com) i have named my second page teneriferegion (saved as a .php in notebook) uploaded it to the server and typed in www.thetenerifeapartment.com/teneriferegion.php/ in the browser to have a look how it looks but the header image is broken and the borders around the text doesn't show as in my index page. Can someone let me know what i've done wrong? Similar Tutorialsi made my first ever full site. it works well in safari and firefox. but for some reason the center section in my page is thrown off with IE. i want my page to be viewable in all possible browsers. can someone help? link to my page is http://h1.ripway.com/dsponline/index.html and the style sheet is http://h1.ripway.com/dsponline/style.css anyone help it would be greatly appreciated! Hi, when I created my website www.monkeygambling.com I didn't think about the resolution of other peoples monitors. When most internal pages (homepage is fine i think) are viewed on resolutions below 1280*1024 the page contents moves around. Could anyone help with out with the easiest way to stop this happening so the contents are fixed? thanks for your help Hello, Today I updated my index.php page (home page) and I went to my site www.scubatoo.net and it did not update. I can go to /index.php and see the updated page, but not if I just go to www.scubatoo.net. Please help me. Thanks, and Happy NEW YEAR -Ryan Hi, I have made an ubuntu server (11.10) and I have made a site on this IP number: 188.177.104.174. When I load the site from a non-local location the site looks strange... The whole setup is missing... I guess its a very basic configuration issue!? Can you help? Frank <a href="http://www.gametracker.com/server_info/209.40.97.202:28960/" target="_blank"> <img src="http://cache.www.gametracker.com/server_info/209.40.97.202:28960/b_160x400_T0_F-2_CFFFFFF-FFFFFF-81B569-191515.png" border="0"> </a> <a href="http://www.gametracker.com/server_info/85.234.155.53:30002/" target="_blank"> <img src="http://cache.www.gametracker.com/server_info/85.234.155.53:30002/b_160x400_T0_F-2_CFFFFFF-FFFFFF-5DA85D-141414.png" border="0"> </a> Hi there, I'm a relative novice in HTML, but when i try to post the above two images, they appear one below the other, not side by side. I tried to use a series of <table>, <tr>, and <tb> things to sort it into two collumns and one row, but this screwed up the formatting on the forum i tried to post them on. I wonder if there's any possibilty you could give me a simple way to allow both these images to sit next to each other on a page, without it being too cumbersome? Many thanks. I was recently tasked with converting two websites for my company into new pages. Some in different languages and some with other features. The problem is that one of the pages I did not originally make and it was made with iWeb on a Mac. I have been editing the page with Microsoft Expression Web 3 and all will be going well except for one problem. Whenever I make a mistake, if I click "undo" it undoes everything that I have edited on the page. It is very frustrating and I know that I can manually go back and undo any mistakes I make but I would like to know that I can undo a few steps instead of having the page reset on me. Is there something I am doing wrong or is it a problem with trying to go from a site made with iMac to editing with MEW3? Hi everyone, I'm working on a website for a family member who has a buisness doing antique restoration, I'm trying to make all the pages have the same alignment, the address is http://www.maxbarr.com/ if you click on the buttons along the top you'll see what i mean, some of them are the same alignment others are shifted slightly to the left, they all have exactly the same code as I've used a Dreamweaver template. However they do use stylesheets as well, with the gallery pages using two so I'm guessing it may be that. For bonus marks can someone tell me how to make the copyright information in the gallery section the same size as one the other pages. here is the code for the template: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:Max Barr Antique Furniture Restoration:.</title>
<style type="text/css" media="all">
<!--
@import url("../styles.css");
#header #logo a {
font-family: Times New Roman, Times, serif;
}
#index #outerWrapper #gradient #contentWrapper br {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
-->
</style>
<!-- TemplateBeginEditable name="gallery info" --><!-- TemplateEndEditable -->
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body id="index">
<div id="header">
<div id="logo">
<a href="index.html" onmouseover=""> Max Barr Antique Restoration</a></div>
</div>
<div id="outerWrapper">
<div id="gradient">
<div id="nav" style="margin-bottom: 10px;">
<div align="center">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="contentWrapper">
<div align="center"></div>
<div id="content"> <!-- TemplateBeginEditable name="Content" -->
<h1>This is the page title</h1>
<h2>This is the H2 tag</h2>
<!-- TemplateEndEditable --></div>
</div>
<div id="credit" align="center">Copyright © 2009 Max Barr
<br />
</div>
</div>
</div>
</body>
</html>
And here's the code for the stylesheet: Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
}
body {
background-color: #000000;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background-image: url(images/body-bg.png);
background-repeat: repeat-x;
background-position: top;
}
h1 {
color: #FFFFFF;
font-size: 24px;
font-weight: normal;
line-height: 28px;
letter-spacing: -1px;
}
h2 {
color: #999999;
font-size: 18px;
font-weight: bold;
line-height: 20px;
}
a, a:link {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: bold;
}
a:focus {
color: #CCCCCC;
}
a:active {
color: #CCCCCC;
}
#outerWrapper {
margin: 0 auto 0px;
text-align: left;
width: 920px;
background: #fff url(images/content-bg.png) repeat-y left 13px;
}
#outerWrapper #gradient {
background-image: url(images/gradient-shadow.png);
background-repeat: no-repeat;
background-position: center top;
}
#header {
height: 80px;
background-image: url(images/header-bg.jpg);
background-repeat: no-repeat;
background-position: bottom;
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: left;
padding-left: 20px;
}
#header #logo {
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
padding-top: 10px;
padding-left: 0px;
line-height: 50px;
float: left;
width: 1000px;
text-decoration: none;
}
#header #links{
color: #C06A05;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
float: right;
width: 370px;
text-align: right;
margin-top: 25px;
padding-right: 25px;
}
#links a, #links a:active, #links a:visited {
font-weight: normal;
color: #C06A05;
}
#header #links a:hover {
color: #CCCCCC;
text-decoration: none;
}
#nav {
height: 62px;
margin-right: 20px;
margin-left: 20px;
color: #FFFFFF;
background-color: #CCCCCC;
background-image: url(images/nav-bg.jpg);
background-repeat: repeat-x;
background-position: top;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
margin-bottom: 0px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
margin: 0px;
display: block;
float: left;
list-style: none;
clear: right;
}
#nav ul li a {
display: block;
padding-right: 20px;
padding-left: 20px;
text-align: center;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 62px;
font-weight: normal;
background-image: url(images/nav-border.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#nav ul li a:hover {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
color: #FFFFFF;
}
#nav ul li#active {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
}
#nav ul li#active a {
color: #FFFFFF;
}
.subpage-navimage {
float: right;
}
#spacer {
background-image: url(images/nav-spacer.png);
background-repeat: no-repeat;
background-position: center top;
height: 27px;
}
#outerWrapper #feature {
height: 230px;
width: 880px;
margin-left: 20px;
margin-bottom: 5px;
background-image: url(images/feature.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#outerWrapper #contentWrapper {
padding-right: 25px;
padding-left: 30px;
clear: both;
padding-top: 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
padding: 0px;
width: 200px;
background-color: #232323;
border: 1px solid #161616;
}
#outerWrapper #contentWrapper #content {
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
background-color: #3E3E3E;
color: #CCCCCC;
border: 1px solid #2C2C2C;
font-size: 12px;
line-height: 18px;
}
#content-image {
margin-bottom: 15px;
}
#content ul li {
margin-bottom: 5px;
}
#outerWrapper #footer {
background: url(images/footer-bg.png) no-repeat left top;
height: 60px;
color: #666666;
text-align: center;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
}
#leftColumnContent {
width: 190px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #999999;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
#leftColumnContent h3 {
border: 1px solid #000000;
padding-top: 5px;
padding-bottom: 6px;
font-size: 12px;
padding-right: 4px;
padding-left: 4px;
background-image: url(images/sidebar-h3-bg.jpg);
background-repeat: repeat-x;
background-position: top;
color: #CCCCCC;
}
#leftColumn1 ul {
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#leftColumn1 ul li {
list-style: none;
display: inline;
}#leftColumn1 ul li a {
display: block;
padding: 4px 4px 4px 6px;
color: #999999;
}
#leftColumn1 ul li a:hover {
text-decoration: none;
background-color: #171717;
color: #CCCCCC;
}
.fltlft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.fltrt {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.sidebarlt {
padding: 6px;
border: 1px solid #000000;
background-color: #4E4E4E;
color: #CCCCCC;
}
.sidebardk {
color: #999999;
border: 1px solid #4A4A4A;
padding: 6px;
background-color: #1F1F1F;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
color: #999999;
}
}
#credit {
text-align: center;
padding-top: 0px;
padding-bottom: 8px;
font-size: 11px;
color: #333333;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
color: #333333;
font-weight: normal;
}
#index #outerWrapper #gradient p {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
btw I know the code is very messy, I'm trying to learn more so I can clean it up a bit Thanks very much this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon 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. Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests. Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. I have plain HTML on the main page and <iFrame> tag on it, inside tag i have URL to other page that using some script that forces host page to reload and show page from frame instead of it. Can i somehow stop it from messing my entire main page? Not even sure what to call this actually... I received this message from a friend whose site I just put up. ---------------------------- When you click on say the Home Page, and then you click on something else then go back to the prvious page, it apparently displays the previous page on the home page for example. I was not able to recreate this on my computer, but apparently, [another] web developer said this is a fairly common problem. Do you know what he is referring to, and can it be fixed? ---------------------------- Here's the site in question. Nothing fancy, just individual HTML pages. http://www.soundadviceht.com/index.html I gotta admit, I have no earthly clue what he's talking about, unless he's relaying the message wrong? Any ideas what he's talking about? Hello; I have text box & submit button in page_1 & I have text box & submit button in page_2. I want when write text in text box in page_1 it go directly to text box in page_2 & I want when click on submit button in page_1 it is like click on submit button in page_2. Assume page_2 located in other site www.page_2.com. How to do that.?? Why is my home page crashed every time i click the next page button at the very bottom if you look at the (FEATURED and NEWS categories) it will changes after you clicked the next page bottom Also when i click the next page bottom its not showing the right articles/posts according to the date wrote. any help of how i can fix this problem step by step will be much appreciated. Hello, I've put the Code: <div align="center"> below the Code: <body> tag and closed it with the Code: </div> before the Code: </body> tag. The page doesn't center at all. Is looking fine in 1024x768 but in any bigger resolution, the page is aligned to the left. The page that I am talking for is this. Any idea? Hey all, me and my friend have a cleaning company and we deciced to make a webpage. It's been a good 6 years since i have worked on a website. My biggest accomplishment so far was getting the contact form to work properly on the site. It does, i feel like i've done alot lol. Anyway, the current design is a rough layout (suggestions are welcome). It still needs a lot of little touches to make it look more "full". My biggest concern now is when your clicking from page to page the table jumps around. In firefox, the Contact Us and Services page are perfect, nice and centered. The image i'm using where the navigation buttons are is in place as well. When you go to the other pages though the table moves a bit and it looks like the image i'm using where the navigation buttons are starts to repeat. In Internet Exploder, everything doesn't look centered. There seems to be more space on the right than on the left, but the image i'm using for the navigation buttons seems to be fine, it's not repeating. I dunno what's causing this. I know different browsers display stuff in different ways but i'm far from having a good understanding as to why (that's why i'm here). I even copied txt from one of the messed up pages and pasted it on one of the pages that is ok and that didn't work. I assume it's a CSS thing. Also, try and avoid saying things like "Table designs are for teh n00bz!11!" or "This is why CSS is better than using a table design!!!". This is how i did it. Im ok with CSS but i don't have a thorough understanding of it to design an entire website using CSS. I'm hoping this is an easy CSS fix, or maybe something else? The website is www.gocleantoday.com. Thanks. |
|||||||