Welcome to WebmasterWorld Guest from 107.20.5.156

Forum Moderators: not2easy

Message Too Old, No Replies

sidebars problems in css

     

pfrauholle

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

5+ Year Member



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>
]

collymellon

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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month