building a specific website structure

bamanser
avatar
rank newbie

newbie


Posts: 4
Joined: 2008-07-23

Posted: Wed, 2008-07-23 15:45

I'm really sorry guys i've been pulling my hair out trying to do basic things, but really would appreciate anyone's help....

im trying to create a html doc which has the following: (please see attached mock up jpeg) I need it to include 2 borders and also be fixed and centered...
I was trying to use div tags/ tables but unable to do so?! Cursing

many thanks,

Benny Smiling

bamanser
bamanser's picture
rank newbie

newbie


Posts: 4
Joined: 2008-07-23

attached layout

Posted: Wed, 2008-07-23 15:47

please see jpeg attachment of the layout im trying to get

AttachmentSize
basic_website.jpg46.34 KB
David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 267
Joined: 2008-07-18
Location: US

There is no need to pull

Posted: Wed, 2008-07-23 16:40

There is no need to pull your hair out. Nor any reason to use a table (unless you're setting some tabular data in the content). This is, after all, a CSS forum: "When in Rome, do as the Romans."

There is also no need to re-invent the wheel. Start with a layout that is known to be stable, robust, and work well cross-browser. Start with this one from style-gala [1], and keep it simple by just plugging your content in it as is. Bring it back, and someone will help insert the navigation bar, if that (or anything else) proves problematic.

[1] http://blog.html.it/layoutgala/LayoutGala36.html

bamanser
bamanser's picture
rank newbie

newbie


Posts: 4
Joined: 2008-07-23

positioning of div tags

Posted: Thu, 2008-07-24 08:57

David thanks so much for your advise its really really appreciated! Smiling I am slowly starting to get the hang of things... but by no means a "master" like you guys! I have been using div tags and now have a new problem correctly positioning my "content" div tag correctly on the following page... i have tried using float (left,right) /positioning (ap div) but to no avail... I have been using dreamweaver and it displays the page how i want, but when i render in a browser like IE/firefox it goes drastically wrong! Oops! my bad

any help would be much appreciated(if you could include the code that would be FAB!) 

<!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>homepage</title>
<style type="text/css">
<!--
#wrapper {
	background-color: #FFFFCC;
	padding: 0px;
	width: 780px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#wrapper2 {
	background-color: #369FCF;
	border: 10px solid #379FD2;
	width: 790px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
}
.font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}
.font2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: oblique;
	font-weight: bolder;
	color: #026EB9;
}
body {
	margin: 0px;
	padding: 0px;
	background-color: #11494D;
}
#banner {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 277px;
	width: 780px;
	background-color: #00FF66;
}
#topmenu {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 32px;
	width: 780px;
	background-color: #FF0000;
}
#header {
	height: 96px;
	padding: 0px;
	float: left;
	background-color: #CCCCCC;
}
#sidemenu {
	float: none;
	width: 164px;
	background-color: #FF0000;
}
#clear {
	clear: both;
}
#footer {
	background-color: #CCCCCC;
	padding: 5px;
	height: 20px;
}
.bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	text-align: center;
	text-transform: uppercase;
}
#content {
	background-color: #FFFFFF;
	float: right;
	background-image: url(images/navigation/bg_logo.gif);
	background-repeat: no-repeat;
	background-position: 375px 80px;
	width: 580px;
	position: absolute;
	left: 228px;
	top: 439px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/1_home/NAV_home.jpg','images/2ABOUT_OVER.jpg','images/navigation/top_menu/3INVOLVED_OVER.jpg','images/navigation/top_menu/4global_call_over.jpg','images/navigation/side_menu/1events_over.jpg','images/navigation/side_menu/2photos_over.jpg','images/navigation/side_menu/3sponsor_over.jpg','images/navigation/side_menu/4links_over.jpg','images/navigation/side_menu/5contact_over.jpg')">
<div id="wrapper2">
  <div id="wrapper">
    <div id="header"><img src="images/HEADER_hello.jpg" width="780" height="96" alt="home" /></div>
    <div id="topmenu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/1_home/NAV_home.jpg',1)"><img src="images/NAV_home.jpg" alt="Home" name="home" width="116" height="32" border="0" id="home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/2ABOUT_OVER.jpg',1)"><img src="images/2ABOUT.jpg" alt="About" name="about" width="209" height="32" border="0" id="about" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('involved','','images/navigation/top_menu/3INVOLVED_OVER.jpg',1)"><img src="images/navigation/top_menu/3INVOLVED.jpg" alt="Get Involved" name="involved" width="173" height="32" border="0" id="involved" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('global','','images/navigation/top_menu/4global_call_over.jpg',1)"><img src="images/navigation/top_menu/4global_call.jpg" alt="Global Call" name="global" width="282" height="32" border="0" id="global" /></a></div>
    <div id="banner"></div>
    <div id="sidemenu">
      <p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/navigation/side_menu/1events_over.jpg',1)"><img src="images/navigation/side_menu/1events.jpg" alt="events" name="events" width="164" height="43" border="0" id="events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photos','','images/navigation/side_menu/2photos_over.jpg',1)"><img src="images/navigation/side_menu/2photos.jpg" alt="photos" name="photos" width="164" height="39" border="0" id="photos" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sponsors','','images/navigation/side_menu/3sponsor_over.jpg',1)"><img src="images/navigation/side_menu/3sponsor.jpg" alt="sponsors" name="sponsors" width="164" height="39" border="0" id="sponsors" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/navigation/side_menu/4links_over.jpg',1)"><img src="images/navigation/side_menu/4links.jpg" alt="links" name="links" width="164" height="38" border="0" id="links" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/navigation/side_menu/5contact_over.jpg',1)"><img src="images/navigation/side_menu/5contact.jpg" alt="Contact Us" name="contact" width="164" height="34" border="0" id="contact" /></a><img src="images/navigation/bg_left_nav.gif" width="164" height="530" /></p>
      <div id="content">
        <p align="center"><img src="images/1_home/T_inspiration.jpg" alt="text" width="567" height="43" /></p>
        <p class="font">text </p>
        <p class="font">text</p>
        <p class="font">•	text<br />
          •	text<br />
          •	text<br />
          •	text </p>
        <p align="left"><img src="images/1_home/T_inspiration2.jpg" alt="text" width="428" height="255" /></p>
        <p align="left">text</p>
      </div>
    </div>
    <div id="clear"></div>
    <div class="bold" id="footer">text</div>
  </div>
</div>
</body>
</html>

thepineapplehead
thepineapplehead's picture
rank Moderator

Moderator


Posts: 9203
Joined: 2004-06-30
Location: Milton Keynes

Here you go, this should get

Posted: Thu, 2008-07-24 09:47

Here you go, this should get you going:

<!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>homepage</title>

<style type="text/css">

<!--

#wrapper {
	background-color: #f00;
	width: 780px;
	margin: 0 auto;
	overflow: auto;
	border: 10px solid #379FD2;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000;
	margin: 0;
	padding: 0;
	background-color: #11494D;
}

#banner {
	height: 77px;
	width: 780px;
	background-color: #0f6;
}

#topmenu {
	height: 32px;
	width: 780px;
	background-color: #f00;
}

#header {
	height: 96px;
	background-color: #ccc;
}

#sidemenu {
	float: left;
	width: 160px;
}

#footer {
	clear: both;
	background-color: #CCC;
	padding: 5px;
	height: 20px;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
}

#content {
	background-color: #fff;
	float: left;
	background-image: url(images/navigation/bg_logo.gif);
	background-repeat: no-repeat;
	background-position: 375px 80px;
	width: 620px;
}

-->

</style>
</head>

<body>

  <div id="wrapper">

    <div id="header"><img src="images/HEADER_hello.jpg" width="780" height="96" alt="home" /></div>

    <div id="topmenu">
      <a href="#"><img src="images/NAV_home.jpg" alt="Home" name="home" width="116" height="32" border="0" id="home" /></a>
      <a href="#"><img src="images/2ABOUT.jpg" alt="About" name="about" width="209" height="32" border="0" id="about" /></a>
      <a href="#"><img src="images/navigation/top_menu/3INVOLVED.jpg" alt="Get Involved" name="involved" width="173" height="32" border="0" id="involved" /></a>
      <a href="#"><img src="images/navigation/top_menu/4global_call.jpg" alt="Global Call" name="global" width="282" height="32" border="0" id="global" /></a>
    </div>

    <div id="banner">banner image</div>


    <div id="sidemenu">
      <ul>
        <li><a href="#"><img src="images/navigation/side_menu/1events.jpg" alt="events" name="events" width="164" height="43" border="0" id="events" />Events</a></li>
        <li><a href="#"><img src="images/navigation/side_menu/2photos.jpg" alt="photos" name="photos" width="164" height="39" border="0" id="photos" />Photos</a></li>
        <li><a href="#"><img src="images/navigation/side_menu/3sponsor.jpg" alt="sponsors" name="sponsors" width="164" height="39" border="0" id="sponsors" />Sponsors</a></li>
        <li><a href="#"><img src="images/navigation/side_menu/4links.jpg" alt="links" name="links" width="164" height="38" border="0" id="links" />Links</a></li>
        <li><a href="#"><img src="images/navigation/side_menu/5contact.jpg" alt="Contact Us" name="contact" width="164" height="34" border="0" id="contact" />Contact Us</a></li>
      </ul>
    </div>

      <div id="content">
        <p><img src="images/1_home/T_inspiration.jpg" alt="text" width="567" height="43" /></p>
        <p>text </p>
        <p>text</p>
        <ul>
          <li>text</li>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ul>

        <p><img src="images/1_home/T_inspiration2.jpg" alt="text" width="428" height="255" /></p>

        <p>text</p>
      </div> <!-- end #content -->

    <div id="footer">text</div>

    </div>

</body>
</html>

You'll also want to read Faux Columns, Sliding Doors of CSS, and CSS for Accessibility, especially the Linky Love part Eye-wink

bamanser
bamanser's picture
rank newbie

newbie


Posts: 4
Joined: 2008-07-23

Great thanks alot... i have

Posted: Thu, 2008-07-24 11:22

Great thanks alot...

i have briefly uploaded it to:
http://www.chinrelief.org/pjam.html

but i have a problem with particularly the "Ap div: middle menu" which i want to exactly position in a certain part of the page, but it keeps moving on the horizon axis. I tried to resolve this by giving the ap div a margin-left 130 px but no use...(sorry maybe totally wrong!)

In IE it is fine when viewed full screen, but moves when the window is fully maximised
In firefox again when viewed full screen it is slightly moved up in vertical by maybe 10px, and the div tag goes everywhere when not at full screen!!! is there something simple i am missing? any help would be appreciated...

<!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>PeaceJamUk: Homepage</title>
<style type="text/css">
<!--
#wrapper {
	background-color: #FFFFFF;
	padding: 0px;
	width: 780px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#wrapper2 {
	background-color: #369FCF;
	border: 10px solid #379FD2;
	width: 790px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
}
.font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}
.font2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: oblique;
	font-weight: bolder;
	color: #026EB9;
}
body {
	margin: 0px;
	padding: 0px;
	background-color: #11494D;
}
#banner {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 277px;
	width: 780px;
}
#topmenu {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 32px;
	width: 780px;
}
#header {
	height: 96px;
	padding: 0px;
	float: left;
}
#sidemenu {
	float: none;
	width: 164px;
}
#clear {
	clear: both;
}
#footer {
	background-color: #CCCCCC;
	padding: 5px;
	height: 20px;
}
.bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	text-align: center;
	text-transform: uppercase;
}
#content {
	background-color: #FFFFFF;
	background-image: url(pjamimages/navigation/bg_logo.gif);
	background-repeat: no-repeat;
	background-position: 375px 75px;
	width: 580px;
	top: 435px;
	float: right;
}
#middlemenu {
	height: 32px;
	width: 248px;
	position: absolute;
	left: 137px;
	top: 359px;
	margin-left: 130px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('pjamimages/1_home/NAV_home.jpg','pjamimages/2ABOUT_OVER.jpg','pjamimages/navigation/top_menu/3INVOLVED_OVER.jpg','pjamimages/navigation/top_menu/4global_call_over.jpg','pjamimages/navigation/side_menu/1events_over.jpg','pjamimages/navigation/side_menu/2photos_over.jpg','pjamimages/navigation/side_menu/3sponsor_over.jpg','pjamimages/navigation/side_menu/4links_over.jpg','pjamimages/navigation/side_menu/5contact_over.jpg','pjamimages/navigation/middle_menu/meet_over.jpg')">
<div id="wrapper2">
  <div id="wrapper">
    <div id="header"><img src="pjamimages/HEADER_peacejam.jpg" width="780" height="96" alt="home" /></div>
    <div id="topmenu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','pjamimages/1_home/NAV_home.jpg',1)"><img src="pjamimages/NAV_home.jpg" alt="Home" name="home" width="116" height="32" border="0" id="home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','pjamimages/2ABOUT_OVER.jpg',1)"><img src="pjamimages/2ABOUT.jpg" alt="About PeaceJam" name="about" width="209" height="32" border="0" id="about" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('involved','','pjamimages/navigation/top_menu/3INVOLVED_OVER.jpg',1)"><img src="pjamimages/navigation/top_menu/3INVOLVED.jpg" alt="Get Involved" name="involved" width="173" height="32" border="0" id="involved" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('global','','pjamimages/navigation/top_menu/4global_call_over.jpg',1)"><img src="pjamimages/navigation/top_menu/4global_call.jpg" alt="Global Call To Action" name="global" width="282" height="32" border="0" id="global" /></a></div>
    <div id="banner"><img src="pjamimages/1_home/BANNER_home.jpg" alt="home" width="780" height="277" /></div>
    
    <div id="middlemenu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('meet','','pjamimages/navigation/middle_menu/meet_over.jpg',1)"><img src="pjamimages/navigation/middle_menu/meet.jpg" alt="Meet the Laureates" name="meet" width="248" height="32" border="0" id="meet" /></a></div>
    <div id="content">
      <p align="center"><img src="pjamimages/1_home/T_inspiration.jpg" alt="inspiration education action" width="567" height="43" /></p>
      <p class="font"><span class="font2">PeaceJam UK</span> is part of an international youth movement led by Nobel Peace Prize winners</p>
        <p class="font">PeaceJam inspires young people and gives them skills to:</p>
        <p class="font">•	become a new generation of peacemakers<br />
          •	transform themselves, their local communities, and the world. <br />
          •	be active global citizens<br />
          •	choose non-violent solutions to their problems </p>
        <p align="left"><img src="pjamimages/1_home/T_inspiration2.jpg" alt="PeaceJammers during PeaceJam 2007" width="428" height="255" /></p>
    </div>
    <div id="sidemenu">
      <p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','pjamimages/navigation/side_menu/1events_over.jpg',1)"><img src="pjamimages/navigation/side_menu/1events.jpg" alt="events" name="events" width="164" height="43" border="0" id="events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photos','','pjamimages/navigation/side_menu/2photos_over.jpg',1)"><img src="pjamimages/navigation/side_menu/2photos.jpg" alt="photos" name="photos" width="164" height="39" border="0" id="photos" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sponsors','','pjamimages/navigation/side_menu/3sponsor_over.jpg',1)"><img src="pjamimages/navigation/side_menu/3sponsor.jpg" alt="sponsors" name="sponsors" width="164" height="39" border="0" id="sponsors" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','pjamimages/navigation/side_menu/4links_over.jpg',1)"><img src="pjamimages/navigation/side_menu/4links.jpg" alt="links" name="links" width="164" height="38" border="0" id="links" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','pjamimages/navigation/side_menu/5contact_over.jpg',1)"><img src="pjamimages/navigation/side_menu/5contact.jpg" alt="Contact Us" name="contact" width="164" height="34" border="0" id="contact" /></a><img src="pjamimages/navigation/bg_left_nav.gif" width="164" height="530" /></p>
    </div>
    <div id="clear"></div>
    <div class="bold" id="footer">Copyright PeaceJam UK 2008&copy;</div>
  </div>
</div>
</body>
</html>

p.s. thanks alot for all that advice I will get reading with thoughs links you sent

thepineapplehead
thepineapplehead's picture
rank Moderator

Moderator


Posts: 9203
Joined: 2004-06-30
Location: Milton Keynes

Why do you want to keep it

Posted: Thu, 2008-07-24 12:02

Why do you want to keep it in one place? It's not really a good idea to use AP for something like this, it could be positioned another way.