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 13 of 13
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    text area & side bar layout problem

    i'm having a problem with the legth of the pages, every page on my website is a different size and i want the side bar to move with the text area i'm not sure how to fix it, any help would be great

    Code:
    body {
         background-image: url("img/backkk9.gif");
        font-size: 10px;
        font-family:  "Verdana",Arial,Helvetica,sans-serif;
        height: 780px;
    }
    h1 {
         font-size:2.5em;
    }
    h2 {
         font-size:1.875em;
    }
    p.date {
         text-align:right;
    }
    p.main {
         text-align:justify;
    }
    a:link {
       color: #105289;
       text-decoration: none;
    }
    a:visited {
       text-decoration: none;
       color: #105289;
    }
    a:hover {
       text-decoration: none;
       color: #d31141;
    }
    a:active {
       text-decoration: none;
       color: #368AD2;
    }
    
    #wrapper {
       width: 797px;
       margin: 0 auto;
    }
    #mainbackground {
         position: relative;
         top: 10px;
        width: 797px;
        margin: 0px auto;
         height: 760px;
         border: 1px solid #CADCEB;
         background: #ffffff;
    }
    #logo {
         position: relative;
         top: 15px;
        width: 767px;
        height: 122px;
        margin: 0px auto;
         border: 1px solid #CADCEB;   
        background-image: url("img/testing1.png");
    }
    #navbar {
         position: relative;
         top: 18px;
        width: 767px;
        height: 24px;
        margin: 0px auto;
         border: 1px solid #CADCEB;   
         background: #CADCEB;   
    }
    #text {
         position: relative;
         top: 25px;
        width: 600px;
        left: 14px;
        float: left;   
        height: 568px;   
         border: 1px solid #CADCEB;
        border-right-style:none;
         background: #ffffff;
    }
    #sidebar {
         position: relative;
         top: 25px;
        width: 167px;
        left: 14px;
        float: left;   
        height: 568px;   
         border: 1px solid #CADCEB;
        border-left-style:none;    
         background: #E1EBF2;
    }
    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></title>
    <link rel="SHORTCUT ICON" href="img/favicon.ico" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
         <div id="mainbackground">
            <div id="topnavbar"></div>
            <div id="logo"></div>
           <div id="navbar"></div>   
          
    
            <div id="text">my text </div>
           <div id="sidebar">my sidebar</div>
       </div>
          </div>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you explain what exactly is wrong and what do you want to achieve? In your example sidebar is moving with the text area when scrolling the page.

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is my live website using html tables

    http://staffy-bull-terrier.co.uk/

    you will see it dont matter what size the page is the text area and side bar always level up.

    and on the css codes i have posted dont level up

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i know they look level up now but if you add the text into the page and the link into the sidebar they are miles apart

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello newtocssuk,
    I would normally suggest the faux columns method of creating equal heights but I'm not sure that will work with your table layout. See the link about tables in my signature line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello newtocssuk,
    I would normally suggest the faux columns method of creating equal heights but I'm not sure that will work with your table layout. See the link about tables in my signature line.
    yea table are a pain that why i'm trying rebuild with CSS, someone said to me adding some javascript will fix the problem but i dont know anything about javascript

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at a simple 2-column layout. It might give you something to base your re-write on.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Have a look at a simple 2-column layout. It might give you something to base your re-write on.
    when i remove the top:25px; it make the text and side bar shootting off somewhere i dont want it what a nightmare

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I didn't read your question very well the first time. Thought you were working on the live site.
    The code you've made would work but could use some adjustments.

    If you move the 2 navbars and logo out of #mainbackground then all you need is the right background image repeated on the Y axis to make your columns. Did you look at that faux columns demo?

    Try your code like this -
    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></title>
    <link rel="SHORTCUT ICON" href="img/favicon.ico" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="topnavbar"></div>
                <div id="logo"></div>
                    <div id="navbar"></div> 
            <div id="mainbackground"> 
            <div id="text">
            my text 
            <!--end text--></div>
                <div id="sidebar">
                    my sidebar
                <!--end sidebar--></div>
            <!--end mainbackground--></div>
        <!--end wrapper--></div>
    </body>
    </html>
    Code:
    body {
    	background: #f63 url("img/backkk9.gif");
    	font-size: 10px;
    	font-family:  "Verdana", Arial, Helvetica, sans-serif;
    }
    #wrapper {
    	width: 797px;
    	border: 1px solid #cadceb;
    	background: #fff;
    	margin: 0 auto;
    }
    #topnavbar {
    	height: 35px;
    	background: #f00;
    }
    #logo {
    	width: 767px;
    	height: 122px;
    	margin: 0px auto;
    	border: 1px solid #cadceb;
    	background: url("img/testing1.png");
    }
    #navbar {
    	height: 24px;
    	width: 767px;
    	margin: 0px auto;
    	border: 1px solid #cadceb;
    	background: #cadceb;
    }
    #mainbackground {
    	width: 797px;
    	margin: 0px auto;
    	overflow: auto;
    }
    	#text {
    		height: 568px;
    		width: 600px;
    		float: left;
    		margin: 0 0 0 14px;
    	}
    	#sidebar {margin: 0 14px 0 628px;}
    h1 {font-size:2.5em;}
    h2 {font-size:1.875em;}
    p.date {text-align:right;}
    p.main {text-align:justify;}
    	a:link {
    		color: #105289;
    		text-decoration: none;
    	}
    		a:visited {color: #105289;}
    		a:hover {color: #d31141;}
    		a:active {color: #368AD2;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i dont think you are understanding me i'm sorry

    the code you posted is just doing the same what my was.

    http://staffy-bull-terrier.co.uk/ <<--- that what i want but in CSS have look around all pages are differenets sizes but the text and size bar always the same

    http://staffy-bull-terrier.co.uk/Cop...ite/index.html << that your codes


    http://staffy-bull-terrier.co.uk/newwebsite/index.html <<-- just the same but i have fixed the height of the text & side bar bit

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by newtocssuk View Post
    i dont think you are understanding me i'm sorry
    But I am understanding you. You are not seeing what the faux columns does for you. It's all in the background image.

    ...old links
    Last edited by Excavator; 12-14-2010 at 04:51 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i get you now sorry

    http://staffy-bull-terrier.co.uk/Cop...ite/index.html

    im getting there

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That's looking pretty good.
    Now you need to know about the validator. See the links about validation in my signature line. Seriously, they will help you a lot.

    And your #gap ... there is no real need for an empty div to make a space like that. Remember spacer.gifs?
    Just put some margin on one of those elements instead.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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