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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    New to css/html - can a button change centre div?

    Hi all

    Just a newbie question, i am trying to design a web page for a local restaurant, it is quite basic, but i at present have 3 floating columns, one with a strip of "menu" buttons ie. appetisers, main, etc etc, and there is a centre column which has the main course descriptions.

    At the Moment i just wondered if someone can point me in the direction of where i need to go. I want to be able to click the buttons on the left column and only have the centre container/column load the relevant meals.

    Im not sure if this is even done with css, but thought id rack your brains.

    I will try to upload the site tonight for anyone that wants to deliver constructive comments, and also post the code (whcih i think is messy and long-winded), but gradually training via Lynda.com which is very helpfull.

    Thanks for any help in advance

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    The normal way to do this is to actually have a separate page for appetizers, main, etc, each having the three columns, including the "menu" buttons and their specific descriptions in the center. Clicking the buttons brings up the entire page with new descriptions. It will appear that the buttons don't change because of browser caching, it is not something you should (IMO) manage yourself via the concept of "just change the center column when I click the button".

    Good luck with the project!
    Dave

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for the advice Tracknut, really trying to learn this stuff, and will hopefully be able to show how far ive got so far, even though its probably nothing on what some of you guys can do.

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This can be done with a basic show/hide script. You can have your buttons and each button links to its own 'linked' div content. The content is hidden until the the button is clicked.

    Check out http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm you might want to disable the hover action, not sure.

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    
    #container {
    	width: 964px;
    	margin: 0 auto;
    
    	
    }
    
    
    #primary {
    	
    	float: left;
    	width: 190px;
    	height: 650px;
    
    	
    }
    
    
    #primary ul {
    
    float:left;
    list-style-type: none;
    
    
    }
    
    #content {
    
    	float: left;
    	width: 500px;
    	height: 650px;
    	margin:  10px 0px 20px 10px;
    	font-family: Century Gothic, sans-serif; font-size: 16px; line-height: 1.75em;
    	padding:5px;
    	width:500px;height:650px;
    
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    -webkit-box-shadow: #B3B3B3 13px 13px 13px;-moz-box-shadow: #B3B3B3 13px 13px 13px; 
    box-shadow: #B3B3B3 10px 10px 10px;
    overflow:auto;
    
    
    	
    }
    
    
    
    .floatbox  {
    
    float: right;
    width: 160px;
    border:none;
    height:500px;
    margin-top: 100px;
    margin-left:5px;
    
    }
    
    .floatbox p {
    
    float: left;
    margin-top:30px;
    border:2px solid #05000D;
    padding:2px;
    
    }
    
    
    
    
    .inlineprice   {
    
    float:right;
    
    }
    
    
    .inlinekey  {
    
    color:red;
    
    }
    
    
    .menuset ul   {
    
    margin:0 auto;
    list-style-type: none;
    padding-right:5px;
    font-family: arial, serif;
    
    }
    
    .menuset li   {
    
    
    margin: 2em 0;
    font-weight:bold;
    font-family:  Trebuchet MS1, Trebuchet MS, sans-serif;
    
    }
    
    
    .menuset h1  {
    
     margin-left:42px;
    font-size: 20px;   
    text-decoration: underline;
    text-shadow: 0.1em 0.1em 0.1em grey;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    
    }
    
    .menuset h2   {
    
    margin-left:42px;
    font-size:14px;
    font-family: "Book Antiqua", Palatino, serif;
    font-style:italic;
    
    }
    
    
    .mealdescription  {
    
    font-style:italic;
    font-size:14px;
    font-weight:100;
    
    }
    
    
    
    
    
    #secondary p {
    
    font-family: comic sans, Century Gothic, sans-serif;
    margin-bottom: 0px;
    
    }
    
    
    #secondary {
    
    font-family: comic sans, Century Gothic, sans-serif, font-size: 16px;
    float: right;
    width: 235px;
    margin: 10px 0px 0px 0px;
    height: 660px;
    width: 235px; height:660px;
    
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    -webkit-box-shadow: #B3B3B3 13px 13px 13px;-moz-box-shadow: #B3B3B3 13px 13px 13px; 
    box-shadow: #B3B3B3 10px 10px 10px;
    text-align: center;
    font-weight: bold;
    
    
    
    }
    
    #order  {
    
    height:430px;
    width:200px;
    line-height:.25em;
    margin: 0px 15px 10px;
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#f8fbc8;
    
    }
    
    
    
    
    
    
    #details  {
    
    line-height:.13em;
    margin: 0px 38px 10px;
    width: 150px; height:155px;
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    
    }
    
    
    
    
    
    #footer {
    
    text-align:center;
    font-family: courier; color: #66666a;
    clear: both;
    border: none;
    line-height: .25em;
    
    }
    
    .boldclass   {
    
    font-weight: bold;
    
    }
    
    
    
    .redclass   {
    
    font-weight: bold;
    font-decoration: underline;
    font-family: courier; color: #f8091f;
    font-size: 18px;
    
    }
    
    
    .button {
    
    border-top: 1px solid #000203;
    margin-left: -40px;
    margin-bottom:5px;
    
       background: #b7b9f7;
       background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#b7b9f7));
       background: -webkit-linear-gradient(top, #ffffff, #b7b9f7);
       background: -moz-linear-gradient(top, #ffffff, #b7b9f7);
       background: -ms-linear-gradient(top, #ffffff, #b7b9f7);
       background: -o-linear-gradient(top, #ffffff, #b7b9f7);
       padding: 7px 5px;
       -webkit-border-radius: 7px;
       -moz-border-radius: 7px;
       border-radius: 7px;
       -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
       -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
       box-shadow: rgba(0,0,0,1) 0 1px 0;
       text-shadow: rgba(0,0,0,.4) 0 1px 0;
       color: #000000;
       font-size: 12px;
       font-family:  tahoma, Geneva, sans-serif;
       text-decoration: none;
       vertical-align: middle;
    font-weight: bold;
    
       }
    
    
    
    .button:hover {
    
       border-top-color: #6e6f9e;
       background: #6e6f9e;
       color: #ffffff;
    
       }
    
    
    .button:active {
       border-top-color: #ededed;
       background: #ededed;
    
       }

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    and the actual website can be found at thetechhub.co.uk, which is just a test address, the site is very very basic, as im just trying things, all comments welcome, good or bad.

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    My very first try a coding - comments welcome - good or bad

    I have only just started HTML and CSS, I have started trying to setup a site which can be found at thetechhub.co.uk, I'm hoping people can have a quick look and let me know their views, as I feel this will help me go in the right direction. As I've said it is very very basic, and looks terrible compared to what you guys are probably capable of.

    Thanks

    Code:
    Code:
    
    #container {
    	width: 964px;
    	margin: 0 auto;
    
    	
    }
    
    
    #primary {
    	
    	float: left;
    	width: 190px;
    	height: 650px;
    
    	
    }
    
    
    #primary ul {
    
    float:left;
    list-style-type: none;
    
    
    }
    
    #content {
    
    	float: left;
    	width: 500px;
    	height: 650px;
    	margin:  10px 0px 20px 10px;
    	font-family: Century Gothic, sans-serif; font-size: 16px; line-height: 1.75em;
    	padding:5px;
    	width:500px;height:650px;
    
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    -webkit-box-shadow: #B3B3B3 13px 13px 13px;-moz-box-shadow: #B3B3B3 13px 13px 13px; 
    box-shadow: #B3B3B3 10px 10px 10px;
    overflow:auto;
    
    
    	
    }
    
    
    
    .floatbox  {
    
    float: right;
    width: 160px;
    border:none;
    height:500px;
    margin-top: 100px;
    margin-left:5px;
    
    }
    
    .floatbox p {
    
    float: left;
    margin-top:30px;
    border:2px solid #05000D;
    padding:2px;
    
    }
    
    
    
    
    .inlineprice   {
    
    float:right;
    
    }
    
    
    .inlinekey  {
    
    color:red;
    
    }
    
    
    .menuset ul   {
    
    margin:0 auto;
    list-style-type: none;
    padding-right:5px;
    font-family: arial, serif;
    
    }
    
    .menuset li   {
    
    
    margin: 2em 0;
    font-weight:bold;
    font-family:  Trebuchet MS1, Trebuchet MS, sans-serif;
    
    }
    
    
    .menuset h1  {
    
     margin-left:42px;
    font-size: 20px;   
    text-decoration: underline;
    text-shadow: 0.1em 0.1em 0.1em grey;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    
    }
    
    .menuset h2   {
    
    margin-left:42px;
    font-size:14px;
    font-family: "Book Antiqua", Palatino, serif;
    font-style:italic;
    
    }
    
    
    .mealdescription  {
    
    font-style:italic;
    font-size:14px;
    font-weight:100;
    
    }
    
    
    
    
    
    #secondary p {
    
    font-family: comic sans, Century Gothic, sans-serif;
    margin-bottom: 0px;
    
    }
    
    
    #secondary {
    
    font-family: comic sans, Century Gothic, sans-serif, font-size: 16px;
    float: right;
    width: 235px;
    margin: 10px 0px 0px 0px;
    height: 660px;
    width: 235px; height:660px;
    
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    -webkit-box-shadow: #B3B3B3 13px 13px 13px;-moz-box-shadow: #B3B3B3 13px 13px 13px; 
    box-shadow: #B3B3B3 10px 10px 10px;
    text-align: center;
    font-weight: bold;
    
    
    
    }
    
    #order  {
    
    height:430px;
    width:200px;
    line-height:.25em;
    margin: 0px 15px 10px;
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#f8fbc8;
    
    }
    
    
    
    
    
    
    #details  {
    
    line-height:.13em;
    margin: 0px 38px 10px;
    width: 150px; height:155px;
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    
    }
    
    
    
    
    
    #footer {
    
    text-align:center;
    font-family: courier; color: #66666a;
    clear: both;
    border: none;
    line-height: .25em;
    
    }
    
    .boldclass   {
    
    font-weight: bold;
    
    }
    
    
    
    .redclass   {
    
    font-weight: bold;
    font-decoration: underline;
    font-family: courier; color: #f8091f;
    font-size: 18px;
    
    }
    
    
    .button {
    
    border-top: 1px solid #000203;
    margin-left: -40px;
    margin-bottom:5px;
    
       background: #b7b9f7;
       background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#b7b9f7));
       background: -webkit-linear-gradient(top, #ffffff, #b7b9f7);
       background: -moz-linear-gradient(top, #ffffff, #b7b9f7);
       background: -ms-linear-gradient(top, #ffffff, #b7b9f7);
       background: -o-linear-gradient(top, #ffffff, #b7b9f7);
       padding: 7px 5px;
       -webkit-border-radius: 7px;
       -moz-border-radius: 7px;
       border-radius: 7px;
       -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
       -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
       box-shadow: rgba(0,0,0,1) 0 1px 0;
       text-shadow: rgba(0,0,0,.4) 0 1px 0;
       color: #000000;
       font-size: 12px;
       font-family:  tahoma, Geneva, sans-serif;
       text-decoration: none;
       vertical-align: middle;
    font-weight: bold;
    
       }
    
    
    
    .button:hover {
    
       border-top-color: #6e6f9e;
       background: #6e6f9e;
       color: #ffffff;
    
       }
    
    
    .button:active {
       border-top-color: #ededed;
       background: #ededed;
    
       }

  • #8
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Seems I just read this post a moment ago someplace else.......
    To answer your question. It is possible to change the content of the center div. I have an AJAX based site I once made doing this. But for what you want there is an easier way! You could easily make a one page site using anchors. And each button will bring the section up from its anchor. Since you are new to design, rather than give you the answer I would suggest you look up all the info you can on text anchors. This way you will understand what they do and how they do it. They are quite simple and exactly up the beginners alley. Not too hard yet just enough of a challenge to keep ya interested.


  •  

    Posting Permissions

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