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
mipadi
post Sep 15 2009, 04:53 PM
Post #2


Senior Member
******

Group: Administrator
Posts: 2,648
Joined: Apr 2008
Member No: 639,265
Thanks, that thread was pretty interesting, but unfortunately it didn't solve the problem.
 

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