Here is a site I’m currently developing. Got a couple issues I’m stubbling up on one would be how can I get my vertical and horizontal scrollers back if the browser is resized and still maintain the scalability and full browser image support that I have?
Other question would be when browser is really wide some image at the bottom get cut off more then what I would like them to be can I position these images at the bottom instead so bottom doesnt get cut off when scaled horizontally?
Oh yea one other question once I have the structure complete on the homepage I plan to have the images rotate through 3 or 4 different images is this possible with just CSS or would I have to use Javascript or Flash?
ONe other question my Navigation when you rollover has a background image, how can I vertically align my text inside that list so its not down at the bottom of the image. I’ve done it before but have forgotten.
You could remove the overflow from the html element and the layout should stay together more or less. You could put the watermark as position:fixed at the bottom to stop it moving around or scrolling.
I would have probably done the whole thing differently and allowed the middle section to center rather than being fixed.
This is very rough and is just the sort of thing I was thinking of. (I don’t expect you to use it.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 column layout - no float drop</title>
<style type="text/css">
img {
border:none
}
html, body {
height: 100%;
margin:0;
padding:0;
}
body {
background: #000;
color: #fff;
height:100%;
min-width:900px;
color: #FFF;
font-family: "Gill Sans Light", "Gill Sans MT", "Gill Sans", Arial, Verdana, sans-serif;
font-size: 20px;
line-height: 39px;
font-style: normal;
}
a {
text-decoration: none;
color: #CB6E24;
}
img {
border: none;
}
h2 {
font-size: 62px;
font-weight: normal;
padding-bottom: 0px;
margin: 0;
line-height: 100%
}
h3 {
font-size: 36px;
font-weight: normal;
padding-bottom: 0px;
margin: 0;
line-height: 100%
}
#inner {
position:relative;
width:100%;
}
#inner:after {
content:" ";
disaplay:block;
clear:both;
visibility:hidden;
}
#wrap {
min-height: 100%;
margin-right:60%;
position:relative;
background:#35c2e3;
color:#000;
z-index:3
}
* html #wrap {
height: 100%;
}
#centre_col {
float: right;
width: 900px;
margin-right:-600px;/* drag it central on the page*/
position:relative;
display:inline;/* ie double margin bug*/
margin-top:25px;
color:#fff;
}
p {
padding:5px;
margin-bottom:1em;
}
.bg {
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
min-height: 100%;
min-width: 900px;
width: 100%;
z-index:2;
}
.bg img {
/* Set rules to fill background */
/* Set up proportionate scaling */
width: 100%;
height: auto;
}
#watermark {
position: fixed;
z-index: 4;
bottom:0;
}
#sidebar {
float: left;
z-index: 2;
width: 300px;
padding-bottom: 90px;
}
#content {
float:right;
width:595px;
margin-top:153px;
}
#nav {
padding-top: 60px;
position:relative;
z-index:5;
}
#nav img {
padding-bottom: 26px;
}
#navigation {
text-decoration: none;
font-size: 20px;
/*line-height: 55px;*/
list-style: none;
width: 245px;
margin:0;
padding:0;
position:relative;
z-index:5;
}
#navigation {
width: 245px;
padding: 0;
margin:0 0 0 40px;
}
#navigation li {
width: 245px;
height: 33px;
line-height:33px;
display: block;
padding-bottom: 20px;
}
#navigation a {
text-decoration: none;
color: #FFF;
display: block;
padding-left: 10px;
}
#navigation a:hover {
background:url(http://www.livelikenew.com/2011/images/hover.png) no-repeat;
}
#text {
border-left: solid 2px #CB6E24;
width: 600px;
margin-bottom: 150px;
}
#text h2 {
padding-left: 42px;
}
#text p {
padding-left: 45px;
padding-top: 3px;
padding-bottom: 3px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="centre_col">
<div id="content">
<div id="text">
<h2>Live like new</h2>
<p>SMI is a medical equipment supplier with a simple ideal. <br/>
We believe that even with an injury or disability that you should be able to live comfortably. That is why with every product we offer, every individual we interact with, every action we take, we aim to revitalize the body and spirit.</p>
<!-- text -->
</div>
<!-- content -->
</div>
<div id="nav"> <a href="http://livelikenew.com"><img src="http://www.livelikenew.com/2011/images/smi-logo.png" /></a>
<ul id="navigation">
<li><a href="index.html">our company</a></li>
<li><a href="living-like-new.html">living like new</a></li>
<li><a href="products.html">products & support</a></li>
<li><a href="meet-our-people.html">meet our people</a></li>
<li><a href="contact-us.html">contact us</a></li>
</ul>
<!-- nav -->
</div>
</div>
</div>
<div id="watermark"><img src="http://www.livelikenew.com/2011/images/smi-watermark.png" /></div>
</div>
<div class="bg"><img class="bg" src="http://www.livelikenew.com/2011/images/img1.jpg" alt="" title="" /></div>
</body>
</html>
Excellent, the code you provided was almost exactly what I had in mind, worked perfectly with some minor mods to it, only other question is it possible to have the images cycle through just on my homepage so say like img1.jpg, img2.jpg and img3.jpg fade in and out? OR is this a javascript matter that I will need to look into?
Yes that would be a javascript solution. There are quite a few image rotator scripts around and it’ll be a matter of picking one that suits.You could probably ask in the JS forum if anyone has any recommendation but I’m guessing that google will give you loads to look at anyway
Thanks I’ve used one in the past the Nivio Slider I believe it is called just off the top of my head and it worked like a charm, but just wondering if it will when trying to have them large scalable images like what I got on the pages now, it will just be the homepage image, other images would be like how I have them now.
I would like the peoples names in the post class div to all align with each other which I did previous using float: left but now the content div is only 595px and when I remove it, it ruins everything. Is it possible to make these 3 names in a row like I had previous all aligned with each other?
If the text/content is long and you scroll down, the green in the wrap doesnt fill out the whole length of the screen, if you know how to fix this that would be amazing as well is it possible that the left hand side, logo and nav doesnt scroll with with the content so it always remains there no matter how much you scroll?
Yes it is possible, reduce the width of div with class “post” so that all three can fit in the subtext div. That would be (595px - padding/margin) / 3. Then it will automatically align itself.
Thnx for the response but what I need is the main text there to still be 595px and the bottom digs to be 300px each about so the content area needs to be about 900px but main text only fill 595px not sure if I explained it well then need to solve that scrolling vertical issue.
To achieve logo and nav doesnt scroll put position:fixed instead of relative for nav.
To create full-height green column on the left, create one more div called footer (or anything you like) inside wrap just below watermark div. So you will have 3 divs inside wrap. And put clear:both; attribute in CSS for footer. Hope it helps.
Just want to clarify, so you dont want to change the width of main text and post class div still to be 300px? and you want to put all three “post” class div to sit next to each other horizontally?
Well if that what you want to achieve, then I cant think of anything else except resizing the width of divs. It’s like buying 2 seaters car but its crammed with 4 people, it just wont fit
Ended up solving the problem. Checked it on Firefox, Chrome, Safari and Opera and all looks good, could someone check it on IE to see if it looks the same.
Also if anyone could take a quick peek at my code and see if theres a more efficient or correct way to achieve the same result that would be great.
Ok so using the Nivo Slider I ended up getting the fade rotator working. But can’t get the images scaling thought because they have the same class it would automatically do it, but guess not is there anything Paul O’B that you can see that will make this work so images are full browser like other pages and scalable like how I have them on other pages but yet keeps the same fade and rotate
There are quite a few image rotator scripts around and it’ll be a matter of picking one that suits.You could probably ask in the JS forum if anyone has any recommendation but I’m guessing that