homepage Welcome to WebmasterWorld Guest from 54.166.255.168
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
sidebars problems in css
pfrauholle

5+ Year Member



 
Msg#: 3150007 posted 12:26 pm on Nov 8, 2006 (gmt 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>
]

 

collymellon

5+ Year Member



 
Msg#: 3150007 posted 4:16 pm on Nov 8, 2006 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved