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
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts

    New at css, converting my portfolio template (IE and others)

    Hi, I am having a bit of trouble with my css, attached is what the design is supposed to look like (Had to make it smaller because of the file size limit)

    The design is totally mucked up in IE, but I am not too worried about that because I can create a different stylesheet if the fix is not a simple one.

    The white border on the left and right of the center content does not go all the way to the bottom, thie is because it is inside another div with a height of 768px, I want it to be able to go all the way to the bottom.

    Also the menu, I was never a fan of using li tags to display the menu, so I used a tags instead, just how to I make them display next to each other instead of them on top of each other.

    The background colour doesnt seem to appear on the center content.

    My final problem is that the copyright needs to stick at the bottom of the page.

    http://ludatha.com/test/

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ludatha Creative</title>
    
    <style type="text/css">
    * {padding:0; margin:0;}
    
    /* Layout */
    body {background:#818181 url(images/grad.jpg) repeat-x; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
    .container {background:url(images/bg.jpg) no-repeat; height:768px; position:relative; left:50%; margin-left:-500px; width:950px; }
    .center {border:#ccc 1px solid; border-top:none; border-bottom:none; position:relative; width:540px; left:205px; height:100%; background-color:191919;}
    .lang {background:url(images/lang-bg.png) repeat-x; height:22px; color:#fff; line-height:22px; padding:0 5px 0 5px;}
    .imag {background:url(images/imag-bg.png) no-repeat; height:111px; padding:0 5px 0 5px;}
    .link {background:url(images/link-bg.png) repeat-x; height:33px; color:#fff; line-height:22px; padding:0 5px 0 5px; text-transform:uppercase; line-height:30px;}
    .con {width:505px; position:absolute; margin:17px 0 0 17px;}
    
    
    /* Content */
    #lang-welcome {float:left;}
    #lang-select {float:right; font-size:10px;}
    #imag-image {}
    #imag-status {float:right; font-size:14px; margin:88px 0 0 0;}
    .link a {background:url(images/link-gen.png) no-repeat; height:26px; width:75px; color:#fff; text-decoration:none; text-align:center; display:block; line-height:24px;}
    .link a:hover {background:url(images/link-hov.png) no-repeat;}
    .status-txt {color: #CCCCCC;}
    .status2-txt {color: #669966;}
    .con #con-head {background:url(images/cont-head.png) no-repeat; position:relative; height:31px;}
    .con #con-head #con-head-page {color:#ccc; text-transform:uppercase; float:left; margin:5px 0 0 45px; font-size:14px;}
    .con #con-head #con-head-sub  {color:#fff; font-size:10px; float:left; margin:8px 0 0 47px;} 
    .con #con-content {color:#000; font-size:10px; background-color:#999; border:#ccc 1px solid; border-top:none; padding:10px; text-align:left;}
    .foot {font-size:10px; background:url(images/foot-bg.png) repeat-x; height:24px; line-height:24px;}
    .foot #foot-links {float:left;}
    .foot #foot-links a {color:#999;}
    .foot #foot-copy {color:#fff; float:right;}
    </style>
    </head>
    
    <body>
    
    <div class="container">
      <div class="center">
      
      	<div class="lang">
    
        	<div id="lang-welcome">Welcome</div>
            <div id="lang-select">Select your language:</div>
        </div>
        
      	<div class="imag">
        	<div id="imag-image"></div>
            <div id="imag-status"><span class="status-txt">Status:</span><span class="status2-txt">Designing Templates</span></div>
        </div>
    
        
        <div class="link">
        	<a href="index.php">Home</a>
            <a href="about.php">About</a>
            <a href="html.php">HTML</a>
            <a href="php.php">Scripts</a>
            <a href="ludatha.php">Ludatha</a>
    
            <a href="stats.php">Stats</a>
        </div>
        
        <div class="con">
        	<div id="con-head">
            	<div id="con-head-page">home</div>
                <div id="con-head-sub">This is the homepage</div>
            </div>
    
            <div id="con-content">This is some uber content for the old homepage!</div>
        </div>
        
        <div class="foot">
    		<div id="foot-links">
            	<a href="index.php">Home</a>
                |
                <a href="http://ludatha.com">Ludatha</a>
                |
                <a href="http://www.miramedia.co.uk">MiraMedia</a>
    
            </div>
        	<div id="foot-copy">Copyright 2008 Adam Tester 2008</div>        
        </div>
    
            
      </div>
    </div>
    
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails New at css, converting my portfolio template (IE and others)-portfolio.png  

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Well the first problem is that you have almost every element positioned relative. You should probably use floats and margins/paddings. That way it will look the way you want it to cross browser. Look into floats and see if you understand it or have problems and let us know.

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    hi,

    fix the css errors first:

    http://jigsaw.w3.org/css-validator/v....com%2Ftest%2F

    remove from .container:
    margin-left: -500px;
    position: relative;

    in a.link, remove display: block; to put items on a single line.

    regards

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts

    Positions

    As said, you are using to many relative positionings.

    Look into fluid layouts, which use %s instead of pixel values. As screen resolutions change, the pixels become smaller, and the positioning can be off, sometimes greatly.


  •  

    Posting Permissions

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