Forums > Alright, CB, I need some help

Full Version: Alright, CB, I need some help

Forums > Resource Center > Webmasters' Corner

mipadi

Sep 15 2009, 10:12 AM

Although I'm technically a systems programmer, I've been tasked with redesigning my lab's website. I've cooked up a basic design (not done yet, so don't leave comments like "you need a graphic for the header", etc., please), but there are a few elements that are "off". Here's what the overall design looks like so far:

click to enlarge

There are two problems I am having with which I need help:

One, the links in the main nav bar aren't collapsed together; note that there's a tiny space of a few pixels between the borders that I can't seem to get rid of. I'd like the link boxes to be "smashed together", not separated by a few pixels.

Secondly, the left-hand sidebar: it's a floating element, but note that it doesn't take up the entire height of the content area. I've tried adding height: 100%; to both the sidebar and the list inside the sidebar that draws the links, but it still won't take up the entire height of the content area.

I can't link you to the page since it's not live yet, so here's the HTML code:

CODE

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>NEES@Rensselaer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="/media/static/style/darktheme.css"/>
</head>

<body>
	<div id="header">
		<div id="banner">
			<div id="logo"><a href="/" title="NEES@Rensselaer">NEES@RPI</a></div>
			<div id="textlogo"><a href="/" title="NEES@Rensselaer">Center for Earthquake Engineering Simulation</a></div>
		</div>
		<div id="nav">
			<ol>
				<li><a href="/">NEES</a></li>
				<li><a href="/">Research</a></li>
				<li><a href="/">Equipment</a></li>
				<li><a href="/">Outreach</a></li>
				<li><a href="/">Personnel</a></li>
			</ol>
		</div>
	</div>
	
	<div id="main">
		<div id="sidebar">
			
	<ol>
		<li><a href="/">Link #1</a></li>
		<li><a href="/">Link #2</a></li>
		<li><a href="/">Link #3</a></li>
	</ol>

		</div>
		<div id="content">
			
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

		</div>
	</div>
	
	<div id="footer">
		<div id="credit">
			<p>This work was supported by the George E. Brown, Jr. Network for Earthquake Engineering Simulation (NEES) Program of the National Science Foundation under <span class="nobr">Award Number CMS-0086555</span>.</p>
		</div>
		<div id="links">
			<ol>
				<li><a href="http://cee.rpi.edu/" title="Department of Civil and Environmental Engineering in the School of Engineering at RPI">Civil & Environmental Engineering Department</a></li>
				<li><a href="http://www.rpi.edu/" title="Rensselaer Polytechnic Institute (RPI) :: Architecture, Business, Engineering, IT, Humanities, Science">Rensselaer Polytechnic Institute</a></li>
			</ol>
		</div>
	</div>
</body>

</html>

And here's the style sheet:

CODE

body {
	background-color: rgb(54,54,54);
	margin-left: auto;
	margin-right: auto;
	width: 65em;
}

div#header, div#main { border: 2px solid rgb(240,238,229); }

div#header {
	border-bottom: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-top: 2em;
	padding: 0;
	padding-bottom: 0.5em;
}

div#header div#banner { padding: 1em 0 0.5em 1em; }

div#header div#banner div#logo, div#header div#banner div#logo a { color: rgb(223,223,223); }

div#header div#banner div#logo {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 250%;
	font-weight: bold;
}

div#header div#banner div#logo a { text-decoration: none; }

div#header div#banner div#textlogo, div#header div#banner div#textlogo a { color: rgb(170,170,170); }

div#header div#banner div#textlogo {
	left: 4.5em;
	position: relative;
	top: -0.5em;
}

div#header div#banner div#textlogo a { text-decoration: none; }

div#header div#nav {
	padding-top: 0.5em;
	width: 100%;
}

div#header div#nav ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

div#header div#nav ol li {
	border-left: 2px solid rgb(240,238,229);
	border-right: 2px solid rgb(240,238,229);
	border-top: 2px solid rgb(240,238,229);
	display: inline;
	padding: 0.5em 1em;
}

div#header div#nav ol li:first-child { border-left: 2px solid rgb(240,238,229); }
div#header div#nav ol li:hover { background-color: rgb(156,65,7); }

div#header div#nav ol li a {
	color: rgb(240,238,229);
	text-decoration:none;
}

div#main {
	background-color: rgb(240,238,229);
	border-top: 0;
	color: rgb(40,40,40);
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

div#main div#content {
	padding: 1em 1.5em;
}

div#main div#sidebar {
	background-color: rgb(70,37,9);
	border-top: 2px solid rgb(240,238,229);
	color: rgb(200,200,200);
	float: left;
	padding: 1em 1.5em;
	width: 8em;
}

div#main div#sidebar a:link, div#main div#sidebar a:visited { color: rgb(215,215,215); }
div#main div#sidebar a:hover, div#main div#sidebar a:active { color: rgb(156,65,7); }

div#main div#sidebar ol {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

div#main div#content {
	margin-left: 11em;
}

div#footer {
	color: rgb(223,223,223);
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 75%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3em;
	text-align: center;
	width: 55%;
}

div#footer a { color: rgb(160,160,160); }

div#footer div#links ol {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.nobr { white-space: nowrap; }

Help is much appreciated!

Maccabee

Sep 15 2009, 11:45 AM

Remove the padding. and if that isnt it, then add a negative margin right.
CODE
div#header div#nav ol {
    list-style-type: none;
    margin-right: -5;
    padding: 0;
    text-align: center;

}

div#header div#nav ol li {
    border-left: 2px solid rgb(240,238,229);
    border-right: 2px solid rgb(240,238,229);
    border-top: 2px solid rgb(240,238,229);
    display: inline;
}

edit: tested it. my idea doesnt work. troubleshooting normally solves it.

And i wont comment on the design, because Im sure you can see for yourself that it is very simple.

Couldnt figure out the sidebar. Normally my problem is opposite, where a floated object will not stay contained in the content area, which can usually be solved by using clear: all; or clear: left;

on a side note. your code is friggin organized. I never say div#content div#bottom like you, i just say #bottom

Mike

Sep 15 2009, 03:17 PM

For the links, remove the line breaks between them so they are all in one line and they should go side by side. For the content, I did this:

CODE

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>NEES@Rensselaer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="/media/static/style/darktheme.css"/>
</head>

<body>
    <div id="header">
        <div id="banner">
            <div id="logo"><a href="/" title="NEES@Rensselaer">NEES@RPI</a></div>
            <div id="textlogo"><a href="/" title="NEES@Rensselaer">Center for Earthquake Engineering Simulation</a></div>
        </div>
        <div id="nav">
            <ol>
                <li><a href="/">NEES</a></li><li><a href="/">Research</a></li><li><a href="/">Equipment</a></li><li><a href="/">Outreach</a></li><li><a href="/">Personnel</a></li>
            </ol>
        </div>
    </div>
    
    <div id="main">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td id="sidebar" valign="top">
    <ol>
        <li><a href="/">Link #1</a></li>
        <li><a href="/">Link #2</a></li>
        <li><a href="/">Link #3</a></li>
    </ol>
                </td>

                <td id="content" valign="top">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </td>
            </tr>
        </table>
    </div>
    
    <div id="footer">
        <div id="credit">
            <p>This work was supported by the George E. Brown, Jr. Network for Earthquake Engineering Simulation (NEES) Program of the National Science Foundation under <span class="nobr">Award Number CMS-0086555</span>.</p>
        </div>
        <div id="links">
            <ol>
                <li><a href="http://cee.rpi.edu/" title="Department of Civil and Environmental Engineering in the School of Engineering at RPI">Civil & Environmental Engineering Department</a></li>
                <li><a href="http://www.rpi.edu/" title="Rensselaer Polytechnic Institute (RPI) :: Architecture, Business, Engineering, IT, Humanities, Science">Rensselaer Polytechnic Institute</a></li>
            </ol>
        </div>
    </div>
</body>

</html>

Then I updated the stylesheet to coincide with the above codes:

CODE

body {
    background-color: rgb(54,54,54);
    margin-left: auto;
    margin-right: auto;
    width: 65em;
}

div#header, div#main { border: 2px solid rgb(240,238,229); }

div#header {
    border-bottom: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 2em;
    padding: 0;
    padding-bottom: 0.5em;
}

div#header div#banner { padding: 1em 0 0.5em 1em; }

div#header div#banner div#logo, div#header div#banner div#logo a { color: rgb(223,223,223); }

div#header div#banner div#logo {
    font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 250%;
    font-weight: bold;
}

div#header div#banner div#logo a { text-decoration: none; }

div#header div#banner div#textlogo, div#header div#banner div#textlogo a { color: rgb(170,170,170); }

div#header div#banner div#textlogo {
    left: 4.5em;
    position: relative;
    top: -0.5em;
}

div#header div#banner div#textlogo a { text-decoration: none; }

div#header div#nav {
    padding-top: 0.5em;
    width: 100%;
}

div#header div#nav ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

div#header div#nav ol li {
    border-left: 2px solid rgb(240,238,229);
    border-right: 2px solid rgb(240,238,229);
    border-top: 2px solid rgb(240,238,229);
    display: inline;
    padding: 0.5em 1em;
}

div#header div#nav ol li:first-child { border-left: 2px solid rgb(240,238,229); }
div#header div#nav ol li:hover { background-color: rgb(156,65,7); }

div#header div#nav ol li a {
    color: rgb(240,238,229);
    text-decoration:none;
}

div#main {
    background-color: rgb(240,238,229);
    border-top: 0;
    color: rgb(40,40,40);
    font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

div#main td#content {
    padding: 1em 1.5em;
}

div#main td#sidebar {
    background-color: rgb(70,37,9);
    border-top: 2px solid rgb(240,238,229);
    color: rgb(200,200,200);
    padding: 1em 1.5em;
    width: 8em;
}

div#main td#sidebar a:link, div#main div#sidebar a:visited { color: rgb(215,215,215); }
div#main td#sidebar a:hover, div#main div#sidebar a:active { color: rgb(156,65,7); }

div#main td#sidebar ol {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

div#main td#content {
    margin-left: 11em;
}

div#footer {
    color: rgb(223,223,223);
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    text-align: center;
    width: 55%;
}

div#footer a { color: rgb(160,160,160); }

div#footer div#links ol {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.nobr { white-space: nowrap; }

Looked just like how you wanted it to.

mipadi

Sep 15 2009, 04:32 PM

I'd like to avoid using tables for layout for two reasons:

I actually have to produce 3-4 "different" designs, and I want to be able to flip between themes without touching the HTML.
In the future when we inevitably alter the layout, I'd prefer to just upload a new style sheet, rather than re-code everything.

Mike

Sep 15 2009, 04:46 PM

This thread explains things better than I can.

mipadi

Sep 15 2009, 04:53 PM

Thanks, that thread was pretty interesting, but unfortunately it didn't solve the problem.

itanium

Sep 15 2009, 05:05 PM

Just one comment, that's not going to look pretty in higher resolutions.

Mike

Sep 15 2009, 05:13 PM

No, it wasn't supposed to solve the problem. It just explains why you can't get the look you were going for. The container (#main) doesn't have a defined height, so the DIVs inside it will have "nothing to factor 100 percent of". Someone posted a way to do it with a header and a footer but since you didn't define heights for both, it won't work either.

mipadi

Sep 15 2009, 05:41 PM

This is a bit of a hack, but I made the background color of div#main the brownish color, and I made the background color of div#content the light beige color. Oh, and Mike, thanks for the reminder about the spaces between the <li> tags -- sometimes I forget that whitespace does matter in HTML, to an extent. So now it looks as it should:

click to enlarge

QUOTE(Buttsex @ Sep 15 2009, 06:05 PM)

Just one comment, that's not going to look pretty in higher resolutions.

Insofar as it doesn't scale horizontally, or is there some deeper issue of which I'm not aware? To be honest, I can't easily make the site scale horizontally, since the header background color is going to be replaced by a statically-sized logo anyway. I don't have a choice about this, this is the supervisor's call.

itanium

Sep 15 2009, 05:49 PM

It's vertically very tiny. While it looks pretty good at your resolution, someone with a higher resolution (say 1600x1200, a fairly common resolution), it will barely take up half the screen, and you're left with a massive blank area under the body. To be honest, I only looked at the design itself. I didn't look through your code at all, so you may have some fancy shit done to prevent it from doing that, I don't know.

mipadi

Sep 15 2009, 05:55 PM

QUOTE(Buttsex @ Sep 15 2009, 06:49 PM)

Believe it or not, three paragraphs of gibberish Latin isn't the actual content of the web site, so a typical page will have much more content. At any rate, aside from (a) enlarging the font size or (b) narrowing the width of the content area, there isn't a lot to be done wrt. pages with only a couple paragraphs of content (which are practically non-existent on the "real" site). And I'm wont to reduce the width of the content area, since really narrow web pages don't look that great. But constructive suggestions for avoiding this (rare) problem are appreciated.

Maccabee

Sep 15 2009, 06:43 PM

http://localhost:8000/? is that mamp or something? o, and why do your fonts look so good? Does it have something to do with em? Im going to learn the different sizing methods.

itanium

Sep 15 2009, 06:52 PM

QUOTE(jcp @ Sep 15 2009, 06:43 PM)

http://localhost:8000/? is that mamp or something? o, and why do your fonts look so good? Does it have something to do with em? Im going to learn the different sizing methods.

No, that's standard shit. Localhost is your computer, :8000 is the port. Like say someone's domain is penis.co.uk. He/she can specify penis.co.uk:8000 or any other port he/she wishes.

Same shit with IP addresses. Lets just say it's 96.19.0.209. We can host a standard HTTP port at 96.19.0.209 or 96.19.0.209:80. We can host a nonstandard http port at 96.19.0.209:8080 or 96.19.0.209:25, etc.

Maccabee

Sep 15 2009, 06:54 PM

I know what localhost is. But what does 8000 point to? Or can you define it a folder.

mipadi

Sep 15 2009, 07:50 PM

QUOTE(jcp @ Sep 15 2009, 07:54 PM)

I know what localhost is. But what does 8000 point to? Or can you define it a folder.

8000 refers to the port. In networking, a server responds to messages on a certain port. That way, a single server machine can run multiple services -- web, FTP, SSH, etc.

In this case, I'm running the web server on port 8000 because I'm developing the site using Django, and Django's internal testing server binds to port 8000. When the site goes live, it'll run on the standard WWW port (port 80).

The reason Django's testing server uses port 8000 is because you have to be root (the "supreme" administrator) on a machine to bind to ports lower than 1024, and 8000 is most likely an unused port so it won't interfere with other services.

QUOTE(jcp @ Sep 15 2009, 07:43 PM)

and why do your fonts look so good? Does it have something to do with em? Im going to learn the different sizing methods.

It's not because of em's (although using em's is a good idea), since em's get translated by the web browser into points anyway. It's probably because OS X has really good (probably the best) font anti-aliasing techniques. (Since Macs are often used in design, OS X has extremely good font rendering software.)

itanium

Sep 15 2009, 07:51 PM

8000 used to be my server console, but I've changed it since then.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.