 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
crashman
Joined: 28 Sep 2009
Posts: 3
|
 Posted: Tue Sep 29, 2009 3:07 am Sidebar menu overlaps main content when shrinking page |
 |
|
|
I have got an issue where the sidebar of my webpage overlaps the main content when I change the size of the Web browser and also depending on what resolution (it looks fine in 1024 x 768 in full screen). I have tried for the life of me to find out where the issue lies but have no idea.
I haven't yet got the page hosted but I can email the HTML file or put the code on here but didn't want to initially as it is a little bit long.
If it is ok to put the entire code on here let me know. |
|
sticks464
Joined: 31 Dec 2006
Posts: 2629
|
| Posted: Tue Sep 29, 2009 3:55 am |
|
|
|
| Sounds like you are using a fixed width layout that is set for 1024x768 resolution. You should use a fluid layout that works in all resolutions. Yes you can post your code but would recommend deleting most of the content that is unnecessary for the layout to be seen. Make sure you post the css stylesheet if there is one. |
|
crashman
Joined: 28 Sep 2009
Posts: 3
|
| Posted: Tue Sep 29, 2009 4:20 am |
|
|
|
Thanks for the reply. The code is below I have put the CSS and Javascript into the HTML for this as I thought it would probably be easier than doing it separately.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<STYLE TYPE="text/css" MEDIA="screen">
* {
margin: 0;
padding: 0;
}
body {
margin: 0px;
background: white url(fade.jpg) repeat-x;
font-family: "Garamond", Cambria, Palatino Linotype, Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #B9B9B9;
}
h1, h2, h3 {
margin-bottom: 1.5em;
}
h1 {
font-size: 2em;
color:black
}
h2 {
font-size: 1.4em;
color: white;
}
img.left {
float: left;
margin: 5px 25px 0px 0px;
}
img.right {
float: right;
margin: 5px 0px 0px 25px;
}
/* Background */
#bg1 {
background: url(fade.jpg) no-repeat center top;
}
#bg2 {
background: url(bg03.png) no-repeat center top;
}
#bg3 {
background: url(bg04.png) repeat-y center top;
}
#bg4 {
background: url(bg05.png) no-repeat center top;
}
#bg5 {
background: url(bg06.png) no-repeat center bottom;
}
#bg6 {
background: url(bg07.gif) no-repeat left;
}
/* Header */
#headerlogo {
width: 1200px;
height: 180px;
margin: 0px auto;
padding: 20px 0px 0px 0px;
text-align: center;
}
/* Header2 */
#header2 {
width: 900px;
height: 40px;
margin: 0px auto;
}
/* Menu */
#menu {
float: left;
padding: 250px 0px 0px 0px;
}
#Buttons {
position:absolute;
top:0px;
left:20px;
height:650px;
width:150px;
padding: 0mm 0mm 0mm 0mm;
}
/* Page */
#page {
width: 846px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}
/* Content */
.post {
}
.post .title {
height: 49px;
width: 846px;
background: url(img02.gif) no-repeat;
color: white;
}
.post .entry {
padding: 40px 23px 0px 23px;
}
</STYLE>
<script type="text/javascript">
// Mouseover/Mouseout Scripting for Button/Image
function mouseOver1()
{
document.b1.src ="Homei.png";
}
function mouseOut1()
{
document.b1.src ="Home.png";
}
function mouseOver2()
{
document.b2.src ="Servicesi.png";
}
function mouseOut2()
{
document.b2.src ="Services.png";
}
function mouseOver3()
{
document.b3.src ="Pricei.png";
}
function mouseOut3()
{
document.b3.src ="Price.png";
}
function mouseOver4()
{
document.b4.src ="Abouti.png";
}
function mouseOut4()
{
document.b4.src ="About.png";
}
function mouseOver5()
{
document.b5.src ="Contacti.png";
}
function mouseOut5()
{
document.b5.src ="Contact.png";
}
//function mouseOver(d) {
// if(d.length < 1) { return; }
// document.getElementById(d).style.display = "none";
//}
//function mouseOut(d) {
// if(d.length < 1) { return; }
// document.getElementById(d).style.display = "block";
//}
//function ReverseContentDisplay(d) {
// if(d.length < 1) { return; }
// if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
// else { document.getElementById(d).style.display = "none"; }
//}
</script>
</head>
<body>
<div id="menu">
<!-- ** Static Left Hand Button Panel** --><!-- Buttons are spaced at 70px --><!-- (buttons.js) -->
<div id="Buttons">
<div id="Button1" style="position:absolute; top:240px;">
<a href="Index">
<img alt="Home" name="b1" src="Home.png" onmouseOver="mouseOver1()" onmouseOut="mouseOut1()">
</a>
</div>
<div id="Button2" style="position:absolute; top:310px;">
<a href="Services.htm">
<img alt="Services" name="b2" src="Services.png" onmouseOver="mouseOver2()" onmouseOut="mouseOut2()">
</a>
</div>
<div id="Button3" style="position:absolute; top:380px;">
<a href="Price List.htm">
<img alt="Price List" name="b3" src="Price.png" onmouseOver="mouseOver3()" onmouseOut="mouseOut3()">
</a>
</div>
<div id="Button4" style="position:absolute; top:450px;">
<a href="About Us.htm">
<img alt="About" name="b4" src="About.png" onmouseOver="mouseOver4()" onmouseOut="mouseOut4()">
</a>
</div>
<div id="Button5" style="position:absolute; top:520px;">
<a href="Contact Us.htm">
<img alt="Contact" name="b5" src="Contact.png" onmouseOver="mouseOver5()" onmouseOut="mouseOut5()">
</a>
</div>
</div>
<!-- End of Static Buttons Div -->
</div>
<!-- end #menu -->
<div id="bg1">
<div id="headerlogo">
<h1>Test Page</h1>
</div>
<!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
<div id="header2">
</div>
</div>
<!-- end #bg2 -->
<div id="bg3">
<div id="bg4">
<div id="bg5">
<div id="page">
<div id="content">
<div class="post">
<div class="title">
<h1>Test</h1>
</div>
</div>
</div>
<!-- end #content -->
<div style="clear: both; height: 40px;">
</div>
</div>
<!-- end #page -->
</div>
</div>
</div>
<!-- end #bg3 -->
</body>
</html> |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2629
|
| Posted: Tue Sep 29, 2009 4:26 am |
|
|
|
| Is this a wordpress or joomla layout? |
|
crashman
Joined: 28 Sep 2009
Posts: 3
|
| Posted: Tue Sep 29, 2009 4:30 am |
|
|
|
It was a template website but I have modified\buggered it so that the menu is on the left rather than above the main content and put in my own JavaScript. 
I have no idea what was used to create it originally. |
|
sticks464
Joined: 31 Dec 2006
Posts: 2629
|
| Posted: Tue Sep 29, 2009 1:06 pm |
|
|
|
| Check your pm's. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
