Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Website Query (HTML/CSS)

Options
  • 06-04-2011 3:46pm
    #1
    Gavin "shels"
    Registered Users Posts: 17,963 ✭✭✭✭


    In the middle of buliding a website as part of a college assignment, basically I want green blank sides, with the middle of the page being white where all the content goes, etc...

    http://news.sky.com/skynews/

    Something similar to this, whereby they have the white on the outside and the content in the middle.

    I've done it up and it looks perfect but not sure if there's a better way, atm I have it done as a table, with 3 columns, so the left and right column are set as green with the middle column containing all the content. Is that the right way about doing this?


Comments

  • Options
    #2
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Try to use divs instead of tables for layout. Much easier to make changes among other advantages.


  • Options
    #3
    Gavin "shels"
    Registered Users Posts: 17,963 ✭✭✭✭Gavin "shels"


    tricky D wrote: »
    Try to use divs instead of tables for layout. Much easier to make changes among other advantages.

    Tried it that way, find it an absolute pain in the arse tbh.:D


  • Options
    #4
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Google div layout generator to do the legwork for you.


  • Options
    #5
    JerryHandbag
    Closed Accounts Posts: 6,543 ✭✭✭JerryHandbag


    Just a quick fix if you're not comfortable with divs and CSS

    Just have one column in the table, centre it on page, give it a certain width (700px or whatever), and set its background colour to white. Then just set the page background colour to green. Then all your content can go in that main table, and you can split it into rows or whatever.

    Edit: Or above post will work too! Probably get extra marks with CSS rather than tables :)


  • Options
    #6
    Gavin "shels"
    Registered Users Posts: 17,963 ✭✭✭✭Gavin "shels"


    Cheers, I'll get going tomorrow and report back. Poxy mountains of college assignments and tests.:mad:


  • Advertisement
  • Options
    #7
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne 


    <body style="text-align:center">
<div style="width:980px;margin-left:auto;margin-right:auto;text-align:left">
[b]YOUR CONTENT HERE[/b]
</div>
</body>


  • Options
    #8
    Gavin "shels"
    Registered Users Posts: 17,963 ✭✭✭✭Gavin "shels"


    Tis getting there now!:D Just stuck on one other part, a drop down menu in the navigation bar? Any help with this, been looking at youtube videos, etc... and just can't see to get it at all.


  • Options
    #9
    Fanny Cradock
    Registered Users Posts: 10,245 ✭✭✭✭Fanny Cradock


    You will need to use the <ul> and <li> tags.

    For example:
    <div id="The_Div_Name_You_Choose">
   
<li><a href=&#8221;#&#8221;>Home</a>
   <ul>
          <li><a href=&#8221;#&#8221;>Sub-menu 1</a></li>
          <li><a href=&#8221;#&#8221;>Sub-menu 2</a></li>
          <li><a href=&#8221;#&#8221;>Sub-menu 3</a></li>  
   </ul>
</li>

<li><a href=&#8221;#&#8221;>About</a>
   <ul>
          <li><a href=&#8221;#&#8221;>Sub-menu 1</a></li>
          <li><a href=&#8221;#&#8221;>Sub-menu 2</a></li>
          <li><a href=&#8221;#&#8221;>Sub-menu 3</a>t</li>  
   </ul>
</li>  
</div>

    You will then need to apply CSS styling. Fortunately there is plenty of stuff out there to help you. I suggest superfish. Check out the examples to see which one you like, download it and then have a play around with the code.


  • Options
    #10
    Gavin "shels"
    Registered Users Posts: 17,963 ✭✭✭✭Gavin "shels"


    Argh this poxy thing! Have it nearly working with the DIV's, just one thing is messing with me and it's getting the Navigation Bar into the centre of the page so it's inline with the banner at the top and content underneath. Tried margins, padding, etc... just can't seem to get it.:mad::mad:


  • Options
    #11
    Gavin "shels"
    Registered Users Posts: 17,963 ✭✭✭✭Gavin "shels"


    Gavin shels wrote: »
    Argh this poxy thing! Have it nearly working with the DIV's, just one thing is messing with me and it's getting the Navigation Bar into the centre of the page so it's inline with the banner at the top and content underneath. Tried margins, padding, etc... just can't seem to get it.:mad::mad:

    20 minutes after I posted this I found what was wrong, before this I had spent a couple of hours trying to firgure it.

    margin: 0 auto;

    :mad:


  • Advertisement
Advertisement