Forums

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

Home › Forums › CSS › newbie stuck after following videos on psd to html/css

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 22, 2008 at 10:26 am #23299
    hugglepatch
    Member

    Hi
    I have been trying to do a makeover for my site using css. My site has been started with the block builder SBI method but I am trying to give it a different feel and need to upload a css to do this.
    First of all I would like to thank you ever so much for the video tutorials showing how to convert a psd mockup to coding for a site. After months of frustration and going round and round in circles and getting no where I finally have some of my site in css and html in a matter of two days with these turorials but it is not doing what I need it to do as I do not have all the information I need and I am stuck. Are you able to help me please? I am a newbie to css and web design and all will have to be explained with baby language please.

    Things I am trying to do:

    *Center center the background images for logo, nav and body just like the footer is so the back image forms a column on either side of the background images. Currently they are stuck firm to the left edge and when I have tried using padding the body expands up in small segments and it all goes funny.

    * Put space between the button background images (3) so they are separated and not in a long block in the nav.

    *Put word navigation in the hearts of my nav background image ie home, contact, links and about us. Can the text be put on its side or at a 45 degree angle or does it have to be like normal text? They need to be verticle tumbling down the hearts. Just a basic hover link as in the first psd video is similar to what I want.

    * Turn my top nav into a menu bar that when you click or roll over it a menu slides down from each button with text that can take you onto the other pages.

    Any help would be appreciated. I have included an attachment of the nav so you can see what I am referring to and the css and html are below.

    thanks
    hugglepatch
    :?:
    PS I am also new to Photoshop and have enjoyed watching you run around it with the videos. More video tuts would be great in photoshop and also converting bought or free templates and how to use them. I enjoyed the video where you modified the os site as this is where I hope to end up with my site. I am also keen to see video on how you actually make the videos and what software is used, etc as I would like to do this with wedding projects in the future.

    HTML

    <!DOCTYPE HTML PUBLIC

    "-//W3C//DTD HTML 4.01

    Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-

    Type" conent="text/html;

    charset=UTF-8"/>

    <META Name="Description"

    Content="">
    <META Name="Keywords"

    Content="">

    <title>Iridescent Blush

    Template</title>
    <link rel="stylesheet"

    type="text/css"

    href="style.css" />
    <link rel="shortcut icon"

    type="image/vnd.microsoft.ico

    n"

    href="http://www.iridescentbl

    ush.com/favicon.ico">

    </style>
    </head>

    <body>
    <div id="page-wrap">
    <center>
    <h1 id="logo">Iridescent

    Blush Brides, Grooms,

    Weddings.</h1>

    <ul id="nav">
    <li class="ideas"><a

    href="#">Inspirational

    Wedding Ideas</a></li>
    <li

    class="accessories"><a

    href="#">Exquisite Wedding

    Accessories</a></li>
    <li class=

    "projects"><a
    href="#">Wedding Projects &

    Supplies</a></li>
    </ul>
    <div id="main-content">
    <p>Main content blah blah blah</p>

    </div>
    <div id="sidebar">
    </div>

    </div>
    <div id="footer">
    </div>
    </body>
    </html>

    CSS

    /* AUTHOR:Leeanne P
    [email protected]

    et.au
    http://iridescentblush.com
    */

    /*RESETS & BASIC PAGE

    SETUP*/
    *{margin:0;
    padding:0;
    }
    html { overflow-y: scroll;
    }

    body, td {
    font-size: 62.5%;

    Verdana, font-family:

    Geneva, Arial, Helvetica,

    sans-serif;
    background: url

    (imgs/back.jpg) top left

    repeat;color:#b8860B;
    margin: 0px;}

    li {
    font-size: 1.6em;
    }

    div#page-wrap {
    width: 908px;
    margin: 0 auto;
    background:url

    (imgs/body.jpg) repeat-y;
    }
    #main-content{
    padding: 30px 110px

    30px 300px;
    }

    ul#nav {
    list-style: none

    inside;
    height: 258px;
    background: url

    (imgs/nav.jpg) no-repeat

    center center;
    list-style: none;
    padding-top: 115px;
    padding-left:330px;
    }

    p { font-size:1.4em; line

    -height:1.4em; margin-

    bottom: 1.4em;
    color:#000;
    }
    a { outline:none;}

    h1#logo {
    width: 908px;
    height: 128px;
    background: url

    (imgs/logo.jpg) no-repeat;
    text-indent: -9999px;
    }
    /*END RESET*/

    /* TOOLBOX */
    .floatleft { float:left;}
    .floatright { float:

    right;}
    .clear {clear:both; }
    /* END TOOLBOX */

    /* STRUCTURE AND STUFF */
    #page-wrap {
    width: 908px;
    margin: 0 auto;
    }

    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 45px;
    width: 500px;
    text-indent: -9999px;
    float:left;
    }

    ul#nav li.ideas a {
    width: 150px;
    height: 45px;
    background: url

    (imgs/ideas.gif) bottom

    center;
    }
    ul#nav li.accessories a {
    width: 150px;
    background: url

    (imgs/accessory.gif)

    bottom center;
    }
    ul#nav li.projects a {
    width: 150px;
    background: url

    (imgs/projects.gif) bottom

    center;
    }

    #footer {
    height:396px;
    background:url

    (imgs/footer.jpg) no-

    repeat;
    background-position:

    center center;

    }
    /* END STRUCTURE */

    September 23, 2008 at 7:43 am #49978
    hugglepatch
    Member

    Thanks for the help.
    After some tweaking I have it all centered. Now to try and sort out the rest of it.

    thanks again

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