Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    Junior Member DeepBlueTrees's Avatar
    Join Date
    Feb 2010
    Location
    Seattle
    Posts
    8
    Member #
    21143
    Hi everyone. I posted a while back asking for suggestions as to how to improve the design of my website, deepbluetrees.com. After some thinking I've decided to start off with two changes that should alter the feel of the site.

    The first is to change the background to a gradient. The issue I am having with this is that every tutorial I find gives a script for a blank css stylesheet, however I am editing the stylesheet included with the theme I am using. I have already created a vertical .png 1000px in height to use as the repeating background image. How would I implement this in the page? I believe this is the applicable section in the style.css file:
    Code:
    /* BASIC */
    *:focus{outline:none;}
    .clear{clear:both;}
    body{background-color:#2C2C29;font-family:Tahoma;font-size:11px;color:#2C2C29;}
    p{font-size:1.2em;padding:2px;margin:1px 0 15px;}
    a{color:#807D7A;}
    h2{background-color:#FFF;border-bottom:1px solid #DCDCDB;letter-spacing:-1px;font-size:24px;padding-bottom:3px;font-weight:400;margin:10px 0 3px 0;font-family:Helvetica, Georgia;}
    h2 a{font-weight:700;border:0;text-decoration:none;color:#2C2C29;display:block;}
    h3{font-size:1.8em;}
    h4{font-size:1.5em;}
    h5{font-size:1.4em;}
    h6{font-size:1.3em;}
    hr{color:#DCDCDB;background-color:#DCDCDB;height:1px;border:0px;}
    pre{width:100%; white-space:pre-wrap;}
    The second thing I would like to do is to have a static image that is always present at the bottom of the window, even when the page is scrolling down. I would want this to appear above the gradient background, but behind the content of my posts. How many pixels in length should I create this image to be, and how would I implement this using css?

    Thanks alot for your help, it is greatly appreciated.

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    the word you are looking for is fixed not static. to get the image to do what you need check out this and this. full page gradients look really really bad. also your page cuts off the content on the left. not everyone uses 20" or even 17" monitors. bring the width of the main content area down by 50px and you will still have room for the images while making the entire page left to right viewable on a wider range of screen sizes.
    Attached Images Attached Images

    while($get_it !== true){ continue; }

  4. #3
    Junior Member DeepBlueTrees's Avatar
    Join Date
    Feb 2010
    Location
    Seattle
    Posts
    8
    Member #
    21143
    1. Why do I need to include both of those CSS scripts, and where in the stylesheet should I paste this code?

    2. I know gradients can look kind of tacky and web 1.0, but hear me out. The idea is to have a static image at the bottom of the page that is the same color as the starting gradient at the top, and the further you scroll down the more defined it becomes, because the background color is changing. Maybe that won't work. I'm just not sure what to do to make the background more interesting.

    3. I've noticed the same problem on some browsers. How can I shrink the main content area down?

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    1. Why do I need to include both of those CSS scripts, and where in the stylesheet should I paste this code?
    because
    The second thing I would like to do is to have a static image that is always present at the bottom of the window, even when the page is scrolling down.
    look at the biggest names on the web and ask yourself what made them successful. it wasn't gradients. there are several articles on to much visual stimulus. you want it to look good of course but usability and content should be your focus.

    while($get_it !== true){ continue; }

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Subtle and smooth backgrounds are fine, and there's no reason they can't support usability and content. I'm guessing DeepBlueTrees wants an effect similar to the site at ThinkGeek, where a 2-color gradient blends smoothly into another image at the bottom of the page.

    I'll explain the concepts real quick.

    To make a gradient background, you'll be repeating the vertical gradient to the left and right: the x-axis. Therefore, you need to have a wrapper DIV (outside of all existing DIVs), make sure it has no margins or padding, and apply the style to it. Simply assign the background-image and set the background-repeat to, you guessed it, repeat-x. For the position, I usually set it to "top center", although the center part is redundant. For cases where the page extends beyond the 1000 pixels you've made, set the background color to the color of the bottom-most pixel.

    To get the second effect, you'll need another wrapper DIV, inside of the previous one. The attribute you're looking for is called background-attachment, and you want it set to "fixed". As far as I know, all major browsers support this. Apply a background image, position it to "bottom", and set any repeats (usually you want a repeat-x too). The size is up to you; if you can make it repeat horizontally, then the width doesn't matter. The height, of course, depends on what you want.

    Take the firebug plugin a whirl and deconstruct websites if you're curious about their inner workings. It works wonders.

    However, it looks like you can benefit from a few CSS tutorials first (seeing as you have difficulties shrinking the content area). Try a few out and see if you can work out where each selector is pointing to. It's rather difficult because you're working with a template someone else made; try experimenting with your own simple files before implementing it in this design.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #6
    Junior Member DeepBlueTrees's Avatar
    Join Date
    Feb 2010
    Location
    Seattle
    Posts
    8
    Member #
    21143
    That looks fantastic, I'd love to do something like that. I'm working through a set of XHTML tutorials but I'll start on the CSS as well.

    I suppose that dreamweaver is the best tool for editing entire CSS webpages? How much would you recommend diving into before I start learning to use the program as well?

    Thank you all for your help

  8. #7
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I say the best tool for editing CSS, or web design in general, is notepad++ (or similar; just need the syntax highlighting and tab support) and a browser. You don't need most of the tools in dreamweaver or whatnot. Just make edits and refresh. Google and blogs are always on hand if you need help.

    And the best thing is you never need to "learn" notepad!
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  9. #8
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Although, if you already have DW, it has a great css tool and will save you tons of time. Time is money right? I wouldn't buy it just for that though.

  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    idk aero. dw produces a lot of crap code. yes it is a time saver, provided you never have to go back thrue the code in say a year for a handful of changes and read thrue all the bs code dw writes. not to mention the hefty issues it has with ie and margins.

    while($get_it !== true){ continue; }

  11. #10
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I guess he's talking about the autocomplete functions and such in the CSS (text) editor, which can indeed help people, especially beginners, as they go along. But yeah, not worth the price tag; though if you've got it, might as well use it.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com