|
HTML - N00b B00b! Page Layout Cofuzzlleedd
so im a silly little noob who is learning html, but i want to know how you layout your webpage with a defined width and have it all center in the webpage at all times.
<www.w3schools.com <----not unlike this webpage Basically I would love to see the code for just the page centered like that and maybe a grey background to make it very obvious to me. Help a noob out! Similar TutorialsHello everyone, my name's Jesse and this is my first post here on these forums and I'm really looking for some help here (as I can't seem to find any anywhere else). I am currently using the Soul Vision v.1.0 theme. After running the W3C Markup Validator I see that there are a total of 68 Errors and 26 Warnings. I really love this template and it works very, very well with my vision and content. I don't know anything really about fixing or cleaning up any code (and yes I did try using HTML Tidy and it messed up my site so I had to reset it all). Is there any one person who would be willing to help me make this W3C compliant for the sake of SEO? I didn't include my meta title, keywords and description in the above header.php. They were right before the first </head> in the middle/top of the code. For example, from the W3C Markup Validator I get a lot of these errors: document type does not allow element "link" here Other errors include: document type does not allow element "meta" here document type does not allow element "style" here end tag for element "head" which is not open document type does not allow element "body" here document type does not allow element "ul" here; assuming missing "li" start-tag. Here is some code from the header.php file: DELETED I'm working on the html for my tumblr account and would like to know if there is a better code to use rather than a bunch of br's. There is a table on the right of my page that has the title, description, followed pages and then the 'newer' 'older' tag links below that. I would like the 'newer' and 'older' tags to be all the way at the end of the page (so the table also goes to the end of the page) Right now I just have in a bunch of br's, but the page length varies depending on the number and size of the posts, so I would like to know if there is something I can use that will automatically set this to the bottom. Thanks in advance for the help! Hi I am trying to code a website which is subdivided (using tables) into a navigation side bar and content area. How is it possible to allow my various html pages be displayed in the content area (without opening a new window) when i click on a link in the navigation bar? gary Hi, i have a problem with html tables. Im working on a myspace layout for my band. the table layout looks great in IE but not in Firefox. i can give you a link to the page http://www.myspace.com/northeytest and even the coding if you need to see it The problem is that i have two tables under two different <div> classes. both div calsses are set the same, that are set to an absolute position, a left margin of -400px (each table is 800px in width) and a left positioning of 50%. the only difference is the second one has a margin at the top of 942px. In IE, this works fine, but in firefox, the table is halfway off the page on the left hand side unless i change the margin to 105%. please help me edit: also, im new, so hi im also just starting out with learning html code Hi all, for some reason when I delete the comments from my code, it runs differently than when the comments are in there. I want a green horizontal navigation bar to appear at the top of the page, and when the comments are in there, my ul list is in default style. Can anyone figure out why this is happening? Thanks so much in advance. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <!-- head section contains general page attributes -->
<title> Navigation </title> <!-- Title (on tab) says "Navigation" -->
<style type="text/css"> <!-- Use css style -->
<!-- navbar is the tag of the main navigation bar, ul means it's an unordered list -->
#navbar ul { <!-- Attributes of main bar -->
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center; <!-- Alignment of links in horizontal bar -->
background-color: #009966; <!-- Color of main bar -->
}
#navbar ul li { <!-- Attributes of list -->
display: inline; <!-- Display list elements horizontally -->
float: left;
}
#navbar ul li a { <!-- Attributes of link boxes -->
text-decoration: none;
font: arial;
display: block; <!-- Put each link in a block -->
width: 10em; <!-- Width of each block -->
height: 30px; <!-- Height of each block -->
color: #FFFFFF; <!-- Color of link text -->
background: #009966; <!-- Color of block -->
text-align: center;
}
#navbar ul li a:hover { <!-- Attributes of block when hovered over -->
color: #FFFFFF;
background-color: #006666;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Past Events</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</body>
</html>
Hi, Im not very fluent in html, and im trying to do a very simple task. I've been browsing google and multiple forums including this one for a while trying to figure out this basic code but having no luck. I believe i may need to use javascript for this. What i'm trying to accomplish is: - Have visitors enter a confirmation code into a text box - If they enter the right code they get sent to my members page - If they enter the wrong code they get sent to an error page Pretty simple I know, but i cant seem to figure this out. i read this, and this code is the best i came up with so far, but i get an error when i run it. "Method Not Allowed " Here is the code i am using Code: <head>
<script type="text/javascript">
function validate_required(Password1)
{
with (Password1)
{
if (value=="password")
{
// i want to navigate to a members page here
}
else
{
// i want to navigate to an error page here
}
}
}
</html>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body>
<form method="post">
<input name="Password1" type="password" /><input name="Submit1" type="submit" value="submit" /></form>
</body>
I am reworking my webpage http://www.webficsdesign.com/start.html I can not get my tables to lineup correctly. Here is the coding I am using. Please tell me what I am doing wrong and I will love you forever! <tr> <td width="147px" height="143px" background="images/08.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:25px;">NEWS NEWS NEWS<br> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR></div> </td> <td width="505px" height="143px" background="images/09.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:15px;">INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR></div> </td> <td width="148px" height="143px" background="images/10.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:10px;padding-bottom:10px;"> <div style="padding-right:15px;padding-left:15px;">SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR></div> </td> </tr> any help on what I am doing wrong would be great. I have just started to teach myself how to do framing like this, but I cannot figure out how to get everything to lineup correctly. Hi there, Theres a page on my website that appears fine when offline (without google adverts) but when online it messes up the page layout. Would appreciate any help, not sure if the CSS file is causing the problem or the html/css webpage. http://www.paid2review.co.uk/links.html Thanks for any help. Matt Hey guys I asked a similar question before about the best way to go with page layouts and the only response I got was to go with one that will properly change with resolutions and browsers, etc.. I am learning and want to develop practical and sound habits from early on. If any of you would be willing to throw me out some good pointers, etc.. That would be great. I'm looking to do a layout with a horizontal header section and below this 2 or 3 columns of varying widths. This is rough but hopefully you get the idea. Hi, I'm in the middle of developing a infosite to work alongside our retail site. The infosite is going to maintain the basic layout of our current site (www.muddypuddles.com) with Header, footer, left menus and right buttons, which move with the size of the page. However the primary content in the middle of the page is going to become articles, etc. On our front page I'm going with a single horizantal box around 250px in height and I want the size of the box to expand depending on the resoultion of the page. Below that I am placing 2 vertical boxes side by side which I also want to expand depending on resolution. I think this is most likely CSS related, but can someone please advise me on how to float these boxes into position first of all, and then what is required to make these boxes expand with the screen size. Thanks in advance I'm quite new to the world of HTML and actually know very little about this stuff. I'm trying to do a web page for my friends company but I'm stuck. I have made my body and "menu" parts to expand according to the text I enter but it screws my layout up Maybe some one could take a look and say what I have done wrong. For me it looks like body and menus are dependent from each other, if I enter text to menu1, body and menu2 also rescale themselves... Here is the link to the problem, you can see what I want by clicking on the link "Picture of the design I want" In software programming languages you can apply layout to a software program and i'm trying to apply the same philosiphy to web sites. I've been using just <div> tags with settings of its attributes (width, height, floats & margins etc..) to get what a layout i want and recently just came across that you can use tables to contstruct a layout aswell. which idea is better and which is better design that allows future extensibility? cheers I'm trying to make a layout that takes up 100% of the page, but isn't fixed. So it moves whenever the browser is resized. However I can't get the code to work for the footer and the two inner divs. Is how I want it to look like. The white and light gray and the two content boxes. The black are the header and footer which need to be at the absolute top and bottom, respectively. The dark gray are both static images. The bottom dark gray one needs to be positioned at the same place as the footer background. The red are both content boxes that need to be centered in the middle of the light gray div and the white div. And lastly the blue is an image that needs to stay static right next to the light gray div. Anyone know how I would go about coding it? Or if anyone is willing to code me a simple block template I'd really appreciate it. Thanks =] I need help with my layout + putting content on my page + putting wordpress on my page and editing it to match someone help please? I recently updated my homepage to include more text, and moved some of the image buttons around. I noticed however, that if I view the site and increase the size of the font (control+mouse wheel) it also increases the amount of spacing between the buttons, enough to move one of the images to the next row. Is there any way to stop these images from moving? The site is he http://www.bacchanalpromotions.com The current code is written like this, I think the margin tags are what gets increased when the font size goes up, but I don't know for sure... I tested on Firefox 3.6, at 1400x900 resolution. Code: <a href="booking.php?page=thss"><img height="100px" width="123px" src="performers_images/home-circus.png" onmouseover="this.src='performers_images/home-circus2.png'" onmouseout="this.src='performers_images/home-circus.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=fire"><img height="100px" width="123px" src="performers_images/home-fire.png" onmouseover="this.src='performers_images/home-fire2.png'" onmouseout="this.src='performers_images/home-fire.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=sideshow"><img height="100px" width="123px" src="performers_images/home-sideshow.png" onmouseover="this.src='performers_images/home-sideshow2.png'" onmouseout="this.src='performers_images/home-sideshow.png'"alt="" /></a> <a style="margin-left:13px" href="booking.php?page=stilts"><img height="100px" width="123px" src="performers_images/home-stilts.png" onmouseover="this.src='performers_images/home-stilts2.png'" onmouseout="this.src='performers_images/home-stilts.png'" alt="" /></a> Please tell me how I can get the login to sit directly under the menu on the following site: http://www.smilescanning.com/default.asp By the way, I am using ssi so I can't put the login into the menu div because the menu shows up on all pages and I just want the login to show up on the default page. Thanks~ I need to find all erors in this page, it is for a school teacher and it needs to work properly, the title and stuff will be posted here, all and any corenctions are welcome : ) Code: <!--
start border and main background
-->
<HTML>
<div style="border-left:120px solid #000000;border-right:120px solid #000000;with:100%;height:100%;">
<title>Mr. Rodgers Website</title>
<BODY background="BG.jpg" style="margin:0px;">
<!--
end border and main background
-->
<!--
Static BG image
-->
<head>
<style type="text/css">
body
{
background-image:
url('BG.jpg');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<!--
done static images
-->
<!--
nav bar and head
-->
<style type="text/css">
h2 {background-color: black}
</style>
<h2 align="center"><font size="4" face="times" color="white">
<font size="6">Welcome To Mr Rodgers Website</Font>
<BR>
| <A HREF="index.html">Home</A> | <A HREF="Projects.html">Projects</A> | <A HREF="skdl.html">
schedule</A> | <A HREF="Extracredit.html">Extra Credit</A> | <A HREF="wksts.html">Worksheets
</A> | <A HREF="links.html">Links</A><BR></H2><BR>
<BR>
<!--
end navbar and head
-->
While I was searching for an HTML forum to join, I came across a statement in another forum that said using tables to layout a web page is incorrect -- even stupid. Is this true? I have been reading a book entitled "HTML, XHTML, and CSS Bible" which devotes an entire chapter (chapter 11) to "Page Layout with Tables" and continually refers to page layout within Tables and Nested Tables. This is the method that I have been using to create my first web pages. Do I need to re-think this and change the way I layout my pages? Please enlighten me... Thanks, JFB Man, I am trying to continue to work in divs instead of tables and it just keeps getting more frustrating. IE6, IE7, Firefox, different screen sizes, different screen resolutions. Can someone please help me write code that is as cross-browser/resolution/screen size capable as possible? Much appreciated~ got a very basic page as this stuff is super new to me, not sure where to put or ask about this ... when the page is resized or when the bookmarks tab comes on in firefox browser my graphics all move around , didn't use to do this but i'm not sure. happens when u resize the actual page. everything kinda lines up to fit in the new space --- i really dont know -->loaded page up temporarily http://www.legendofthegknight.com/test/index.html |
|||||||