layout positioning

A

admin

Administrator
Staff member
Right now i am trying to position everything on my web page, <!-- m --><a class="postlink" href="http://s94594896.onlinehome.us/index.php">http://s94594896.onlinehome.us/index.php</a><!-- m --> I am using div's, but i don't know if thats the way to go, and i'm not really sure how to properly use them either. Actually im not even sure if i am currently using them the right way on my page. So if any one could explain better how div's work, or explain a better way to position, that would be great. <br />
<br />
Also, i tryed to keep the page centered in the browser, and it turned out like this (<!-- m --><a class="postlink" href="http://s94594896.onlinehome.us/indextest.php">http://s94594896.onlinehome.us/indextest.php</a><!-- m -->). Can't seem to ge the measurements right, along with no scrolling. <br />
<br />
I looked my page up in the validator, and i have found that there are many problems with it, but when i try to change them, it messed up my layout. So im looking for any suggestions, or maybe you can see, and point out some mistakes i have made in the code?<br />
<br />
Thanks,<br />
-Brendan<!--content-->Here's a fresh start:<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"><br />
<html lang="en"><br />
<head><br />
<title>Basic HTML</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<meta name="copyright" content="Basic HTML"> <br />
<meta name="keywords" content="Basic HTML"> <br />
<meta name="description" content="HTML template"> <br />
<br />
<link rel="StyleSheet" href=http://www.webdeveloper.com/forum/archive/index.php/"menuDropdown.css" type="text/css"><br />
<style type="text/css"><br />
<!-- <br />
body {background:#393939; color:#fff}<br />
.centered {text-align:center;}<br />
#container {margin:0 auto; width:80%; text-align:left;} <br />
#contents {border:2px solid #fff; background:#000; color:#fff; width:700px; height:500px; padding:20px;}<br />
<br />
.hline {margin:0 auto; border-top:4px solid #131c46; width:90%;}<br />
--><br />
</style><br />
<br />
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"menuDropdown.js"></script><br />
<script type="text/javascript"><br />
<!--<br />
window.onload = function() {<br />
initializeMenu("PDASoft", "PDASoftActuator");<br />
initializeMenu("products", "productsActuator");<br />
initializeMenu("policy", "policyActuator");<br />
initializeMenu("contact", "contactActuator");<br />
initializeMenu("helpMenu", "helpActuator");<br />
} <br />
//--><br />
</script><br />
<br />
</head><br />
<body><br />
<div class="centered"><div id="container"><div id="contents"><br />
<!-- Start contents --><br />
<div id="mainMenu"><br />
<ul id="menuList"><br />
<li class="menubar"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" id="PDASoftActuator" class="actuator" accesskey="p"> PDA Soft</a><br />
<ul id="PDASoft" class="menu"><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Home</a></li><br />
</ul><br />
</li><br />
<li class="menubar"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/pdasoftdev/programs.html" id="productsActuator" class="actuator" accesskey="n">Products *</a><br />
<ul id="products" class="menu"><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/pdasoftdev/programs.html">PSM &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp </a></li><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/pdasoftdev/thecookbook.html">The Cook Book</a></li><br />
</ul><br />
</li><br />
<li class="menubar"><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/pdasoftdev/refund.html" id="policyActuator" class="actuator" accesskey="c">Policy *</a><br />
<ul id="policy" class="menu"><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/pdasoftdev/refund.html">Refund Policy</a></li><br />
</ul><br />
</li><br />
<li class="menubar"><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/pdasoftdev/contact.html" id="contactActuator" class="actuator" accesskey="m">Contact</a><br />
<ul id="contact" class="menu"><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/pdasoftdev/contact.html">Contact</a></li><br />
</ul><br />
</li><br />
</ul><br />
</div> <br />
<div class="centered">Welcome</div><br />
<div class="hline"></div><br />
<p>Welcome to PDASoft! This Website is new, and is under construction. Soon it will be the new website for PDASoft. We sell various programs for Palm OS &reg handhelds. We will soon have paypal as a payment method. Please check back at a later time, once we have our webpages up and running.</p><br />
<!-- End contents --><br />
</div></div></div><br />
</body><br />
</html><!--content-->I'm not an expert on positioning, but I did notice something, your first closing tag for your <div> is </dv>.<br />
<br />
Also all XHTML tags should be in lower case, a few of yours are not, this would give you problems when validating, a couple I noticed were:<br />
<br />
<TABLE BORDER<br />
<br />
<IMG SRC<br />
<br />
I have found in the past that a missing closing <div> can make a heck of a difference, so maybe that will help.<!--content-->Thanks for your help. :D <br />
How do i position the text box to go down, and to the right a bit?<br />
<br />
Also, how do i make the welcome text bigger, and the other text smaller?<br />
I want to know how to position it freely, rather than use the center, left, and right commands.<!--content-->How do i position the text box to go down, and to the right a bit? Add margin: 10px auto; to .tcentered style.<br />
Also, how do i make the welcome text bigger, and the other text smaller? Make the 'welcome' a heading; after all that's what it is, right? Your font-size attributes need units (px, em, pt, ...).<br />
I want to know how to position it freely, rather than use the center, left, and right commands. Personally, I'd recommend against that but if you MUST then read up on position:absolute; and what else that entails.<!--content-->Thanks, the answers helped :) Although i do think i have another question. For my menu ( css file here (<!-- m --><a class="postlink" href="http://s94594896.onlinehome.us/menuDropdown.css">http://s94594896.onlinehome.us/menuDropdown.css</a><!-- m -->) , and js file here (<!-- m --><a class="postlink" href="http://s94594896.onlinehome.us/menuDropdown.js">http://s94594896.onlinehome.us/menuDropdown.js</a><!-- m -->)) does anyone know how to make it to where it pops up on when you roll over and automatically goes off a few seconds after you roll off, similar to most roll-overs? I think I got the first part done....<!--content-->Like this? <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m --><!--content-->yes, but im trying to make my menu do that on my site (<!-- m --><a class="postlink" href="http://s94594896.onlinehome.us/">http://s94594896.onlinehome.us/</a><!-- m -->) If i try to use the onmouseout function, for some reason it dissapears right when i hover over it.<br />
<br />
I also don't know how to position the menu to be to the right of the logo...<!--content-->WAG: Start by putting the image just ahead of the mainMenu div and setting the latter to float:right or float:left with a left margin a little wider than the image.<!--content-->Ok thanks, i got the align part done, although i still cant figure out how to do the mouseout on the menu...<!--content-->
 
You must log in or register to reply here.
Back
Top