Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



SEO Class in Chicago, IL

Learn How To Optimize Your Website on July 26, 2013


Looking for personalized in-depth SEO training among your peers?



High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!



 


Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!


More SEO Content

International SEM  | Social Media  |  Search Friendly Design |  SEO |   Paid Search / PPC  |  Seminars  |  Forum Threads  |  Q&A |  Copywriting |  Keyword Research   |  Web Analytics / Conversions  |  Blogging  |  Dynamic Sites  | Linking  |   SEO Services  |  Site Architecture  | Search Engine Spam  | Wrap-ups  | Business Issues |  HRA Questions  |  Online Courses

Photo
- - - - -

Controlling <div> Size

Started by qwerty , Jan 07 2005 12:54 PM

  • Please log in to reply
7 replies to this topic

#1 qwerty

qwerty

    HR 10

  • Moderator
  • 8,322 posts
  • Location:Somerville, MA

Posted 07 January 2005 - 12:54 PM

I'm working on a set of pages that have a very different look from the rest of its site. Whereas most of the site has a white background with a blue stripe down the left margin, these pages are to have a blue background.

I'm hoping I don't have to give them their own CSS, but I tried setting a class for their body (body class="press") and that didn't seem to make any difference. Then I tried putting everything inside the body in <div class="press"> for which I set the following definition:
CODE
div.press {
 height: 100%;
 width: 100%;
 color: black;
 background-color: #064e80;
 }

My hope was that setting the width and height at 100% would cover the whole page, but it's only covering the amount of the page it takes to display the content within the div. If the browser window is larger than the div is, I get this mess.

#2 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 07 January 2005 - 01:01 PM

IE should process that concept okay Bob, but it's not going to be consistant for all browsers. <mutter>

Others may have a better idea, but a quick fix would be to make a table right after the body tag and include your background color in that. That's pretty reliable across the different browser, but it's an ugly hack for purists.

#3 qwerty

qwerty

    HR 10

  • Moderator
  • 8,322 posts
  • Location:Somerville, MA

Posted 07 January 2005 - 01:23 PM

That doesn't seem to have fixed it... and it stuck me with nested tables puke.gif

I'd managed to take the rest of the site out of tables altogether. I suppose I could do these pages in layers too, but I'd still have the problem with that background from the body element.

#4 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 5,955 posts
  • Location:Blackpool UK

Posted 07 January 2005 - 02:23 PM

Problem is the DOM has actually no idea what the height of the window will be unless it is explicitly set.
If you're not averse to using a bit of DOM scripting you can fool the browser a little. while you can't get the actual window height you can set the <div> height to the screen height.
use this code in the body or make it into a function.
CODE
<script type="text/javascript">
var bck = document.getElementById("press");
var h = self.screen.height;
bck.style.height = h;
//bck.style.height = h - 150;

</script>

it's a bit of a fudge because it will extend the page and put vertical scrolling on but you can make an allowance for the minimum toolbar height ~ 150px (commented out)

#5 qwerty

qwerty

    HR 10

  • Moderator
  • 8,322 posts
  • Location:Somerville, MA

Posted 07 January 2005 - 02:27 PM

I think the cleanest way to deal with this is to give these pages their own style sheet with a different body defiintion, or just add an embedded style for the body.

Edited by qwerty, 07 January 2005 - 02:28 PM.

#6 linux_lover

linux_lover

    LiLo

  • Active Members
  • PipPipPipPipPipPip
  • 831 posts
  • Location:York, UK

Posted 07 January 2005 - 02:32 PM

I think you have to set the body and html tag to be 100% too:

body, html {height:100%}
div {height:100%}

Cant remember where I read that but i use it one one of my sites.

tables are sooo much easier for that sad.gif
I tend to rely on dynamically setting height for stuff personally... via php etc

Edited by linux_lover, 07 January 2005 - 02:33 PM.

#7 qwerty

qwerty

    HR 10

  • Moderator
  • 8,322 posts
  • Location:Somerville, MA

Posted 07 January 2005 - 02:38 PM

But these are in tables -- at this point, they're in nested tables.


Ahhh, there we go. I replaced <body> with <body style="background-color: #064e80; background-image: url('none')"> and that seems to have fixed it.

Edited by qwerty, 07 January 2005 - 02:42 PM.

#8 leadegroot

leadegroot

    Lea de Groot

  • Active Members
  • PipPipPipPipPip
  • 488 posts
  • Location:Brisbane, Australia

Posted 07 January 2005 - 08:57 PM

moving that to the css will work, but some people find it non obvious how the syntax works

CODE
body#specialpage {
 background-color: #064e80;
 background-image: url('none');
}

<body id="specialpage">

Note that if you put the css in your general css file then any other css which is for this page only needs to specified so:
CODE
body#specialpage li {
 list-style: none;
}

<body id="specialpage">
<ul>
<li></li>
</ul>

HIH!
Back to CSS/XHTML Discussion and Questions


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. HRF SEO Forum
  2. → Search Engine Optimization
  3. → Search Engine Friendly Design & Usability
  4. → CSS/XHTML Discussion and Questions
  5. *READ FIRST*--> Forum Rules