Forums

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

Home Forums CSS [Solved] Problem with my Website, Appreciate Some Help

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #26828
    Cyanoxide
    Participant

    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:




    Cyanoxide’s Portfolio



    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;
    }

    #66823
    apostrophe
    Participant

    Link doesn’t work.

    #66829
    TheDoc
    Member
    "apostrophe" wrote:
    Link doesn’t work.

    Fixed.

    #66875
    Cyanoxide
    Participant

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

    #66877
    apostrophe
    Participant

    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?

    #66880
    Cyanoxide
    Participant

    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.

    #66883
    Brido
    Member

    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….

    #66881
    TheDoc
    Member

    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?

    #66887
    Cyanoxide
    Participant

    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;
    }
    #66900
    AshtonSanders
    Participant

    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/

    #66921
    xhtmlit
    Member

    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:

    #66929
    Cyanoxide
    Participant

    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.

    #66931
    AshtonSanders
    Participant

    Excellent. Glad it helped.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.