Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

CSS Layout Headaches


  • Please log in to reply

#1
kepardue

kepardue

    New Member

  • Member
  • Pip
  • 1 posts
Hello all,

I'm trying to get the hang of the syntax of using stylesheets to lay out a site. It's becoming quite time consuming and I'm about to have to go back to table-based layout. I would like to run it by people who do it more often than myself though, and see if I can get an opionion on what I'm doing wrong.

Below is my concept graphic, followed by the way I'm trying to lay my divs out. It's just not working. The header graphic expands to 100% of the window, and everything below that is in a wrapper div set at relative positioning, taking up 760px. Left and right column divs are inside of that, followed by a footer div set to clear:left. So far, all of my content is bleeding all over the page, and nothing seems to work properly.

Many thanks for any advise.
Kenneth

Posted Image

Posted Image
  • 0

Advertisements


#2
NullWolf

NullWolf

    Member

  • Member
  • PipPipPip
  • 225 posts
:tazz:
I know someone better will come along and probably answer you better.
This is the style-sheet I use for one of my sites (not up yet, I'm still working on it).
     #header {
        position: absolute;
        width: 400;
        height: 90;
        top: 5;
        right: 0;
        bottom: auto;
        left: 95;
	z-index: 1;
       }
      #sidebar {
        position: absolute;
        width: 100;
        height: 300;
        top: 0;
        right: 0;
        bottom: 100px;
        left: 0;
	background-color: gray;
      }
      #sidebar1 {
        position: absolute;
        width: 100;
        height: 295;
        top: 305;
        right: 0;
        bottom: auto;
        left: 0;
	color: orange;
	word-wrap: break-word;
	overflow: auto;
      }
      #main {
        position: absolute;
        width: 565;
        height: 387;
        top: 110;
        right: 0;
        bottom: 100px;
        left: 110;
	word-wrap: break-word;
	color: orange;
	overflow: auto;
	z-index: 1;
      }
      #news1 {
        position: absolute;
        width: 100;
        height: 500;
        top: 50;
        right: auto;
        bottom: auto;
        left: 339;
	z-index: 0;
      }
      #news {
        position: absolute;
        width: 90;
        height: 400;
        top: 150;
        right: auto;
        bottom: auto;
        left: 683;
	word-wrap: break-word;
	color: white;
	overflow: auto;

      }
      #update {
        position: absolute;
        width: 90;
        height: 50;
        top: 560;
        right: auto;
        bottom: auto;
        left: 683;
	word-wrap: break-word;
	text-align: center;
	font-weight: bold;
	color: orange;
      }
      #footer {
        position: absolute;
        width: 565;
        height: 100;
        top: 500;
        right: 0;
        bottom: 0;
        left: 110;
	word-wrap: break-word;
	color: lime;
      }

Make sure you've got the word-wrap: break-word;
or the text will spill out of the areas.
You'll notice the background-color: gray; on one or more section, that way I can position things EXCACTLY where I want them, then I just turn off the color.

;) I don't like relative positioning, I have this need to use absolute positioning, so when I tell it that its going to be 100px from the top, it is. But that's just me :)
Attached is a screenshot of the page that I work on sometimes, depends on the mood :( and the the HTML showing the divs etc.
<html>
 <head>
  <title>SuicideTechie.COM</title>
  <link rel="stylesheet" href="./css/template.css"
 </head>
 <body bgcolor="black">

<!-- Header -->

  <div id="header">
   <img src="./images/header.png" id="header1" alt="When stupid people make you wanna kill yourself... Suicide Techie.COM" />
  </div>
  
<!-- Navigation Sidebar -->

  <div id="sidebar">
   <img src="./images/st.png" id="logo" alt="Logo" /><br />
   <a href="./index.html" id="home"><img src="./images/home.png" id="home1" alt="Home" border="0" /></a><br />
   <a href="./index.html" id="faqs"><img src="./images/faqs.png" id="faqs1" alt="FAQs" border="0" /></a><br />
   <a href="./index.html" id="forum"><img src="./images/forum.png" id="forum1" alt="Forum" border="0" /></a><br />
   <a href="./index.html" id="contact"><img src="./images/contact.png" id="contact1" alt="Contact Info" border="0" /></a>
  </div>

<!-- Topics Sidebar -->

  <div id="sidebar1">
   <center><b>Hot Topics</b></center>
  </div>

<!-- Main -->

  <div id="main">
   <center>
    <h3>Dedicated to technical support staff around the world...</h3>
    Please note, if you are actually Suicidal, go here -> <a href="http://www.save.org" id="save">SAVE.ORG</a>
   </center>
   <br />
   This is the initial page for SuicideTecie.COM, where techies can help other techies with their problems, or just blow off steam.<br />
   <center>
    <h2>Rules</h2>
   </center>
   <ol>
    <li>No Names:
     <ul>
      <li>Do not use a customer's name, use either "customer" or "Bob"</li>
      <li>Do not use a company name, use "company", "the Man", or "[bleep]"</li>
      <li>Using your own name is up to you, but please don't use your last name.</li>
     </ul>
    </li>
    <li>No Flames:
     <ul>
      <li>Don't flame other user for their posts.  You came here to help or be helped.</li>
     </ul>
    </li>
    <li>Follow the rules:
     <ul>
      <li>I made this site to give my fellow techies a place to blow off steam, or get help for ourselves. I'm paying for the hosting fees out of my own pocket, which means I decide what goes here.  Flame once, I'll warn you. Flame twice, I'll kick you.</li>
     </ul>
    </li>
   </ol>
  </div>

<!-- News Sidebar -->

  <div id="news1">
   <img src="./images/news.png" id="news1" alt="News" /><br />
  </div>

<!-- News -->

  <div id="news">
   <hr color="orange" />
    <center>Thursday, June 23, 2005</center>
   <hr color="orange" />
    <center>Welcome to my desktop muahahaha!</center>
   <br />
  </div>

<!-- Updated -->

  <div id="update">
   Last Updated<br />
   06/23/2005
  </div>

<!-- Footer -->

  <div id="footer">
   <center>
    <img src="./images/footer.png" id="footer1" alt="Brought to you by stupidity..." />
   </center>
  </div>
 </body>
</html>
[attachment=2838:attachment]
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP