Log In · Register

 
Alright, CB, I need some help, CSS question
mipadi
post Sep 15 2009, 10:12 AM
Post #1


Senior Member
******

Group: Administrator
Posts: 2,648
Joined: Apr 2008
Member No: 639,265
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:



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!
Reason for edit: Thumbed and codeboxed. - Mike
 
 
 Start new topic
Replies
Maccabee
post Sep 15 2009, 06:54 PM
Post #2


Senior Member
*******

Group: Official Designer
Posts: 5,880
Joined: Nov 2007
Member No: 593,382
I know what localhost is. But what does 8000 point to? Or can you define it a folder.
 
mipadi
post Sep 15 2009, 07:50 PM
Post #3


Senior Member
******

Group: Administrator
Posts: 2,648
Joined: Apr 2008
Member No: 639,265
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.)
 

Posts in this topic
mipadi   Alright, CB, I need some help   Sep 15 2009, 10:12 AM
jcp   Remove the padding. and if that isnt it, then add ...   Sep 15 2009, 11:45 AM
Mike   For the links, remove the line breaks between them...   Sep 15 2009, 03:17 PM
mipadi   I'd like to avoid using tables for layout for ...   Sep 15 2009, 04:32 PM
Mike   This thread explains things better than I can.   Sep 15 2009, 04:46 PM
mipadi   Thanks, that thread was pretty interesting, but un...   Sep 15 2009, 04:53 PM
Buttsex   Just one comment, that's not going to look pre...   Sep 15 2009, 05:05 PM
mipadi   This is a bit of a hack, but I made the background...   Sep 15 2009, 05:41 PM
Buttsex   It's vertically very tiny. While it looks pre...   Sep 15 2009, 05:49 PM
mipadi   QUOTE(Buttsex @ Sep 15 2009, 06:49 PM) It...   Sep 15 2009, 05:55 PM
jcp   http://localhost:8000/? is that mamp or something?...   Sep 15 2009, 06:43 PM
Buttsex   QUOTE(jcp @ Sep 15 2009, 06:43 PM) http:/...   Sep 15 2009, 06:52 PM
jcp   I know what localhost is. But what does 8000 point...   Sep 15 2009, 06:54 PM
mipadi   QUOTE(jcp @ Sep 15 2009, 07:54 PM) I know...   Sep 15 2009, 07:50 PM
Buttsex   8000 used to be my server console, but I've ch...   Sep 15 2009, 07:51 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic