Grow your CSS skills. Land your dream job.

Putting It Together

  • # December 21, 2009 at 12:21 am

    Hi Guys

    I’m new here :)

    I am working on a website, following a tutorial from a GFX site I have created my website in Photoshop, and now I want to move it over to Dreamweaver and actually code it.

    Here is how I have gotten my images for the site:

    http://i48.tinypic.com/mbpjqd.png

    I have made a start on the process (please let me know what you think), but also I have become stuck. I can not get the navigation buttons where I want them. My buttons are big because I have got them with the Shadows !

    I would greatly appreciate any help with this.

    Thank You.

    # December 21, 2009 at 4:57 am

    Add this to your css file:

    Code:
    #header ul {
    list-style: none;
    float: right;
    margin: -144px 125px 0 0

    }
    #header ul li {
    float: left;
    margin: 0 -60px 0 0
    }
    .clear {clear: both}

    and change your html from this:

    Code:

    to:

    Code:
    # December 21, 2009 at 7:29 am

    Thank You Jamy .. looking much better now :)

    But why aren’t my button texts showing ? also how do I get the buttons closer together ?

    Thank You

    # December 21, 2009 at 10:31 am

    Fot the button text not showing up you need to take the span class off. a .alt {display:none;} tells the browser not display links with the class of alt this should fix that problem. to get your buttons closer together i would mess around with margins on your li.

    # December 21, 2009 at 12:05 pm

    Thank You Darren :)

    I do not understand why the text is so high up ! I would have thought they would appear in the buttons !

    Can you please tell me how I’d sort that out.

    Thank You.

    # December 21, 2009 at 12:17 pm
    "TheN00b" wrote:
    Thank You Darren :)

    I do not understand why the text is so high up ! I would have thought they would appear in the buttons !

    Can you please tell me how I’d sort that out.

    Thank You.

    Take the class of alt right off the link that might be messing things up, but if not put it back on then use padding to position the text in the buttons
    something like:

    Code:
    .alt {
    padding-top:-75px;
    padding-right:40px

    and play around with those number until that are correct. But try taking the alt class off first.

    # December 21, 2009 at 12:22 pm

    Thank You So Much Darren.

    It is done ! The Navigation is DONE, I’m so Happy :lol:

    Now moving down. Why is the text in the CTop (Content Top) sat in the middle ? I have told CSS to left align the content of that div tag !!

    # December 21, 2009 at 12:52 pm

    Im not sure why it woln’t align left, You could try

    Code:
    #ctop h1{
    margin-left:-100px;
    }

    Then when you have the text on the bottom of it set the width in the <p></p> tag, because ctop width is alot bigger than the text area,

    Code:
    #ctop p{
    width:800px;
    margin:30px 10px 10px 30px;

    Adjust the margins to where its perfect.
    Hope this helps

    # December 21, 2009 at 1:00 pm

    Hi Darren

    I just tried that, it did not work :( I think I know what the problem is, but I do not know how to fix it. Check this out, this is what I get when I look at the thing with FireBug. It is the Box for the logo that is not allowing the text to get to the left.

    [img]http://i47.tinypic.com/29dwkqq.jpg[/img]

    The Question is how do I make the text go through the logo box ?

    Thanks

    # December 21, 2009 at 1:35 pm

    Alright so I got this for ya, use a bg image for the logo.

    Code:
    #logo {
    float: left;
    background-image:url(‘http://www.kurdwd.com/_images/logo_03.png’);
    background-repeat:no-repeat;
    height: 199px; width: 330px;
    margin-left: 65px;
    margin-top: 25px;

    and put the text in a new div

    Code:
    #ctext{
    width:800px;
    float:left;
    margin-top:-30px;
    margin-left:80px;
    }

    so your index would look like this:

    # December 21, 2009 at 2:00 pm

    Hi

    That did not work, the logo is gone too :cry:

    # December 21, 2009 at 2:14 pm

    Oh I dont know whats up, ill upload it on my server and you can copy the code straight from there,
    http://www.webbeginner.net/help
    Just look at the source and css file and copy it

    # December 21, 2009 at 2:19 pm

    Hi Darren

    The one on your server is not showing me any logo either :shock:

    I cleared my browser cache and restarted .. and it is still the same .. No Logo !! How weird !!

    # December 21, 2009 at 2:33 pm

    Ok I didn’t check it with IE, you much be using it. I think it’s something to do with the background image not being able to be used.
    Im pretty new at web design too, only a couple of months now. So my suggestion would be, bring it back to a img and have a little more space from the header to the text. But just copy like before, it was tested in ie
    http://www.webbeginner.net/help

    # December 21, 2009 at 4:35 pm

    Thank You So Much Darren.

    Looking better huh ? :D

    Moving down the page to work on cmid (content middle) section :lol:

Viewing 15 posts - 1 through 15 (of 34 total)

You must be logged in to reply to this topic.

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