SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning - augh!

    Can somebody help me - I'm (STILL!) working on this page, trying to figure out positioning.

    http://www.eodweb.com/test/

    The main concern for me is the position of the address/phone numbers. It's supposed to fit just under the company logo on the right side (below the line). The secondary concern is the size of the text.

    Problem:

    The positioning looks different in Explorer 6, Netscape 7.1, Mozilla Firebird and Opera 7.2 (the worst!!). Now I understand that by (trying) to adhere to standards and create a tableless layout that the idea is that this will all display in many different environments (and quite likely look very different). So I'm not sure if the fact that the address is in different places is

    1. the fault of each browser
    2. just how it is

    - or -

    3. my error

    The same goes for the size of the text. I know users can set defaults in their browsers, etc., I'm using 'em' for sizing but as I've read that this is the 'best' choice - but is it?

    Totally open to comments and suggestions. Still getting my feet wet with css here.

    Thanks!

    Toni

    Extra-Credit: the address sometimes appears way above the company name in internet explorer when all the other browsers show it well below (when I adjust the 'margin-top' value in the style sheet). I'm seriously wondering if it's my ineptitude..but I can't for the life of me figure it out...
    dare to Dream, dare to Be...
    www.eodweb.com

  2. #2
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've read many opinions on font sizing. A month ago, I decided to use the technique described here:

    http://www.thenoodleincident.com/tut...phy/index.html
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    How's this?
    Code:
    	body {
    		background-color: #184642;
    		text-align: center;
    		font: 1em/1.5em Arial, Verdana, sans-serif;
    		color: #cccc99;
    	}
          #outer {
    		background: #184642 url(test.gif) no-repeat top center;
    		width: 744px;
    		height: 800px;
    		text-align: left;
    		margin: 0px auto;
    		border: 1px solid #184642;
    position: relative;
    top: 0;
    left: 0;
     /*This is a fix to stop mozilla from sliding the whole page off the left hand side of the viewport as the browser window is resized smaller. (If you want that effect then take the border out.)*/ 
          }
          
          #slideshow {
            margin-left: 30px;
            margin-top: 110px;
          }
    
          .caption {
           /*	position: relative;
            left: -200px;
            bottom: -30px;    */
            color: #cccc99;
          }
    	  #nav {
    	  	/*margin-left: 275px;
    		margin-top: -25px;*/
                    position: absolute;
                    top: 180px;
                    left: 300px;
    	  }
    	  #contact {
    		/*margin-top: -290px;
    		margin-right: 13px;*/
                    position: absolute;
                    right: 13px;
                    top: 90px;
    		text-align: right;
    	  }
    	  ul {
    	  	list-style: none;
                    margin: 0;
                    padding: 0;
    		}

  4. #4
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Computer Bob - thanks for the reference - looks like some good info

    Quote Originally Posted by vgarcia
    Code:
          .caption {
           /*	position: relative;
            left: -200px;
            bottom: -30px;    */
            color: #cccc99;
          }
    	  #nav {
    	  	/*margin-left: 275px;
    		margin-top: -25px;*/
                    position: absolute;
                    top: 180px;
                    left: 300px;
    	  }
    	  #contact {
    		/*margin-top: -290px;
    		margin-right: 13px;*/
                    position: absolute;
                    right: 13px;
                    top: 90px;
    		text-align: right;
    	  }
    	  ul {
    	  	list-style: none;
                    margin: 0;
                    padding: 0;
    		}
    Vinnie - thanks for the code. Would you mind explaining the reasoning behind the following a bit? Helps me understand better.

    in #nav and #contact you took away the margins, and put in absolute positions

    in caption, you took away the positioning altogether - in this case it doesn't matter too much since I don't want it to show anyway - but...

    in UL you added padding and margin

    I was trying to avoid using absolute or relative positioning, to just let things flow naturally - I thought I read that this was better, when possible?? I guess the problem is I don't (still!) know when to do it or when it's better to use relative or absolute positioning, as opposed to - what is it, static positioning?

    I also don't understand why what I did didn't work, or if it could (without adding absolute or relative positioning).

    thanks!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •