[stoke1863]

Ok this is realy annoying me. I am making a small site for a friend. Now i am more of a designer then a coder but this was the mock up i made



Ok so i started to code and quickly lost the light beams (if anyone knows how i can use this please say) The side bar is what i realy need to keep it is the icon of his car.

So i wasnt sure how to handle using the stripes. I dont want them to repeat becuase that will be stupid but also at the same time i ddint want to save my image to small as i dont want to have empty spaces underneath it if the user has a large screen.

Now i got the site looking ok in a few resolutions and browsers i checked firefox 3 IE 7 IE 6. Now its displaying fine on my PC and also at my Universitys and works computers how ever on the clients PC it displays like this






here is my CSS and HTML (the side stripes in question are called miniside) the site is still just a mock up so i have no nav yet and havent done the alt tags and such,

You can view it online at here

CSS

 

* { margin: 0; padding: 0; outline: 0; }
body {
	background:url(images/bg.jpg)  #933;
	color:#181818;
	font-family: Verdana, Tahoma, arial, sans-serif;
	font-size: 14px;
}
#container {
	text-align:left;
	width:890px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;


}
	#content {
	border:15px solid #FFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	width:890px;
	background-attachment: fixed;
	background-color: #282828;
	background-image: none;
	font-size: 16px;
	color: #FFF;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
	height: 500px;
}
.imagepos {
	float: left;
	padding-right: 20px;
}


#miniside {
	width: 220px;
	clear: both;
	margin: 0px;
	overflow: visible;
	top: 1px;
	position: relative;
	float: left;
}

HTML

<div id="miniside">
<img src="_pics/images/stripes.gif">
</div>


<br>
<br>
<br>

<br>
<br>
<br>
<br>
<div id="container">
<div align="center"><img src="_pics/images/kevnum.gif" alt="Phone Number" class="numberpos" width="806" height="32"><br>
<br>
</div>
<div id="content">
  <br><img src="_pics/images/mini2.jpg" class="imagepos" width="283" height="182">
  <p><br>Learn to drive in a brand new BMW Mini Cooper D, with a fully qualified driving standards agency Approved Driving Instructor. With over 10 years teaching experience whom has friendly, patient approach to teaching and pupils. You'll receive One to One driving tuition giving you 100% of your instructors attention 100% of the time.
 <br>
 <br>
  </p>
  <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
  <p><img src="_pics/images/mini1.jpg" class="imagepos" width="286" height="184"></p>
 
  <p><br>You can be picked up and dropped off in different location ie college/work, therefore fiting your lessons around your busy lifestyle. You'll receive a personnal progress chart so you can always see where you are with you new driving skills. So just pick up the phone and make that call today. </p>
 
</div>
</div>

[gregwhitworth]

I don't have the time to search your code at the moment, but I did whip up an image of your site with guides to show you how you could make your design from the beginning work.



If you make it so the title of the page is above the green,
move the body in between the two green guides,
make the top and bottom gradient finish before the guides on top and bottom,
and make the middle area the solid color from the bottom part of the gradient (if we are using the top gradient for color selection),
make sure the lights don't start to the left of the green lines.

Then you'll be able to repeat the middle section of the lines (so your height is limitless) and you can now add in the bottom and top lights. I suggest repeating the lights along the top and bottom.

This post has been edited by gregwhitworth: 18 March 2009 - 02:59 PM

[stoke1863]

gregwhitworth, on 18 Mar, 2009 - 01:58 PM, said:

I don't have the time to search your code at the moment, but I did whip up an image of your site with guides to show you how you could make your design from the beginning work.

attachment

If you make it so the title of the page is above the green,
move the body in between the two green guides,
make the top and bottom gradient finish before the guides on top and bottom,
and make the middle area the solid color from the bottom part of the gradient (if we are using the top gradient for color selection),
make sure the lights don't start to the left of the green lines.

Then you'll be able to repeat the middle section of the lines (so your height is limitless) and you can now add in the bottom and top lights. I suggest repeating the lights along the top and bottom.

thanks for taking the time do this ill look through it now.

EDIT: HA HA i am such a tool i croped something from the PSD of this design and saved it! so i cant move any of the images around now.

This post has been edited by stoke1863: 18 March 2009 - 03:11 PM

[funkydorset]

Your clients viewing in IE, when the screen size is reduced the content div drops because you haven't told it where to stay...try in your css

#container {
	text-align:left;
	width:890px;
	margin: 0px auto 50px auto;}
#content {border:15px solid #FFF;
		  font: 16px Arial; color: #FFF;
		  text-align:left;
		  width:890px;
		  height: 500px;
		  background-attachment: fixed;
		  background-color: #282828;
		  margin: 0px auto 50px auto;
}

As you can see I have shortend your margins...remember a clock face..'top' 'right' 'bottom' 'left' that's the order. I have set the left margin to auto as I haven't downloaded your images for exact positioning, my advice is to set your left margin so that the div doesn't over run your strips images.
Hope that helps you,

Keep smiling...:-)

[stoke1863]

funkydorset, on 18 Mar, 2009 - 05:12 PM, said:

Your clients viewing in IE, when the screen size is reduced the content div drops because you haven't told it where to stay...try in your css

#container {
	text-align:left;
	width:890px;
	margin: 0px auto 50px auto;}
#content {border:15px solid #FFF;
		  font: 16px Arial; color: #FFF;
		  text-align:left;
		  width:890px;
		  height: 500px;
		  background-attachment: fixed;
		  background-color: #282828;
		  margin: 0px auto 50px auto;
}

As you can see I have shortend your margins...remember a clock face..'top' 'right' 'bottom' 'left' that's the order. I have set the left margin to auto as I haven't downloaded your images for exact positioning, my advice is to set your left margin so that the div doesn't over run your strips images.
Hope that helps you,

Keep smiling...:-)

thank you i am going to try this now

[stoke1863]

still cant get it working at 1024 x 768

[stoke1863]

gregwhitworth, on 18 Mar, 2009 - 01:58 PM, said:

I don't have the time to search your code at the moment, but I did whip up an image of your site with guides to show you how you could make your design from the beginning work.

attachment

If you make it so the title of the page is above the green,
move the body in between the two green guides,
make the top and bottom gradient finish before the guides on top and bottom,
and make the middle area the solid color from the bottom part of the gradient (if we are using the top gradient for color selection),
make sure the lights don't start to the left of the green lines.

Then you'll be able to repeat the middle section of the lines (so your height is limitless) and you can now add in the bottom and top lights. I suggest repeating the lights along the top and bottom.

Hi i have made the changes you suggested. Im new to all of this so im not realy sure how to code this now any help?

This post has been edited by stoke1863: 19 March 2009 - 02:07 PM

[gregwhitworth]

Ok, this is going to look like the one I posted before, but it isn't. You are going to end up with 6 images to create the background and stripe. Each green outline is a new image. Then within the body area, I drew boxes for divs that you will create to create the various sections (I did not include the content boxes - paragraphs, lists, etc). Slice up the image using the crop tool in Photoshop ( or whatever program you use), following the guides I set, then from there give it a go developing it.

I also included a version that is just solid colors showing where the different div wrappers will be located. You will use CSS border styles to create the thick grey/white borders around the nav and body container, the big yellow box is the main container wrapper that you will use to position all body content at once. The green box is the little word on the stripe that you will place in that side div so that the stripes can repeat, if you didn't cut out the text the word would repeat over and over again (which may be a look you want - I sliced it up based on your design).

Contact us if you need help.