SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with first steps on CSS

    I just tried to implement something with CSS. The result is not bad. You can see it at:

    https://decebalcomputing.xs4all.nl/demo/

    There are two real problems with it.

    1. I have implemented he header with a table. How can I do this without a table?

    2. I would like the colour of the menu (or sidebar) to continue untill the bottom of the window. How can I do this?


    There is also one minor problem. I use onMouseOver and onMouseOut with every button. Is there a way to get this also in CSS?

    Thanks in advance.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see any tables in here. Did you modify the page since you posted this thread?

    Also, for a header, I tend to do this:

    Code:
          <div id="header">
       	<div id="headerLogo">&nbsp;</div>
       	<h1>SMS versturen</h1>
       	<div id="header-company">Bedrijf: <strong>Decebal Computing</strong></div>
       	<div id="header-user">Gebruiker: <strong>Cecil</strong></div>
       	</div>
         </div>
    And then use CSS to call up the background image and position the content around it.

    As for the background color of a menu or sidebar, set the background color of the BODY to that value, and then assign a different color to the other page elements.

    If you are using JavaScript for the rollover effects, you can simulate it using CSS by using the following rules:

    Code:
       a:link {background-color: (default color value); color: (default color value);}
       a:hover {background-color: (hover color value); color: (hover color value);}
    Of course (default color value) and (hover color value) would be the values of the colors you want to use.

    Example:
    Code:
      a:link {background-color: white; color: black;}
      a:hover {background-color: red; color: blue;}
    would get you an initial background color of white, with black text, while hovering over the menu will give you a red background with blue text.

    You can do the same with images as well. Just be sure to use background-image: url(path/to/image.jpg); when using images. However, when using images, be sure to specify exactly what the height and width of the link elements are (so the background images work). Declaring each link to be a block-level element (display: block;) will also help.


Bookmarks

Posting Permissions

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