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 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help me with my css.

    Can someone help me with my css. Im kinda new on html and css. Ok so I wanna make a text box but I dont know how to get it in the middle. can some one help me.

    html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <html lang="en">
    
    <head>
    <title>Capital Online</title>
        <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        
        <div id="header">
        		
                <ul id="awesome-menu">
        		<li><a href="index.html" class="home">Home</a></li>
       			<li><a href="download.html" class="download">Download</a></li>
       			<li><a href="store.html" class="store">Store</a></li>
       	 		<li><a href="forum.html" class="forum">Forum</a></li>
      	  		<li><a href="contact.html" class="contact">Contact</a></li>          
    		 </ul>
             
             
    	 				<div id="menybg"></div>  	 
       
         </div>
         
        
            <!-- jQeury images -->
            <div id="headerimgs">
                <div id="headerimg1" class="headerimg"></div>
                <div id="headerimg2" class="headerimg"></div>
            </div>
            
            
            <!-- Arrows -->
                <div id="NextBack">
    				 <div id="next" class="btn"></div>
                     <div id="back" class="btn"></div>
              	</div>
                
    
          
    <div id="wrapper">
    
    
      
    
    
    
    
    
    
    	
      
         
      <div class="slider-wrapper theme-default">
                <div class="ribbon"></div>
                <div id="slider" class="nivoSlider">
                    <img src="images/welcome.jpg" alt="" title="Welcome to Capital Online!<br> This is a recently new server so have in mind their might be some unexpected bugs. Report the bugs and you have a chanse of getting a reward" />
                  <a href="http://dev7studios.com">
                  <img src="images/up.jpg" alt="" title="Expansion <br> comming soon!" /></a>
                    <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                    <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
                </div>
            </div>
       
        <div id="contenttop"></div>
        
        <div id="content"></div>
        
          
    
        </div>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="jquery.nivo.slider.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
        
      <div id="allt">
    	
        <div id="top">
    		
            <h3>Max test</h3></div>
    		<p>max dette är jätte bra och lätt att lägga in</p>
    		<div id="bottom">
    		</div>
        	
            <div id="top">
    		<h3>Detta är min andra rubrik</h3></div>
    		<p>min klass är inkompitent</p>
    		<div id="bottom">
    		</div>
            
            <div id="top">
    		<h3>Detta är min rubrik</h3></div>
    		<p>är dette min text box jag söker tro?</p>
    		<div id="bottom">
    		</div>
        
        	</div>
        
    </body>
    </html>
    CSS

    Code:
    /*====================*/
    /*=== Reset Styles ===*/
    /*====================*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin:0;
    	padding:0;
    	border:0;
    	outline:0;
    	font-weight:inherit;
    	font-style:inherit;
    	font-size:100%;
    	font-family:inherit;
    	vertical-align:baseline;
    } h1 {
    	font: Tahoma, Geneva, sans-serif;
    	font-size:16px;
    	
    	}
    
    table {
    	border-collapse:separate;
    	border-spacing:0;
    }
    caption, th, td {
    	text-align:left;
    	font-weight:normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content:"";
    }
    blockquote, q {
    	quotes:"" "";
    }
    /* HTML5 tags */
    header, section, footer,
    aside, nav, article, figure {
    	display: block;
    }
    
    /*===================*/
    /*=== Main Styles ===*/
    /*===================*/
    
    a, a:visited {
    	color:blue;
    	text-decoration:none;
    }
    a:hover, a:active {
    	color:#000;
    	text-decoration:none;
    }
    
    .theme-default #slider {
        margin:100px auto 0 auto;
        width:760px; /* Make sure your images are the same size */
        height:360px; /* Make sure your images are the same size */
    }
    .theme-pascal.slider-wrapper,
    .theme-orman.slider-wrapper {
        margin-top:150px;
    }
    
    /*====================*/
    /*=== Other Styles ===*/
    /*====================*/
    .clear {
    	clear:both;
    }
    
    /* Positions  */
    
    #wrapper {
    	width: 900px;
    	margin-right:auto;
    	margin-left:auto;
    position: relative;			
    }
    #header {
    		width: 900px;	
    		margin-right:auto;
    		margin-left:auto;
    		position: relative;	
    	}
    
    body {
    	background-color:#000000;
    }
    
    #contenttop {
    	background-image:url(images/fill%20top%202.png);
    	background-position:center;
    	height:	200px;
    	width: 900px;
    	margin-top: 185px;
    }
    
    #content {
    	background-image:url(images/web%20content.png);
    	background-position:top center;
    	width:900px;
    	height:1000px;	
    }
    
    #menybg {
    	background-image:url(images/filler%20pot.png);
    	background-position:center top;
    	height: 126px;
    }
    
    ul#awesome-menu {
    	width: 786px; 
    	margin: 0 auto;
    	padding: 0;
    	list-style: none;
    	background-position:center;
    }
    
    ul#awesome-menu li { display: inline; }
    	
    ul#awesome-menu li a {
    	display: block; float: left; height: 55px;
    	background-image: url(images/alla.png); text-indent: -9999px;
    	margin-top: 20px;
    }
    
    	ul#awesome-menu li a.home {
    		width: 124px; background-position: 0 0;	
    	}
    	
    	ul#awesome-menu li a.download {
    		width: 210px; background-position: -124px 0;	
    	}
    	
    	ul#awesome-menu li a.store {
    		width: 140px; background-position: -334px 0;	
    	}
    	
    	ul#awesome-menu li a.forum {
    		width: 151px; background-position: -474px 0;	
    	}
    	
    	ul#awesome-menu li a.contact {
    		width: 161px; background-position: -630px 0;	
    	}
    	
    	
    	ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
    		background-position: 0 -55px;	
    	}
    	
    	ul#awesome-menu li a.download:hover, ul#awesome-menu li a.download:focus {
    		background-position: -124px -55px;	
    	}
    	
    	ul#awesome-menu li a.store:hover, ul#awesome-menu li a.store:focus {
    		background-position: -334px -55px;	
    	}
    	
    	ul#awesome-menu li a.forum:hover, ul#awesome-menu li a.forum:focus {
    		background-position: -474px -55px;	
    	}
    	
    	ul#awesome-menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
    		background-position: -630px -55px;	
    	}
    
    
    /* Slider Arrows */
    
    #NextBack {
    }
    
    
    .btn {
    	height:71px;
    	width:61px;
    	cursor:pointer;
    }
    
    #back {
    	background-image:url(images/btn_back.png);
    	margin-right: 800px;
    	background-repeat: no-repeat;
    	height: 71px;
    	width: 63px;
    	float:left;
    	margin-top:220px;
    }
    #next {
    	background-image:url(images/btn_next.png);
    	float:right;
    	margin-top:220px;
    }
    
    	.headerimg {
    	background-position: center top;
    	background-repeat: no-repeat;
    	width:100%;
    	height:505px;
    	position:absolute;
    	top:140px;
    	margin-top: 50px;
    }
    
    h1 {
    	font-size:30px;
    	font-family:Tahoma, Geneva, sans-serif;	
    }
    
    ul#post {
    	position:absolute;
    	top: 980px;
    	margin-right: 80px;
    	margin-left: 30px;
    	padding: 0;
    	list-style: none;
    }
    #holder p {
    	border-right: 1px solid #333;
    	border-left: 1px solid #333;
    	padding: 10px 15px;
    	margin: 0px;
    }
    #top {
    	width: 800px;
    	height: 30px;
    	border: 1px solid #333;
    	background-color: #0F6;
    
    }
    #top h3 {
    	margin: 0px;
    	line-height: 30px;
    	padding: 0px 10px;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 15px;
    	
    	}
    
    #bottom {
    	width: 800px;
    	height: 30px;
    	border: 1px solid #333;
    	margin-bottom: 50px;
    }
    #allt {
    	position: absolute;
    	top: 1250px;
    	width: 900px;
    
    }

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    one way to center anything is to set it to the following

    CSS
    Code:
    .textbox{
    position:relative;
    width:200px;
    left:50%;
    margin-left:-100px;
    }
    Just set your position to relative, set your width to [width of your textbox] and then set the margin-left to [negative 1/2 of the width of your textbox]

    EDIT: See below for a better method
    Last edited by dylanbaumannn; 02-10-2012 at 05:23 PM.

  • #3
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi dylanbaumannn,

    May I jump in here? I just tried your example and it worked.

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        
        <style type="text/css">
    .textbox{
    position:relative;
    width:200px;
    height:400px;
    border: 1px solid #ff0000;
    left:50%;
    margin-left:-100px;
    }
        </style>
      </head>
      <body>
    <div class="textbox"></div>
      </body>
    </html>

    I've always used settings such as margin: 0px auto; or margin-left:auto; margin-right:auto.

    Your way worked. Is it really the best way? I'm not teasing you, I'm just asking. I'm still learning about coding. Thanks for the post.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Kevin_M_Schafer View Post
    Hi dylanbaumannn,

    May I jump in here? I just tried your example and it worked.

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        
        <style type="text/css">
    .textbox{
    position:relative;
    width:200px;
    height:400px;
    border: 1px solid #ff0000;
    left:50%;
    margin-left:-100px;
    }
        </style>
      </head>
      <body>
    <div class="textbox"></div>
      </body>
    </html>

    I've always used settings such as margin: 0px auto; or margin-left:auto; margin-right:auto.

    Your way worked. Is it really the best way? I'm not teasing you, I'm just asking. I'm still learning about coding. Thanks for the post.

    --Kevin

    .
    In a word: no.

    Relative positioning moves content out of the normal flow. Centring by margins is both simpler and more flexible.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    The auto margin way is certainly the better way compared to the position with negative margin one because you only have to change one value (the width) instead of two (width and margin) if anything is changing. The method suggested by dylanbaumannn comes in handy when you want to center an absolutely positioned element, though.

  • #6
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by VIPStephan View Post
    The auto margin way is certainly the better way compared to the position with negative margin one because you only have to change one value (the width) instead of two (width and margin) if anything is changing. The method suggested by dylanbaumannn comes in handy when you want to center an absolutely positioned element, though.
    haha, gotcha. Sorry for the confusion I've updated my post


  •  

    Posting Permissions

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