7 Replies - 946 Views - Last Post: 19 March 2009 - 03:29 PM

#1 stoke1863  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-January 09

Need help with a side div element (simple)

Post icon  Posted 18 March 2009 - 02:15 PM

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

Posted Image

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

Posted Image

Posted Image


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>



Is This A Good Question/Topic? 0
  • +

Replies To: Need help with a side div element (simple)

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Need help with a side div element (simple)

Posted 18 March 2009 - 02:58 PM

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.

Attached Image

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

Was This Post Helpful? 1
  • +
  • -

#3 stoke1863  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-January 09

Re: Need help with a side div element (simple)

Posted 18 March 2009 - 03:06 PM

View Postgregwhitworth, 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 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

Was This Post Helpful? 0
  • +
  • -

#4 funkydorset  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 18-March 09

Re: Need help with a side div element (simple)

Posted 18 March 2009 - 06:12 PM

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...:-)
Was This Post Helpful? 1
  • +
  • -

#5 stoke1863  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-January 09

Re: Need help with a side div element (simple)

Posted 19 March 2009 - 07:04 AM

View Postfunkydorset, 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
Was This Post Helpful? 0
  • +
  • -

#6 stoke1863  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-January 09

Re: Need help with a side div element (simple)

Posted 19 March 2009 - 01:37 PM

still cant get it working at 1024 x 768
Was This Post Helpful? 0
  • +
  • -

#7 stoke1863  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-January 09

Re: Need help with a side div element (simple)

Posted 19 March 2009 - 02:06 PM

View Postgregwhitworth, 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 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?


Attached Image

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

Was This Post Helpful? 0
  • +
  • -

#8 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Need help with a side div element (simple)

Posted 19 March 2009 - 03:29 PM

Attached Image

Attached Image

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1