Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Location
    NJ
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering an element to the right of another

    Greetings, all. I'm trying to make a 'go back' link at the top of my web page. I'd like it to appear to the left of the centered title text on the page but on the same line vertically. For example:
    Code:
    < Go Back                                  WIDGET PAGE
    I'm very close, but with the following code "WIDGET PAGE" gets centered between the right of "< Go Back" and the right edge of the page, instead of being centered in the whole page as I'd like.

    CSS:
    Code:
    .mainpage ul#headernav
    {
    	list-style-type: none;
    	padding: 0 0;
    	border: none thin;
    	height: 22px;
    	font-size: 8pt;
    	text-align: center;
    }
    .mainpage ul#headernav li
    {
    	display: block;
    	width: auto;
    	padding: 2px;
    	text-align: center;
    }
    
    .mainpage ul#headernav .left { float: left; }
    HTML:
    Code:
    <ul id="headernav">
    <li class='left'><a ref="#"&lt Go Back</a></li>
    <li class='center'>WIDGET PAGE</li>
    </ul>
    I've tried various experiments with the 'center' class with no luck. I've also tried various iterations of moving the WIDGET PAGE HTML out of the <ul>, notably something like:

    CSS:
    Code:
    .mainpage #header
    {
    	text-align: center;
    }
    
    .mainpage ul#headernav
    {
    	list-style-type: none;
    	padding: 0 0;
    	border: none thin;
    	height: 22px;
    	font-size: 8pt;
    	text-align: center;
    	width: 10%;
    	float: left;
    }
    
    .mainpage ul#headernav li
    {
    	display: block;
    	width: auto;
    	padding: 2px;
    	text-align: center;
    	border: none thin;
    }
    
    .mainpage ul#headernav .left { float: left; }
    HTML:
    Code:
    <div id="header">
    <ul id="headernav">
    <li class='left'><a href="#">&lt Go Back</a></li>
    </ul>
    <p class='center'>WIDGET PAGE</p>
    </div>
    Which results in odd behavior where the "Go Back" block is lower than the WIDGET PAGE text and interferes with the table immediately following WIDGET PAGE - the table is aligned to the right edge of the "Go Back" block. Like this:

    Code:
                                                     WIDGET PAGE
    < Go Back
                   |-----------------------------------------------------|
                   | Awesome ASCII art table                             |
    If I add a "border: solid thin;" to .mainpage #header, the <ul> and <p> blocks align vertically and there is no longer any interference with the table. I didn't realize alignment was dependent on whether or not a block's border was visible.

    Code:
    -------------------------------------------------------
    |< Go Back                               WIDGET PAGE   |
    ------------------------------------------------------- 
     |-----------------------------------------------------|
     | Awesome ASCII art table                             |
    Thanks for any advice. I'm just learning CSS and having fun, but this is making me a little batty.

    -Joe

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    hello nostalgia75,
    copy/paste this into a new .html and look at it in your browser. I commented on the CSS to show what it's doing:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <style type="text/css">
    html, body {
    	background: #CCCCCC;
    	text-align: center; /*centers text*/
    	font: normal 100% Verdana, Arial, Helvetica, sans-serif;
    	color: #333333;
    }
    * {   /*removes default margin/padding*/
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 760px;
    	margin: 0 auto; /*centers #container*/
    }
    #headernav {
    	background: #33CCFF;
    }
    #left {
    	float: left;  /*allows other things on the same line with it*/
    	margin: 10px 0 0 20px;  /*positions the float*/
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="headernav">
                <a href="#" id="left">Go Back</a>
                <h1>WIDGET PAGE</h1>
            <!--end headernav--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Location
    NJ
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excavator,

    Thanks for that, especially the comments.

    It exhibits the same behavior as my first CSS/HTML code in my post - the 'Go Back' is on the left like we expect, and 'WIDGET PAGE' is center in the remaining space between 'Go Back' and the right edge of the page. What I'm trying to do is get 'WIDGET PAGE' centered on the whole page as if the 'Go Back' weren't there.

    Thanks very much,

    -Joe

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I see.

    If "Widget Page" is going to be the same phrase all the time, even floating the h1 and margining it over to center would not stop it from moving on a text resize.
    Try nesting a second div for the link (link has to be on top since users will need to click on it) and margining it up to line up with the title. This holds together pretty well even with a text resize or two:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <style type="text/css">
    html, body {
    	background: #CCCCCC;
    	font: normal 100% Verdana, Arial, Helvetica, sans-serif;
    	color: #333333;
    }
    * {   
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 760px;
    	height: 400px;
    	margin: 0 auto;
    	background: #99FF99;
    }
    #headernav {
    	text-align: center; 
    	background: #33CCFF;
    	margin: 10px 0;
    }
    #nav {
    	width: 760px;
    	float: left;
    	margin: -40px 0 0 0;
    }
    #left {
    	float: left;  
    	margin: 10px 0 0 20px;  
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="headernav">
                    <h1>WIDGET PAGE</h1>
            	<div id="nav">
                    <a href="#" id="left">Go Back</a>
                <!--end nav--></div>
            <!--end headernav--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    nostalgia75 (01-08-2008)

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Location
    NJ
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This looks like it fixes the problem, thanks! One question: I thought negative margins were a no-no?

    -Joe

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by nostalgia75 View Post
    This looks like it fixes the problem, thanks! One question: I thought negative margins were a no-no?

    -Joe
    Well, probably as big a no-no as absolute positioning I would say. I avoid both but they each have their use.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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