probably simple CSS help

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:

HTML Code:

<!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:

Code:

@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!

~~blinga~~ · 05-08-2010, 05:38 AM

shouldn't the margin: 20px auto; be margin-left: 20px auto; ?

wsg14 · 05-08-2010, 05:44 AM

i don't want there to be a margin on the left, as i want it to be centered. but that's my problem, it's centered in the middle of the whole page, i don't want that.

Irrorate · 05-08-2010, 09:56 AM

The attribute margin: 20px is applying a 20 pixel margin all the way around the image. It's the equivalent of:

Code:

margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

I would strongly recommend that you use a Reset CSS file which removes browser-specific styling of elements and you will find your CSS easier to code.

P.S: I hope that:

HTML Code:

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

Is a bunch of separate navigation menus...

Navigations should be done using unordered lists.

wsg14 · 05-08-2010, 02:41 PM

yes i know what the margin attribute does.
but what you have posted still has nothing to do with what i posted.

Irrorate · 05-08-2010, 02:47 PM

As I said, use a CSS reset file and you will be able to style your elements better.

wsg14 · 05-08-2010, 03:19 PM

i am, but i still don't know how i would remove the margin from the sidebar and center the blue box with what's left of the white area.

Thread: probably simple CSS help

Thread Tools

probably simple CSS help

Posting Permissions