Hey guys and gals.
Please check <!-- w --><a class="postlink" href="http://www.imageofself.com">www.imageofself.com</a><!-- w --> for the current design.
My problem is, when I try to add content on the right side (where it says "working on it") it doesn't work. I currently have that section marked off as a P section using a custom class. The class just sets the width and *tries* to set the position. Trying to use abosolute positioning places the text block way at the bottom (it appears to be using the last element of the menu as it's container). I was under the impression that the window itself was the container for this block and therefore absolute should come from top-left. If anyone can assist with this I'd be greatly appreciated. I'm just trying to find a way to have the page like it currently is with a "content" section filling in the right side of the page. I can provide current .js and .css files if needed.
**edit** **html**
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image of Self</title>
<script src=http://www.webdeveloper.com/forum/archive/index.php/"javascripts/ios_main.js">
</script>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"css/ios.css" rel="stylesheet" type="text/css">
</head>
<body onload="WM_initialize_toolbar()">
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<p class="maincontent">Working on it. </p>
<div id="toc">
<div id="home"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.imageofself.com">Home</a></div>
<div id ="webdesign"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('webdesignMenu'); return false">Web Design</a></div>
<div id="webdesignMenu" class="menu">HTML<br>DHTML<br>CSS<br>JavaScript<br>Tutorials</div>
<div id="graphics"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('graphicsMenu'); return false">Graphics</a></div>
<div id="graphicsMenu" class="menu">Photoshop<br>Fireworks<br>Flash<br>Tutorials</div>
<div id="games"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('gamesMenu'); return false">Games</a></div>
<div id="gamesMenu" class="menu">PC<br>X-Box</div>
<div id="boxing"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('boxingMenu'); return false">Boxing</a></div>
<div id="boxingMenu" class="menu">News<br>Recent Fights<br>Schedule</div>
<div id="personal"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('personalMenu'); return false">Personal Info</a></div>
<div id="personalMenu" class="menu">What about me?<br>Resume<br>Misc. Info<br>Personal Links</div>
</div>
</div>
</body>
</html>
**Edit** **CSS**
body {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #333333;
letter-spacing: 1.5px;
background: #ADB58D;
margin-top: 2px;
margin-left: 0px;
}
#container
{
width: 700px;
height: 540px;
margin-left: 0px;
background-image: url(../images/ios_new_mod_bg.jpg);
background-repeat: repeat;
background-attachment: scroll;
border-right-color: #999966;
border-right-style: double;
border-right-width: 1px;
border-bottom-color: #999966;
border-bottom-style: double;
border-bottom-width: 1px;
padding-bottom: 50px;
}
#header
{
width: 700px;
height: 261px;
text-indent:4px;
color:#CCCC99;
padding:0;
background-image: url(../images/ios_new_mod_logo.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
}
#toc
{
width: 176px;
position:absolute;
background-color:#ADB58D;
line-height: 20px;
padding-left: 10px;
border-bottom-style: inset;
border-bottom-color: #5E6375;
border-bottom-width: 1px;
border-right-color: #999966;
border-right-style: inset;
border-right-width: 1px;
border-top-color: #5E6375;
border-left-color: #5E6375;
border-top-style: outset;
border-left-style: outset;
border-top-width: 1px;
border-left-width: 1px;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial, Helvetica, san-serif;
color: #3F446A;
letter-spacing: 2px;
}
#navigation
{
width: 186px;
height: 37px;
background-image: url(../images/navigation_ios.jpg);
background-repeat: no-repeat;
margin-left: 0px;
}
#webdesignMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#graphicsMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#gamesMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#boxingMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#personalMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#home
{
width:166px;
}
#webdesign
{
width:166px;
}
#graphics
{
width:166px;
}
#games
{
width:166px;
}
#boxing
{
width:166px;
}
#personal
{
width:166px;
}
p.maincontent
{
width:472px;
float:right;
padding-right: 20px;
padding-left: 20px;
}
a
{
color:#3F446A;
text-decoration:none;
font:bold
}
a:visited
{
color:#3F446A;
}
a:hover
{
color:#336699;
}
.menu
{
}Try placing your <p> inside a <div> and give the <div> the classname instead.Thanks for the advice but it didn't work. Had the exact same effect.Try this.
Remove the background image - it only gives a background color which you can do just as easily with CSS but also have a faster Download time.
Set the background color of a main content div to the lighter tan color and set a left margin or left padding to the <p> within that div (enough to clear the navigation). Then, place a seperate navigation div with an absolute position on the left and use the darker color as its background color. Within that div you can put your 'toc' div - complete with it's own background color.
Doing it this way will also ensure that your background color will expand down the page as content increases rather than having the content overflow the container as it might right now.
Hope this helps.
Please check <!-- w --><a class="postlink" href="http://www.imageofself.com">www.imageofself.com</a><!-- w --> for the current design.
My problem is, when I try to add content on the right side (where it says "working on it") it doesn't work. I currently have that section marked off as a P section using a custom class. The class just sets the width and *tries* to set the position. Trying to use abosolute positioning places the text block way at the bottom (it appears to be using the last element of the menu as it's container). I was under the impression that the window itself was the container for this block and therefore absolute should come from top-left. If anyone can assist with this I'd be greatly appreciated. I'm just trying to find a way to have the page like it currently is with a "content" section filling in the right side of the page. I can provide current .js and .css files if needed.
**edit** **html**
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image of Self</title>
<script src=http://www.webdeveloper.com/forum/archive/index.php/"javascripts/ios_main.js">
</script>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"css/ios.css" rel="stylesheet" type="text/css">
</head>
<body onload="WM_initialize_toolbar()">
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<p class="maincontent">Working on it. </p>
<div id="toc">
<div id="home"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.imageofself.com">Home</a></div>
<div id ="webdesign"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('webdesignMenu'); return false">Web Design</a></div>
<div id="webdesignMenu" class="menu">HTML<br>DHTML<br>CSS<br>JavaScript<br>Tutorials</div>
<div id="graphics"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('graphicsMenu'); return false">Graphics</a></div>
<div id="graphicsMenu" class="menu">Photoshop<br>Fireworks<br>Flash<br>Tutorials</div>
<div id="games"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('gamesMenu'); return false">Games</a></div>
<div id="gamesMenu" class="menu">PC<br>X-Box</div>
<div id="boxing"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('boxingMenu'); return false">Boxing</a></div>
<div id="boxingMenu" class="menu">News<br>Recent Fights<br>Schedule</div>
<div id="personal"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="WM_toggle('personalMenu'); return false">Personal Info</a></div>
<div id="personalMenu" class="menu">What about me?<br>Resume<br>Misc. Info<br>Personal Links</div>
</div>
</div>
</body>
</html>
**Edit** **CSS**
body {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #333333;
letter-spacing: 1.5px;
background: #ADB58D;
margin-top: 2px;
margin-left: 0px;
}
#container
{
width: 700px;
height: 540px;
margin-left: 0px;
background-image: url(../images/ios_new_mod_bg.jpg);
background-repeat: repeat;
background-attachment: scroll;
border-right-color: #999966;
border-right-style: double;
border-right-width: 1px;
border-bottom-color: #999966;
border-bottom-style: double;
border-bottom-width: 1px;
padding-bottom: 50px;
}
#header
{
width: 700px;
height: 261px;
text-indent:4px;
color:#CCCC99;
padding:0;
background-image: url(../images/ios_new_mod_logo.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
}
#toc
{
width: 176px;
position:absolute;
background-color:#ADB58D;
line-height: 20px;
padding-left: 10px;
border-bottom-style: inset;
border-bottom-color: #5E6375;
border-bottom-width: 1px;
border-right-color: #999966;
border-right-style: inset;
border-right-width: 1px;
border-top-color: #5E6375;
border-left-color: #5E6375;
border-top-style: outset;
border-left-style: outset;
border-top-width: 1px;
border-left-width: 1px;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial, Helvetica, san-serif;
color: #3F446A;
letter-spacing: 2px;
}
#navigation
{
width: 186px;
height: 37px;
background-image: url(../images/navigation_ios.jpg);
background-repeat: no-repeat;
margin-left: 0px;
}
#webdesignMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#graphicsMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#gamesMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#boxingMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#personalMenu
{
position:relative;
left:20px;
font-size:12px;
letter-spacing: 1px;
width:140px;
}
#home
{
width:166px;
}
#webdesign
{
width:166px;
}
#graphics
{
width:166px;
}
#games
{
width:166px;
}
#boxing
{
width:166px;
}
#personal
{
width:166px;
}
p.maincontent
{
width:472px;
float:right;
padding-right: 20px;
padding-left: 20px;
}
a
{
color:#3F446A;
text-decoration:none;
font:bold
}
a:visited
{
color:#3F446A;
}
a:hover
{
color:#336699;
}
.menu
{
}Try placing your <p> inside a <div> and give the <div> the classname instead.Thanks for the advice but it didn't work. Had the exact same effect.Try this.
Remove the background image - it only gives a background color which you can do just as easily with CSS but also have a faster Download time.
Set the background color of a main content div to the lighter tan color and set a left margin or left padding to the <p> within that div (enough to clear the navigation). Then, place a seperate navigation div with an absolute position on the left and use the darker color as its background color. Within that div you can put your 'toc' div - complete with it's own background color.
Doing it this way will also ensure that your background color will expand down the page as content increases rather than having the content overflow the container as it might right now.
Hope this helps.