www.webdeveloper.com
Results 1 to 10 of 10

Thread: css layout

  1. #1
    Join Date
    Dec 2002
    Posts
    213

    css layout

    Hi
    I have this website in frames, and I am planning to move it to css. I have redone the index page here, but as you can see, I have problem with the left navigation. In FF, it looks fine like original, but in IE, there is too much space between the list items.
    Also, any way to remove the browser scrollbar?
    Attaching both htm and css file in zip format.
    Any and all help is appreciated.
    Thanks
    Attached Files Attached Files

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  3. #3
    Join Date
    Dec 2002
    Posts
    213
    hi
    thanks, tried both the _height and whitespace rules, both worked and have gone with _height rule. Better to do in css than in html, I think. Is this OK? How do I check for validation?
    thanks.

  4. #4
    Join Date
    Mar 2006
    Posts
    227
    I use the height rule too. I think it gets to confusing for editing to break up the <li> tags like that.

    I'm not sure what you mean by validate? You just want to validate your HTML/CSS?

  5. #5
    Join Date
    Dec 2002
    Posts
    213
    yes, just validate html and css.

  6. #6
    Join Date
    Mar 2006
    Posts
    227
    Just use the W3C's validators:

    CSS: http://jigsaw.w3.org/css-validator/

    HTML: http://validator.w3.org/

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Site is coming along nicely.

    I noticed that you desperately need either some margin-top or padding-top here to get the links away from the event horizon of the overflow scrolling window (see attached image).

    It is like this in both Firefox and IE...
    Attached Images Attached Images

  8. #8
    Join Date
    Dec 2002
    Posts
    213

    some edits - problems in IE and FF

    Hi
    Quote Originally Posted by WebJoel
    Site is coming along nicely.
    Thanks

    I have tried to change some css settings, and it looks OK(not exact) in FF, but in IE, not good at all.
    Check the site here.
    You will notice in FF, the positioning is OK, except that the heading inside the content has to be in the middle, but it appears fine in IE.
    Now IE has more trouble with this:
    • The top banner is sticking to the content.
    • There is a horizontal scrollbar too, which I do not want.
    • The content does not go all the way to the end like it does in FF.


    This is the css code(only positioning, not whole file):
    Code:
    /* position CSS */
    .bnr { /* top banner */
    	position: fixed;
    	height: 10%;
    	top: 0;
    	left: 30%;
    	padding: 0 0 10px 0;
    }
    #nav { /* left navigation list */
    	position: fixed;
    	left: 10px;
    	top: 10%;
    	width: 110px;
    	height: auto;
    }
    #rgtcont { /* the main content trbl */
    	position: absolute;
    	top: 10%;
    	bottom: 200px;
    	left: 120px;
    	width: auto;
    	height: 450px;
    	overflow: auto;
    	padding: 10px 10px 10px 10px;
    	text-align:justify;
    	border-width: 2px 0 2px 4px;
    	border-style: ridge solid ridge groove;
    	border-color: mediumorchid;
    }
    
    #btm { /* the bottom links etc.*/
    	position:absolute;
    	padding: 15px 0 -5px 0;
    	width: auto;
    	left: 150px;
    	bottom: 0;
    	text-align:center;
    }
    The htm code has also changed, if you guys need that too?
    Any thoughts?
    thanks

  9. #9
    Join Date
    Dec 2002
    Posts
    213
    hi
    Any ideas guys? My site is stuck to the index page right now

  10. #10
    Join Date
    Dec 2002
    Posts
    213
    Hi
    Finally completed and uploaded the website. Check it at http://freehost14.websamba.com/netdzigns/.
    thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles