Grow your CSS skills. Land your dream job.

XHTML/CSS Layout help.

  • # November 1, 2009 at 1:00 am

    Hello everyone! I am new to this site and new to CSS! but this is the site I was looking for! :) Welcome everybody :)

    I have been designing web interfaces in Photoshop for quite a while, I have stopped for couple a months and now I am trying to go back into designing but would also like to learn how to code my interfaces after. I am not an expert at html nor at css. I know more then basics and I try to learn as I go :)

    So coming back into designing, I have designed a very simple web interface in order for me to start on coding for the first time. So I got stuck with some problems, I know they shouldn’t be a problem for you, more experienced coders :) So according to my attached preview of the layout, you can see that it has a background with a little simple logo and 2 buttons. you can see a little rounded glare on top center of the background and a little gradient that is stretched on the top of the layout.

    My question is, how do I begin coding a background, that top middle glare, and a starched gradient, to make it look like on the preview?

    [img]http://img42.imageshack.us/img42/1066/gtportfolio.th.jpg[/img]

    This is what I have right now:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    and

    Code:
    @charset “utf-8″;
    /* CSS Document */

    body { padding:0px; margin:0 auto; background: url(images/bg.jpg) repeat; font-family: Verdana, Geneva, sans-serif; font-size:10px; color:#FFFFFF; text-align: center;}
    #container { padding:0px; margin: 0 auto; width:700px;}
    #header { padding:0px; margin:0 auto; background: url(images/topbg.jpg) top no-repeat; height: 200px; text-align: center;}
    #logo { padding: 30px 0px 0px 5px; margin:0 auto; float:left;}

    Thank you guys ;)

    P.S. Actually I could use more help into actually coding everything thats on that preview. I just tried to code more and I have no idea where to begin :/ It makes me mad…

    # November 1, 2009 at 1:00 pm

    It looks like you’re off to a good start. I’m not sure what your "topbg.jpg" and "bg.jpg" look like. so maybe you’re already doing this. but, since your header stretches the width of the browser, cut a vertical slice of your gradient, and repeat that image to make that gradient across the top. then use a single image of the rounded gradient in the middle as a background for a div that’s centered within the header. Also you would probably want your body the color of that dark gray. You might be able to create the line across the header and footer playing around with top and bottom border properties.
    anyway, just a few ideas, hope they help in some way.

    # November 1, 2009 at 1:43 pm

    bg.jpg is the main bg.
    bgtop.jpg is the top middle glare.

    and I have a topbgstretch.jpg that is suppose to stretch on top x axis but I don’t know how to do that. Every time I try I can only get 2 bg to work.

    P.S. Haha well I actually tried to skip the background for now and continue with the other parts, and hah, I have no idea how to get the other parts going. I would need a deeper help :P

    # November 2, 2009 at 2:04 am

    Hi, XHTML/CSS is very important for website design mainly css is must important to develop website.

    Thanks
    Ayesha

    # November 2, 2009 at 3:21 am
    "sharonware" wrote:
    Hi, XHTML/CSS is very important for website design mainly css is must important to develop website.

    Thanks
    Ayesha

    I know that ;) How is that answering my problem though? :p

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".