SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Fixed Column with adjustable margins

    Don't have my Sitepoint book handy...

    There is some way that you can create a fixed width column and then make it so it is centered.

    The goal is to allow you to have better control over content regardless of how narrow or wide someone's monitor is.

    Can someone help me figure out how to do this?

    (I have limited content as I learn Web Design, and I want it smack dab in the center of my laptop and not all the way to the left.)

    Thanks,


    Debbie

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Unless I misunderstand what you want you would just give the element the width that you want and then use auto side margins to automatically center it.

    e.g.
    Code:
    .main{
    width:760px;
    margin:0 auto;
    }
    Or do you mean something more complex.?

    You could use min and max-width with pixel measurements to produce a fluid range.

    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>
    <style type="text/css">
    
    .content {
        width:100&#37;;
        min-width:480px;
        max-width:1160px;
        margin:0  auto;
        background:red;
    }
    </style>
    </head>
    <body>
    <div class="content">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    </body>
    </html>
    Note ie6 doesn't understand min and max width and gets 100% width instead.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Unless I misunderstand what you want you would just give the element the width that you want and then use auto side margins to automatically center it.
    So I just wrap whatever it is I want to center in <div> tags?


    e.g.
    Code:
    .main{
    width:760px;
    margin:0 auto;
    }
    Or do you mean something more complex.?

    No, I think that was it.

    BTW, what does .main mean?



    Debbie

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So I just wrap whatever it is I want to center in <div> tags?
    Essentially yes but it begs more questions as to exactly what you need but the auto margins on the div that has a fixed width will center it automatically.


    BTW, what does .main mean?
    It means nothing - it's just a classname that I made up that you would apply to the div so that the styles know where to attach themselves.

    Code:
    <div class="main"><p>Main content stuff here</p></div>
    You can call it anything you like (as long as it makes sense and describes the content that it holds rather than its appearance).

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I tried this code, but the results seem weird...

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Log In</title>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		<link rel="stylesheet" type="text/css" href="login.css">
    	</head>
    	<body>
    		<h1>Log In</h1>
    		<form method="post" action="landingpage.php">
    			<div>
    				<label for="email">E-mail:</label>
    				<input type="text" name="email" class="txt" id="email" />
    			</div>
    			<div>
    				<label for="password">Password:</label>
    				<input type="password" name="password" class="txt" id="password" />
    			<div>
    				<input type="submit" name="btnSubmit" value="Login" class="btn" id="btnSubmit" />
    			</div>
    		</form>
    	</body>
    </html>


    Code CSS:
    html{
    	width:600px;
    	margin:0 auto;
    	border: 1px solid #FF0000;
    }
     
    h1 {
    		font: 1.2em Arial, Helvetica, sans-serif;
    }
     
    input.txt {
    	color: #00008B;
    	background-color: #E3F2F7;
    	border: 1px inset #00008B;
    	width: 200px;
    }
     
    input.btn {
    	color: #00008B;
    	background-color: #ADD8E6;
    	border: 1px outset #00008B;
    }
     
    form div {
    	clear: left;
    	margin: 0;
    	padding: 0;
    	padding-top: 0.6em;
    	width: 35%;
    	margin: 0 auto;
    }
     
    form div label {
    	float: left;
    	width: 40%;
    	font: bold 0.9em Arial, Helvetica, sans-serif;
    }

    The labels should be to the left of the text boxes.



    Debbie

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Essentially yes but it begs more questions as to exactly what you need but the auto margins on the div that has a fixed width will center it automatically.
    I'm on my Macbook which is wider than taller.

    I am playing around with a Log-In screen.

    I want everything in the center of my monitor because it looks weird how it previously aligned to the far-right.

    I don't have my Sitepoint book on CSS with me, but I remember how you could center a fixed width column so everything was in the center and the edges were just filled with space or some fancy background.

    My goal is on PHP right now, so I wanted a way to pretty up my limited text and form controls without spending a week learning fancy page designs.

    Make more sense?



    It means nothing - it's just a classname that I made up that you would apply to the div so that the styles know where to attach themselves.
    What is the difference between a class and an id and why should you use one over the other?


    Debbie

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You haven't allowed enough room in one line for the label and the input.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Log In</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="login.css">
    <style type="text/css">
    html,body{margin:0;padding:0}
    body {
        width:600px;
        margin:0 auto;
        border: 1px solid #FF0000;
        position:relative;
        padding:5px;
    }
    h1 {
        font: 1.2em Arial, Helvetica, sans-serif;
    }
    input.txt {
        color: #00008B;
        background-color: #E3F2F7;
        border: 1px inset #00008B;
        width: 200px;
    }
    input.btn {
        color: #00008B;
        background-color: #ADD8E6;
        border: 1px outset #00008B;
        margin-left:38&#37;;
    }
    form div {
        clear: left;
        margin: 0;
        padding: 0;
        padding-top: 0.6em;
        width: 55%;
        margin: 0 auto;
    }
    form div label {
        float: left;
        width: 35%;
        font: bold 0.9em Arial, Helvetica, sans-serif;
        text-align:right;
        padding:1% 2% 0 0;
    }
    </style>
    </head>
    <body>
    <h1>Log In</h1>
    <form method="post" action="landingpage.php">
        <div>
            <label for="email">E-mail:</label>
            <input type="text" name="email" class="txt" id="email" />
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" name="password" class="txt" id="password" />
        </div>
        <div>
            <input type="submit" name="btnSubmit" value="Login" class="btn" id="btnSubmit" />
        </div>
    </form>
    </body>
    </html>
    You have a fixed width and yet you have used percentages and also pixel widths so how do you know it will fit unless you first convert it to pixels.

    In most cases when you have a pixel width container you should use pixel widths for the inner containers (unless you want to dynamically change the parent and have the children automatically adjust which percentage would allow).

    What is the difference between a class and an id and why should you use one over the other?
    This has been asked hundreds of times on the forums so a quick search will yield you lots of information but in short:

    An id is unique and applies to one unique element per page. You cannot use the same ID more than once on a page.

    Classes are ubiquitous and you can use them as many times as you like.

    IDs carry more weight than classes (see specificity in the sitepoint reference) and will win out.

    Usually ids are used when you want to identify main structural elements that are unique to the page such as header,footer,main, sidebar etc.

    Classes are used for everything else (e.g. .warning{color:red}}

    You would also use IDs when you have some javascript that needs to find a certain element as it is easier to find it by ID than running through all the classes to see if it's the right one.

    In truth and if you didn't use js you could just use classes but its generally accepted that main structural elements should be ids and all the rest are classes.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Looks like I better get ahold of my Sitepoint book and start reading again!

    Thanks, Paul!



    Debbie


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
  •