PSD to HTML/CSS Help

Hey everyone. I am finally getting back up on web design, and I am working on this site for friend of mine. Here are the screenshots of the desired siteplan and what I have now. I’m sure this is a minor problem, but if someone could please help me find where I am going wrong that would be great. The image slider script is nivo-slider. I am basically trying to push that image slider script back up to the top on the right side, then be able to add more on the right side at the bottom. Also, the logo and the header nav are two separate images, and the only way I have found to arrange them like that is with absolute positioning. However, this obviously changed within different resolutions. I was wondering if any of you all had any idea about that either. Thank you all so much for the help in advance.

Desired
http://www.rocksouprecords.com/siteplan.jpg

Current
http://www.rocksouprecords.com/tofix.jpg

HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="js/nivo-slider.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <title>
      RockSoupRecords.com
    </title>
  </head>
<body>
    <div id="bgtex">
        <div class="logo">
            <img src="images/logo.png" />
        </div>
        <div id="navbar">
            <img src="images/navbar.jpg" />
        </div>
        <div class="news">
            <img src="images/news.png" alt="NEWSBAR" />
        </div>
        <div id="newsbox">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a tortor ut mauris rutrum volutpat. Sed nec nibh lorem. Donec lacinia condimentum nibh, vitae suscipit nisl dictum sed. Etiam bibendum, neque id fermentum pellentesque, ipsum ipsum imperdiet erat, ut dignissim neque nunc non erat. Curabitur nisi odio, blandit et varius vel, dignissim eget nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in neque tellus. Mauris mattis est sit amet magna aliquam at convallis nisl hendrerit. Vivamus consequat nibh non dui lobortis pulvinar. Proin auctor odio eget lorem faucibus in pellentesque nulla aliquet. Morbi a magna odio, eu pharetra purus.
        </div>
        <div id="slider">
            <img src="images/slide1.jpg" alt="Nate Austin" title="Caption 1" />
            <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="Nate Austin Again" title="Caption 2" /></a>
            <img src="images/slide3.jpg" alt="Nate Austin AGAIN" title="Caption 3" />            
            <script type="text/javascript">
                $(window).load(function() {
                $('#slider').nivoSlider({
                effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
                slices:15,
                animSpeed:1500, //Slide transition speed
                pauseTime:5000,
                startSlide:0, //Set starting Slide (0 index)
                directionNav:false, //Next & Prev
                directionNavHide:true, //Only show on hover
                controlNav:false, //1,2,3...
                controlNavThumbs:false, //Use thumbnails for Control Nav
                controlNavThumbsFromRel:false, //Use image rel for thumbs
                controlNavThumbsSearch: '.jpg', //Replace this with...
                controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
                keyboardNav:true, //Use left & right arrows
                pauseOnHover:true, //Stop animation while hovering
                manualAdvance:false, //Force manual transitions
                captionOpacity:0.6, //Universal caption opacity
                beforeChange: function(){},
                afterChange: function(){},
                slideshowEnd: function(){} //Triggers after all slides have been shown
                    });
                });
</script>
            
            
        </div>
    </div>
</body>
</html>

CSS


/*RockSoupRecords.com CSS Stylesheet
© KossaeProductions
*/

body { margin: 0; 
       background-image: url("tile.jpg");
             background-repeat: repeat;
             background-color: red;
            }

#bgtex { background-image: url("images/bgtex.jpg");
                 margin-top: 10%;
                 margin-left: auto;
                 margin-right: auto;
                 height: 655px;
                 width: 916px;
             }
             
#navbar { width: 100%;
                    height: 90px;
              }
                    
#newsbox { clear: both;
                     width: 398px;
                     margin-left: 1px;
                     height: 404px;
                     float: left;
                     background-color: red;
                    }
                    
#slider { margin-top: 0; }                    
                    
.logo { position: absolute;
                top: 5%;
                left: 9%;
            }
            
.news { 
                float: left;
                margin-top: 6%;
                width: 399px;
                height: 70px;
                overflow: hidden;
            }
            

Hi,

You could just drag the slider upwards with a suitable negative top margin.

For the logo you need to set position:relative on your main wrapper and then you can place the logo in relation to the wrapper and not the viewport. Position:relative creates a new stacking context for that absolutely placed child and the absolute element will stick to its parent.

Your page needs a little re-working though as you need to get some semantic sense and structure into the page .

I would float two columns and then you won’t need to drag the slider back upwards because it will automatically start at the top.

You shouldn’t set a height on your layout either as that won’t allow content to grow and you should slice it so that things can grow as required.

Try to make background images repeat and don;t just use one big image if possible as that never allows the layout to grow and is not really feasible. remember text can be resized by the user and will spill out of a fixed height container.

I would do something very roughly like this:

http://www.pmob.co.uk/rock-soup/index.htm

It’s very rough looking as I had no transparent images to work with and just cut the flat images from the screenshot but it gives you the idea of how it should all fit together nicely.

The html is more semantic and image replacement techniques used for the background images to allow text to show when images are missing or turned off.

The logo is placed absolutely and dragged out of the parent container. The nav is just floated right but overlaps the header using a higher x-index (you need a transparent image here to make things easier but transparency doesn’t work in ie6).

The nav items are floated and the background swapped on hover to show the highlighted item (you should make a better version of this)

the columns are just two columns floated next to each other.

The footer caps the bottom of the layout with a small image which will allow the layout to grow as tall as it needs to be.

Hope that helps.:slight_smile:

Oh wow, thanks! That is amazing, I really appreciate the help.