HTML design assistance

Discussion in 'Web Design and Development' started by AppleNewton, Jun 11, 2008.

  1. AppleNewton macrumors 68000

    AppleNewton

    Joined:
    Apr 3, 2007
    Location:
    1 Finite Place
    #1
    Iam building a simple HTML site for alittle project I want to do. and have a few things iam not 100% familiar with that i wanted to accomplish.

    1)
    [​IMG]

    I'm trying to get the Links on the right to show up on the left in the Black content boxed area; without changing pages or using frames.
    I remember doing something like th is awhile ago but not remembering how to fully code it.
    I want to avoid flash as much as possible (i can accomplish this easy in flash just not direct HTML code)

    if it helps Iam using Dreamweaver as well.



    2nd)
    [​IMG]

    This gradient background image is being used in a Table and I just want it only to Repeat horizontally. None of the background repeat codes I used worked in the table.


    if anyone has any advice on how to accomplish these, id be more than grateful

    thank you!
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    You mean you want content to show up on the left when a link is clicked on the right? Your question made it sound like you want the LINK to move! Please clarify.

    Without using Flash or frames:

    In the head portion of your HTML page:

    HTML:
    <link rel="stylesheet" type="text/css" href="default.css" />
    
    <script language="JavaScript">
    <!--//
    
    function UpdateContent(mycontent) {
      document.getElementById('content').innerHTML=mycontent;
      return false;
    }
    
    //-->
    </script>
    
    
    
    In the body of your HTML:

    HTML:
    <div id="content"></div>
    <div id="mylink"><a href="#" onClick="return UpdateContent('Hello World');">Link Title</a></div>
    
    [B]Create an external stylesheet named default.css  (simple example):
    [/B]
    [HTML]div#content {
    
    background-color: black;
    width: 200px;
    height: 200px;
    color: white;
    
    }
    
    #mylink a {
    	color: black;
    	position:absolute;
    	top: 0px;
    	left: 210px;
    }
    
    
    Get the idea?

    When a user clicks on the link, a JavaScript function is called with your content passed to it as an argument. The div's default content is replaced with your content. Obviously this is just an example, if your content is sizable, define it in a separate variable. If the content is huge, you might want to create a hidden div at the same position as the first div, set it's z-index set to 2 in the CSS, and simply unhide it on the click event. There are many ways, this is just a simple solution to inspire you to research further how to use JS to affect div's based on their ID's.

    If this doesn't help you, we need to see your source please. For #2 in your list the source would be most helpful anyway.

    -jim
     

Share This Page