Webpage Layout Question

Sir Carcass

Edit: New question in post 7

So I've been delving into webdesign for a (non-internet) project at work. I'm having some difficulty with layouts. I have a basic understanding of CSS, but this one thing is eluding me.

I'm using Bootstrap, if that matters, but writing my own CSS stuff for certain things.

Basically, I'm trying to arrange some text. I have a row with 2 spans (2 and 10). The span2 is a nav list and converts to a scrollbar after 766px. span2 has a height set at 800px. I use items from the nav list to load pdfs in the span2. Inside the span10 is a div with class well. Inside that is a div with an id of pdfbox, which is what the pdf js targets.

I have some elements that load in that pdfbox div as a default. There's an img and 2 text blocks, <p id="pdfboxtext"> and <p id="revisiondate">. I'm using CSS and margins to position those three things in that div. I have the image horizontally centered in the box and towards the top, the pdfboxtext centered underneath that, and then revisiondate is down at the bottome of the box to the right. The problem I'm having is I'm using pixels to define the margin under the first text block, so if the window is shrunk and the well gets narrow, or the page is zoomed, the margins change and the revision date jumps up. Basically I need a way to make the revision date always be at the bottom of that box, regardless of what's going on with the box.

Here is the relevant code:

<div class="span10">
   <div class="well">
      <div id="pdfbox"><img src="assets/img/Logo.png"><p id="pdfboxtext">Project Control Binders</p><p id="revisiondate">March 2012</p></div>
   </div>
</div>

and

.nav-list {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
  max-height: 766px;
  overflow-y: scroll;
}

#pdfbox {
	width: 100%;
	height: 800px;
}

#pdfbox img {  
  width: 50%;  
  margin-top: 10%;
  margin-bottom: 6%;
  margin-left: 25%;
  margin-right: 25%;
  opacity:0.5;  
}

#pdfboxtext {
  text-transform: uppercase;
  text-align: center;
  font-family: "Arial", Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-style: bold;
  margin-bottom: 350px;
}

#revisiondate {
  text-transform: uppercase;
  float: right;
  font-family: "Arial", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-style: bold;
}

Is there a way to do what I want? What am I missing?

CptHamilton

Make the revisiondate div position: absolute and give it bottom: Xpx and right: Ypx attributes instead of float: right and some kind of marginy thing?

Sir Carcass

That doesn't work. The revision date's position in the well is still relative to the margin on the text block above it. Do I need to do something to the well or span? I basically want revision date's position relative to the box it's in, not what's above it.

CptHamilton

Oh, yeah, sorry. I'm not really a CSS guy. Position: absolute will let you specify the element's position relative to the bounding box of its first positioned parent. So if you had:

<div id="div_outermost" style="width: 100%; height: 100%">
  <div id="div_outer" style="position: absolute; left: 10px; top: 10px;">
    <div id="div_inner" style="width: 100%; height: 100%">
      <div id="div_innermost" style="position: absolute; left: 10px; bottom: 10px;"> STUFF! </div>
    </div>
  </div>
</div>

div_innermost would be positioned 10px from the bottom of the window and 20px from the left hand edge. It inherits its coordinate origin from the first parent that isn't position: static (which is what things default to if you don't specify); in this case div_outer.

Sir Carcass

Ah, okay. I'll give that a try.

Thanks.

Sir Carcass

I had to play around with it, but I got it to do what I wanted using absolute positioning.

Thanks!

Sir Carcass

New question, this time dealing with CSS and affecting certain elements.

So my layout is something like this:

<div>
   <ul>
      <h1></h1>
         <div>
            <h2></h2>
               li's
            <h2></h2>
               li's
            ...
         </div>
      <h1><h1>
         <div>
            li's
         </div>
   </ul>
</div>

So basically a big list with some list items that are in a div under an h2 and some that are in a div just under a h1. I'm trying to style those li's. Currently I'm using something like this:

.ulClassName li {
style
}

Which is great, but I want affect the li's under an h2 differently than those directly under an h1 and I'm not sure how to reference it since the headings are closed before the li's show up. I know there's probably some simple syntax to do this, but I'm new to this and not quite sure how to proceed.

Edit: Nevermind, I figured something out. I added a class to the div that encapsulated the li's that didn't have h2's and styled that. If anyone has a good resource for writing this stuff, though, I'd appreciate it (ie "p.bold > a" or whatever).

Infidel

FYI that isn't valid HTML markup for a list element. <UL> and <OL> should only contain child <LI> elements. Inside the <LI> you can put header and divs and other elements as you like.

The way to do a hierarchy selector like you want in CSS is something like this:

ul.ulClassName h1 li { style }
ul.ulClassName h2 li { style }

Separated by spaces like that it means any descendant, so read "li inside a h1 inside a ul with class ulClassName" and note that the first style will apply to your elements that are inside the h2.

This isn't exactly the structure you proposed, you'll want to rearrange into something valid and then work out the selectors. You can use the > and + selectors to pick exactly what you need as well. li > h2 means "h2 directly inside an li" and would not apply to something like <li><div><h2></h2></div></li>.