Vanilla Forums has been nominated for a second time in the CMS Critic "Critic's Choice" awards, and we need your vote! Read more here, and then do the thing (please).
Our new Indie Games subforum is now open for business in G&T. Go and check it out, you might land a code for a free game. If you're developing an indie game and want to post about it, follow these directions. If you don't, he'll break your legs! Hahaha! Seriously though.
Our rules have been updated and given their own forum. Go and look at them! They are nice, and there may be new ones that you didn't know about! Hooray for rules! Hooray for The System! Hooray for Conforming!

Webpage Layout Question

Sir CarcassSir Carcass I have been shown the end of my worldAustin, TXRegistered User regular
edited April 2012 in Help / Advice Forum
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?

Sir Carcass on
camo_sig2.png

Posts

  • CptHamiltonCptHamilton Registered User regular
    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?

    OptimusZed wrote: »
    Jesus, people. This thread is like a running gunbattle with stupid bullets.
  • Sir CarcassSir Carcass I have been shown the end of my world Austin, TXRegistered User regular
    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.

    camo_sig2.png
  • CptHamiltonCptHamilton Registered User regular
    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.

    OptimusZed wrote: »
    Jesus, people. This thread is like a running gunbattle with stupid bullets.
  • Sir CarcassSir Carcass I have been shown the end of my world Austin, TXRegistered User regular
    Ah, okay. I'll give that a try.

    Thanks.

    camo_sig2.png
  • Sir CarcassSir Carcass I have been shown the end of my world Austin, TXRegistered User regular
    I had to play around with it, but I got it to do what I wanted using absolute positioning.

    Thanks!

    camo_sig2.png
  • Sir CarcassSir Carcass I have been shown the end of my world Austin, TXRegistered User regular
    edited April 2012
    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).

    Sir Carcass on
    camo_sig2.png
  • InfidelInfidel Heretic Registered User regular
    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>.

    TwitchTV channel: OrokosPA OrokosPA
    Play D&D 4e? :: Check out Orokos and upload your Character Builder sheet! :: Orokos Dice Roller
    The PhalLounge :: Chat board for Critical Failures IRC! :: #CriticalFailures and #mafia on irc.slashnet.org
Sign In or Register to comment.