Grow your CSS skills. Land your dream job.

[Solved] Problem with my Website, Appreciate Some Help

  • # November 19, 2009 at 3:29 pm

    First off my friended suggested that I ask for some help on here so I want to apologise in advance incase I’ve posted in the wrong forum or anything like that.

    Well let me get onto the point and see if you can help me. I’ve been making a portfolio website from scratch and now I’m stumped, I’m trying to line up some text boxes and images and I’ve tried a few ways and I can’t seem to find a way to do it. I will post a photoshoped image so you can see how I’m trying to get it to look and I will also post a live feed and the css and html coding.

    I would also appreciated it if you point out anything I should change to make the site more efficient but that’s not as important so don’t feel you have to do this.

    Example:
    [img]http://i29.photobucket.com/albums/c265/seph-53/des.jpg[/img]

    Live feed: http://cyanoxide.co.uk/Prototype/

    Html:

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





    Content on this page requires a newer version of Adobe Flash Player.

    Get Adobe Flash player

    Code:
    @charset “utf-8″;
    /* CSS Document */
    body{
    background-color:#5894ae;
    margin:0;
    padding:0;
    text-align:center;
    }
    .banner_repeat{
    width:100%;
    height:147px;
    background-image:url(Images/BannerBg.jpg);
    background-repeat:repeat-x;
    }
    .banner{
    width:856px;
    height:136px;
    background-image:url(Images/Banner.jpg);
    }
    .container{
    width:856px;
    padding-top:2px;
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    align:center;
    font-family:Tahoma;
    font-size:11px;
    color:#fff;
    }

    .FlashContainer{

    width:1008px;
    margin-left: auto;
    margin-right: auto;
    padding-top:0px;
    text-align:center;
    align:center;
    }
    .FlashBorder{
    width:1008px;
    height:256px;
    background-image:url(Images/FlashBorder.jpg);
    }
    .FlashContainer{

    width:1008px;
    margin-left: auto;
    margin-right: auto;
    padding-top:0px;
    text-align:center;
    align:center;
    }
    .BodyBg{
    width:1008px;
    height:203px;
    background-image:url(Images/Base.jpg);
    margin-left: auto;
    margin-right: auto;
    }
    .BodyContainer{

    width:1008px;
    padding-top:0px;
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    font-family:tahoma;
    font-size:11px;
    color:#666;
    line-height: 120%;
    }
    .heading{
    font-family:”Century Gothic”;
    font-size:14px;
    color:#0e6e9e;
    font-style:normal;
    }
    .Read{
    align:Right;
    }

    # November 20, 2009 at 6:07 am

    Link doesn’t work.

    # November 20, 2009 at 11:35 am
    "apostrophe" wrote:
    Link doesn’t work.

    Fixed.

    # November 21, 2009 at 9:56 am

    No help so far and I’ve included everything it says to in the sticky.

    # November 21, 2009 at 11:15 am

    What’s the problem? the boxes on the page I’m looking at are the same as the boxes in your picture.

    Also, this is a CSS forum, and I noticed you’re using Tables for layout, what’s the reason for this?

    # November 21, 2009 at 11:41 am

    I have tried many different ways to make the web boxs including css, I was advised that it would be easier to do the boxes in css.

    # November 21, 2009 at 2:29 pm

    What browser are you looking at the problem in? Because it looks fine in the browsers I am using, which are firefox, safari, and chrome….

    # November 21, 2009 at 3:27 pm

    Cyanoxide, it looks like the only thing missing now is a little bit of padding on the text and pushing the Read More button down and to the right, is that correct? Or is there more to it that you’re missing?

    # November 21, 2009 at 3:36 pm

    That’s exactly what I’m having trouble with, I can’t seem to shift the button into the right place without messing up the text, I’ve recently tried to make the button with css rather than dreamweave’rs html button option and I could get the button to line up using "margin-left" but when I tried to us "margin-top" to move it down it locked in place and wouldn’t go down.

    That’s the css code I’m curently using:

    Code:
    .rollover a {
    margin-left:240px;
    margin-top:15px;
    display:block;
    width: 90px;
    padding:10px 10px 10px 7px;
    font: bold 13px sans-serif;;
    color:#333;
    background: url(“Images/Read.jpg”) 0 0 no-repeat;
    text-decoration: none;
    }
    .rollover a:hover {
    background-position: 0 -35px;
    color: #049;
    background: url(“Images/ReadDown.jpg”) 0 0 no-repeat;
    }
    .rollover a:active {
    background-position: 0 -70px;
    color:#fff;
    }
    # November 21, 2009 at 10:25 pm

    They best way I’ve found for things to line up on the "bottom" is with CSS positioning.

    Here’s a good tutorial on how that works: http://www.barelyfitz.com/screencast/ht … sitioning/

    # November 22, 2009 at 7:19 pm

    Hi Cyanoxide

    This is probably a little bit of topic but looking at your site, I think your main menu and other areas might use the outline rule;

    Code:
    a {outline:none;}

    Makes it more cleaner then having the general outline of a link show up when clicked on. Hope that helps and just a thought. :ugeek:

    # November 22, 2009 at 8:39 pm

    I have fixed the problems now, the tutorial you gave me was most helpful AshtonSanders, it didn’t solve the problem but it helped me find a way around it, also I have been looking for ages for a fix to the outline around my flash, I just assumed there was nothing I could do about it so thank you for that as well xhtmlit.

    Feel free to lock this thread now.

    # November 22, 2009 at 8:41 pm

    Excellent. Glad it helped.

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

You must be logged in to reply to this topic.

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