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 11 of 11
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can I do this with CSS?

    Good Morning Everyone,

    The attached jpeg is an example of a page-style I would like to manage my site with. I don't know how to prepare a CSS for it though... If I can use just a table structure or if I have to use frames. duhhh,
    I wonder if someone might help me out...

    The "Header", "Footer", and "Menu Buttons" parts don't need to change, but the various button selections will call different html files for the "Documents" part, and if I can get away with it, I'll use animated GIFS for the "red" box just to even things visually. ( Otherwise there will be a chunk of wasted white space there)

    Anyone??

    many thanks,
    Paul
    Attached Thumbnails Attached Thumbnails Can I do this with CSS?-csswishshape.jpg  
    Last edited by jPaul; 05-31-2005 at 03:32 PM.

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

  • #3
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    That's possible with css - it shouldn't be too *hard* to do

  • #4
    New Coder
    Join Date
    Apr 2005
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Nancy and weazel...

    I'll study that page you've sent Nancy, and see if I can make sense of it enough to modify it. I am so much further ahead and I appreciate your lead.

    Regards,

    Paul

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    Its a pretty indepth tutorial, though their nav column is on the right not the left but its easy enough to switch them around

  • #6
    New Coder
    Join Date
    Apr 2005
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Nancy,

    I'm lost already...
    I don't know which parts belong in a *.css file, and which parts will belong in the *.shtml files.
    I'll wander around that site and find a simpler example and then perhaps graduate to fooling with the code

    Thanks
    Paul

  • #7
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    anything that looks like

    #name {
    property:value;}


    goes in the css, the

    <div id = "name"></div> etc goes in the html page

  • #8
    Regular Coder
    Join Date
    May 2005
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here you go


    this is index.htm
    Code:
    <html>
    <head>
    <title>call it what ever you want</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <table width="228" height="258" border="1">
      <tr>
        <td height="43" colspan="2" class="head">&nbsp;</td>
      </tr>
      <tr>
        <td height="116" class="menu">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td height="63" class="links">&nbsp;</td>
      </tr>
      <tr>
        <td height="24" colspan="2" class="head">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

    and this as style.css
    Code:
    /* CSS Document */
    
    body {
    		background-color: #CCCCCC;
    		font-family: tahomha;
    		}
    
    table {
    		background-color: #FFFFFF;
    		}
    		
    td.menu {
    		background-color:#00FFFF;
    		border: 1px;
    		}
    		
    td.head {
    		background-color:#FFFF00;
    		border: 1px;
    		}
    		
    td.links {
    		background-color:#99FF00;
    		border: 1px;
    		}

  • #9
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    ::raises eyebrow at table layout::

  • #10
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    A two column with footer and header layout is an easy design with CSS. I use it all the time.

    Google a guide or follow the link Nancy posted.

  • #11
    New Coder
    Join Date
    Apr 2005
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that code, muhaidib.
    (Cool nick... makes me think of spice)
    You've provided code that I can understand and therefor get a whole lot closer to what I want to do..... eventually.
    Now, can I... (and how do I)... format the "table-structure details" in the CSS document? Most of those details will be static, such as the "Header" and "Footer" images... even the javascript code for the menu will always be in the same table-cell.
    I'm thinking that if I can place all of that stuff (that will never change)in the CSS file, then each of the html pages need refer only to the CSS and then the calls to fill the "animated GIF" and documents page parts.
    Do I have the right idea?
    Attached Thumbnails Attached Thumbnails Can I do this with CSS?-csswishshape.jpg  


  •  

    Posting Permissions

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