1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Vertical expendable and unbreakable css design without using tables

Discussion in 'Web Development' started by Mimoun, Jul 1, 2005.

  1. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Vertical expandable and unbreakable css design without using tables

    Here I will explain how to make a vertical expandable and unbreakable css design without using tables.

    We will be using the CSS attribute float.
    A div layer can float left or right.

    We will be using a 2 column design but you can do this with a 3,4 and more column too by just nesting one div in another.
    first create the framework for the HTML file
    PHP:
    <!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>
    <
    title>Vertical expendable and unbreakable CSS design </title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </
    head>
    <
    body>
    <
    div id="central">
        <
    div id="header">
            <
    h1>Header</h1>
        </
    div>
        <
    div id="content">
            <
    div id="leftside">
                <
    p>Test text test 1 2 3</p>
                <
    p>Test text test 1 2 3</p>
            </
    div>
            <
    div id="rightside">
                <
    p>Test text test 1 2 3</p>
                <
    p>Test text test 1 2 3</p>
                <
    p>Test text test 1 2 3</p>
            </
    div>
            <
    div id="footer">footer</div>
        </
    div>
    </
    div>
    </
    body>
    </
    html>
    The first thing to make on your CSS file will be the to all standard settings for all elements on 0px.
    HTML:
    * {margin:0px;padding:0px;top:0px;left:0px;}
    than give your body a background color:
    HTML:
    body{background-color:#CCCCCC;}
    Now we will make a div that will be in the center of the screen.
    It is important that you give this div the same background as your column that will be used on the left side and a background image that will be used for the column on the right side.
    HTML:
    #central{
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	width: 780px;
    	text-align: left;
    	background-color: #FFFFFF;
    	background-image: url(background.gif);
    	background-repeat: repeat-y;
    	background-position: right top;
    }
    
    Now make a header:

    HTML:
     #header{
    	background-color: #26618d;
    	height: 100px;
    	width: 780px;
    	left: 0px;
    	top: 0px;
    }
    And the leftside with a float left:
    HTML:
    #leftside{
    	float: left;
    	width: 460px;
    	background-color: #fff;
    }
    
    and the rightside it's important that you set the backgound to transparnt as we will be using the background from the #central DIV
    HTML:
    #rightside{
    	float: right;
    	width: 316px;
    	background-color: transparent;
    }
    
    And the footer very important set clear to both:
    HTML:
    #footer{
    	clear: both;
    	background-color: #88a905;
    	position: relative;
    	height: 30px;
    }
    
    That's all you can download the code in the attachment.
    If you have downloaded it try to add a lot of content in one of the columns and you will see that the design does not break but expands.
     

    Attached Files:

  2. christiest

    christiest New Member

    problem nesting another column and directing info.

    Hello Mimoun,

    I've downloaded your code for creating an unbreakable css template and I'm trying to add another central column but failing miserably.
    Could you possibly add another column and send me example code please.
    Also, I'm planning on having a nested menu on the left hand column which will populate the central column with the 3rd(right hand column) being used for helpful notes on the main subject.
    I would be grateful if you could show me how I can i) direct info to the central column after choosing an option from the menu and ii) directing the helpful notes to the right hand side column.
    I'd apprectate any help you can give on this matter.
    Thanks,
    Stephen
     
  3. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    I will create a new one for you with 3 columns.

    You direct info into a column by creating a new html file, put the info in the column and linking to it from the mainpage.
    This is the code for using links.
    Code:
    <a href="http://www.example.com/mypage.html">click here for info</a>
    
     
  4. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    I have made the 3 columns layout for you.
    It's important if you change the colors or width to change the background images color or width.
     

    Attached Files:

  5. christiest

    christiest New Member

    Thanks for the example Mimoun.
    In your code the links from the left hand menu open the target in a new browser. Is there any way of opening the target in the middle column? I can do this in frames quite easily but I'd like to use CSS to handle the template. Is it a case of having the target as
    <a href="http://www.example.com/mypage.html" "target=rightside">click here for info</a>
     
  6. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    To open the link in the same page use this:
    Code:
    <a href="http://www.example.com" target="_self">link</a>
    There is no need to use any frames, just copy the page to make any new page.
    Using frames was good in the early days of the internet, because the internet was very slow.
    Now you don't need to use it anymore, because of these 3 reasons:
    1 - The internet is much faster now.
    2 - You're using an external CSS file which makes your pages very small.
    3 - It's not good for search engines they get lost in your frames.
     
  7. christiest

    christiest New Member

    Mimoun, the url link <a href="http://www.example.com" target="_self">link</a> from the left hand menu is still not opening up in the centre column. But maybe this is not possible...or practical. Also I noticed in the css file that you reference a #wrapper and also use background images. Can you explain why.....or are you just demonstrating how they can be used?
     
  8. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Opening something in the center is not practical, but possible you could use inline frames, but I recommend you not to use them.
    It's better to open new pages for different content.

    The #wrapper and background images are needed to make the background of every column appear continuous while in fact they’re not.
    If you don't need the background to appear continuous you can remove the background images.

    Check the design back when you have removed the background images and you will see why I used it.
     
  9. christiest

    christiest New Member

    Mimoun, what I'm looking to create is a static menu on the left which populates both the centre and right hand columns with data depending on what menu item was clicked on. I can understand that if one of those links pointed to an external site it would open another browser or fill the browser already open but for 'internal' links I would hope to direct this data into the middle and right hand columns. Actually what you use on this site would be almost exactly what I'm after as you have a 'static' area on top which directs data into the main area below. You with me?
     
  10. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    If that's what you want you will have to use an inline frame.
    On this site we don't use any frames.
    It looks like the header is static but it's a dynamic header it loads so fast that it almost looks like the header didn't reload but it's a new page with a new header.

    I will see if I can make a new one for you by tomorrow with more pages and one with inline frames.
     
  11. christiest

    christiest New Member

    Mimoun, I'd really appreciate it if you could create a template for me now you know what I'm after. Thanks
     
  12. Mimoun

    Mimoun Administrator Staff Member Director Verified Member