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

Thread: Complex Table

  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Complex Table

    I want to convert this "complex" table to div/CSS, but cant find any good tutorials or help.


    Code:
    <table align="center">
    <tr>
    	<td>1</td>
    	<td>2</td>
    	<td>3</td>
    	<td>4</td>
    </tr>
    <tr>
    	<td colspan="3">Here</td>
    	<td>There</td>
    </tr>
    <tr>
    	<td rowspan="2">Mainmenu</td>
    	<td colspan="3">Picture</td>
    </tr>
    <tr>
    	<td colspan="2">Mainarea</td>
    	<td>Menyright</td>
    </tr>
    <tr>
    	<td colspan="4">Footer</td>
    </tr>
    </table>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floats

    Without any additional info it's hard to say anything conclusive, but it seems like a number of current CSS layout techniques can be combined to achieve such a layout; there will primarily be a lot of floating going on.
    You could take a look at some of the layouts described in BonRouge's CSS layouts and take it from there.

    Could you indicate with a little more detail what the various sections are going to be used for, and what sort of dimensions you expect them to take on?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    on http://samarbeidsutvikling.no/ss is the page i want to change.

  • #4
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or maybe there is an entyerly differet and better way of coding that layout. The pictures dont have to be cut up in pices. That big picture of the two cyclist might be one large on...

    Idealy the code should be as flexible as possible, so that i can cange the layout only by editing css. But it has to have these areas in their own div (editable by CMS system): Left and right meny, Topmenu, main content area, footer, mainpicture, mainlogo.

    Maybe this is easyest with possition: absolute??!?!

    Because that crappy webhotel/e-commerce company i have to use, doesent allow us to cange the HTML by ourself, only the css document. THEY have to put the html in the code.

    im working on: http://samarbeidsutvikling.no/ss/new but i think it is a bad solution... but flexible.
    Last edited by ReservePhilipp; 10-24-2006 at 02:13 PM.

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Hi!

    Don't know about the images, but a barebones layout of the page would be as follows. You would have to separate the CSS from the html for your site, though:
    Code:
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    body {width: 100%; margin: 0 px; border: 0px;}
    
    div#content {float: left; width: 100%; margin: 5px;}
    div#header {float: left; width: 100%; height: 70px; border-bottom: 1px solid;}
    div#searchbar {float:left; width 100%; height: 40px; background: url("searchbarimage.jpg");}
    div#imagebar {float:left; clear:right; width: 100%; height: 200px;}
    div#menyher {float:left; clear:right; width: 25%; height: 25px; background: img: blueimage.jpg; border: 1px solid;}
    div#photo {margin-left: 25%; width: 75%; height:150px; border:1px solid; background: url ("myimage.jpg");}
    div#hovedomrade {float: left; margin-left: 25%; width: 100%; height: 25px; }
    div#address {float: left; width: 100%; height: 15px; border: 1px solid;}
    div#mainpane {float: left; width: 100%;}
    
    </style>
    <body>
    <div id="content">
    
    <div id= "header">
    <img src="companyname.jpg" height="70px" width="50%" alt= "header">
    </div>
    <div id= "searchbar">
    The search engine, topmenu come here, The search engine, topmenu come here, The search engine, topmenu come here,
    </div>
    
    <div id="imagebar">
    
    <div id="menyher">
    MENY HER
    </div>
    
    <div id="photo">
    Here's where the photo comes
    </div>
    
    <div id="hovedomrade">
    Hovedomrade
    </div>
    
    
    <div id="address">
    The address and navbar come here
    </div>
    
    <div id="mainpane">
    Main pane content comes here
    </div>
    </div>
    </div>
    </body>
    
    </html>

    Have fun!


  •  

    Posting Permissions

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