Welcome to WebmasterWorld Guest from 54.211.5.239

Forum Moderators: not2easy

Message Too Old, No Replies

sidebars problems in css

     
12:26 pm on Nov 8, 2006 (gmt 0)

New User

10+ Year Member

joined:Nov 8, 2006
posts:1
votes: 0


hi...i'm a beginner in css and i try to do a little website with css. but i have some issues with that...the first is that my sidebars-divs are not extending the height, when the content it does...it comes a brek between the sidebars and the footer...i avoid this problem with setting the height for every div in every page...but i still now that's not a nice solution...please can somebody give me a idea to fix this...?

the other thing is...that mine javascript on the navigation menu is not working...it's works well locally, but not on the server...what i done wrong?

the website is

www.weltspaziergang.de

many thanks for your time and help!

cheers pfrauholle

The code for the stylesheet is like following

[
html, body{
margin:0;
padding:0;
background-color:#FDF8FF;
color:#344152;
font: Georgia, Arial, Verdana, sans-serif
}

#container {
width: 800px;
\width: 820px;
w\idth: 800px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 0;
margin-bottom: 0px;
height:150px;
background-color:#9BC4E2;
background-image:url(images/banner.gif);
background-repeat:no-repeat;
}

#content {
float:left;
width: 616px;
padding: 0;
margin: 0;
height:500px;
background-color: #F8F8FF;
background-image:url(images/banner2.gif);
background-position: top right;
background-repeat:no-repeat;
}

#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}

#sidebar-a {
float: left;
width: 150px;
margin: 0;
padding: 0;
height:500px;
background-image:url(images/left.gif);
background-position: bottom left;
background-repeat:no-repeat;
background-color:#FFF68F;
}

#sidebar-a p {
margin-left: 20px;
}

#sidebar-b {
float:left;
width: 34px;
margin: 0;
]

the html code is:

[
<SCRIPT LANGUAGE="JavaScript">
<!--

//pre-cache the off images from the menubar
var offImage = new Array()
offImage[0] = new Image(114,40)
offImage[1] = new Image(114,40)
offImage[2] = new Image(114,40)
offImage[3] = new Image(114,40)
offImage[4] = new Image(114,40)

//attch the source file to the off images
offImage[0].src = "homeButton.gif"
offImage[1].src = "usButton.gif"
offImage[2].src = "mapButton.gif"
offImage[3].src = "toysButton.gif"
offImage[4].src = "booksButton.gif"

//pre-cache the on images from the menubar
var onImage = new Array()
onImage[0] = new Image(114,40)
onImage[1] = new Image(114,40)
onImage[2] = new Image(114,40)
onImage[3] = new Image(114,40)
onImage[4] = new Image(114,40)

//attach the source file to the on image
onImage[0].src = "homeButton1.gif"
onImage[1].src = "usButton1.gif"
onImage[2].src = "mapButton1.gif"
onImage[3].src = "toysButton1.gif"
onImage[4].src = "booksButton1.gif"

//function that swaps the images
function fnOn(i,x) {
document.getElementById(x).src = i
}

function fnOff(i,x) {
document.getElementById(x).src = i
}

// -->
</SCRIPT>

</head>
<body>

<div id="container">
<div id="banner">&nbsp;</div>

<div id="sidebar-a"><p>&nbsp;</p>
<p><a href="index.html" onMouseOver="fnOn('images/menu/homeButton1.gif','home')"
onMouseOut="fnOff('images/menu/homeButton.gif','home')">
<img src="images/menu/homeButton.gif" alt="home" id="home" style="width:114; height:40; border:0"/></a>
<a href="aboutus.html" onMouseOver="fnOn('images/menu/usButton1.gif','us')"
onMouseOut="fnOff('images/menu/usButton.gif','us')">
<img src="images/menu/usButton.gif" alt="about us" id="us" style="width:114; height:40; border:0" /></a>
<a href="storemap.html" onMouseOver="fnOn('images/menu/mapButton1.gif','map')"
onMouseOut="fnOff('images/menu/mapButton.gif','map')">
<img src="images/menu/mapButton.gif" alt="store map" id="map" style="width:114; height:40; border:0" /></a>
<a href="toys.html" onMouseOver="fnOn('images/menu/toysButton1.gif','toys')"
onMouseOut="fnOff('images/menu/toysButton.gif','toys')">
<img src="images/menu/toysButton.gif" alt="toys" id="toys" style="width:114; height:40; border:0" /></a>
<a href="books.html" onMouseOver="fnOn('images/menu/booksButton1.gif','books')"
onMouseOut="fnOff('images/menu/booksButton.gif','books')">
<img src="images/menu/booksButton.gif" alt="books" id="books" style="width:114; height:40; border:0" /></a></p></div>

<div id="content"><p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p>
<p>sdgsdfhdfh</p><p>sdgsdfhdfh</p>

</div>

<div id="sidebar-b">&nbsp;</div>

<div id="footer">&nbsp;</div>
</div>
</body>
</html>
]

4:16 pm on Nov 8, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 18, 2005
posts:262
votes: 0


Not got time to run through CSS but check your server has Javascript enabled in browser settings.

Or publish the site and check from your pc not the servers browser.