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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    cant center website :(

    Hi! well im trying to center my website but it does not work! i search the web for answer and the answer i see is about some easy css and html u put in. i tried tons but now i cant find any other ways to try, why im turning to this page :P im new to html and css i i link the codes they mby look like **** but would be super glad if someone could find the problem and help me to center my website ^^

    html:

    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8" />
    <meta name=viewport content="width=device-width, initial-scale=0">
    <title></title>
    <link rel="stylesheet" href="style.css" />
    
    <style> a { color:black;} </style>
    
    
     </head>
    <body bgcolor="#0000">
    
    
    
    <ul id="Hr-13">
       
    <li><a href="http://www.codingforums.com/index.html" title="Home ">Home</a></li>
    <li><a href="http://www.codingforums.com/contact/contact.html">Contact</a></li>
    <li><a href="http://www.codingforums.com/about/about.html">About</a></li>
    <li><a href="http://www.codingforums.com/faq/faq.html">FAQ</a></li>
    <li><a href="http://www.codingforums.com/news/news.html">News</a></li>
    
    </ul>
    
     
     
     
     
            <div id="sideborder"> 
         
         </div>
         
         <div id="bordertop"> 
         
         </div>
         
    </div>
         
          <div id="border"> 
         
         </div>
         
          <div id="two">
         
         </div>
         
         <div id="adone"> 
         
         </div>
         
          <div id="textbar">
    
        </div>
         
         
         
         <div id="sidetwo">
         
         </div>
         
         <div id="topbar">
         
         </div>
         
         <div id="search">
         
         </div>
         
         <div id="tutorial">
         
         </div>
         
         
         
         
             <div style="position:absolute;left:0px;top:220px;z-index:4 ;">
        <img src="img/menuback.png"/> </div>
        
        <div style="position:absolute;left:0px;top:0px;z-index:2 ; ">
        <img src="img/left.png"/> </div>
        
        <div style="position:absolute;left:1255px;top:0px;z-index: 2; ">
        <img src="img/left.png"/> </div>
        
        <div style="position:absolute;left:0px;top:0px;z-index: 5; ">
        <img src="img/topline.png"/> </div>
        
    <div style="position:absolute;left:0px;top:32px; z-index: 2;">
        <img src="img/headerbackground.png"/> </div>
    
        <div style="position:absolute;left:176px;top:630px; z-index: 1;">
        <img src="img/upload.png"/> </div>
        
            <div style="position:absolute;left:520px;top:440px; z-index: 5;">
        <img src="img/dota.png"/> </div>
    
    
    
        
    
    <div id="menud">
         
         
         <dd><a href="http://www.codingforums.com/../MMORPG/MMORPG.html"><h4 ALIGN="CENTER"><font  face="arial" color="white">MMORPG</font><a></dt> 
         <a href="http://www.codingforums.com/../Strategy/Strategy.html"><font face="arial" color="white">Strategy</font></a></dt> 
         <a href="http://www.codingforums.com/../FirstPersonShooter/FirstPersonShooter.html"><font face="arial" color="white">FirstPersonShooter</font></a></dt>
         <a href="http://www.codingforums.com/../adventure/adventure.html"><font face="arial" color="white">Adventure/Action</font></a></dt>
         <a href="http://www.codingforums.com/../MOBA/MOBA.html"><font face="arial" color="white"> MOBA</font></a></dt></h4>
         </dt>
         
         
         </div>
         
    <div id="fotter"> 
         <font face="arial" color="white"style="position:absolute;left:600px;top:90px;">Copyright2014©YourGameTutorial</font></a></dt>
              <div style="position:absolute;left:700px;top:30px; ">
          <a href="https://www.facebook.com/yourgametutorial"><img src="img/facebook.png"></a>
            </div>
         
         <div style="position:absolute;left:650px;top:30px; ">
         <a href="https://twitter.com/YourGameTT"><img src="img/twitter.png"></a>
        </div>
         </div>
         
         <div style="position:absolute;left:1260px;top:230px;z-index: 4; ">
    <a href="https://twitter.com/YourGameTT"><img src="img/twitter.png"></a>
    </div>
    
    <div style="position:absolute;left:1200px;top:230px; z-index: 4;">
    <a href="https://www.facebook.com/yourgametutorial"><img src="img/facebook.png"></a>
    </div>
    
    </div>
    
    </body>


    css


    Code:
    *
      
    {
         float: none;
         font=family: veradana;
    
    }
    
    
    
    #Hr-13 {
    position:relative;
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    top:230px;
    position: absolute;
         left: 365px;
         z-index: 5;
    }
    
    #Hr-13 li {
    margin:0;
    padding:0px;
    float:left;
    top:12px;
    z-index: 5;
    }
    
    
    #Hr-13 li a {
    display:inline;
    float:;
    margin:0;
    padding:11px 33px;
    float:center;
    z-index: 5;
    padding:auto;
    text-decoration:none;
    text-align:center;
    text-transform:capitalize;
    font-size:26px;
    font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
    font-style:normal;
    color:#FFFFFF;
    font-weight:bold;
    background:#252525;
    border-right:1px solid #000000;
    background:-webkit-gradient(linear,left top,left bottom,from(#0080FF),color-stop(0.50 #036cd4),to(#835D11));
    background:-webkit-linear-gradient(top,#252525 0%,#0080FF 50%,#036cd4 100%);
    background:-moz-linear-gradient(top,#252525 0%,#0080FF 50%,#036cd4 100%);
    background:-o-linear-gradient(top,#252525 0%,#0080FF 50%,#036cd4 100%);
    background:-ms-linear-gradient(top,#252525 0%,#0080FF 50%,#036cd4 100%);
    background:linear-gradient(top,#252525 0%,#0080FF 50%,#036cd4 100%);
    }
    #Hr-13 li a:hover,#Hr-13 li a:focus {
    -webkit-box-shadow:inset 0px 64px 0px 0px black;
    -moz-box-shadow:inset 0px 64px 0px 0px black;
    box-shadow:inset 0px 64px 0px 0px black;
    -moz-transition:all .3s ease-in-out;
    -webkit-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    }
    #Hr-13 li:last-child a {
    border-right:none;
    }
    
    #textbar
    
    {
         border:3px solid #036cd4;
    width: 1064px;
    height: 1046px;
    position: absolute;
    left: 278px;
    right: 50%;
    margin-left: -100px;
    top:700px;
    }
    
    #fotter
    {
         background-color:black;
         border:4px solid black;
    left:0px;
    background-color:#white; 
    width: 1420px;
    height: 130px;
    position: absolute;
    top:1752px;
         word-spacing:31px;
    z-index: 2;
    }
    
    #menud
    
    {
    
     
    width: 950px;
    height: 60px;
    position: absolute;
    left: 350px;
    margin-left: -100px;
    top:400px;
         word-spacing:31px;
     
    
    }
    
    
    #menud
    
    {
           
    background-color:#1b1a1a;
    width: 1327px;
    height: 50px;
    position: absolute;
    left: 135px;
    margin-left: -100px;
    top:276px;
         word-spacing:31px;
    z-index: 1;
     
    
    }
    
    
    
    
    #adone
    
    {
    border:1px solid #1b1a1a;
    width: 1075px;
    height: 1550px;
    position: absolute;
    left: 275px;
    right: 50%;
    margin-left: -100px;
    top:326px;
         background-color:white;
    z-index: 0;
    }
    
    #bordertop
    {
         border:1px solid #585858;
    left:0px;
    background-color:#white; 
    width: 1417px;
    height: 0px;
    position: absolute;
    top:30px;
         word-spacing:31px;
    z-index: 5;
    }
    
    #sideborder
    {
         
         border:4px solid #000000;
    left:170px;
    background-color:#white; 
    width: 0px;
    height: 1475px;
    position: absolute;
    top:300px;
         word-spacing:31px;
    z-index: 1;
    }
    
    #border
    
    {
         border:2px solid #036cd4;
    left:0px;
    background-color:#white; 
    width: 1410px;
    height: 0px;
    position: absolute;
    top:272px;
         word-spacing:31px;
    z-index: 2;
     
    
    }
    #two
    {
         
         border:4px solid #000000;
    left:1247px;
    background-color:#white; 
    width: 0px;
    height: 1475px;
    position: absolute;
    top:300px;
         word-spacing:31px;
    z-index: 2;
    }
    
    a { text-decoration: none;}
    a:hover{ text-decoration: underline; }
    Last edited by VIPStephan; 08-20-2014 at 09:49 PM. Reason: added code BB tags

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    position:absolute will position the element an exact distance from the edge of its container and makes centering impossible.

    If you want to centre an element then make sure that it doesn't have position:absolute, give it a width and specify the left and right margins as auto.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Jul 2014
    Location
    Athens, Greece
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there any link for your site????

    wrap all your content with a div (after body of course).
    Let's call it <div id='wrapper'></div>

    Then in your css. #wrapper{margin:0 auto}.

    that's it!

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    Quote Originally Posted by jonathanesliot View Post
    Is there any link for your site????

    wrap all your content with a div (after body of course).
    Let's call it <div id='wrapper'></div>

    Then in your css. #wrapper{margin:0 auto}.

    that's it!
    Not quite, he needs a width on that #wrapper, as already mentioned in the previous post.


  •  

    Tags for this Thread

    Posting Permissions

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