Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS XHTML/CSS Layout help.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26622
    Furiouz
    Member

    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:



    Untitled Document


    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…

    #66106
    Ranger
    Member

    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.

    #66107
    Furiouz
    Member

    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

    #66128
    sharonware
    Member

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

    Thanks
    Ayesha

    #66111
    Furiouz
    Member
    "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)
  • The forum ‘CSS’ is closed to new topics and replies.