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 5 of 5
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Why is this code here?

    Hello fellow coders.

    I am puzzled. The style sheet attached was coded for me by another forum member. As part of my learning of CSS, I have been modifying the various parts to see what happens.

    The part below in red does not seem to do anything. If I remove it or leave it in. Am I missing something here.

    I would appreciate any help. The page works OK with or without it.

    BUT why!

    effpeetee

    www.exitfegs.co.uk


    Code:
    body {
    	background-color: #000000;
    	font-family: Arial, Helvetica, sans-serif;
    	color: white;
    	
    }
    
    #wrap {
    	width: 97px;
    	margin: auto;
    }
    a img {border: none;}
    #header {position: relative;}
    #header h1 {
    	color: red;
    	text-align: center;
    }
    #content {font-size: 12px;}
    #intro {margin-top:20px;
    	color:yellow;
    	width: 180px;
    	float: left;
          font-weight: bold;
    }
    
    #main {
    	float: right;
    	width:740px;
          position:relative;
       
    }
    #main p {
    	clear: both;
    	width: auto; /* reverting the width set in #content p */
    }
    #main a img {border: 2px solid green;}
    #main a:hover img {border-color: orange;}
    
    #imgcaption {font-size: 15px;
    	text-align: center;
    	color:yellow;
          font-weight: bold
    }
    .previewlink {}
    .previewimage {
    	width: 680px;
    	float: left;
    }
    
    #links {
    	clear: left;
    }
    #links ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #links ul a {font-size: 12px;
    	color: yellow;
    	font-weight: bold;
    	text-decoration: none;
    }
    #links ul a:hover {text-decoration: underline;}
    #footer {
    	clear: both;
    }
    
      h1,h2 {font-family: Arial;}
        h1 {color:red}
        h2,h3 {color:cyan}
        h6 {color:cyan}
        h5,h5 {color:white}
        h6,h5,h5,h3,h2,h1,p {
        margin: 0;
    }
    #clockbox0{
        position: absolute;
        left: 1em;       
        color:white
    }
    
    #clockbox1{
        position: absolute;
        right: 1em;
        color:white
    }
        
    #greet{color:red;
    text-align:center}
    
    p#pc {margin-top:86px;margin-left:10px;}
    
    
    #pp{font-size:11px;
    	color: orange;
    	font-weight:bold;
    	text-decoration: none;
          border:none
    }
    
    #pc{font-size:12px;
    	color: white;
    	font-weight:bold;
    	text-decoration: none;
          border:none
    }
    
    #foot{font-size:14px;
    	color: yellow;
    	font-weight:bold;
    	text-decoration: none;
          border:12px
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I actually think it used to be
    Code:
    #wrap {
    width:970px;
    margin:auto;
    }
    What it does is center the layout and keeps it a width of 970px or 97px (which seems to be a mistake). If you add a background color to #wrap with its current 97px width you'll see that it doesn't contain your whole layout but the other divs are larger than 97px and have no place to go. #intro + #main = 970 btw. Without the #wrap CSS in place your layout will never center in the users browser. I also advise that you remove this line
    Code:
    <?xml version="1.0"?>
    as its putting IE6 in quirksmode and will probably make your layout look broken in IE6 in the future.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I actually think it used to be
    Code:
    #wrap {
    width:970px;
    margin:auto;
    }
    What it does is center the layout and keeps it a width of 970px or 97px (which seems to be a mistake). If you add a background color to #wrap with its current 97px width you'll see that it doesn't contain your whole layout but the other divs are larger than 97px and have no place to go. #intro + #main = 970 btw. Without the #wrap CSS in place your layout will never center in the users browser. I also advise that you remove this line
    Code:
    <?xml version="1.0"?>
    as its putting IE6 in quirksmode and will probably make your layout look broken in IE6 in the future.
    Hello Aerospace Eng,

    I altered the 970 to 97 to see what it would do. I have tried running the whole of my site with the #wrap code removed and using Firefox and IE7 there is no visible difference. Everything stays in the same place.

    I will remove the code you suggest, and I will re-instate the #wrap code, but I would still like to know why it seems to be dorment.

    I have been trying to get the index page so that there is no need to scroll sideways to see the whole picture. How can I do this.

    Many thanks for your help and explanations.

    effpeetee

    www.exitfegs.co.uk
    Last edited by effpeetee; 05-21-2007 at 09:51 AM. Reason: Spelling!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not dormant. It centers the layout. If you are on a 1024x768 resolution you aren't going to really see it center. Reduce the width of #main and reduce the width of #wrap to equal the width of #main + #intro. You will then see that it centers the layout. To not have a scrollbar you will need to follow the layout here http://bonrouge.com/2c-hf-fluid.php

    Also for this to work you will need to set the width of the image in a percentage. Just be aware if you do this then you will end up with pixelated images on larger resolutions. You won't be able to get rid of the scrollbar if you keep the images at fixed size.

    Also quit posting your link in every post you make. It seems like you are spamming. If you want to have your link on every post then put it in your signature under the user CP.
    Last edited by _Aerospace_Eng_; 05-21-2007 at 10:24 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you again, but I think I'll leave it the way it is.

    Chicken, that's me!

    effpeetee


  •  

    Posting Permissions

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