wsg14
05-08-2010, 05:37 AM
hey all, i have two questions about css for you
before i explain my first problem please take a look at this image:
http://imgur.com/wk7l5.png (open it in a new window, it's a big image)
as you can see, i have a left side bar and a blue box in the middle. the blue box is centered for the whole width of the page, but i want it from the right side of the side bar to the far right side of the page.
my second question (refer to the link i posted above) is that i have a margin 20px on the blue box, but it also adds a margin to the sidebar, why is that?
here is my code:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>easyPanel - the most simplistic ******* dj panel you will ever know.</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="sidebar">
<div id="logo"></div>
<div class="navSelections">dashboard</div>
<div class="navSelections">timetable</div>
<div class="navSelections">requests/shoutouts</div>
<div class="navSelections">dj communicator</div>
<div class="navSelections">dj options</div>
<div class="navSelections">account optins</div>
<div id="djStats">
here are some quick stats!<br />
5 listeners<br />
7 unread shoutouts/requests<br />
current song: wonderwall / welcome to the club<br />
this is how the dj says box appears on sitename:<br />
<img src="images/djSaysBox.png" />
</div>
</div>
<div id="welcomeBox">Welcome to easy panel, DJ Will. You last logged in on: Friday, July 20th 2010.<br />
According to the timetable, your next show is in 37 minutes, after DJ Powers.</div>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}
body {
background-color: #f7f7f7;
margin: 0;
font-family: Verdana, Geneva, sans-serif;
height: 100%;
font-size: 12px;
}
#sidebar {
float: left;
background-image: url(images/sidebar.png);
width: 307px;
height: 100%;
position: fixed;
}
#logo {
background-image: url(images/logo.png);
width: 305px;
height: 174px;
}
.navSelections {
background-color: #808080;
width: 285px;;
height: 15px;
color: #FFF;
text-align: right;
padding-right: 20px;
margin-bottom: 20px;
}
.navSelections:hover {
background-image: url(images/navHover.png);
background-position: right;
background-repeat: no-repeat;
padding-left: 2px;
}
#djStats {
width: 285px;
padding: 10px;
color: #FFF;
bottom: 0;
position: absolute;
}
#welcomeBox {
width: 800px;
background-color: #61caf5;
border: 1px solid #2486af;
margin: 20px auto;
color: #FFF;
padding: 10px;
}
thanks!
before i explain my first problem please take a look at this image:
http://imgur.com/wk7l5.png (open it in a new window, it's a big image)
as you can see, i have a left side bar and a blue box in the middle. the blue box is centered for the whole width of the page, but i want it from the right side of the side bar to the far right side of the page.
my second question (refer to the link i posted above) is that i have a margin 20px on the blue box, but it also adds a margin to the sidebar, why is that?
here is my code:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>easyPanel - the most simplistic ******* dj panel you will ever know.</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="sidebar">
<div id="logo"></div>
<div class="navSelections">dashboard</div>
<div class="navSelections">timetable</div>
<div class="navSelections">requests/shoutouts</div>
<div class="navSelections">dj communicator</div>
<div class="navSelections">dj options</div>
<div class="navSelections">account optins</div>
<div id="djStats">
here are some quick stats!<br />
5 listeners<br />
7 unread shoutouts/requests<br />
current song: wonderwall / welcome to the club<br />
this is how the dj says box appears on sitename:<br />
<img src="images/djSaysBox.png" />
</div>
</div>
<div id="welcomeBox">Welcome to easy panel, DJ Will. You last logged in on: Friday, July 20th 2010.<br />
According to the timetable, your next show is in 37 minutes, after DJ Powers.</div>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}
body {
background-color: #f7f7f7;
margin: 0;
font-family: Verdana, Geneva, sans-serif;
height: 100%;
font-size: 12px;
}
#sidebar {
float: left;
background-image: url(images/sidebar.png);
width: 307px;
height: 100%;
position: fixed;
}
#logo {
background-image: url(images/logo.png);
width: 305px;
height: 174px;
}
.navSelections {
background-color: #808080;
width: 285px;;
height: 15px;
color: #FFF;
text-align: right;
padding-right: 20px;
margin-bottom: 20px;
}
.navSelections:hover {
background-image: url(images/navHover.png);
background-position: right;
background-repeat: no-repeat;
padding-left: 2px;
}
#djStats {
width: 285px;
padding: 10px;
color: #FFF;
bottom: 0;
position: absolute;
}
#welcomeBox {
width: 800px;
background-color: #61caf5;
border: 1px solid #2486af;
margin: 20px auto;
color: #FFF;
padding: 10px;
}
thanks!