# Dreamweaver help!!!



## mwdesign (Aug 20, 2010)

Hi, i am a student just finished university and i am trying to set up a graphic design portfolio website. I have designed my layout on illustrator and sliced the images into dreamweaver. I am new to dreamweaver, and have been messing around trying to get my website to work on all resolutions. I have managed to scale the content images, however the background does not scale its height to the content completely, there is a white space at the bottom.

This is my css...................................................................................................

New Website with New MENU with slices 7 widescreen DARK 800x600




My body....................................................................................................................







































 















 







 















 































 























































































 















 















 















 







































 















 















 















 































 















 















 















 















 















 















 















 















 















 































  







 







































     







 















 















 



If there is an easy way to make the website fluid where everything scales to fit the browser, this includes the content and the background, please let me know. I have been stuck for over a month now, and i want to start applying for jobs asap. Any help would be great Thank you. ................I have attatched images of the issue.................

Also, my content images (when browser window is maximized) seem to scale larger but blur slightly because my resolution is higher than what i am designing my website to. the site is 1024 by 728.


----------



## tomdkat (May 6, 2006)

I'm not sure I follow. You want the background image to scale to the full height of the page but your "bground" DIV has an effective max height of 768px:

```
<div id="bground">
<table width="100%" height="auto" border="0" cellpadding="0" cellspacing="0" id="table_bground">
<tr>
<td colspan="2" align="left" valign="top">
<img src="images/bground2panel.png" width="207" [color=red]height="768"[/color]></td>
<td width="100%">
<img src="images/bground2main-03.png" width="100%" [color=red]height="768"[/color]></td>
</tr>
</table>
</div>
```
Is the main background image a gradient of some kind? If so, one way to get it to "scale" is to simply make the image have a very "tall" height (like 1024px or taller). Then, the background image will (or should) fill the browser window as long as the height of the screen resolution isn't significantly taller than the height of the background image.

Also, read on the "max-height" and "max-width" CSS properties. You can use those to control the max dimensions of the images. This way, you can have the images scale, based on the size of the browser window, but not scale larger than the natural dimensions of the image, itself. "max-height" and "max-width" will be supported by IE8 but not by IE7 and earlier versions of IE. Still, experiment with them and see what you can work out.

Here is an example of having a background image that scales with the size of the browser window. If you're looking for that kind of behavior, that example should be a good starting point for you.

Peace...


----------



## mwdesign (Aug 20, 2010)

well what ive done is save my content as the page from illustrator. then in dreamweaver i have made a div within which is my background. The background is a table with the nav panel on the left as one image and the right is the rest of the background. Yes it is a gradient, however when i do fiddle with its percentage the panel slice overlaps the rest of the background (if the width is 100%) and streches tot he whole browser. is there a way to have the left slice a fixed width and height, without giving them a 

properties:fixed;

because this makes everything unmovable. 

One other thing is that when i make the background height larger than anything, the page scales past the end of my content because the background fills up more space than the content. Its as if the content scales larger when the window is maximised which is fine, but the background doesnt scale to the same number as the content. If i make the window smaller all the content fits in the right place, so at 1024x728 i think it will look fine but at larger resolutions it mucks up a little. 

All ive been trying to do for a month is make everything in my page fit all resolutions lol.

One more thing is there a way to make the slices keep their quality when in higher resolutions, because at the moment the images blur slightly. Most websites ive seen look very clear at higher resolutions and worse at lower. 


Thank you for your help i will look into what you have said.


----------



## tomdkat (May 6, 2006)

Sorry for not being more clear. 

I meant that it sounds like you want a fluid page layout that fills the browser's viewport (the part of the browser window that shows the page) yet you want to restrict the height to 768px tall, due to the images you're using which are created with a 1024x768 resolution in mind. That sounds a bit confused to me. 

So, first if you want the page to fill the browser viewport, regardless of its size, you'll need to design the page with that in mind. I have no problem with your using Illustrator to create the look of the site but to make that "perform" as a live HTML page that behaves the way you want, you'll need to do some additional design work in DreamWeaver.

You can have a div that is sized to 1024x768 max dimension that scales based on the browser window size or you can have a div that takes the full height and width of the browser window. By making the background gradient the background of the body element, you can get more flexibility with the content that overlays it. If you do this right, you won't have the 768px height restriction you have now.

You can position your nav pane on the left side without having to used a fixed position. Depending on the page structure you come up with, you can use an absolute position or a relative position.

So, I think you should decide upon a page layout first (outside of your Illustrator work) and then incorporate your Illustrator work into that layout rather than trying to keep the Illustrator work "intact" and forcing the HTML to work around it.

Again, as for the blurry images, that's due to images being scaled to sizes larger than their natural dimensions. Using max-width and max-height can prevent the blurring of images (IE issues not withstanding).

Peace...


----------



## mwdesign (Aug 20, 2010)

AHHH i understand. Sorry i have never used dreamweaver before so ive just been fiddling and looking at tutorials. Ok so if i redesign it should i design it to the maximum resolution i want. I wouldnt mind the panel on the left being fixed. Should i code it so that the panel would have a z-index of lets say -1 and the background= -2 (within the body) and the content=1? And should i set up my site in a table within a div? and then insert the images one by one? because when illustrator saves the slices it saves it as a html file as well, this is what i have been working from. i open the saved html page and try to import my background that way. The reason for this is because i am not that familiar with dreamweaver . 

i would ultimately like my home page to be fixed with everything fitting the browser (fluid), and for other pages the nav bar should remain the same but the content would be scalable. But currently the navagation bar has my copyright bit at the bottom which for some reason is lower than the 100% width and height of my background and the panel. So it looks like the content is larger. I am not sure but could it be because the navagation bar images are not in percentages but the content which are buttons are? I havent made the navigation bar in percentages because they are rollover images which shouldnt be distorted as they are text. 

Thank you very much youve been a great help. I am just unsure as to how to start of my whole website and implement the design within it.


----------



## tomdkat (May 6, 2006)

I understand.  Illustrator won't "know" about things like a fluid page layout, etc. If you wanted the page to be a fixed size, we could easily put the slices Illustrator created in a div and center that on the page, etc.

You can still make use of your Illustrator work since that provides an image of your ultimate design goal. Depending on how the slices were carved, they might be of direct use. Otherwise, you might have to recreate some of the images you'll want to use so they will work better/easier on the site.

You shouldn't have to do much layering of content via z-index and if you get the sections of the page carved out right, the nav menu can remain in a fixed position and with fixed dimensions while the surrounding content repositions and/or scales as the browser window size changes.

I suggest starting out with a "wire frame" page, that consists of the DIVs you want with colored borders defined so you can see where you content will be displayed fairly easily.

EDIT: Here is an example of what I mean:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Wireframe</title>
  	<style type="text/css">
  		body { width: 100%; height: 100%; margin: 0; padding: 0; }
  		#navigation {
  			border-right: 1px solid red;
  			border-bottom: 1px solid red;
  			float: left;
  			height: 400px;
  			width: 150px;
  			padding-left: 10px;
  		}
  		#footer {
  			border-top: 1px solid red;
  			height: 75px;
  			width: 100%;
  			position: absolute;
  			bottom: 0;
			text-align: center;
			font-style: italic;
			font-size: small;  			
  		}
  		#content {
  			padding: 10px;
  			border: 1px solid green;
  			margin-left: 160px;
  		}
  		#header {
  			border-bottom: 1px solid black;
  			text-align: center;
  			height: 75px;
  		}
	</style>
</head>
<body>
<!-- Header -->
<div id="header">
<h1>Page header goes here</h1>
</div> <!-- End Header -->

<!-- Page body -->
<div id="pageBody">

<!-- Nav menu -->
<div id="navigation">
<p>Navigation menu</p>
</div> <!-- End Nav menu -->

<div id="content">
<p>Page content goes here</p>
</div>

</div> <!-- End page body -->

<!-- Page footer -->
<div id="footer">
<p>The footer goes here</p>
</div> <!-- End page footer -->

</body>
</html>
```
Then, you can add your graphics, etc., and build out the site.

Peace...


----------



## mwdesign (Aug 20, 2010)

ok i see, i understand that divs are used to contain material i just didnt know how to organise my page so that i can insert all my slices and position them as i wanted. If i wanted to make my home page fixed but still scale according to different screen resolutions so that all the content would be within the page, how would i go about this? My main aim is to get everything within the browser window for as many resolutions as possible. This way on the home page the user wont have to scroll. Then for my actual project pages i can have scrollable content with a fixed navigation bar. However, i dont know what resolution to design my page to. Whether to design it at the maximum resolution and then have it scale to the smaller resolutions accordingly or to design it at the smallest resolution and have it scale larger which at the moment is making some of my slices lose quality. 

Thank you for your example im starting to understand it a little. Could i ask how you organise your divs into different areas? and should i make all the seperate divs for example the navigation div and content div within a main div which gives the page dimensions?


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ok i see, i understand that divs are used to contain material i just didnt know how to organise my page so that i can insert all my slices and position them as i wanted.


If I were you, I wouldn't hold my breath on using the "slices" as is. Not knowing how the image was sliced, it can be problematic using the slices "as is".



> If i wanted to make my home page fixed but still scale according to different screen resolutions so that all the content would be within the page, how would i go about this?


The HTML snipet above does this.



> My main aim is to get everything within the browser window for as many resolutions as possible. This way on the home page the user wont have to scroll. Then for my actual project pages i can have scrollable content with a fixed navigation bar.


Ok



> However, i dont know what resolution to design my page to. Whether to design it at the maximum resolution and then have it scale to the smaller resolutions accordingly or to design it at the smallest resolution and have it scale larger which at the moment is making some of my slices lose quality.


If you want the images to scale, start with the larger images and have them scale down. This way, you won't lose as much image quality (if any is lost) as if you scaled an image larger than its natural dimensions. Again, read up on the "max-width" and "max-height" CSS properties to see how to prevent the blurry images.



> Thank you for your example im starting to understand it a little. Could i ask how you organise your divs into different areas? and should i make all the seperate divs for example the navigation div and content div within a main div which gives the page dimensions?


The DIVs coded will be different "areas" that you can arrange any way you like. That is what the CSS style rules you create will do.  In my example, there are 5 areas: header, footer, pageBody, navigation, content.

Save my example HTML above to a file on your computer and load it in your browser and in DreamWeaver. Seeing it might shed some light on what's going on. 

Peace...


----------



## mwdesign (Aug 20, 2010)

ok so how else would i make my website if i dnt use slices? because thats the only way i have been taught lol ok so if i make my design on illustrator to my highest resolution i think that will help. and then i will need to make everything scale down to 1024x720 pixels. The thing is that my slices arent photographs they are images which i have edited to make rollovers etc on illustrator. So that is why i designed it all on illustrator. 

Is there no way i can position all my images within the html page you have given me? i have removed the header and footer as my site only needs the left panel and the main content. the left panel works as my navigation and header where my logo is on the top left. 

Thank you for you help again. Your a lifesaver


----------



## tomdkat (May 6, 2006)

From what I understand, in Illustrator you make your "page" as a single image. Then, Illustrator will "slice" that big image up into smaller images and it will generate a HTML table that will piece the "sliced" images together to reform the "main" image.

I'm saying it's ok to use Illustrator to design the page so you'll know what you're after but instead of using the "sliced" images, as generated by Illustrator, use the graphic components as images you put on the page.

For example, the background gradient. That should be a very smaller (and tall) image that you can make the background of the body element. You won't need a "slice" for that and there will be a "slice" that has some other image overlaying the background gradient.

By keeping the image components that make up the "master" image as separate parts, you can more easily design the page to behave the way you want and be fluid. Illustrator will generate a static sized image for you and you want to make that image effectively behave in a non-static fashion. 

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm well yh your sort of right, what i did was open a page with dimensions of 1024 x 720 because i had read that its better to design your site to the smallest resolution and then let it scale to the largest. but i will change that. Anyway i positions my layout in illustrator and then saved each part as a seperate slice. For example the background i saved seperately as one whole image and the contents for example each navigation word and the logo were seperate sliced png. because pngs dont have a background. So the content was saved as a page and this converts to a table in dreamweaver, this table is what ive been working with. Then i just add my background image to the body and give it a z-index. However, i wasnt able to get both the content and the background to scale according to the browser.

The background would scale to the full width but not the height and the contents height was for some reason larger than the content. 

The reason i saved the background separately is because when the normal illustrator image is sliced and you use that singular html as the site. when it was scaled all the slices shift out of alignment so i could not have a background as part of the contents slices. 

Its odd i thought it would be simpler to have a separate background image. and have content separately and then just give them z-index values on dreamweaver and have them scale.


----------



## tomdkat (May 6, 2006)

If you have ALL of the graphic components as separate images, that makes things much easier since you can put those images on the page where you want and not have to worry about the current restrictions you're dealing with now.

As for screen resolutions, the idea behind designing with the "smallest screen" in mind is to make sure your content will appear properly on smaller screens, possibly without the need for scrolling left or right or up and down. Then, as the screen resolution increases, the content should move around properly, provided the styling rules governing the positioning of the content are correct.

Since your background image is a separate image, you should be able to assign it as the background of the body element. This will make the entire viewport fill with the background image.

I'll attach a ZIP file with the above sample HTML, edited to remove the header and footer DIVs and to have some content, including images in a fake navigation menu. Of course, this is intended to be a proof of concept. 

The background image would be the image you created in Illustrator and the navigation images would be the ones you created in Illustrator. I used a CSS Sprite in my example, mostly because I need the practice, but you don't need to use Sprites. I can make a version that doesn't use Sprites if that would help. 

Save the HTML file and the images in the same folder and then you can open the HTML file in your browser.

Peace...


----------



## mwdesign (Aug 20, 2010)

wowww yess that would be great. all it really is is a div on the left which holds the nav bar, the right a div which holds all the content images. The slices are saved as separate images so it should be fine if i just place them wherever i need to. also there is a gradient behind the navigation bar so it makes it easier to see. This is why i assigned z-index values because technically there are three layers. One is all the content including the nav bar and then there was the panel gradient behind it and then the background gradient behind that. 

Sorry for being a nuisance, but you have been very helpful. 

I find it difficult to position my images within the divs as u cant move them freely without using code, should i create a table within the div to hold my separate images?

Also the reason i changed my site resolution was the same as what you mentioned about people with smaller resolutions being able to see the website completely and without horizontal navigation bars, and larger resolutions would do the same so everything fits within the window. 

thank you


----------



## tomdkat (May 6, 2006)

mwdesign said:


> This is why i assigned z-index values because technically there are three layers. One is all the content including the nav bar and then there was the panel gradient behind it and then the background gradient behind that.


Actually, there aren't necessarily any "layers" involved in the HTML because the DIVs aren't "stacked" on top of each other. When creating the composite image, you might have had the various graphics components in layers but the web page is a different animal.

In my example, the body has the gradient at its background so naturally, ANYTHING displayed on the page will have the gradient as it's background. My navigation DIV is a "peer" to the content DIV and it's positioned to the left side of the page body. The content DIV isn't "stacked" on top of anything at all.

Scollbars will appear depending on the amount of content on the page combined with the viewer's screen resolution (which influences the browser window size).



> I find it difficult to position my images within the divs as u cant move them freely without using code, should i create a table within the div to hold my separate images?


Using CSS to position the images gives you more flexibility than using a HTML table. We can figure out the style rules you need to position your images properly. 



> Also the reason i changed my site resolution was the same as what you mentioned about people with smaller resolutions being able to see the website completely and without horizontal navigation bars, and larger resolutions would do the same so everything fits within the window.


The thing is, the issue is different when talking about creating images vs creating web pages. Images are static in dimension where web pages really have no dimensions. Getting the two properly incorporated can yield the results you want. 

Peace...


----------



## mwdesign (Aug 20, 2010)

ah i understand so the divs are side by side. However if i want to add an extra gradient behind the nav bar would i have to assign z-index values? because that gradient isnt a part of the background gradient. Its another sliced image, which in illustrator is exactly the right height from the top where my logo is to the bottom where it should end just after my copyright information. and that should be the whole website dimension. but i dont think i can make a website where the navigation bar is fixed and can size to every resolutions browser. so it might be easier if i make everything scrollable rather than assigning a fixed position because on other resolutions things will get cut off. 

thanks


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ah i understand so the divs are side by side.


They CAN be side by side, one over the other (from a top of page to bottom of page perspective) or even stacked on top of each other (like the "layers" you mention). : )



> However if i want to add an extra gradient behind the nav bar would i have to assign z-index values?


Nope. You should forget about using a "z-index" because we're not (yet) dealing with positioning of elements which requires "stacking" them.

If you want to add an extra gradient background behind the navigation bar, simply add a background color or image to the navigation DIV. 

Using the HTML I posted above (and used in my "proof of concept" example):

```
#navigation {
  			border-right: 1px solid red;
  			border-bottom: 1px solid red;
  			float: left;
  			height: 400px;
  			width: 150px;
  			padding-left: 10px;
[b][color=red]background: #ff0000;[/color][/b]
  		}
```
Adding that should give the navigation DIV a red background. You could also have an image, a color AND an image, and so on.



> because that gradient isnt a part of the background gradient. Its another sliced image, which in illustrator is exactly the right height from the top where my logo is to the bottom where it should end just after my copyright information. and that should be the whole website dimension.


Forget about Illustrator now. You've got the images you want created and all you need is to get them integrated into the site correctly so you get your desired result. 



> but i dont think i can make a website where the navigation bar is fixed and can size to every resolutions browser. so it might be easier if i make everything scrollable rather than assigning a fixed position because on other resolutions things will get cut off.


That depends on what's in the navigation bar. If it's relatively short, you can probably get by with a fixed size. Or, you can make it have a dynamic width or height, depending on the size of the browser window. There's a LOT you can do with CSS styling. 

Peace...


----------



## mwdesign (Aug 20, 2010)

Ive attached my layout of the home page so that you get a rough idea of my layout. the icons on the right would be the content (which are rollover button links to other pages) and thats where the content of every page will go. on the left the navigation bar would ideally be fixed but would have to be within the browsers height while the content can scale if it needs to vertically but obviously not horizontally. I think the navigation would have to also scale because on lower resolutions it will be too large for the screen. 

Also as you can see there is a gradient behind the menu so that it distinguishes the menu from the body of content. Ihave saved that as a seperate image so that it can go behind the menu. how would i implement that into the code? should i make a new div with the panel gradient and give it a z-index value? 

thanks


----------



## tomdkat (May 6, 2006)

Thanks! I've got to head out for a bit but I'll see if I can work up an example layout, based on your image, later on. 

Peace...


----------



## mwdesign (Aug 20, 2010)

ok no problem  thanks that would be great.


----------



## tomdkat (May 6, 2006)

Ok, attached is an updated ZIP file along with some new screenshots. The design image you posted above looks a bit different from the screenshots you posted in your initial post in this thread, so I adjusted the "proof of concept" page based on the screenshots in the first post of this thread. Why? Because, those showed your results in a live browser. 

The attached test case isn't complete, by any means, but it should show you at least ONE way of doing what you're wanting to do. The images scale based on browser window size and are centered in the content area. The nav menu has a yellow background with opacity set to 40% (I think), which is why it looks like the crappy color it does. That is the yellow mixing with the page background, which is a gradient.

Study my HTML file and let me know if you have any questions. The biggest "trick" will be to get the nav menu DIV to extend to the bottom of the page, dynamically. There are tricks to accomplishing that but the need for those tricks will depend on the behavior you want.

Peace...


----------



## mwdesign (Aug 20, 2010)

Thanks for the file i have been implementing my images since yesterday this is what i have so far. i still have to replace the menu with my logo and sliced button images. I have added a minimum width and height value to the rows so that they do not go smaller than a certain amount of pixels. However when the browser is smaller as you can see in the second image the images move in order to fit in everything. Is there a way to make the rows shrink without them moving position? as i want to add a shadow image under the four images in the row div. to make it look more 3D. 

Also the grey panel gradient i have managed to implement and i have centred it to the div so there is the gap at the top and bottom as i wanted. However, i want the navigation to be fixed. So how would i go about making it fit the browser height only? and then if need be the content on the right can scroll, or for this page be fixed. 

And is there a way for me to change the gaps within the images? without them moving to the next row.

Sorry for being a pain lol
Thank you so much


----------



## tomdkat (May 6, 2006)

mwdesign said:


> I have added a minimum width and height value to the rows so that they do not go smaller than a certain amount of pixels. However when the browser is smaller as you can see in the second image the images move in order to fit in everything. Is there a way to make the rows shrink without them moving position? as i want to add a shadow image under the four images in the row div. to make it look more 3D.


Which "second image" are you referring to? Do you mean the screenshot I posted above? In my example, the DIVs containing the icons is centered:

```
.row { 
[b][color=red]  			margin: 0 auto 0 auto;[/color][/b]
  			width: 90%;
  			height: 165px;
  			text-align: center; 
  		}
```
You can remove that line and replace it with something else to keep the row effectively "stationary". I highly suggest specifying borders on the elements you're positioning so you'll see how things are actually laying out. It helps a lot. When things look good, turn off the borders. 

In addition to the DIV I made being centered, I centered the icons within the DIV (the text-align rule above). You can also remove that rule to prevent the icons from "sliding around" as the browser window changes size.

As for the shadow you want to add, take my advice and do yourself a HUGE favor! Make the icons individual images (as I did) or make them a CSS Sprite. Then, put the shadow in the icon image ITSELF, rather than have the shadow be a completely separate image. That will save yourself a TON of grief. If you wanted versions of the icons without the shadow handy, a CSS Sprite can be used. Look at the navigation menu I have in my example. The "Home", "Page 1", and so on, images are in a CSS Sprite that I simply "slide around" to make the appropriate image appear. The "Hover" image is even part of that Sprite and is slid into position when the mouse hovers over one of the nav menu images.



> Also the grey panel gradient i have managed to implement and i have centered it to the div so there is the gap at the top and bottom as i wanted. However, i want the navigation to be fixed. So how would i go about making it fit the browser height only? and then if need be the content on the right can scroll, or for this page be fixed.


Hmmm, your requirements seem to be changing.  Can you post some screenshots of what you have now?



> And is there a way for me to change the gaps within the images? without them moving to the next row.


That's a function of your content being "fluid". If the DIV (or even table row) containing the images isn't long enough to hold everything, the content will "spill over". Of course, you can fix that by making the element containing the images a fixed width (an absolute width or a minimum width) but if that width is wider than the area for displaying the icons, you'll get scrollbars. So, you'll need to make a design decision about how you want things to work since they can't work both ways.

In the case of the specific icons I created, you could use a graphics tool to "trim" the images down to make them more narrow and you can add a "display: block" style rule for the images to get them to position closer together but the above can still apply. In fact, adding a "display: block" rule and a "float: left" rule appears to help a lot:


```
.row a img {
[b][color=red]  			display: block; 
  			float: left;[/color][/b]
			max-width: 192px; 
			max-height: 165px;
			width: 24%;
			border: none;
  		}
```
Peace...


----------



## mwdesign (Aug 20, 2010)

oh ok i see. well i was hoping for the images to scale smaller like they do without them spilling over. I will have to set a fixed width i guess. I dont mind there being a horizontal scrollbar as i can hide that with an overflow-x: hidden;. As long as the whole page still fits within the browser on different resolutions. 

I didnt think of saving my shadows with the bottom row of icons as one image haha that would save me some grief ill do that. I am unfamiliar with sprites im guessing its sort of like a moving .gif?

You mentioned earlier that its difficult to keep the navigation div the same height as the browser window at all times? Is there any other way of making this happen, so that even if the content scrolls downwards the navigation bar wont move and is always visible. 

thanks


----------



## mwdesign (Aug 20, 2010)

Ive attached the images of what it looks like at the moment. The 2nd image shows the spilling of the images so i need to make them fixed within the div, so that the images scale smaller according to the div, and then i will have to give the div a minimum width so that the images dont get smaller than a certain amount when the user scales the window manually. 

And i need to make the nav bar div fit the height of the browser at all times so that i can make it fixed and only the content can scroll. 

thank you


----------



## tomdkat (May 6, 2006)

mwdesign said:


> oh ok i see. well i was hoping for the images to scale smaller like they do without them spilling over. I will have to set a fixed width i guess. I dont mind there being a horizontal scrollbar as i can hide that with an overflow-x: hidden;. As long as the whole page still fits within the browser on different resolutions.


Well, given the CSS style rules I posted above, the images WILL scale smaller without spilling over BUT only to a point. Depending on how small the browser window gets, there will come a point where the images will spill over. That is unless a minimum width of the DIV containing them is set. Once that width is hit, a horizontal scroll bar will appear.



> I didnt think of saving my shadows with the bottom row of icons as one image haha that would save me some grief ill do that. I am unfamiliar with sprites im guessing its sort of like a moving .gif?


Nope, a CSS Sprite isn't animated. You can search on the term to learn more about them and look at the one I sent in the ZIP files I've attached. 

My point about the shadows is to have them be part of the main images themselves, not be separate images (which is what your posts above indicated you were wanting to do).



> You mentioned earlier that its difficult to keep the navigation div the same height as the browser window at all times? Is there any other way of making this happen, so that even if the content scrolls downwards the navigation bar wont move and is always visible.


Depending on the contents of the navigation menu, it can be challenging to get it to extend to the bottom of the viewport and look/behave the way you want. I'm not saying it's impossible but only something that can require some effort. 

If you want the navigation menu to remain in a given spot, regardless of vertical scrolling, then a fixed position will be required.

Peace...


----------



## tomdkat (May 6, 2006)

mwdesign said:


> Ive attached the images of what it looks like at the moment. The 2nd image shows the spilling of the images so i need to make them fixed within the div, so that the images scale smaller according to the div, and then i will have to give the div a minimum width so that the images dont get smaller than a certain amount when the user scales the window manually.


Yep, you'll need to adjust the size of the DIV containing the images and/or the size of the images themselves to make them scale and fit without spilling over. My suggestion about adding the "display: block" and "float: left" style rules above should make some of that easier. At least it did in my latest test version. 



> And i need to make the nav bar div fit the height of the browser at all times so that i can make it fixed and only the content can scroll.


Positioning the nav menu, as it stands now, will make it remain in place while the content scrolls. You can also specify the height of that DIV to "100%" and it should go all the way to the bottom of the viewport. The issue here will be the background image. Since it currently has rounded corners, you'll need to get those rounded corners at the bottom of the DIV correctly. If the rounded corners don't need to be at the bottom, things get easier and setting the position to "fixed" with a height of "100%" might be all you need.

Peace...


----------



## mwdesign (Aug 20, 2010)

mmm ok well what i will do is insert all my navigation material and see what it looks like. As for the minimum width for the div where would i insert that in the css? in the #row? or in the .row class?


----------



## tomdkat (May 6, 2006)

mwdesign said:


> mmm ok well what i will do is insert all my navigation material and see what it looks like.


Sounds good.



> As for the minimum width for the div where would i insert that in the css? in the #row? or in the .row class?


I don't know what your actual HTML/CSS looks like but in my example HTML/CSS, the two rows have a "row" class assigned. If the width is to apply to both, then make the changes in the ".row" class definition. The "#row(x)" rules apply to the individually named elements only.

Peace...


----------



## mwdesign (Aug 20, 2010)

Ok i have inputed my slices for the menu within separate divs so that i could change the margins etc. to position things properly. Im almost there, one thing is that the projects that are in the menu there is a slight space between each image within the div, is there any way i can remove that?

Also i am unsure as to how i can make the navigation bar including the gradient behind it be fixed and scale in height to the browser window. so that the bottom and top of the gradient are visible, then i can assign it a fixed position so only the content scrolls. ( i am not sure but i think i may have to put the nav bar gradient into a seperate div behind the navigation images instead of making it a background image of the navigation div?.)

This is my css...........................

Wireframe

Body................................................................



































I have just checked my site in internet explorer also and there are some issues with that:
The content alligns to the top of the page
The navigation bar images have some weird borders around them even tho i have a border:0; written in the navigation id. 
And there is a white space at the bottom of the page. i am not sure why?

Thank you for all your help btw.


----------



## tomdkat (May 6, 2006)

Cool. Can you attach your images for me too?

Peace...


----------



## mwdesign (Aug 20, 2010)

These are some images showing my issues at the moment. 

img 1 - google chrome

img 2 - internet explorer


----------



## tomdkat (May 6, 2006)

No, I'm asking for the "source" images, the actual images you're using. This way, I can play with your HTML. I don't find my "wireframe" to be very useful, considering how close we appear to be now. 

Peace...


----------



## mwdesign (Aug 20, 2010)

ive attached a zip file of all the slices ive used as .pngs


----------



## tomdkat (May 6, 2006)

Can you attach the navigation menu background please? 

Thanks!

Peace...


----------



## mwdesign (Aug 20, 2010)

woops sorry.

 thank you


----------



## tomdkat (May 6, 2006)

Thanks! 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I've got a solution for the navigation menu background scaling.

With CSS2.1, you can't scale an element's background. Either the full background shows or part of the background will show. I don't know if CSS3 allows background image scaling or not.

Since we know you can scale an image, by specifying it's dimensions as percentages, we can use a trick I picked up from Stu Nicholl's 100% background image layout.

Here's the deal: instead of making your navigation menu the nav DIV background, we can place that image INSIDE the nav DIV, as a standard image. Then, we can scale it to the dimensions we want. In the case, we want it to be the height of the page, regardless of resolution AND you want the bottom rounded corner to be preserved. This CSS does just that:

```
/* General page styles */
	html,body {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}
	body { background: url(images/bground-small.png) repeat-x; }

/* Navigation menu styles */
  	#navigation {
		position: fixed;
		top: 0;
		width: 230px;
		height: 100%;
		text-align: center;
	}
  	
	#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 100%;
	}
	#nav-back img {
		width: 207px;
		height: 100%;
	}
```
So, here's what I did:

```
html,body {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}
```
This make sure BOTH the html and body elements fill the browser viewport with no margins or padding. This is needed for the effective scaling of the navigation menu.


```
body { background: url(images/bground-small.png) repeat-x; }
```
This sets up the page background, which will fill the entire browser viewport.


```
#navigation {
		position: fixed;
		top: 0;
		width: 230px;
		height: 100%;
		text-align: center;
	}
```
This sets up the navigation menu DIV to be fixed (so it doesn't scroll) and so it will fill the full height of the browser viewport. The "text-align" property centers everything in the navigation DIV. You can exclude or include that, per your requirements.


```
#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 100%;
	}
```
This sets up the nav menu background image DIV to fill the height of the browser viewport, as desired.


```
#nav-back img {
		width: 207px;
		height: 100%;
	}
```
This does the "magic" of scaling the nav background image. This makes sure the nav background image retains its natural width but its height will be the height of the viewport, regardless of the image's natural dimensions.

That covers the CSS. Now for the HTML:

```
<!-- Nav menu -->
<div id="navigation">
[b][color=red]<!-- Navigation menu background -->
<div id="nav-back">
<img src="images/panel-1024.png" />
</div> <!-- End navigation menu background -->[/color][/b]
<div id="logo">
<a href="#" title="logo"><img src="images/logo1.png" /></a>
</div>
<div id="menu">
<a href="#" title="index"><img src="images/index1.png" /></a>
```
Add that "nav-back" DIV to the top of the navigation DIV and the background image will extend to the height of the browser viewport, per your desire.

While working on this, I noticed some interesting things:

Your main background image has a height of 772px, which means the background image won't cover the page at resolutions higher than 772px tall. Of course, this isn't desired so I made a smaller sized (in bytes) background image that is taller in height that will fill the entire browser viewport. The top part of the gradient is preserved and the bottom part will be shown, depending on how much content is on the page. There are other tricks that can be done to preserve the bottom part of the gradient but we won't get into that for now. Your original image is 4kb and mine is 412b.
With the navigation menu being fixed, the background image is a gradient (which I didn't know before) which will show the main background image changes as the main background image scrolls with the rest of the page. That can be fixed by the background image be fixed, so it doesn't scroll with the rest of the page content even though the rest of the page content will be scrollable.
On my CRT monitor, the shadows below some of the icon images are lost in the gradient.
I took the HTML file you sent in your ZIP file and commented out the "#navigation" rule definition, added my rules above and added the new DIV, as illustrated above, and things started working more closely to what you're ultimately after.

Attached are some screenshots. Notice the position of the navigation menu when the page is scrolled. 

Peace...


----------



## mwdesign (Aug 20, 2010)

oh ok soo because my backgrounds height is too short its leaving a white gap at the bottom of the page in IE? ok umm the main image background i will most likely apply a fixed position to it which means i will have to change the background gradients size. what height and width would you recommend? Also the panel gradient i will change to make it less opaque and a fixed colour rather than a gradient.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> oh ok soo because my backgrounds height is too short its leaving a white gap at the bottom of the page in IE?


I used Opera in my screenshot and you see the white gap at the bottom. The fixed sized nature of images is one reason I don't like using graphics tools for primary web page design.

Which version of IE are you using? At this point, stick with IE8 (if you have that). Once the page is working the way you want, we can look at getting IE7 to "behave". 



> ok umm the main image background i will most likely apply a fixed position to it which means i will have to change the background gradients size. what height and width would you recommend?


Personally, I would forget the gradient at the bottom and make the background image narrow (to keep the image size small) and tall. In my screenshots, the background image is over 1200px tall (like 1275px or even taller). You can pick a height you think will satisfy the highest resolutions you expect your visitors to use.

Peace...


----------



## mwdesign (Aug 20, 2010)

ok i have input all the images etc and the navigation seems fine fixed now. The only thing i want to change a little is the gaps in between the projects listed in the menu div. There is a padding:0px; in place however so i am not sure how to shorten the gap in between the divs. The gap i am talking about would almost be like line-height in textual terms.

Apart from that everything is great on chrome.  thank you

I have attached images of how it looks now. Internet explorer still has issues though.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ok i have input all the images etc and the navigation seems fine fixed now.


Coolio! 



> The only thing i want to change a little is the gaps in between the projects listed in the menu div. There is a padding:0px; in place however so i am not sure how to shorten the gap in between the divs. The gap i am talking about would almost be like line-height in textual terms.


The best thing you can do is turn on borders on the row DIVs and maybe on the icon images.

Try adding a "border: 1px solid red;" style rule to the ".row" style and you'll see how the row DIVs are laying out. You might find they are flush against each other even though there appears to be a gap.



> Apart from that everything is great on chrome.  thank you


And it should render that way in Firefox, Safari, IE8, and Opera.



> I have attached images of how it looks now. Internet explorer still has issues though.


Based on that screenshot, it looks like you're running iE7. So, are you actually running IE7 or are you viewing the page in IE8 but in compatibility mode?

We can look at IE once everything else is done or mostly done. Once everything else is in place, we can identify the CSS tweaks that will be needed to get IE7 to behave. At this point, I wouldn't waste any time in getting IE6 to behave or not. Look at the website traffic of your current site (if you have one) and see how much IE6 traffic you get. If you don't have a site up yet, then I wouldn't worry about supporting IE6 users. Maybe add some JavaScript to detect IE6 and throw up a window or page indicating IE7 or later should be used to view the site or something. 

EDIT: Ok, I found some CSS style tweaks you can use that will help IE7 behave better that won't impact the other more web standards compliant browsers.

In the definition of the .row class style, change the height to "auto".
In the definition of the #navigation element style, add this rule: left: 0; (remember to include the semicolon at the end)

I have also identified an IE7-specific rule change that I'll save for later. 

Peace...


----------



## mwdesign (Aug 20, 2010)

Ok i have changed the height to auto and ive added a border to the .row class but it isnt shown in the design view. 
The left: 0; has moved the navigation abr to its rightful place  however the icons in the content are still aligned to the top of the page in IE. 

I installed IE8 today but i am need to reset the computer so ill try and do that now and see if it changes. The picture i sent you of IE is in the dreamweaver preview state.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> Ok i have changed the height to auto and ive added a border to the .row class but it isnt shown in the design view.


Which version of DreamWeaver are you using? Sometimes DreamWeaver doesn't handle CSS properly (i've commented on this in another thread on this forum).

Ignore the design view of DreamWeaver and see if the borders appear in the actual browser. That will tell you how the DIVs are laying out and that's what you need to know. 



> The left: 0; has moved the navigation abr to its rightful place


Great!



> however the icons in the content are still aligned to the top of the page in IE.


Yep, and I know why.



tomdkat said:


> I have also identified an IE7-specific rule change that I'll save for later.


Once you get the gap issue you're talking about resolved, we'll talk about the IE7-centric CSS change that's needed.



> I installed IE8 today but i am need to reset the computer so ill try and do that now and see if it changes. The picture i sent you of IE is in the dreamweaver preview state.


What??? How could you have NOT installed IE8 until now????  LOL

Once you get IE8 running, you'll need to view the site in compatibility mode to get IE7's rendering behavior.

Now, for a tease.... 

Peace...


----------



## mwdesign (Aug 20, 2010)

hahahaa yhh i dont really use internet explorer, i use google chrome now its more user friendly i think. 

The gaps i cant seem to change they are not big enough to be a big deal though. And in IE the gaps become closer together dont know why. 

I use CS4 dreamweaver currently. lol


----------



## tomdkat (May 6, 2006)

mwdesign said:


> The gaps i cant seem to change they are not big enough to be a big deal though. And in IE the gaps become closer together dont know why.


Well, post a screenshot of how the borders look with the gap and we'll see what we can do. 

Peace...


----------



## mwdesign (Aug 20, 2010)

you should be able to see it in the pics i poster previously. IE the list of project are closer together height wise and in chrome they are further apart.


----------



## mwdesign (Aug 20, 2010)

By the way i now have IE8 and the images that were at the top are now centred again. So it must just be IE7 that has the problem. Also the nav bar is fixed position in IE8. However, the gradient image in the nav bar doesnt fit the browser 100% height wise in IE8. 

thank you for all your help by the way, much appreciated.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> you should be able to see it in the pics i poster previously. IE the list of project are closer together height wise and in chrome they are further apart.


I don't see any borders enabled in the screenshots you've posted thus far. By posting the screenshots with the borders, we can clearly see how the DIVs are laying out. Also, make the borders a "bright" color like red or yellow so they stand out.

Thanks!

Peace...


----------



## tomdkat (May 6, 2006)

mwdesign said:


> By the way i now have IE8 and the images that were at the top are now centred again. So it must just be IE7 that has the problem.


Yep, which is why I keep referring getting IE7 to "behave":

http://forums.techguy.org/7563449-post39.html
http://forums.techguy.org/7563907-post41.html



> Also the nav bar is fixed position in IE8. However, the gradient image in the nav bar doesnt fit the browser 100% height wise in IE8.


You must have changed something since it does for me. See the attached screenshot.

Given how much you've changed, it might be good to post an updated ZIP file, *complete* with images and HTML files. 

Peace...


----------



## mwdesign (Aug 20, 2010)

I did change the margin from the top and bottom for the nav background div. So that there is a slight gap. But i figured it would be ok because the height was 100% of the browser so it would always remain the same. lol

i have tried to attach my site file in a zip but its too big to upload. i can try again though.


----------



## mwdesign (Aug 20, 2010)

Quick question ive added two divs at the bottom right of the page whick hold a facebook and twitter link, and now the images that were in the middle of the page have started spilling over again. how should i stop this from happening?

And i need to fix the internet explorer 7 problem too.

thank you.


----------



## mwdesign (Aug 20, 2010)

by the way you can view my site currently at www.marcweissdesign.com. i can keep uploading my files to the internet if its easier for you to see.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> Quick question ive added two divs at the bottom right of the page whick hold a facebook and twitter link, and now the images that were in the middle of the page have started spilling over again. how should i stop this from happening?
> 
> And i need to fix the internet explorer 7 problem too.


Well, posting an updated ZIP file would have helped a lot.  I'll see what I can gleen from the live site.

Peace...


----------



## tomdkat (May 6, 2006)

mwdesign said:


> by the way you can view my site currently at www.marcweissdesign.com. i can keep uploading my files to the internet if its easier for you to see.


Thanks for the link. This makes it easier to see the changes you've made but a bit of a PITA to make any changes to the files you've changed.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I've looked at the live site and I see the Twitter and Facebook links you've added.

First, you need to correct this coding error:


> twitter
> 
> |
> 
> facebook


First, the new DIVs you added above have the same id. This violates the HTML 4.01 and HTML5 specs. Each element id must be unique. Since you also have a class assigned to those DIVs, "icon_class", you should change this CSS style rule:

```
[b][color=red]		#icons[/color][/b] {
	text-align:center;
	padding:0px;
	float: right;
	height: 30px;
	width: 60px;
	margin-top: 700px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-family: "Grandesign Neue Serif";
	font-size: 14px;
	font-style: italic;
	color:#FFF;
		}
```
 to this:

```
[b][color=red]		.icons_class[/color][/b] {
	text-align:center;
	padding:0px;
	float: right;
	height: 30px;
	width: 60px;
	margin-top: 700px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-family: "Grandesign Neue Serif";
	font-size: 14px;
	font-style: italic;
	color:#FFF;
		}
```
Then, remove the "id" attributes from those DIVs:

```
<div id="content">

[b][color=red]<div class="icon_class">[/color][/b]<a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a></div>

<div id="line">|</div>

[b][color=red]<div class="icon_class">[/color][/b]<a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a></div>

<div id="row1" class="row">
```
Of course after doing this, you'll need to adjust the dimensions of the "icon_class" DIV to make sure it's big enough for everything to fit. That's one thing.

Another thing is, why do you have the "Twitter", the vertical bar, and the "Facebook" links in separate DIVs? I'm thinking, you only need one (since you want to float it to the right):

```
<div class="icon_class">
<a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a>&nbsp;|&nbsp;<a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a>
</div>
```
That *should* do the trick (combined with the other things I mentioned above.

Lastly, why do you code the Twitter and Facebook links DIVs *before* the icon DIVs that were already there?

```
<div id="content">
[b][color=red]<!-- Twitter and Facebook DIVs -->[/color][/b]
<div id="icons" class="icon_class"><a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a></div>

<div id="line">|</div>

<div id="icons" class="icon_class"><a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a></div>

[b][color=red]<!--  Main content icons -->[/color][/b]
<div id="row1" class="row">
  <a href="#" title=""><img src="images/proj1.png" id="Image1" onMouseOver="MM_swapImage('Image1','','images/proj1_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
  <a href="#"  title=""><img src="images/proj2.png" id="Image2" onMouseOver="MM_swapImage('Image2','','images/proj2_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
  <a href="#"  title=""><img src="images/proj3.png" id="Image3" onMouseOver="MM_swapImage('Image3','','images/proj3_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
  <a href="#"  title=""><img src="images/proj4.png" id="Image4" onMouseOver="MM_swapImage('Image4','','images/proj4_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>
<div id="row2" class="row">
<a href="#"  title=""><img src="images/proj1shadow.png" id="Image5" onMouseOver="MM_swapImage('Image5','','images/proj1shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="images/proj2shadow.png" id="Image6" onMouseOver="MM_swapImage('Image6','','images/proj2shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>

<a href="#"  title=""><img src="images/proj3shadow.png" id="Image7" onMouseOver="MM_swapImage('Image7','','images/proj3shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="images/proj4shadow.png" id="Image8" onMouseOver="MM_swapImage('Image8','','images/proj4shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>
</div>
```
Try moving the Twitter and Facebook DIV after the main content icon DIVs and see how things render:


```
<div id="content">
[b][color=red]<!--  Main content icons -->[/color][/b]
<div id="row1" class="row">
  <a href="#" title=""><img src="images/proj1.png" id="Image1" onMouseOver="MM_swapImage('Image1','','images/proj1_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
  <a href="#"  title=""><img src="images/proj2.png" id="Image2" onMouseOver="MM_swapImage('Image2','','images/proj2_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
  <a href="#"  title=""><img src="images/proj3.png" id="Image3" onMouseOver="MM_swapImage('Image3','','images/proj3_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
  <a href="#"  title=""><img src="images/proj4.png" id="Image4" onMouseOver="MM_swapImage('Image4','','images/proj4_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>
<div id="row2" class="row">
<a href="#"  title=""><img src="images/proj1shadow.png" id="Image5" onMouseOver="MM_swapImage('Image5','','images/proj1shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="images/proj2shadow.png" id="Image6" onMouseOver="MM_swapImage('Image6','','images/proj2shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>

<a href="#"  title=""><img src="images/proj3shadow.png" id="Image7" onMouseOver="MM_swapImage('Image7','','images/proj3shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="images/proj4shadow.png" id="Image8" onMouseOver="MM_swapImage('Image8','','images/proj4shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>
[b][color=red]<!-- Twitter and Facebook DIVs -->[/color][/b]
<div class="icon_class"><a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a>&nbsp|&nbsp;
<a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a></div>

</div>
```
Now, on to the CSS styles. I see you haven't let go of the "z-index" thing yet.  *It's not needed*, so you can drop those properties:

```
#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 98.5%;
[b][color=red]		z-index:-1;[/color][/b]
		margin-top:7px;
	}

		#row1 {
	        margin-top: 120px;
	        padding: 17px;
[b][color=red]			z-index:-2;[/color][/b]
		}
		
		#row2 {
			margin-bottom:120px;
			padding: 17px;
[b][color=red]			z-index:-2;[/color][/b]
		}
```
In Illustrator, you need to be conscious of the "layering" of image components when making your composite image. Given how we're positioning the DIVs, there is no need to "layer" anything. You're still applying an Illustrator to the web page design and that's just not needed. You should read about the "z-index" property to learn what it does so you'll know the conditions under which you will actually need to use it.

Lastly, lastly...  You really should enable the CSS borders, that I keep mentioning above, so you can see how the DIVs are actually laying out. The gap you mentioned above can be easily identified with borders enabled since you'll be able to see the actual cause of the gap and address that issue. Of course, you won't want to leave the CSS borders enabled in the "live" version of the site since they will be used purely for debugging purposes.

Have you thought about taking some web design classes?

As for getting IE7 to behave, I'm going to take a different approach.  Here is the CSS code that worked for me:


```
<!--[if IE 7]>
<style type="text/css">
   #row1 { padding-top: 120px; }
</style>  	
<![endif]-->
```
Put that in the "" section of the HTML page. You can either research or figure out why that's needed and let me know what you find. 

With all that being stated, once you get the site working, you should look into using CSS Sprites for your "mouseover" behavior. I have the "NoScript" Firefox extension installed and when I first viewed your page, it blocked running the JavaScript scripts embedded in it. By using CSS Sprites, you can achieve the "mouseover" effect without requiring JavaScript to be enabled. Look into that after getting the page working the way you want/need. 

Good luck!

Peace...


----------



## mwdesign (Aug 20, 2010)

lol yh i thought about taking some web design classes but cant afford them right now. Ah sorry bout the z-index it was only needed for the nav-back div because that was appearing above the navigation content. 

I have made the changes you highlighted and there isnt any spilling of the images now. 

Only thing is that in IE 8 the navigation bar is not keepin within 100% of the height. it is longer. This is because i made a slight margin at the top for this div so there is a gap. However because i have given it a fixed position it looks like the bottom is cut off.

thanks


----------



## tomdkat (May 6, 2006)

mwdesign said:


> lol yh i thought about taking some web design classes but cant afford them right now. Ah sorry bout the z-index it was only needed for the nav-back div because that was appearing above the navigation content.


Gotcha. That makes sense.



> I have made the changes you highlighted and there isnt any spilling of the images now.


Great!



> Only thing is that in IE 8 the navigation bar is not keepin within 100% of the height. it is longer. This is because i made a slight margin at the top for this div so there is a gap. However because i have given it a fixed position it looks like the bottom is cut off.


This behavior isn't unique to IE8. Firefox and Opera also behave like IE8. I think it's related to your moving the #nav-back" DIV "behind" the #navigation DIV:


```
#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 98.5%;
[b][color=red]		z-index:-1;[/color][/b]
		margin-top:7px;
	}
```
Since that DIV provides the background for the navigation menu, you don't want to move that "away". Instead, you want to move the content being covered by it "up". So try this:

```
#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 98.5%;   [b][color=red]/* NOTE:  The z-index property is GONE! */[/color][/b]
		margin-top:7px;
	}

		#logo {
[b][color=red]position: relative;
z-index: 5;[/color][/b]
	margin-top:30px;
	margin-left:10px;
	margin-bottom:80px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
		}
		#menu {
[b][color=red]position: relative;
z-index: 5;[/color][/b]
	margin-left:10px;
	margin-right:0;
	margin-top:-1px;
	margin-bottom:-1px;
	padding:-2px;
		}
```
Give that a try and see what it does.

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm noo i changed the position value and zindex of the navigation content. But the navigation menu's gradient still doesnt scale to fit the browser in IE8. The content is fine however, it is always visible, its just the bottom of the navigations gradient.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> hmm noo i changed the position value and zindex of the navigation content.


That's not what your stylesheet currently does:

```
#navigation {
	position:fixed;	
	float: left;
	height: 100%;
	width: 230px;
	padding: 10px;
	border: 0px;
	left:0;
	margin:0;
	
	}
	
[b][color=red]	#nav-back[/color][/b] {
		position: absolute;
		top: 0; left: 0;
		height: 98.5%;
[b][color=red]		z-index:-1;[/color][/b]
		margin-top:7px;
	}
	
	#nav-back img {
		width: 207px;
		height: 100%;
	}

		#logo {
	margin-top:30px;
	margin-left:10px;
	margin-bottom:80px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
		}
		#menu {
	margin-left:10px;
	margin-right:0;
	margin-top:-1px;
	margin-bottom:-1px;
	padding:-2px;
	
		}
		#menu_bottom {
			margin-left:10px;
			margin-top:20px;
		}
		#copyright {
			margin-left:10px;
			margin-bottom:10px;
			margin-top:60px;
		}
```
That is from the stylesheet embedded on this page:

http://www.marcweissdesign.com/

That changes the navigation background image position, not the content.



> But the navigation menu's gradient still doesnt scale to fit the browser in IE8. The content is fine however, it is always visible, its just the bottom of the navigations gradient.


So, I compared the CSS in the "live" page with the test case I have on my machine and I noticed another change you made, which appears to be the actual culprit.

I guess you tried adding 10px padding to the #navigation DIV:


```
#navigation {
	position:fixed;	
	float: left;
	height: 100%;
	width: 230px;
[b][color=red]	padding: 10px;[/color][/b]
	border: 0px;
	left:0;
	margin:0;
	}
```
Remove that padding ONLY and see what happens. If you want to add padding to the #navigation DIV, add padding to the top, left, or right only. If you added the padding to get the gap at the top and bottom of the navigation menu background image, you can remove that padding completely.

Peace...


----------



## mwdesign (Aug 20, 2010)

ahhh your right ive removed the padding completely and now it fits within the browser with a small gap at top and bottom. thanks. 

Ok i have made those changes and uploaded the site again, for you to have a look. 

Ok so for the other pages should i just duplicate the index.html and change the content within the content div to whatever i need? i will be making an swf. in flash of an image slideshow which will display my work, with a textual description underneath.

Also the sprite menu i will look into.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ahhh your right ive removed the padding completely and now it fits within the browser with a small gap at top and bottom. thanks.


Great!



> Ok i have made those changes and uploaded the site again, for you to have a look.


Ok.



> Ok so for the other pages should i just duplicate the index.html and change the content within the content div to whatever i need? i will be making an swf. in flash of an image slideshow which will display my work, with a textual description underneath.


Good question. You've got a working template which should work for other pages as well. The real trick here will be the "content" DIV, which currently contains the two rows of images.


```
<div id="content">
<div id="row1" class="row">
<a href="#" title=""><img src="http://forums.techguy.org/images/proj1.png" id="Image1" onMouseOver="MM_swapImage('Image1','','images/proj1_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="http://forums.techguy.org/images/proj2.png" id="Image2" onMouseOver="MM_swapImage('Image2','','images/proj2_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="http://forums.techguy.org/images/proj3.png" id="Image3" onMouseOver="MM_swapImage('Image3','','images/proj3_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="http://forums.techguy.org/images/proj4.png" id="Image4" onMouseOver="MM_swapImage('Image4','','images/proj4_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>

<div id="row2" class="row">

<a href="fmp.html"  title=""><img src="http://forums.techguy.org/images/proj1shadow.png" id="Image5" onMouseOver="MM_swapImage('Image5','','images/proj1shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="http://forums.techguy.org/images/proj2shadow.png" id="Image6" onMouseOver="MM_swapImage('Image6','','images/proj2shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="http://forums.techguy.org/images/proj3shadow.png" id="Image7" onMouseOver="MM_swapImage('Image7','','images/proj3shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href="#"  title=""><img src="http://forums.techguy.org/images/proj4shadow.png" id="Image8" onMouseOver="MM_swapImage('Image8','','images/proj4shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>

<div class="icon_class"> 
<a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a></div>

<div id="line">|</div>

<div class="icon_class"><a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a></div>

</div>
```
That will basically be reduced to this:

```
<div id="content">

<div class="icon_class"> 
<a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a></div>

<div id="line">|</div>

<div class="icon_class"><a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a></div>

</div>
```
or better yet:

```
<div id="content">

<div class="icon_class"> 
<a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a>&nbsp;[b][color=red]<span id="line">[/color][/b]|[b][color=red]</span>[/color][/b]&nbsp;
<a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a></div>

</div>
```
Then, you could either put the new content in its own DIV or simply put paragraphs in:

```
<div id="content">

[b][color=red]
<p>Pellentesque tincidunt ultrices purus. Vivamus aliquam. Praesent commodo, diam quis egestas nonummy, lacus odio luctus elit, non rhoncus nulla tortor quis purus. Duis blandit. Duis porttitor, mauris vitae auctor ornare, ligula nunc faucibus dui, quis porttitor nunc nulla a libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Phasellus imperdiet. Fusce pellentesque risus quis lorem. Etiam pulvinar. Nunc scelerisque libero vel quam. Aenean massa eros, feugiat quis, adipiscing ac, scelerisque non, dui. Nulla ligula.</p>
<p>Mauris quis justo nec neque tristique posuere. Praesent rhoncus interdum quam. Vivamus elementum nisi eu leo vestibulum mollis. Nullam pellentesque bibendum purus. Nam hendrerit tincidunt enim. Etiam elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam felis justo, blandit sit amet, viverra non, convallis id, metus. Curabitur ut tellus. Sed pellentesque, est vel ullamcorper hendrerit, leo mi scelerisque elit, non ultrices risus nibh vel pede. Pellentesque gravida odio sed sem. Maecenas dignissim. Mauris nulla. Fusce sodales tellus sed mi. Aliquam convallis ornare velit. Suspendisse imperdiet. Vestibulum tincidunt.</p>
[/color][/b]
<div class="icon_class"> 
<a href="javascript:;" onClick=
"MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">twitter</a>&nbsp;[b][color=red]<span class="line">[/color][/b]|[b][color=red]</span>[/color][/b]&nbsp;
<a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')">facebook</a></div>

</div>
```
You'll have to play around with the new content and see how you can make it fit and function. The important thing is you won't have to touch the #navigation DIV placement or size. 



> Also the sprite menu i will look into.


Sounds like a plan and something I would do once more of the site was done. In fact, BEFORE doing this I would convert the current embedded stylesheet into an external one, so it can be easily shared between HTML files.

You can do a search on creating an "external stylesheet" to find out how to do that.

How is the site behaving in IE7 for you?

Peace...


----------



## mwdesign (Aug 20, 2010)

Ok i have uploaded the site once again this time with one slideshow under visualising sound. I have one problem and that is the view sequencer button at the bottom. In flash i have made this button link to another swf file and it works in flash but it wont in dreamweaver. The external swf that this button links to is inside the dreamweaver site file.

Any ideas why it wont work now? 

Um by the way how would i check the site in IE7?

thanks


----------



## tomdkat (May 6, 2006)

mwdesign said:


> Ok i have uploaded the site once again this time with one slideshow under visualising sound. I have one problem and that is the view sequencer button at the bottom. In flash i have made this button link to another swf file and it works in flash but it wont in dreamweaver. The external swf that this button links to is inside the dreamweaver site file.
> 
> Any ideas why it wont work now?


Nope. I don't do DreamWeaver support but someone else here might be able to help you out. The page in question:

http://www.marcweissdesign.com/fmp.html

appears to work in the browser, as far as I can tell, so I think whatever you did worked.  The only thing I would question is the size of the Flash object. The first one is 900px wide, which resulted in horizontal scrolling on my system. I don't necessarily think that needs to be scalable in size but maybe just a little more narrow (maybe 800px wide) to minimize scrolling for as many people as possible. Or not, depending on what you want the page to look and behave like. 



> Um by the way how would i check the site in IE7?


In IE8, there is a "Compatibility View" button to the right of the website address bar. You can click that button to toggle between viewing the page in IE8 "mode" and IE7 "mode".

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I've found another issue with the site. On the new page, there is a scrolling issue. If you scroll the screen to the right, the content appears UNDER the navigation menu and it looks funky. Attached is a screenshot.

This is something we can certainly deal with and I'll work up an option or two for doing so. This screenshot was taken on a monitor at 1024x768 screen resolution.

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm thats odd the slideshow doesnt go under the navigation when i open scale the browser :S thats odd. but the facebook and twitter do move and spill. i need to change that too. so that they only move to a certain width. 

thanks for letting me know bout that though. How would i change it? the slideshow is an swf file.


----------



## tomdkat (May 6, 2006)

It looks like you changed the width of the large Flash object from 900px wide to 805px wide. I currently don't have access to the system I posted the above screenshot from so I can't test the new change. I'll see how it behaves in my Windows 2000 environment.

Peace...


----------



## mwdesign (Aug 20, 2010)

Hi,

I have checked my site on a smaller resolution and i found that the facebook and twitter links and the links at the bottom of the page are not at the bottom of the contents div. Im guessing the contents div doesnt fit the maximum height of the page. :S i can send you my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Marc Weiss | Design™






































































































































FreeWebSubmission.com

SonicRun.com

Amfibi Web Search



Thanks


----------



## tomdkat (May 6, 2006)

mwdesign said:


> Hi,
> 
> I have checked my site on a smaller resolution and i found that the facebook and twitter links and the links at the bottom of the page are not at the bottom of the contents div. Im guessing the contents div doesnt fit the maximum height of the page. :S i can send you my code.


Ok, there appears to be a few things going on here. First, the #content DIV *does* fill the height of the browser viewport but you're competing for limited space and at the lower resolutions, your content causes some "interesting" behavior. 

What I found is this:

The "#row2" DIV has a bottom margin of 120px specified. This pushes down any DIVs that appear below that DIV. Additionally, the DIVs for the links at the bottom of the page have a 70px top margin specified, which pushes those elements farther down the page and effectively "outside" of the #content DIV (at least they appear to be outside of it).

So, you'll need to re-think how you want the links at the bottom of the page to behave. If the idea is to have them be at the very bottom of the page all the time, we can look at doing that. If the idea is to have them be at the bottom of the #content DIV, we can certainly do that as well.

The fact you're using a CSS float to position the links coupled with putting each link in its own DIV is convoluting your HTML. You're actually doing "more work" than you really need to.

So, figure out where you want those links to appear and we can go from there.

Peace...


----------



## mwdesign (Aug 20, 2010)

I seeee. ok Well i need the links at the bottom of the page I guess. I wasnt sure how to approach it because i didnt know whether I could put different texts within the same div and have them link to different addresses.


----------



## tomdkat (May 6, 2006)

Ok. I'll make changes to the current CSS to put the links at the bottom of the #content DIV first and I'll see if I can get that to retain the full viewport height. I'll remove the margins I mentioned above and you can see how that will work out for you.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here are some changes I came up with:

CSS:

```
#content {
		border: 5px solid green;
  		margin-left: 250px;
		height: 100%;
[b][color=red]		position: relative;[/color][/b]
	}

  		.row {
	        width: 70%;
	        height: auto;
			text-align:left;
[b][color=red]			  padding: 17px;[/color][/b]
	        margin-top: 0;
	        margin-right: auto;
	        margin-bottom: 0;
	        margin-left: auto;
			min-width: 700px;
		}
[b][color=red]
		#row1 { margin-top: 120px; }
		#row2 { }

/* Content footer - holds Facebook and other links */
	.content-footer {
		border: 1px solid red;
		position: absolute;
		width: 100%;
		height: 30px;
		bottom: 0;
		font-size: 12px;
		font-family: Arial, Helvetica, sans-serif;
		font-style: normal;
	}

	.content-footer p a { padding-left: 5px; }
	
	.special-link {
		font-family: "Grandesign Neue Serif", serif;
		font-size: 18px;
		font-style: italic;
		float: right;
		padding: 4px 10px 0 0;
	}
	
	/* Spacing around the dividing line between Facebook and Twitter links */
	.special-link img { padding: 0 2px 0 2px; }	
[/color][/b]
```
These CSS rules can be deleted:

.icon_class
#line
#facebook
#twitter
#slideshow
#freeweb
#sonic
#amfibi

HTML:

```
<div id="content">
<div id="row1" class="row">
<a href="" title=""><img src="index_files/proj1000.png" id="Image1" onMouseOver="MM_swapImage('Image1','','images/proj1_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href=""  title=""><img src="index_files/proj2000.png" id="Image2" onMouseOver="MM_swapImage('Image2','','images/proj2_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href=""  title=""><img src="index_files/proj3000.png" id="Image3" onMouseOver="MM_swapImage('Image3','','images/proj3_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href=""  title=""><img src="index_files/proj4000.png" id="Image4" onMouseOver="MM_swapImage('Image4','','images/proj4_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>

<div id="row2" class="row">
<a href="http://www.marcweissdesign.com/fmp.html"  title=""><img src="index_files/proj1sha.png" id="Image5" onMouseOver="MM_swapImage('Image5','','images/proj1shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href=""  title=""><img src="index_files/proj2sha.png" id="Image6" onMouseOver="MM_swapImage('Image6','','images/proj2shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href=""  title=""><img src="index_files/proj3sha.png" id="Image7" onMouseOver="MM_swapImage('Image7','','images/proj3shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
<a href=""  title=""><img src="index_files/proj4sha.png" id="Image8" onMouseOver="MM_swapImage('Image8','','images/proj4shadow_roll.png',1)" onMouseOut="MM_swapImgRestore()" /></a>
</div>
[b][color=red]
<div class="content-footer">
<span class="special-link">
<a href="javascript:;" onClick="MM_openBrWindow('http://twitter.com/marcweissdesign','twitter','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')"><img src="index_files/twitter0.png" id="Image21" onMouseOver="MM_swapImage('Image21','','images/images/twitter_roll.png',1)" onMouseOut="MM_swapImgRestore()"></a>
<img src="imaes/images/linkline.png">
<a href="javascript:;" onClick="MM_openBrWindow('http://www.facebook.com/people/Marc-Weiss/503356278?ref=search','facebook','toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes')"><img src="index_files/facebook.png" id="Image110" onMouseOver="MM_swapImage('Image110','','images/images/facebook_roll.png',1)" onMouseOut="MM_swapImgRestore()"></a>
</span>
<p style="padding: 0; margin: 5px 0 0 10px;">
<a href="http://freewebsubmission.com/">FreeWebSubmission.com</a>
<a href="http://www.sonicrun.com/">SonicRun.com</a>
<a href="http://www.amfibi.com/" target="_top" title="Amfibi Web Search & Directory">Amfibi Web Search</a>
</p>
</div>
[/color][/b]
[b][color=red]</div>[/color][/b] <!-- [b]DELETE THIS CLOSING DIV[/b] -->
</div><!-- End page body -->
```
Also, you can delete this empty DIV from the HTML:

```
<div id="pageBody"></div>
```
Once you're satisfied, you can turn off the borders I turned on for debugging purposes.

Peace...


----------



## tomdkat (May 6, 2006)

I also suggest you check out this site to get more familiar with both HTML and CSS:

HTML Tutorial

CSS Tutorial

Peace...


----------



## mwdesign (Aug 20, 2010)

Ok kool thanks i will apply those changes. 

One other thing is that if after ive done all my pages i wish to redo the navigation text. could i make the navigation in dreamweaver? using text in dreamweaver, because im finding that the navigation menu at the moment isnt as crisp as other text on the page for example the links. So i think if i were to make the navigation with rollovers in dreamweaver it will look sharper. 

Thank you for the links as well


----------



## tomdkat (May 6, 2006)

If you abandon the images for your navigation menu text in favor of plain text menu options (which is what you would do in DreamWeaver), you will have to sacrifice the "fancy" font you're currently using. Well, that's not *totally* true in that you could use the CSS3 @font-face function to pull in the "fancy" font but then you get into font licensing issues, and so on.

So, I would see if you can improve the quality of the current navigation menu images, if you like the current font. 

Peace...


----------



## mwdesign (Aug 20, 2010)

Hi, 

sorry i have been away lately on holiday so havent had much time to do anything to my site. Ive had to make a change regarding my slideshow because there is a problem with the coding im using. So i have decided to scrap the slideshow and just show my images one after another from top to bottom as the user scrolls. Much simpler. 

One quick question, i intend to put text regarding the project at the top. Is there a way to change different part of text such as colour and size without having to apply different classes etc. So i would just highlight it and change whatever i need to. For example the 1st sentence would be a title and would be a different colour. 

There is also another issue i am facing and that is changing line width to diffrenciate between title and body text. I want body text to be closer together and a slightly larger line width in between the title and the body text. 

Also regarding your last message i intend to change the navigation font to a simple arial/helvetica, which comes standard in dreamweaver. 

Many thanks for all your help.


----------



## tomdkat (May 6, 2006)

Sorry for the delay in responding. I've been busy with work and some family issues. 



mwdesign said:


> sorry i have been away lately on holiday so havent had much time to do anything to my site. Ive had to make a change regarding my slideshow because there is a problem with the coding im using. So i have decided to scrap the slideshow and just show my images one after another from top to bottom as the user scrolls. Much simpler.


Hmmm, which slideshow script were you using? A JavaScript one?



> One quick question, i intend to put text regarding the project at the top. Is there a way to change different part of text such as colour and size without having to apply different classes etc. So i would just highlight it and change whatever i need to. For example the 1st sentence would be a title and would be a different colour.


Yep, but that violates the whole point of using CSS, in the first place.  The idea is to keep the styling separate from the content. So, in your case you will either need to use "font" tags (which have been deprecated, I think but am not sure) to style that text or use a "" tag (which I recommend) with a class assigned which has the styling properties you desire. For example,
CSS:

```
.special-text {
color: #ff0000;
font-style: italic;
font-weight: bold;
}
```
HTML:

```
<p>This is a paragraph of text <span class="special-text">with this text styled differenly</span> than the rest of the text.</p>
```
This way, you can develop some classes with various different style attributes and apply them to all different kinds of elements that contain text. One thing I do is to create CSS classes with basic style rules and then "stack" the classes on the elements on which I want to apply various styles. Here's an example:

CSS:

```
.red { color: #ff0000; }
.white { color: #fff; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
```
HTML:

```
<p class="red">This text should be red <span class="bold white">except for this text which should be white and bold</span> and <span class="italic bold">this text should be red, italic, and bold</span>.  Isn't that neat></p>
```
Notice how I specify the various classes, separated by a space.



> There is also another issue i am facing and that is changing line width to diffrenciate between title and body text. I want body text to be closer together and a slightly larger line width in between the title and the body text.


This should be easy to accomplish with CSS. Is the "title" in a 
* or 
 element or is this title part of the regular body text that you want to differentiate? Can you post an example of what you want?




Also regarding your last message i intend to change the navigation font to a simple arial/helvetica, which comes standard in dreamweaver.

Click to expand...

Keep in mind, your font choices aren't related to what DreamWeaver supports but what the browsers will support, since the browsers will be rendering the page, not DreamWeaver. Check out this site to find CSS fonts that can work well for you. If you choose the right families of fonts, your site can look the way you want across all or most user agents (browsers) or come as close to what you want as possible and without sacrificing much of your original vision in the process. 

Peace...*


----------



## mwdesign (Aug 20, 2010)

ahh i see ok well i intend to keep it simple and use arial/helvetica across the entire website, with the only changes being colour size etc. The reason i want to change the navigation to arial helvetica through dreamweaver is because i have had a look at my website and the textual image slices dont look clear on all resolutions. However the type i have done using dreamweaver is much clearer. So i think its best for users if i make all my navigation and body text using css. lol Thanks for the help. 

One other problem i am facing is trying to seperate my type into two columns. Should i make two divs containing the text within the content div?

for example.

Title - ////

fbsdfvsdfbdshjfbashdfbhbhasdbfhajsbfahs fhbsdfsdhbfasdfbasdifbfsdfdfdf
fbasdhfbsdfbashfbasdhfbsdhjfbshfbb fsrfefdefefefewfefeferfefer
fhdfbshfbdsfhbsfbsdfnsodfnjsafnauiffdjfbd grggrrhrhrhrgfghbgahjfbgajbnfgaj
fjsdbnfsdfbsdjbfsdjfbdsjfbsdjfbdjsfbsdjfbdd


images go underneath the text one after another in line.


----------



## mwdesign (Aug 20, 2010)

haha ok it didnt show the columns as i wanted. 

it would just be two columns like you find in a magazine. The reason for this is because one column would be the width of the images to keep everything aligned, and this causes the line length to be poor for legibility.


----------



## mwdesign (Aug 20, 2010)

Ive uploaded an image of the layout changes i need to make. This layout will be easier i think than implementing a flash slideshow. Also should be quicker to load. thank you and sorry to hear about your issues hope all is good.


----------



## mwdesign (Aug 20, 2010)

oh yeah by the way. i dont mind the title and the text being in the same bit of text or if its easier make the title under a 
*, whichever is easier to sort out the line width. Currently i have my title in an 
 and my body text in

but im not sure how to create two columns and position them side by side. thanks*


----------



## mwdesign (Aug 20, 2010)

just very quickly i am hoping to have a similar finished navigation menu to this now simple without too much going on. Im unsure how to get the accordion effect however for submenus etc. I wish to make the navigation in dreamweaver itself using helvetica/arial font family.

I have been told that i should look at jquery to make it by a friend, but i want to see if there is an easy way.

heres an example of what i want.

http://www.zara.com/webapp/wcs/stores/servlet/category/uk/en/zara-sales/11032/Man


----------



## tomdkat (May 6, 2006)

Thanks for the layout image. I'll play around with this a little today. I've been insanely swamped this month.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I've got a test case you can experiment with:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout test case</title> 
<style type="text/css">
#text-area { 
	border: 2px solid black;
	width: 575px; 
}

.text-block { border: 1px solid red; padding: 5px; margin-top: 5px;}

.left { float: left; width: 270px; }
.right { float: right; width: 270px; }
#clear { clear: left; }

h1 { background-color: red; color: #fff; width: 282px; margin-bottom: 5px; }
</style>
</head>
<body>
[b][color=red]
<div id="text-area">
<h1>Title goes here</h1>
<div class="text-block left">
<p>Paragraph block #1</p>
</div>

<div class="text-block right">
<p>Paragraph block #2</p>
</div>
<div id="clear"></div>
</div>
[/color][/b]
</body>
</html>
```
I've deleted all of the other files I had when helping you before and I don't have time to recreate any of that now.

Save the above HTML to a file and view it in your browser to see how it renders. The important stuff is in red above. The styling above should be adjusted, per your requirements.

Hope that helps! 

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm i kind of understand. the div id u have given the dimensionsof the size. then uve made classes for the positioning. i was unsure about the positioning. how to position different divs so that helps thanks. one thing what is the clear:left element for?

thanks by the way thats very helpful i will try and implement that. Once i can make one page perfectly i can make the rest of the website by just swapping images for different ones and saving new pages. so i jsut need to get the home page and the project one perfect.

btw do you know any way i could make a similar menu to the link i posted? a simple accordion.

http://www.zara.com/webapp/wcs/stores/servlet/category/uk/en/zara-sales/11032/Man


----------



## mwdesign (Aug 20, 2010)

if not an accordion a simple list of buttons for each project will do. im not sure how to make a button in dreamweaver because ive always used slices. lol sorry for asking so many questions. 

thanks


----------



## mwdesign (Aug 20, 2010)

Hi ok i have made many changes now to my project page which i will implement to other pages as well. However i am having an issue with the text paragraph blocks that you sent me. The divs for the two columns are at different heights and i am not sure why i have managed to align the left block exactly as i want it with the right spacing etc. between the title and the content, but the right block starts lower than the left. :S not sure why i cant see anything different from your original one.

Ive uploaded a print screen.

This is my CSS now.


----------



## tomdkat (May 6, 2006)

Can you post a link to the page so I can see the rest of the HTML?

Peace...


----------



## mwdesign (Aug 20, 2010)

ok heres a link

http://www.marcweissdesign.com/fmp.html

also i need to add a div on the right hand side of the page where i can put contact details and that should be it.

thanks alot


----------



## tomdkat (May 6, 2006)

Ok, you have an empty paragraph above the DIV on the right:

```
<div id="content">
<div id="text-area">
<hr align="center" width="640" size="1" noshade class="linetop" id="line1" color="#333333">
<h1>VISUALISING SOUND /</h1>
<div class="left">
  <p>This project looks at the ways in which sound is visualised. My idea was to create a typeface based on sound. By making a 16 step sequencer I plotted points on the sequencer to create a musical alphabet. The user can create any shape they want and it will play a melody. </p>
  <hr align="left" width="8" size="1" noshade class="linetop">
  <div class="text-block linktext">

    <p><a href="sequencer.html" class="text_link">View Sequencer</a></p>
</div>
</div>

[b][color=red]<p>&nbsp;</p>[/color][/b]
<div class="right">
  <p>&nbsp;</p>
</div>
<div id="clear"></div>
</div>

<div class="row" id="images">
  <p><img src="images/IMG_1901.png" width="640" height="426"></p>

  <p><img src="images/IMG_1911.png" width="640" height="426"></p>
  <p><img src="images/IMG_1915.png" width="640" height="426"></p>
  <p><img src="images/IMG_1923.png" width="640" height="426"></p>
  <p>&nbsp;</p>
</div>
</div>
</div>
```
Try removing that paragraph and see how things align for you.

Peace...


----------



## mwdesign (Aug 20, 2010)

wow i didnt see that yeah thats fixed it thanks alot. How would i make a dive and position it on the right of the content div by the way? Im still not sure how to position divs. Cheers


----------



## tomdkat (May 6, 2006)

Here is something to try:

```
<div id="content">
[b][color=red]
<div id="contact-info">
<p>My name is mud</p>
</div>
[/color][/b]
<div id="text-area">
<hr align="center" width="640" size="1" noshade class="linetop" id="line1" color="#333333">
<h1>VISUALISING SOUND /</h1>
<div class="left">
  <p>This project looks at the ways in which sound is visualised. My idea was to create a typeface based on sound. By making a 16 step sequencer I plotted points on the sequencer to create a musical alphabet. The user can create any shape they want and it will play a melody. </p>
  <hr align="left" width="8" size="1" noshade class="linetop">
  <div class="text-block linktext">

    <p><a href="sequencer.html" class="text_link">View Sequencer</a></p>
</div>
</div>

<div class="right">
  <p>&nbsp;</p>
</div>
<div id="clear"></div>
</div>

<div class="row" id="images">
  <p><img src="images/IMG_1901.png" width="640" height="426"></p>

  <p><img src="images/IMG_1911.png" width="640" height="426"></p>
  <p><img src="images/IMG_1915.png" width="640" height="426"></p>
  <p><img src="images/IMG_1923.png" width="640" height="426"></p>
  <p>&nbsp;</p>
</div>
</div>
</div>
```
And the CSS style rules:

```
#contact-info { 
border: 1px solid red;
float: right;
width: 100px;
}

#contact-info p { color: #fff; }
```
That should get you started. From there, you can fine tune width of the contact area, etc. I haven't tried this myself so I have no idea what will actually happen. But I'm thinking (or hoping, rather ) the above CSS will get that DIV positioned where you want.

Also, you should change the page background image. Attached is how the page rendered for me. I've also attached some possible replacement images, one in PNG format and one in JPEG format. If the JPEG version can work for you, use that one since it's only 887 bytes in file size, which means it will load SUPER fast. 

The current background image is 157kb! 

Peace..


----------



## mwdesign (Aug 20, 2010)

ok kool ill try that....

right ive uploaded the live site again. on the link i sent u now there is a slight problem im having aligning the text with the logo. The div aligns perfectly with the logos div. But the text does not touch the top of its div, so it does'nt align properly.

Also i noticed in ur images that my background isnt 100%? even tho the body and html in my code are given 100% height and width? confused :S


----------



## mwdesign (Aug 20, 2010)

by the way the contact info div works but it positions it sort of half way down the page. Ive uploaded a jpeg showing it.


----------



## mwdesign (Aug 20, 2010)

haha oh ok i figured it out ignore that last post. I placed the div after the content div instead of inside it. its fine now.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> Also i noticed in ur images that my background isnt 100%? even tho the body and html in my code are given 100% height and width? confused :S


That's because your background image was formatted at a specific screen resolution. The background images I posted have a width of 9 pixels and a height of 2000 pixels (or something like that). Since the background image will be tiled along the X-axis, the background image needs to have a large height. This way, most, if not all, foreseeable screen resolution heights will be filled. Besides, having a smaller background image allows for a much faster loading page since the user isn't waiting for large files to be transfered before the page is fully rendered.

Peace...


----------



## mwdesign (Aug 20, 2010)

ok i will change the background size then. The last thing is the alignment of the logo and the writing next to it. the divs are aligned but the text div has a gap at the top and im not sure why. Thanks


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ok i will change the background size then. The last thing is the alignment of the logo and the writing next to it. the divs are aligned but the text div has a gap at the top and im not sure why. Thanks


I think it's because you've got too many "block level" elements, each with its own set of margins (which have collapsed, probably), padding, etc.

The idea is to keep everything as simple as possible. So, here's a test case that will hopefully get you headed in the right direction:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
  <title>Weiss logo</title> 
 
  <style type="text/css"> 
#logo {
  width: 125px;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 10px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  height: 70px;
  padding-top: 5px;
}
#logo img {
  float: left;
}
#logo p {
  margin: 0;
  padding: 0;
  float: right;
  width: 50px;
  font-weight: bold;
}
.orange {
  color: #ff6600;
}
  </style> 
</head>
<body> 
<div id="logo"> 
<img style="width: 50px; height: 33px;" alt="Marc Weiss logo" src="mylogo.png">&trade;
<p><span class="orange">MARC WEISS</span> GRAPHIC DESIGN</p> 
</div> 
</body>
</html>
```
Attached is a screenshot of how the above renders.

Peace...


----------



## mwdesign (Aug 20, 2010)

ok I have tried to implement your code. there are two problems. Yes the alignment is now fixed, but the last

holding the design_ strays off to the left. Also the #logo p is conflicting with the .orange class. Because if i assign the div a grey colour it changes alf four words to grey. And when i want to add the orange class to my name it doesnt do anything because there are technically two colours given for the same thing. Should i use classes rather than the #logo p div? that way i can assign both areas a class with different colours?  Almost there lol


----------



## mwdesign (Aug 20, 2010)

ive uploaded onto the live site btw  so you can see what i mean.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ok I have tried to implement your code. there are two problems. Yes the alignment is now fixed, but the last
> 
> holding the design_ strays off to the left. Also the #logo p is conflicting with the .orange class. Because if i assign the div a grey colour it changes alf four words to grey. And when i want to add the orange class to my name it doesnt do anything because there are technically two colours given for the same thing. Should i use classes rather than the #logo p div? that way i can assign both areas a class with different colours?  Almost there lol


That is because you have the "Marc Weiss Graphic Design" text in separate paragraphs. As a result, each paragraph will need to be styled appropriately.

Looking back at my example:

```
div id="logo"> 
<img style="width: 50px; height: 33px;" alt="Marc Weiss logo" src="mylogo.png">&trade;
[b]<p>[color=red]<span class="orange">MARC WEISS</span>[/color] GRAPHIC DESIGN</p>[/b]
</div>
```
Notice, "Marc Weiss Graphic Design" is in ONE paragraph, with a "" being used to assign the orange color to the text. The point of my posting the code snipets above is for you to learn how to create your style rules. They aren't intended for you to use "blindly". 

So, if you deal with the paragraphs you have now appropriately, you will be able to address the paragraph that is currently in the wrong position.

Have you considered hiring a web designer to help with future maintenance?

Peace...


----------



## mwdesign (Aug 20, 2010)

ahh i see ok yeah its done now. lol ermm i dont really know any web designers currently. I didnt think there would be much need for a simple website lol. but yeah thank you for your help that should be it.


----------



## tomdkat (May 6, 2006)

Believe me, there is nothing "simple" about the site design you wanted. A "simple" site design would have had the entire page content scroll up or down with the scrollbar and nothing would have taken the full height of the browser window at any given resolution, etc.

I will say I think it looks good and I'm the first to admit I have zero design skills. I'm more of an 'under the hood' kind of guy. 

Peace...


----------



## mwdesign (Aug 20, 2010)

hahaa ahh see because this is the first time ive ever done nething dreamweaver based i didnt know anything at all. But i think ive learnt a fair amount in a short amount of time. Thanks alot for your help, its much appreciated. i just have to complete the site now


----------



## mwdesign (Aug 20, 2010)

ok ive made the background changes you suggested and made it 8px by 2000px. However the image isnt 100% nemore :S but the html, body code says 100% for both the factors. If i give it a fixed background attatchment then more than half of the image is cut off.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ok ive made the background changes you suggested and made it 8px by 2000px. However the image isnt 100% nemore :S but the html, body code says 100% for both the factors. If i give it a fixed background attatchment then more than half of the image is cut off.


Sorry for the delay. I didn't get notified of your response.

Since the content on the right side of the page can have a height taller than your background gradient, there are a couple of options we have.

Option #1, we can have the body background image repeat along both the X and Y axis, like this:

```
body {
	width:100%;
	height:100%;
	background-image:url(background.png);
[b][color=red]	background-repeat: repeat-x;[/color][/b]
	}
```
Remove the line in red above.

Option #2 would be to have ONLY the content DIV on the right scroll when the browser level scrollbar is used. This will be more tricky but should be possible. For now, go with option #1 and see how it works out for you. Since the image is a gradient, you can do some neat things, using the background color of the page in conjunction with the gradient image. I'll work up an example of what I mean by this and will post it shortly.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here is a test case you can experiment with. The gradient image I used is attached. I'll also attach some screenshots.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
  <title>Gradient trick</title> 
  <style type="text/css"> 
body {
  background-color: black;
  color: white;
  font-family: "Times New Roman",Times,serif;
  font-size: large;
  background-image: url(gradient-tall2.png);
}
  </style> 
</head>
<body> 
<p>This is some text that should overlay a gradient which is a PNG
image with alpha transparency.</p> 
 
<p>This background won't work in IE6 or earlier browsers, but will work
fine in IE7 and later IE versions as well as all versions of Firefox,
Chrome, Safari, Opera, and derivative browsers based on Gecko or Webkit.</p> 
 
<p>Here are some images to make the scroll bars appear:</p> 
 
<p style="text-align: center;"><img style="width: 640px; height: 480px;" alt="" src="{put your image URL here}"></p> 
 
<p style="text-align: center;"><img style="width: 640px; height: 480px;" alt="" src="{put your image URL here}"></p> 
 
<p style="text-align: center;"><img style="width: 640px; height: 480px;" alt="" src="{put your image URL here}"></p> 

<p style="text-align: center;"><img style="width: 640px; height: 480px;" alt="" src="{put your image URL here}"></p> 

<p style="text-align: center;"><img style="width: 256px; height: 256px;" alt="" src="{put your image URL here}"></p> 

<p style="text-align: center;"><img style="width: 640px; height: 512px;" alt="" src="{put your image URL here}"></p> 

<p style="text-align: center;"><img style="width: 640px; height: 480px;" alt="" src="{put your image URL here}"></p> 
 
</body>
</html>
```
Fill in the image URLs for your images and adjust the sizes as you want. The main point is to see how the gradient background works with browser scrolling.

Peace...


----------



## tomdkat (May 6, 2006)

I just stumbled across a third option. Here is a test case I wrote up sometime last April for someone else here.

Here is the test case:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Gradient Background Test</title>
<style type="text/css">
html {
  margin: 0;
  padding: 0;
  background-repeat: repeat-x;
  height: 100%;
  background-image: url(gradient-background-top.png);
}
body {
  margin: 0;
  padding: 0;
  background-image: url(gradient-background-bottom.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-color: transparent;
  height: 100%;
}

</style>
</head>
<body>
<div style="border-style: solid; width: 800px; height: 475px; margin-right: auto; margin-left: auto; margin-top: 30px; background-color: rgb(0, 204, 204); opacity: 0.3;"><br>
</div>
</body>
</html>
```
The idea here is to put the top of the gradient as the background of the "body" element and the bottom of the gradient as the background of the "html" element.

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm ok ive made that change but the background still doesn't scale to the browsers height so that you can see the whole image. I need the background to be made into a fixed position thats why i want it so that you can see the whole image according to the users screen height. So it will scale in height accordingly.

this is my code currently in case im missing something..


```
html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	}
	
	a img {
	border:none;
	text-align: right;
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 5px;
	}
	
	body {
	width:100%;
	height:100%;
	background-image:url(background-website!-3d-wide-wall-2000wide-strip.jpg);
	}
		
  	#navigation {
	position:fixed;	
	float: left;
	height: 100%;
	width: 230px;
	border: 0px;
	left:0;
	margin:0;
	
	}
	
	#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 99.5%;
		margin-top:2px;
	}
	
	#nav-back img {
		width: 207px;
		height: 100%;
	}
  			
  		#content {
	padding: 0px;
	/*  			border: 1px solid green;*/
  	margin-left: 300px;
	height: 100%;
	float: none;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	font-size: 11pt;
	color: #666;
	}
	
	
#contact-info {
	float: right;
	width: 150px;
	height: 100%;
	padding-top: 22px;
	padding-right: 30px;
	line-height: normal;
	text-align: left;
	color: #444;
}

  		
   		.row {
	width: 70%;
	height: auto;
	text-align:left;
	margin-top: 1;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 70px;
	min-width: 700px;
	padding-left: 1px;
		}
		
  		.row a img { 
			max-width: 158px; 
			max-height: 259px;
			min-width:70px;
			min-height:70px;
			width: 19%;
			border: none;
			padding-left:2%;
			padding-right:2%;
			background-position:center;
  		}

		#row1 {
	        margin-top: 120px;
	        padding: 17px;
			
		}
		
		#row2 {
			padding: 17px;
			
		}
		
		
		#logo {
	margin-top:27px;
	margin-left:45px;
	width:150px;
	height:120px
	}
	
	#logoimg {
	float:left;	
	}
	
	#logo p {
	margin: 0;
	float: right;
	width: 60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #444;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1px;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 0;
}

.orange {
	color:#F60;
}
		
		
	.menu {
	margin-left:48px;
	margin-right:0;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 5px;
	color: #444;
	font-style: normal;
	font-weight: 400;
	margin-top: 20px;
		}
		
		.menu a:link {
	color:#444;
	text-decoration:none;
}
		.menu a:visited {
	color:#444;
	text-decoration:none;
}
		.menu a:hover {
	color:#FFF;
	text-decoration:none;
}
		.menu a:active {color:#FFF; text-decoration:none;}
		
		
		#menu_bottom {
	margin-left:10px;
	margin-top:20px;
	position:relative;
		}
		#copyright {
	bottom: 5px;
	margin-top: 1350px;
	margin-right: 30px;
		}
		.icon_class {
	text-align:center;
	padding:0px;
	float: right;
	height: 30px;
	width: 80px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-family: "Grandesign Neue Serif";
	font-size: 14px;
	font-style: italic;
	color:#FFF;
		}
		#line {
	color: #FFF;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	width:5px;
	text-align:right;
	padding:0px;
	float: right;
	height: 30px;
	font-weight: bold;
		}

#text-area {
	padding-top: 22px;
	width: 640px;
	margin-left: 70px;
}

.text-block { padding: 0px; margin: 0;}

.left {
	float: left;
	width: 310px;
	font-size: 11px;
	line-height: normal;
	font-weight: 400;
	font-style: normal;
	color:#666;
	margin-bottom: 2px;
}
.right {
	float: right;
	width: 310px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 400;
}

#clear { clear: left; }



h1 {
	color:#F60;
	width: 640px;
	margin-bottom: 1px;
	font-size: 9px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
}

.linetop {
	margin-top:5px;
	margin-bottom: 20px;
	color:#333;
}

.linktext {
	color:#444;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}
.linktext a:link {color:#444; text-decoration:none;}
.linktext a:visited {color:#444; text-decoration:none;}
.linktext a:hover {color:#FFF; text-decoration:underline;}
.linktext a:active {color:#FFF; text-decoration:none;}

.work {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#F60;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	margin-left: 48px;
	margin-top: 66px;
}

.contact {font-size:9px;
	color: #F60;	
}
.resume {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #333;
	line-height: 3px;
	text-align: right;
}
.contact {
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
}
.email {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #444;
	text-align: right;
}


.index {
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: 2pt;
	color: #444;
}

.index a:link {
	color:#444;
	text-decoration: none;
}
.index a:visited {
	color:#444;
}
.index a:hover {
	color:#EEE;
}
.index a:active {
	color:#EEE;
	font-size: 9px;
	text-align: left;
}

.about {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
	letter-spacing: 1pt;
	color: #444;
}

.about a:link {
	color:#444;
	text-decoration: none;
}
.about a:visited {
	color:#444;
	text-decoration: none;
}
.about a:hover {color:#EEE; text-decoration: none;}
.about a:active {
	color:#EEE;
	text-decoration: none;
}

.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: right;
	color: #666;
}
.tm {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #444;
	text-align: left;
	float: left;
}

.resume a:link {
	color:#666;
	text-decoration:none;
}
.resume a:visited {
	color:#666;
	text-decoration:none;
}
.resume a:hover {color:#EEE; text-decoration:underline;}
.resume a:active {
	color:#666;
	text-decoration:none;
}
.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	color: #666;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: left;
	padding-bottom: 5px;
}


.captions {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	color: #555;
	text-decoration: underline;
}
</style>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body link="#333333" alink="#FFFFFF" onLoad="MM_preloadImages('twitter-logo-roll.png','facebook-icon-roll.png')">
<!-- Page body -->
<!-- Nav menu -->
<div id="navigation">

<div id="logo">
  <hr align="left" width="150" size="1" noshade color="#333333" class="linetop">
  <div id="logoimg">
    <p><img src="images/mylogo.png" width="50" height="33" align="left"><span class="tm">&#8482;</span></p>
  </div>
  <div>
    <p><span class="orange">MARC WEISS</span> GRAPHIC DESIGN_</p>
</div>
</div>



<div class="work" id="work">
<hr align="left" width="150" size="1" noshade class="linetop" color="#333333">
<p>SELECTED WORK</p>
</div>


<div class="menu" id="menu">
  <p>International Style</p>
<p>Innovate &amp; Consolidate</p>
  <p>Home Delivery </p>
  <p>Web Design</p>
  <p><a href="fmp.html">Visualising Sound</a></p>
  <p>Corporate Identity</p>
  <p>E4 Animation</p>
  <p>Photography</p>
</div>
<div id="menu_bottom"></div>
</div> 
<!-- End Nav menu -->

<div id="content">

<div id="contact-info">
<hr align="right" width="150" size="1" noshade class="linetop" color="#333333">
<p class="contact"><span class="index"><a href="index.html">INDEX_</a></span></p>
<p class="contact"><span class="about"><a href="index.html">ABOUT ME_</a></span></p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<hr align="right" width="150" size="1" noshade class="linetop" color="#333333">
<p class="contact"><span class="contact"><span class="contact">CONTACT</span></span></p>
<p class="email">[email protected]</p>
<hr align="right" width="5" size="1" noshade class="linetop" color="#333333">
<p class="resume"><a href="cv_finished.pdf">DOWNLOAD RESUME</a></p>
<p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','twitter-logo-roll.png',1)"><img src="twitter-logo.png" name="Image7" width="20" height="20" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','facebook-icon-roll.png',1)"><img src="facebook-icon.png" alt="facebook" name="Image8" width="20" height="20" border="0"></a></p>
</div>

<div id="text-area">
<hr align="center" width="640" size="1" noshade class="linetop" id="line1" color="#333333">
<h1>VISUALISING SOUND /</h1>
<div class="left">
  <p>This project looks at the ways in which sound is visualised. My idea was to create a typeface based on sound. Cymatics has been the main focal point when visualising sound, and I wanted to try and relate sound through a design process, which would result in a graphical outcome.</p>
<hr align="left" width="5" size="1" noshade class="linetop" color="#333333">
<div class="text-block linktext">
  <p><a href="sequencer.html" class="text_link">View Sequencer</a></p>
</div>
</div>

<div class="right">
  <p>Using a 16 step sequencer to generate musical notes, I created an alphabet which would have its own sound based on the points pressed.  The sequencer could be made to have different instruments, and values (such as pitch, bass etc.) to make the outcome more interesting. </p>
</div>
<div id="clear"></div>
</div>

<div class="row" id="images">
  <p><img src="images/IMG_1901.png" width="640" height="426"></p>
  <p><img src="images/IMG_1911.png" width="640" height="426"></p>
  <p><img src="images/IMG_1915.png" width="640" height="426"></p>
  <p><img src="images/IMG_1923.png" width="640" height="426"></p>
  <p>&nbsp;</p>
  <hr align="left" width="640" size="1" noshade color="#444444">
  <p class="copyright">Copyright &copy; 2010 _ Marc Weiss Design</p></div>
</div>
</div>
<!-- End page body -->
</body>
</html>
```


----------



## mwdesign (Aug 20, 2010)

woops i didnt see your last cuple messages....Ok i see what you mean...with the test one you made up should i divide my background into 2 halves then? because my grandient isnt a proper gradient i have tried to make it look almost like a 3d room. I just need it to fit the broswers height because the content will scroll over it when it has its fixed position. if i give it a fixed property as it is obv because its height is more than my resolutions, more than half the image will be cut off lol. thats why im trying to make it scale acording to the users resolution and i thought 100% height would do that :S lol


----------



## tomdkat (May 6, 2006)

mwdesign said:


> hmm ok ive made that change but the background still doesn't scale to the browsers height so that you can see the whole image. I need the background to be made into a fixed position thats why i want it so that you can see the whole image according to the users screen height. So it will scale in height accordingly.


Looking at the live site, I still see the background repeat specified:


```
border:none;
	text-align: right;
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 5px;
	}
	
	body {
	width:100%;
	height:100%;
	background-image:url(background.png);
[b][color=red]	background-repeat: repeat-x;[/color][/b]
	}
		
  	#navigation {
	position:fixed;	
	float: left;
	height: 100%;
	width: 230px;
	border: 0px;
	left:0;
	margin:0;
	
	}
```
So, please refresh the live site so I can see how things are behaving now.

Peace...


----------



## tomdkat (May 6, 2006)

mwdesign said:


> woops i didnt see your last cuple messages....Ok i see what you mean...with the test one you made up should i divide my background into 2 halves then? because my grandient isnt a proper gradient i have tried to make it look almost like a 3d room. I just need it to fit the broswers height because the content will scroll over it when it has its fixed position. if i give it a fixed property as it is obv because its height is more than my resolutions, more than half the image will be cut off lol. thats why im trying to make it scale acording to the users resolution and i thought 100% height would do that :S lol


Are you saying your background image will have visible objects and not just be some mix of colors?

Peace...


----------



## mwdesign (Aug 20, 2010)

well you see the background was actually created on a 3d programme as an immage, but because there is simply a horizontal line making it look like a room, i can do what you told me to and make the width for example 8px and the height 2000px to cover all the browsers. But because im going to add a fixed property to the background so that it does not scroll but the content does, i need the background to fit the browsers height. Which is why i originally made it to fit my screen resolution perfectly, but obviously that wont work on other resolutions and left a white gap before. So now im hoping to make the height scale whenever it needs to in order to fit the browser, just like when you use a 100% width it scales to the browsers width. 

The image you see currently is a tall strip which i have repeated over the x axis yes. This was to save loading time as you mentioned. But the height fits the whole content rather than the height of the browser, and because it is fitting the content if i were to add a fixed property you wont see the whole background in one, you will only see a quarter or so. lol 

Sorry for being confusing, but ive tried to see if there are ways of doing it and no1 seems to know i thought you might.


----------



## mwdesign (Aug 20, 2010)

ive uploaded the page to the live site now, and removed the repeat-x


----------



## mwdesign (Aug 20, 2010)

btw the background doesnt have visible objects no just a line at the bottom of the image which is supposed to look like a 3d room. If there were visible objects however lets say if the background wasnt a gradient but an image would it still be possible to make the height fit the users broswer height? or will it look distorted? thanks


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ive uploaded the page to the live site now, and removed the repeat-x


Can you send me the correct URL? Apparently, the URL I'm using:

http://www.marcweissdesign.com/fmp.html

Points to an outdated page.

Thanks!

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm thats odd does it not work? it is the same url.

http://www.marcweissdesign.com/fmp.html

that should be right :S...its working on mine.


----------



## tomdkat (May 6, 2006)

Ok, Comcast must have cached your page or something. Now, with the "repeat" property removed, the background fills the height of the browser window.

Attached are screenshots. Now, I'll go back over your previous posts to see what the current issue is. Based on the second screenshot I posted, it looks like you're using a gradient, given the difference in color between the top of the page and the bottom.

EDIT: Also, is the ACTUAL page background you want to use the one on the page that's up now?

Peace...


----------



## mwdesign (Aug 20, 2010)

um well thats why i mentioned whether it is possible to make it fit the screen height if it had visible objects incase i need to change the background to an actual full image rather than a gradient. 

Currently i think i will still need to make changes to the actual background to get it the right colour and align the bottom part properly with the menu etc. So i will probably make changes to the current background you see. But the size i will make the same if it is needed that way.

The colour at the bottom looks slightly odd so I think i will make changes to that yes.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> well you see the background was actually created on a 3d programme as an immage, but because there is simply a horizontal line making it look like a room,


I'm not seeing this horizontal line. Where is it?



> But because im going to add a fixed property to the background so that it does not scroll but the content does, i need the background to fit the browsers height.


If the background image is tall enough, this won't be an issue. However, if there is something at the BOTTOM of the background image you want shown ALL the time, then we'll need to take a different approach. I'll have to go back to the beginning of this thread to see if you mentioned this back then.



> The image you see currently is a tall strip which i have repeated over the x axis yes. This was to save loading time as you mentioned. But the height fits the whole content rather than the height of the browser, and because it is fitting the content if i were to add a fixed property you wont see the whole background in one, you will only see a quarter or so. lol
> 
> Sorry for being confusing, but ive tried to see if there are ways of doing it and no1 seems to know i thought you might.


I understand but the problem I'm having is the images you're currently using don't really fit the description of the behavior you want. Look at the screenshots I posted above. That background looks like a gradient image to me because as you scroll down the height of the image, the color slowly changes and becomes a gray color at the bottom.

For now, DO NOT change anything to give me a chance to go back over the thread to see if there was something about the specific nature of the background image that I missed. Having a particular image as the page background isn't difficult but it isn't trivial either. Additionally, the more complex the background image you want to use is, the more difficult it will be to get that image to "behave".

So, if the background image you're currently using is NOT the _actual_ background image you want to use, please either post the _actual_ background image or send it to me via e-mail so I can know exactly what you're wanting to work with.

Peace...


----------



## tomdkat (May 6, 2006)

Is it the shading you're wanting to preserve along the bottom of the window, as shown in the screenshots in the first post of this thread?

Peace...


----------



## mwdesign (Aug 20, 2010)

oh ok well i will work on the background image properly then and send it. Should i keep the dimensions the same? 

And yes as you scroll the colour does change but if the image were to fit the visible part of the browser then it will look like an image rather than a gradient.

The horizontal line im referring to is the part where the grey changes from a dark to light grey at the bottom of the page. That is meant to indicate the line you would see which seperates a wall and a floor. To make it look 3D. 

Sorry for the trouble i know im a pain. lol


----------



## mwdesign (Aug 20, 2010)

ok if you see the background in the image ive attatched. That is how i need the background to look across as many resolutions as possible. because the background will be fixed position. Currently though because the height is 2000px the background has to scroll with the content rather than fit the viewable area.


----------



## tomdkat (May 6, 2006)

Ok, the line I'm seeing looks like the line that can appear when the background gradient is repeated vertically.

Attached is a screenshot. Is the line I highlighted the line you're talking about? Can you either post the ENTIRE background image or at least a screenshot of the TOP of the browser window?

Peace...


----------



## mwdesign (Aug 20, 2010)

lol im not seeing a screenshot :S

um the image i posted wasnt repeated vertically it was the whole image 1366px by 768px which is my comps resolution so it fit perfectly for me but didnt for you. Then I took a strip off the image which was 8px by 2000px and repeated that vertically when you mentioned loading times. but that line is just part of the image to make it look more 3 dimensional. the image you see on my site now is just a strip which was repeated-x. Until I removed that a couple minutes ago. 

Should I send you the whole background image or just the strip (8x2000)?


----------



## mwdesign (Aug 20, 2010)

ive uploaded both images. 2000px height


----------



## tomdkat (May 6, 2006)

You have to put your face closer to the screen. 

Doh! I'm trying to do too much right now. 

It's attached now. I've been playing with the gradient in the ZIP file you sent back on page #2 of this thread or so and have come up with something promising. Let me know more work on it and I'll post a test case soon.

Sorry about forgetting the screenshot. 

Peace...


----------



## mwdesign (Aug 20, 2010)

yup what you have outlined is the line which currently is at the bottom of the page. But all of that should be visible at the top of the browser...that way i can add a fixed position to the background, and it should scale according to different screen resolutions and only the content will scroll. 

ahhaa no problem lol sorry i know its a handful. I will work on making a new background but i wont change the current one until i should. 

thank you by the way


----------



## tomdkat (May 6, 2006)

Ok, let's see if this test case functions better for you:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
  <title>Background image</title> 
  <style type="text/css"> 
html {
  margin: 0;
  padding: 0;
  background-image: url(images/top-gradient.png);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-color: black;
}
body {
  margin: 0;
  padding: 0 0 1pt;
  background-image: url(images/bottom-gradient.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  font-family: Arial,Helvetica,sans-serif;
  color: yellow;
  font-size: large;
  background-attachment: fixed;
  position: relative;
}
#navigation-menu {
  border: 1px solid #ccccff;
  position: fixed;
  width: 150px;
  height: 100%;
}
#content {
  border-color: #ffff66;
  border-width: 1px;
  position: relative;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 150px;
}
#content img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
 
  </style> 
</head>
<body> 
<div id="navigation-menu">Navigation menu</div> 
 
<div id="content"> 
<p>This is a paragraph.</p> 
<p>Here are some photos:</p> 
<br> 
<p><img style="width: 640px; height: 480px;" alt="" src="{put image URL here}"></p> 
<p><img style="width: 640px; height: 480px;" alt="" src="{put image URL here}"></p> 
<p><img style="width: 256px; height: 256px;" alt="" src="{put image URL here}"></p> 
</div> 
</body>
</html>
```
Drop some images in the "{put image URL here}" spot and see how this behaves.

This uses the last example I posted above, which has the top part of the background attached to the "html" element and the bottom part of the background attached to the "body" element. Both backgrounds are fixed. I also included stub of the fixed navigation menu.

Peace...


----------



## mwdesign (Aug 20, 2010)

yup that works, but that means that the background will have to be cut horizontally at the line am i right? 

Do you think that the background will still look fluid? rather than like two images? lol


----------



## tomdkat (May 6, 2006)

mwdesign said:


> yup that works, but that means that the background will have to be cut horizontally at the line am i right?
> 
> Do you think that the background will still look fluid? rather than like two images? lol


That actually depends on how you make the images. Load the gradients I attached above in PhotoShop so you can see the actual transparency. Or, change the page background color to red or something like that.

If you get the transparent parts of the background images right, they should display seamlessly. If the top of the page doesn't need any kind of gradient, you can nix the "top gradient" and simply set the page background to the desired color. Then, the bottom gradient will fill in the bottom the way you want.

Do know the transparent PNGs being used WILL NOT render correctly in IE6 without some CSS tricks to get IE6 to behave. 

Peace...


----------



## mwdesign (Aug 20, 2010)

Hi sorry ive been busy with design work last few days so didn't have time for my website 

Ok i have changed the background now and i think it looks good, however there is one problem....when you scroll the background colour which i have set as the html seems to "delete or roll over" the image which is places bottom left in the body tag. I am not sure why because there are no background colours set for the content div or anything to interfere. Ive uploaded the page so you can see what i mean. 

Also will this method fit most resolutions? or will there still be white space? 

thank you


----------



## tomdkat (May 6, 2006)

I don't have time now but two quick things:

Turn on a red border around the "images" DIV:

#images { border: 1px solid red; }

This will tell us how that DIV is laying out.
Please add a link to the site in EACH post so I won't have to search for it to see the current state of it. 
I'll look at the site once you have the border in place. You might need to specify a transparent background for that DIV but we'll find out soon enough. 

Peace...


----------



## mwdesign (Aug 20, 2010)

ok ive added a yellow border to the content div im guessing you ment that div as i dont have a div called images? :S the images ive used are within the content. But it seems that where the content div's heigh ends thats where the background of the body seems to "disappear" lol

Its ok i dont need it done urgently whenever you have a moment  thanks again


----------



## mwdesign (Aug 20, 2010)

woops sorry forgot the link lol

http://www.marcweissdesign.com/fmp.html


----------



## tomdkat (May 6, 2006)

Thanks. I'll download a copy this morning and see if I can find what's up.

Here is the "#images" DIV:

```
[b]<div class="row" [color=red]id="images"[/color]> [/b]
  <p><img src="http://forums.techguy.org/images/IMG_1901.png" width="640" height="426"></p> 
  <p><img src="http://forums.techguy.org/images/IMG_1911.png" width="640" height="426"></p> 
  <p><img src="http://forums.techguy.org/images/IMG_1915.png" width="640" height="426"></p> 
  <p><img src="http://forums.techguy.org/images/IMG_1923.png" width="640" height="426"></p> 
  <p>&nbsp;</p> 
  <hr align="left" width="640" size="1" noshade color="#444444"> 
  <p class="copyright">Copyright &copy; 2010 _ Marc Weiss Design</p></div> 
</div> 
</div>
```
So, adding the CSS I suggested above would have enabled the border I was looking for. I'll post a screenshot so you can see what I mean. 

EDIT: Ok, attached is a screenshot of the "images" DIV with the border enabled. I think I have a handle on what's going on. For some reason, the body background isn't being positioned where you want, at the absolute bottom of the viewport. In my test case, it did but my test case didn't have all of the content yours did. So, I'll see if I can find the "offending" content and we can go from there.

Peace...


----------



## mwdesign (Aug 20, 2010)

ahhh i see i missed that div...ok i have added the border now and am uploading it to the live site. the red outline is the images div and the yellow is the content.


----------



## tomdkat (May 6, 2006)

Well, I've found the problem. You're gonna LOVE this! 

Check out this CSS change:

```
html {
[b][color=red]/*[/color][/b]
	width: 100%;
	height: 100%;
[b][color=red]*/[/color][/b]
	margin: 0px;
	padding: 0px;
	background-color:#202020;
	}
```
That removes the height and width settings for the "html" element. Here is the "clean" CSS version:

```
html {
	margin: 0px;
	padding: 0px;
	background-color:#202020;
	}
```
I'm thinking with the images, the page is scrolling past the end of the "body" (sounds strange, I know). Removing the height and width properties causes the "html" element to have the height needed to display the content and the fixed background on the "body" element behaves the way you want.

Make that change, remove the borders, upload the updated file and see how it behaves. 

Peace...


----------



## mwdesign (Aug 20, 2010)

haha no way ok lol ive made the changes now and your right it worked...although when i make the window smaller the right contact info div kind of overlaps the content div...do i have to set a margin somewhere? or a min/max width property. 

I dont mind the contend div moving to the left to a certain extent as long as nothing overlap each other :S

Oh and by the way because the background image i set is not transparent its fine in IE too, although there is an issue regarding the horizontal rule lines in IE the property of 1px height doesnt seem to work in IE, so the lines r thick. :S


----------



## tomdkat (May 6, 2006)

mwdesign said:


> haha no way ok lol ive made the changes now and your right it worked...although when i make the window smaller the right contact info div kind of overlaps the content div...do i have to set a margin somewhere? or a min/max width property.


That is because of the float applied to the "contact-info" DIV.

So, you'll need to adjust some margins in the ".row", "#content", and "#text-area" style rules. Once things are working, we'll need to see about streamlining and simplifying the HTML and CSS a bit. 

Peace...


----------



## mwdesign (Aug 20, 2010)

yep thats kool thank you very much  ive removed the borders etc. so its looks ok now apart from the things i mentioned erlier  excellent.

http://www.marcweissdesign.com/fmp.html


----------



## mwdesign (Aug 20, 2010)

ooo by the way which margins do i have to edit to prevent the overflow? and also i need to somehow edit the HR height for internet explorer...the page looks good now i just need to do the index and then i will be able to just edit the images for al lthe other pages


----------



## tomdkat (May 6, 2006)

As always, start turning on borders to see how things are laying out.  Start with the borders for the DIVs in question, the "contact" DIV and the "text area" DIV.

From there, you should be able to see the DIVs change size as you adjust margins here and there.

Peace...


----------



## mwdesign (Aug 20, 2010)

hey sorry for the very late reply i have been swamped with grpahics stuff. Ive turned on the borders for the two divs u mentioned and i can see them overlapping but am unsure how to prevent it?

I think that all the gaps in between the "columns" should increase or decrease accordingly as the browser size is changed, until a certain point so there is some gap in between them to differentiate between them. I have played with the margin of the contact-info div but it doesnt seem to change anything :S.

I will upload the live version with borders if u could have a look see wha the issue is when you are free that would be most helpful  thanks

http://www.marcweissdesign.com/fmp.html


----------



## tomdkat (May 6, 2006)

mwdesign said:


> hey sorry for the very late reply i have been swamped with grpahics stuff. Ive turned on the borders for the two divs u mentioned and i can see them overlapping but am unsure how to prevent it?


No need to apologize. I've been swamped myself.  Again, adjusting margins, etc., are things you'll need to tweak or fine tune.



> I think that all the gaps in between the "columns" should increase or decrease accordingly as the browser size is changed, until a certain point so there is some gap in between them to differentiate between them. I have played with the margin of the contact-info div but it doesnt seem to change anything :S.


Yep, you're correct in that the gap will increase and decreased based on the size of the browser window but the overlapping DIVs have an *absolute* width specified. So, those widths will remain the same even though the amount of available real-estate won't.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here are some CSS changes you can make, as a starting point. Basically, you will have to re-think the size of your content to better fit on a fluid page. Fluid means "dynamic", so hard coded widths won't work well (as you'll see after trying the CSS changes below).

Original:

```
#text-area {
	padding-top: 22px;
	width: 640px;
	margin-left: 70px;
	border: thin solid yellow; 
}
```
New:

```
#text-area {
	padding-top: 22px;
[b][color=red]	max-width: 640px;[/color][/b]
	margin-left: 70px;
[b][color=red]	margin-right: 180px;[/color][/b]
	border: thin solid yellow; 
}
```
The above changes enforce a *maximum* width of that DIV, thereby allowing it to be more narrow if necessary (which will be the case when dealing with a dynamic page).

The right margin setting makes sure the DIV won't extend past the left edge of the "contact info" DIV.

Original:

```
.left {
	float: left;
	width: 310px;
	font-size: 11px;
	line-height: normal;
	font-weight: 400;
	font-style: normal;
	color:#666;
	margin-bottom: 2px;
}
.right {
	float: right;
	width: 310px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 400;
}
```
New:

```
.left {
	float: left;
[b][color=red]/*	width: 310px;*/
	max-width: 45%;	[/color][/b]
	font-size: 11px;
	line-height: normal;
	font-weight: 400;
	font-style: normal;
	color:#666;
	margin-bottom: 2px;
}

.right {
	float: right;
[b][color=red]/*	width: 310px;*/
	max-width: 45%;	[/color][/b]
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 400;
}
```
Again, ditching the absolute width of the text allows it to be fluid, as you'll see when you try the above changes.

Now, you'll notice the photo is being pushed down by the "contact-info" DIV, at lower resolutions. Why? Simply because, there is not enough real-estate for the photo to have its fixed width AND for the contact-info DIV to have its fixed width. So, you'll need to decide which can be adjustable in size and update the CSS accordingly. If the photos can be dynamic in size, then I recommend specifying the width as a percentage and DO NOT specify a height. The browser knows the natural dimensions of the photo and will calculate the height, based on the width you specify.

For example, the very first photo has a width of 640px and a height of 426px:


```
<p><img src="fmp_files/IMG_1911.png" [b][color=red]width="640" height="426"[/color][/b]></p>
```
To make that image scalable, you'll need to change the above HTML tag to remove the hardcoded width and height:

```
<p><img src="fmp_files/IMG_1911.png"></p>
```
Then, you'll need some CSS styling like this:

```
.row {
[b][color=red]/*	width: 70%;*/[/color][/b]
	height: auto;
	text-align:left;
	margin-top: 1;
[b][color=red]	margin-right: 180px;[/color][/b]
	margin-bottom: 0;
	margin-left: 70px;
[b][color=red]/*	min-width: 700px;*/[/color][/b]
	padding-left: 1px;
	border: 1px solid white;
		}
[b][color=red]
.max-width-640 {
max-width: 640px;
width: 97%;[/color][/b]
}
```
The percentage width you actually end up using might be different and you can try 100% and see what happens. 

Then, the above HTML changes to:

```
<p><img[b][color=red] class="max-width-640"[/color][/b] src="fmp_files/IMG_1911.png"></p>
```
Attached are some screenshots of how the above looks. You should think of the DIVs as being "boxes". Each time you specify a width of a fixed amount, you are forcing the "box" to be of that width. Cool. This means when managing the real estate of the browser's viewport, you need to add up the widths of the "boxes" to make sure everything will fit. The padding on the left and right sides of the "box" are part of its overall width. So, if you have this CSS:


```
.box {
width: 100px;
padding-left: 10px;
padding-right: 10px;
}
```
The actual width of the box will be 120px, not 100px.

So, decide on how you want to handle the widths of the images or the contact-info DIV to decide which you want fluid (dynamic) and which you want static.

Peace...


----------



## mwdesign (Aug 20, 2010)

ok i have tried to make the changes you've mentioned, however i dont really need the images or the text box div to change width, i just wanted the contact div on the right and the menu divs to not overlap. I have added the max-width property and it does stop the contact info div from overlapping, but the .right div for the right text box drops below the left one, i think this is because from what i can tell the contact-info div is still overlapping the text box div by a couple pixels.

Is there any way to increase the gap between the text box div and the contact info div? so that the lines at the top do not touch?

I am guessing this will have to be done with the margins, because all I am really looking to do is make the 3 main columns of the page (menu, content, contact-info) to become narrower to a certain point when the window is manually shrunk.

Sorry to sound confusing lol.

I dnt need the images to change size as sich the 640px width of the text box and content is fine, its just the gaps on either side of the content div needs to change in order for all three columns to fit most screen resolutions (if that makes sense)

This is my code currently and i will update the live site so you can see what i mean by the right text paragraph drops below the left one, which means its being forced down.


```
<style type="text/css">
  	html {
	margin: 0px;
	padding: 0px;
	background-color:#202020;
	}
	
	a img {
	border:none;
	text-align: right;
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 5px;
	}
	
	body {
	width:100%;
	height:100%;
	margin: 0px;
	padding: 0 0 1pt;
	background-image: url(bground%20strip%20bottom%20half%202.png);
    background-repeat: repeat-x;
    background-position: left bottom;
	background-attachment: fixed;
	position:relative;
	}
		
  	#navigation {
	position: fixed;	
	float: left;
	height: 100%;
	width: 230px;
	border: 0px;
	left:0;
	margin-right:10px;
	}
	
	#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 99.5%;
		margin-top:2px;
	}
  			
  		#content {
	padding: 0px;
  	margin-left: 21%;
	height: 100%;
	min-width: 640px;
	float: none;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	font-size: 11pt;
	color: #666;
	}
	
	
#contact-info {
	float: right;
	width: 150px;
	height: 100%;
	padding-top: 22px;
	padding-right: 30px;
	line-height: normal;
	text-align: left;
	color: #444;
	margin-left: 10px;
	border: thin solid red;
	max-width:150px;
}

  		
   		.row {
	width: 70%;
	height: auto;
	text-align:left;
	margin-top: 1;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 70px;
	min-width: 700px;
	padding-left: 1px;
		}
		
  		.row a img { 
			max-width: 158px; 
			max-height: 259px;
			min-width:70px;
			min-height:70px;
			width: 19%;
			border: none;
			padding-left:2%;
			padding-right:2%;
			background-position:center;
  		}

		#row1 {
	        margin-top: 120px;
	        padding: 17px;
			
		}
		
		#row2 {
			padding: 17px;
			
		}
		
		
		#logo {
	margin-top:27px;
	margin-left:45px;
	width:150px;
	height:120px
	}
	
	#logoimg {
	float:left;	
	}
	
	#logo p {
	margin: 0;
	float: right;
	width: 60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #444;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1px;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 0;
}

.orange {
	color:#F60;
}
		
		
	.menu {
	margin-left:48px;
	margin-right:0;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 5px;
	color: #444;
	font-style: normal;
	font-weight: 400;
	margin-top: 20px;
	}
		
		.menu a:link {
	color:#444;
	text-decoration:none;
}
		.menu a:visited {
	color:#444;
	text-decoration:none;
}
		.menu a:hover {
	color:#FFF;
	text-decoration:none;
}
		.menu a:active {color:#FFF; text-decoration:none;}
		
		
		#menu_bottom {
	margin-left:10px;
	margin-top:20px;
	position:relative;
		}
		#copyright {
	bottom: 5px;
	margin-top: 1350px;
	margin-right: 30px;
		}
		.icon_class {
	text-align:center;
	padding:0px;
	float: right;
	height: 30px;
	width: 80px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-family: "Grandesign Neue Serif";
	font-size: 14px;
	font-style: italic;
	color:#FFF;
		}
		#line {
	color: #FFF;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	width:5px;
	text-align:right;
	padding:0px;
	float: right;
	height: 30px;
	font-weight: bold;
		}

#text-area {
	padding-top: 22px;
	max-width: 640px;
	margin-left: 70px;
	margin-right: 180px;
	border: thin solid yellow; 
}

.text-block { padding: 0px; margin: 0;}

.left {
	float: left;
	width: 315px;
	font-size: 11px;
	line-height: normal;
	font-weight: 400;
	font-style: normal;
	color:#666;
	margin-bottom: 2px;
}
.right {
	float: right;
	width: 315px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 400;
}

#clear { clear: left; }



h1 {
	color:#F60;
	width: 640px;
	margin-bottom: 1px;
	font-size: 9px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
}

.linetop {
	margin-top:5px;
	margin-bottom: 20px;
	color:#333;
}

.linktext {
	color:#444;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}
.linktext a:link {color:#444; text-decoration:none;}
.linktext a:visited {color:#444; text-decoration:none;}
.linktext a:hover {color:#FFF; text-decoration:underline;}
.linktext a:active {color:#FFF; text-decoration:none;}

.work {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#F60;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	margin-left: 48px;
	margin-top: 66px;
}

.contact {font-size:9px;
	color: #F60;	
}
.resume {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #333;
	line-height: 3px;
	text-align: right;
}
.contact {
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
}
.email {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #444;
	text-align: right;
}


.index {
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: 2pt;
	color: #444;
}

.index a:link {
	color:#444;
	text-decoration: none;
}
.index a:visited {
	color:#444;
}
.index a:hover {
	color:#EEE;
}
.index a:active {
	color:#EEE;
	font-size: 9px;
	text-align: left;
}

.about {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
	letter-spacing: 1pt;
	color: #444;
}

.about a:link {
	color:#444;
	text-decoration: none;
}
.about a:visited {
	color:#444;
	text-decoration: none;
}
.about a:hover {color:#EEE; text-decoration: none;}
.about a:active {
	color:#EEE;
	text-decoration: none;
}

.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: right;
	color: #666;
}
.tm {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #444;
	text-align: left;
	float: left;
}

.resume a:link {
	color:#666;
	text-decoration:none;
}
.resume a:visited {
	color:#666;
	text-decoration:none;
}
.resume a:hover {color:#EEE; text-decoration:underline;}
.resume a:active {
	color:#666;
	text-decoration:none;
}
.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	color: #666;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: left;
	padding-bottom: 5px;
}


.captions {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	color: #555;
	text-decoration: underline;
}


.imageright {
	padding-left: 20px;
}
#content #images p {
	font-style: italic;
	color: #666;
	font-size: 11px;
}
</style>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body link="#333333" alink="#FFFFFF" onLoad="MM_preloadImages('twitter-logo-roll.png','facebook-icon-roll.png')">
<!-- Page body -->
<!-- Nav menu -->
<div id="navigation">

<div id="logo">
  <hr align="left" width="150" size="1" noshade color="#333333" class="linetop">
  <div id="logoimg">
    <p><img src="images/mylogo.png" width="50" height="33" align="left"><span class="tm">&#8482;</span></p>
  </div>
  <div>
    <p><span class="orange">MARC WEISS</span> GRAPHIC DESIGN_</p>
</div>
</div>



<div class="work" id="work">
<hr align="left" width="150" size="1" noshade class="linetop" color="#333333">
<p>SELECTED WORK</p>
</div>


<div class="menu" id="menu">
  <p>International Style</p>
<p>Innovate &amp; Consolidate</p>
  <p>Home Delivery </p>
  <p>Web Design</p>
  <p><a href="fmp.html">Visualising Sound</a></p>
  <p>Corporate Identity</p>
  <p>E4 Animation</p>
  <p>Photography</p>
</div>
<div id="menu_bottom"></div>
</div> 
<!-- End Nav menu -->

<div id="content">

<div id="contact-info">
<hr align="right" width="150" size="1" noshade class="linetop" color="#333333">
<p class="contact"><span class="index"><a href="index2 content.html">INDEX_</a></span></p>
<p class="contact"><span class="about"><a href="index2 content.html">ABOUT ME_</a></span></p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<hr align="right" width="150" size="1" noshade class="linetop" color="#333333">
<p class="contact"><span class="contact"><span class="contact">CONTACT</span></span></p>
<p class="email">[email protected]</p>
<hr align="right" width="5" size="1" noshade class="linetop" color="#333333">
<p class="resume"><a href="cv_finished.pdf">DOWNLOAD RESUME</a></p>
<p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','twitter-logo-roll.png',1)"><img src="twitter-logo.png" name="Image7" width="20" height="20" border="0"></a><a href="#" target="_new" onMouseOver="MM_swapImage('Image8','','facebook-icon-roll.png',1)" onMouseOut="MM_swapImgRestore()"><img src="facebook-icon.png" alt="facebook" name="Image8" width="20" height="20" border="0"></a></p>
</div>

<div id="text-area">
<hr align="center" width="640" size="1" noshade class="linetop" id="line1" color="#333333">
<h1>VISUALISING SOUND /</h1>
<div class="left">
  <p>This project looks at the ways in which sound is visualised. My idea was to create a typeface based on sound. Cymatics has been the main focal point when visualising sound, and I wanted to try and relate sound through a design process, which would result in a graphical outcome.</p>
<hr align="left" width="5" size="1" noshade class="linetop" color="#333333">
<div class="text-block linktext">
  <p><a href="sequencer.html" class="text_link">View Sequencer</a></p>
</div>
</div>

<div class="right">
  <p>Using a 16 step sequencer to generate musical notes, I created an alphabet which would have its own sound based on the points pressed.  The sequencer could be made to have different instruments, and values (such as pitch, bass etc.) to make the outcome more interesting. </p>
</div>
<div id="clear"></div>
</div>

<div class="row" id="images">
  <p><img src="images/IMG_1901.png" width="640" height="426"></p>
  <p>Front Cover (spot varnishing on matt black).</p>
  <p>&nbsp;</p>
  <p><img src="images/IMG_1911.png" width="640" height="426"></p>
  <p>Cymatics (study of sound visualisation through vibrations).</p>
  <p>&nbsp;</p>
  <p><img src="images/IMG_1915.png" width="640" height="426"></p>
  <p>3D music equalisers as a way of making sound visible.</p>
  <p>&nbsp;</p>
  <p><img src="images/IMG_1923.png" width="640" height="426"></p>
  <p>The making of the pentatonic scale (my own recordings).</p>
  <p>&nbsp;</p>
  <p><img src="images/IMG_1337new.png" width="310" height="465"><img src="images/IMG_1356new.png" width="310" height="465" class="imageright"></p>
  <p>Outcome - Above is the sequencer and the final typeface.</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <hr align="left" width="640" size="1" noshade color="#444444">
  <p class="copyright">Copyright &copy; 2010 _ Marc Weiss Design</p></div>
</div>
</div>
<!-- End page body -->
</body>
</html>
```


----------



## mwdesign (Aug 20, 2010)

Ok ive realised that the max-width property means that the minimum width is then removed so the text block becomes scalable like u said it would, however, is there a way to keep the text block div a fixed width and stop the div on the right from overlapping? ive increased the margin-right on the text block div to 190px and its now leaving a 10 pixel gap on the right which i wanted however, because the max-width property is in place it stops the overlapping but its also making the text-block div shrink in width when the window is minimized beyond a certain point. So everntually the text-textblock div become too small to hold both the paragraph divs, and the right paragraph drops below the left one.

I tried adding a min-width:640px; to keep the size of the text block div the same, but it didn't work, and it allowed the contact info div to overlap again lol.

Wow sooo complicated, thank you for all your time, i know this is a pain for you as well lol

i have updated the live site now so you can see how the text block, the right hand paragraph and the contact info div are acting with the max-width property in place.

http://www.marcweissdesign.com/fmp.html


----------



## tomdkat (May 6, 2006)

mwdesign said:


> Ok ive realised that the max-width property means that the minimum width is then removed so the text block becomes scalable like u said it would, however, is there a way to keep the text block div a fixed width and stop the div on the right from overlapping?


Yep, there sure is. Make the width of the div narrow enough for it to display correctly at the most narrow resolution you want to support. That means at the wider resolutions, you'll have lots of unused space (like the gaps you keep referring to).



> ive increased the margin-right on the text block div to 190px and its now leaving a 10 pixel gap on the right which i wanted however, because the max-width property is in place it stops the overlapping but its also making the text-block div shrink in width when the window is minimized beyond a certain point. So everntually the text-textblock div become too small to hold both the paragraph divs, and the right paragraph drops below the left one.
> 
> I tried adding a min-width:640px; to keep the size of the text block div the same, but it didn't work, and it allowed the contact info div to overlap again lol.
> 
> Wow sooo complicated, thank you for all your time, i know this is a pain for you as well lol


It's not really as complicated as it seems. At this point, you need to make a design decision (as I eluded to above). If you want elements to be of a fixed width, you will have to calculate the appropriate width based on the most narrow resolution you want to support. Otherwise, you will hit into rendering issues as the browser re-arranges things to fit.

if you haven't done so already, install the Opera web browser or a Firefox extension that will show the browser window dimensions. This way, you can display the page on your system using the lowest resolution you want to support and get everything to fit. Having the browser window dimensions will give you some idea of how much space you have to work with. Another option would be to add some JavaScript to the page to display the viewport width. This way, when you view the page at the lowest resolution, you can know how much space you have to work with.

This is boiling down to a "dynamic" vs "static" element size issue. If you want static element sizes, you have to size them according to the lowest resolution you want to support. If you go with dynamic element sizes the page will look more uniform at various resolutions, with restrictions being put in place to prevent distortion.

So, if you MUST have elements (DIVs, images, whatever) of a static size then you must code for the most narrow resolution you want to support. Otherwise, the behavior you see is what you get.

Peace...


----------



## mwdesign (Aug 20, 2010)

ah ok so lets say the minimum resolution i am looking for my site to fit is 1024x768, i will av to add up the widths of all 3 divs and try to change the widths till they add up to 1024? does this include the margins and padding as well?

One thing is that both the contact info div and the images and textblock div are all within the content div so should i just try and change the widths of all the main divs (menu, text block, contact info) including the content div?


----------



## mwdesign (Aug 20, 2010)

oh btw i have downloaded opera but how do i check the window dimensions?


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ah ok so lets say the minimum resolution i am looking for my site to fit is 1024x768, i will av to add up the widths of all 3 divs and try to change the widths till they add up to 1024? does this include the margins and padding as well?


Not quite but when viewing the page at 1024x768 resolution, you'll have to adjust the element widths until they look the way you want. Since you're using static widths, when you view the page at a resolution higher than 1024x768, you'll have a bunch of unused space and gaps between elements, etc. Yes, the margins, padding, and borders all count as the part of the width of an element.



> One thing is that both the contact info div and the images and textblock div are all within the content div so should i just try and change the widths of all the main divs (menu, text block, contact info) including the content div?


Nope. Just focus on adjusting the widths of the DIVs that misalign when viewed at 1024x768 resolution.



mwdesign said:


> oh btw i have downloaded opera but how do i check the window dimensions?


Ok, click the "Menu" button in the upper left corner of the Opera window. Then click, "Settings" and then "Preferences". Then, click on the "Advanced" tab and then the "Browsing" menu option on the left. Once the "Browsing" options are displayed, make sure "Show webpage dimensions in title bar" is checked. Then, when you view the page, you'll get the dimensions of the page as it's displayed. This will tell you how much space in the width of the page you have to work with.

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm ok i have checked the resolution 1024 on opera and the images are going to be too wide which means ill have to scale them down. Should i just do as you mentioned earlier then and make my images and text block have a max-width and scale down to a certain point? so that way its fluid instead of fixed? although im not sure if scaling of images will distort them? 

Any ideas? cheerz


----------



## logon68 (Dec 13, 2010)

thanks for the great information this info is very helpful to me


----------



## tomdkat (May 6, 2006)

mwdesign said:


> hmm ok i have checked the resolution 1024 on opera and the images are going to be too wide which means ill have to scale them down. Should i just do as you mentioned earlier then and make my images and text block have a max-width and scale down to a certain point? so that way its fluid instead of fixed? although im not sure if scaling of images will distort them?


Again, this is simply a question of having static element sizes or dynamic. I have already discussed these issues in my post above where I discuss the "absolute width" issues.

Again, having dynamic element sizes (at least the width) allows the content on the page to by dynamic and effectively "scale" as page changes size (based on browser window size). You can see that in the screenshots I've posted above.

Another option is to simply make all of the images and other elements have a fixed width such that things look properly at the lowest screen resolution you want to support.

So, again, this boils down to you making the decision of how you want the elements on the page to behave. If you want elements to have a static size, you will have to deal with restrictions on the amount of available 'real estate' for displaying everything. If you want to maintain the same page look (as much as possible), then going with dynamic element sizes should do the trick (as I have demonstrated in the screenshots I posted above).

So, I suggest figuring out the "static" vs "dynamic" issue first and then you'll know down which path to go.

As for image quality degradation due to dynamic scaling, the image quality should be preserved as the image is scaled DOWN in size. Image quality will suffer when the image is scaled LARGER than its natural dimensions.

Attached is a test image and below is a test page. Save the test page and the test image in the same location.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
  <title>Image scaling test case</title> 
  <style type="text/css"> 
[b]img {
  width: 100%;
  max-width: 750px;
}[/b]
  </style> 
</head>
<body> 
<h1 style="text-align: center;">Resize the browser window to see the image below scale</h1> 
<br> 
<div style="text-align: center;"><img alt="test image" src="background.jpg"></div> 
</body>
</html>
```
Peace...


----------



## tomdkat (May 6, 2006)

logon68 said:


> thanks for the great information this info is very helpful to me


Really? I'm surprised since I figured mwdesign would be the only person interested in this. 

Peace...


----------



## mwdesign (Aug 20, 2010)

AHH i see ok so i think that dynamic is the way to go...alright so i will have to make my images scalable as well. I will try and make those changes, and let you know what happens  thanks, oh and have a good xmas


----------



## mwdesign (Aug 20, 2010)

ok i have managed to make the images and the text block scalable and also the contact info div? shud i make the menu fluid too? what widths would i have to change for that?

also there are a couple issues:

1. when scaled down to a certain point there appears a large gap above the text block area.
2. i have two images at the bottom of the page which should be aligned next to each other, but they dont see to scale and stay in place. The right image drops below the left one.

I will upload the live site again for you to see.

http://www.marcweissdesign.com/fmp.html

This is my code:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--[if IE 7]>
<style type="text/css">
   #row1 { padding-top: 120px; }
</style>  	
<![endif]-->
   <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<title>Marc Weiss |  Design - Visualising Sound</title>
<style type="text/css">
  	html {
	margin: 0px;
	padding: 0px;
	background-color:#202020;
	}
	
	a img {
	border:none;
	text-align: right;
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 5px;
	}
	
	body {
	width:100%;
	height:100%;
	margin: 0px;
	padding: 0 0 1pt;
	background-image: url(bground%20strip%20bottom%20half%202.png);
    background-repeat: repeat-x;
    background-position: left bottom;
	background-attachment: fixed;
	position:relative;
	}
		
  	#navigation {
	position: fixed;	
	float: left;
	height: 100%;
	width: 230px;
	border: 0px;
	left:0;
	margin-right:10px;
	}
	
	#nav-back {
		position: absolute;
		top: 0; left: 0;
		height: 99.5%;
		margin-top:2px;
	}
  			
  		#content {
	padding: 0px;
  	margin-left: 21%;
	height: 100%;
	min-width: 640px;
	float: none;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	font-size: 11pt;
	color: #666;
	}
	
	
#contact-info {
	float: right;
	width: 150px;
	height: 100%;
	padding-top: 22px;
	padding-right: 30px;
	line-height: normal;
	text-align: left;
	color: #444;
	margin-left: 10px;
	border: thin solid red;
	max-width:150px;
}

  		
   		.row {
	height: auto;
	text-align:left;
	margin-top: 1;
	margin-right: 190px;
	margin-bottom: 0;
	margin-left: 70px;
	padding-left: 1px;
		}
		
  		.row a img { 
			max-width: 158px; 
			max-height: 259px;
			min-width:70px;
			min-height:70px;
			width: 19%;
			border: none;
			padding-left:2%;
			padding-right:2%;
			background-position:center;
  		}


.max-width-640 {
max-width:640px;
width:97%;
}



		#row1 {
	        margin-top: 120px;
	        padding: 17px;
			
		}
		
		#row2 {
			padding: 17px;
			
		}
		
		
		#logo {
	margin-top:27px;
	margin-left:45px;
	width:150px;
	height:120px
	}
	
	#logoimg {
	float:left;	
	}
	
	#logo p {
	margin: 0;
	float: right;
	width: 60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #444;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1px;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 0;
}

.orange {
	color:#F60;
}
		
		
	.menu {
	margin-left:48px;
	margin-right:0;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 5px;
	color: #444;
	font-style: normal;
	font-weight: 400;
	margin-top: 20px;
	}
		
		.menu a:link {
	color:#444;
	text-decoration:none;
}
		.menu a:visited {
	color:#444;
	text-decoration:none;
}
		.menu a:hover {
	color:#FFF;
	text-decoration:none;
}
		.menu a:active {color:#FFF; text-decoration:none;}
		
		
		#menu_bottom {
	margin-left:10px;
	margin-top:20px;
	position:relative;
		}
		#copyright {
	bottom: 5px;
	margin-top: 1350px;
	margin-right: 30px;
		}
		.icon_class {
	text-align:center;
	padding:0px;
	float: right;
	height: 30px;
	width: 80px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-family: "Grandesign Neue Serif";
	font-size: 14px;
	font-style: italic;
	color:#FFF;
		}
		#line {
	color: #FFF;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	width:5px;
	text-align:right;
	padding:0px;
	float: right;
	height: 30px;
	font-weight: bold;
		}

#text-area {
	padding-top: 22px;
	max-width: 640px;
	margin-left: 70px;
	margin-right: 190px;
	border: thin solid yellow; 
}

.text-block { padding: 0px; margin: 0;}

.left {
	float: left;
	max-width: 48%;
	font-size: 11px;
	line-height: normal;
	font-weight: 400;
	font-style: normal;
	color:#666;
	margin-bottom: 2px;
}
.right {
	float: right;
	max-width: 48%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	font-style: normal;
	line-height: normal;
	margin-top: 0px;
	font-weight: 400;
}

#clear { clear: left; }



h1 {
	color:#F60;
	width: 640px;
	margin-bottom: 1px;
	font-size: 9px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
}

.linetop {
	margin-top:5px;
	margin-bottom: 20px;
	color:#333;
}

.linktext {
	color:#444;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}
.linktext a:link {color:#444; text-decoration:none;}
.linktext a:visited {color:#444; text-decoration:none;}
.linktext a:hover {color:#FFF; text-decoration:underline;}
.linktext a:active {color:#FFF; text-decoration:none;}

.work {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#F60;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	margin-left: 48px;
	margin-top: 66px;
}

.contact {font-size:9px;
	color: #F60;	
}
.resume {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #333;
	line-height: 3px;
	text-align: right;
}
.contact {
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
}
.email {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #444;
	text-align: right;
}


.index {
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: 2pt;
	color: #444;
}

.index a:link {
	color:#444;
	text-decoration: none;
}
.index a:visited {
	color:#444;
}
.index a:hover {
	color:#EEE;
}
.index a:active {
	color:#EEE;
	font-size: 9px;
	text-align: left;
}

.about {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
	letter-spacing: 1pt;
	color: #444;
}

.about a:link {
	color:#444;
	text-decoration: none;
}
.about a:visited {
	color:#444;
	text-decoration: none;
}
.about a:hover {color:#EEE; text-decoration: none;}
.about a:active {
	color:#EEE;
	text-decoration: none;
}

.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: right;
	color: #666;
}
.tm {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #444;
	text-align: left;
	float: left;
}

.resume a:link {
	color:#666;
	text-decoration:none;
}
.resume a:visited {
	color:#666;
	text-decoration:none;
}
.resume a:hover {color:#EEE; text-decoration:underline;}
.resume a:active {
	color:#666;
	text-decoration:none;
}
.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	color: #666;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: left;
	padding-bottom: 5px;
}


.captions {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	color: #555;
	text-decoration: underline;
}


.imageright {
	padding-left: 20px;
	max-width:310px;
	width: 100%; 
}

.imageleft {
    max-width:310px;
	width:100%;	
}

#content #images p {
	font-style: italic;
	color: #666;
	font-size: 11px;
}
</style>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body link="#333333" alink="#FFFFFF" onLoad="MM_preloadImages('twitter-logo-roll.png','facebook-icon-roll.png')">
<!-- Page body -->
<!-- Nav menu -->
<div id="navigation">

<div id="logo">
  <hr align="left" width="100%" size="1" noshade color="#333333" class="linetop">
  <div id="logoimg">
    <p><img src="images/mylogo.png" width="50" height="33" align="left"><span class="tm">&#8482;</span></p>
  </div>
  <div>
    <p><span class="orange">MARC WEISS</span> GRAPHIC DESIGN_</p>
</div>
</div>



<div class="work" id="work">
<hr align="left" width="80%" size="1" noshade class="linetop" color="#333333">
<p>SELECTED WORK</p>
</div>


<div class="menu" id="menu">
  <p>International Style</p>
<p>Innovate &amp; Consolidate</p>
  <p>Home Delivery </p>
  <p>Web Design</p>
  <p><a href="fmp.html">Visualising Sound</a></p>
  <p>Corporate Identity</p>
  <p>E4 Animation</p>
  <p>Photography</p>
</div>
<div id="menu_bottom"></div>
</div> 
<!-- End Nav menu -->

<div id="content">

<div id="contact-info">
<hr align="right" width="100%" size="1" noshade class="linetop" color="#333333">
<p class="contact"><span class="index"><a href="index2 content.html">INDEX_</a></span></p>
<p class="contact"><span class="about"><a href="index2 content.html">ABOUT ME_</a></span></p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<p class="contact">&nbsp;</p>
<hr align="right" width="100%" size="1" noshade class="linetop" color="#333333">
<p class="contact"><span class="contact"><span class="contact">CONTACT</span></span></p>
<p class="email">[email protected]</p>
<hr align="right" width="5" size="1" noshade class="linetop" color="#333333">
<p class="resume"><a href="cv_finished.pdf">DOWNLOAD RESUME</a></p>
<p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','twitter-logo-roll.png',1)"><img src="twitter-logo.png" name="Image7" width="20" height="20" border="0"></a><a href="#" target="_new" onMouseOver="MM_swapImage('Image8','','facebook-icon-roll.png',1)" onMouseOut="MM_swapImgRestore()"><img src="facebook-icon.png" alt="facebook" name="Image8" width="20" height="20" border="0"></a></p>
</div>

<div id="text-area">
<hr align="center" width="100%" size="1" noshade class="linetop" id="line1" color="#333333">
<h1>VISUALISING SOUND /</h1>
<div class="left">
  <p>This project looks at the ways in which sound is visualised. My idea was to create a typeface based on sound. Cymatics has been the main focal point when visualising sound, and I wanted to try and relate sound through a design process, which would result in a graphical outcome.</p>
<hr align="left" width="5" size="1" noshade class="linetop" color="#333333">
<div class="text-block linktext">
  <p><a href="sequencer.html" class="text_link">View Sequencer</a></p>
</div>
</div>

<div class="right">
  <p>Using a 16 step sequencer to generate musical notes, I created an alphabet which would have its own sound based on the points pressed.  The sequencer could be made to have different instruments, and values (such as pitch, bass etc.) to make the outcome more interesting. </p>
</div>
<div id="clear"></div>
</div>

<div class="row" id="images">
  <p><img class="max-width-640" src="images/IMG_1901.png"></p>
  <p>Front Cover (spot varnishing on matt black).</p>
  <p>&nbsp;</p>
  <p><img class="max-width-640" src="images/IMG_1911.png"></p>
  <p>Cymatics (study of sound visualisation through vibrations).</p>
  <p>&nbsp;</p>
  <p><img class="max-width-640" src="images/IMG_1915.png"></p>
  <p>3D music equalisers as a way of making sound visible.</p>
  <p>&nbsp;</p>
  <p><img class="max-width-640" src="images/IMG_1923.png"></p>
  <p>The making of the pentatonic scale (my own recordings).</p>
  <p>&nbsp;</p>
  <p><img class="imageleft" src="images/IMG_1337new.png"><img src="images/IMG_1356new.png"class="imageright"></p>
  <p>Outcome - Above is the sequencer and the final typeface.</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <hr align="left" width="640" size="1" noshade color="#444444">
  <p class="copyright">Copyright &copy; 2010 _ Marc Weiss Design</p></div>
</div>
</div>
<!-- End page body -->
</body>
</html>
```
cheers


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ok i have managed to make the images and the text block scalable and also the contact info div? shud i make the menu fluid too? what widths would i have to change for that?


That's really up to how you want the page to behave. I would deal with the scaling of the content in the middle of the page first and then see how the menu holds up.



> 1. when scaled down to a certain point there appears a large gap above the text block area.


This is an interesting behavior I'll see if I can figure out.



> 2. i have two images at the bottom of the page which should be aligned next to each other, but they dont see to scale and stay in place. The right image drops below the left one.


This is because those images aren't scaling. They appear to have static dimensions, so when the page gets more narrow those images change position instead of changing physical size.

Thanks for the link!

Peace...


----------



## mwdesign (Aug 20, 2010)

hmm thats weird because ive removed the fixed width of the images and added two diffrent classes image right and image left and i gave them the same max-width properties so they should scale :S


----------



## tomdkat (May 6, 2006)

When I resize my browser window, the images retain their width. You're seeing the same behavior because the images are moving around. 

EDIT: Instead of making the width "100%", try making it "99%" and see if they scale as desired.

Peace...


----------



## tomdkat (May 6, 2006)

mwdesign said:


> 1. when scaled down to a certain point there appears a large gap above the text block area.


In which browsers do you see this behavior? I'm seeing it only in Chrome. Firefox and Opera don't exhibit this behavior for me.

Peace...


----------



## mwdesign (Aug 20, 2010)

nop i tried making the widths 99% and up to 45% but they dont scale as the images above do. It seems that at 99% they dont scale but the images above which are 100% do scale.


----------



## mwdesign (Aug 20, 2010)

yeah im seeing in chrome too, i havent checked the other two ill take a look


----------



## mwdesign (Aug 20, 2010)

in internet explorer the height does not change so all the images have a larger height than width making them distorted. and in opera the bottom two images are doing the same as in chrome. they are at 97% width. the right image has a padding-left of 20px, not sure if that has something to do with it.
But the gap at the top is only aparrent in chrome.


----------



## tomdkat (May 6, 2006)

mwdesign said:


> 1. when scaled down to a certain point there appears a large gap above the text block area.


Ok, I got this problem fixed. It's stupid and I'm surprised WebKit had an issue with it but this is what I found. It's the horizontal ruler ABOVE the "Visualising Sound" heading:


```
<div id="text-area">
<hr align="center" [b][color=red]width="100%"[/color][/b] size="1" noshade class="linetop" id="line1" color="#333333">
<h1>VISUALISING SOUND /</h1>
<div class="left">
```
Change the width of the horizontal ruler from "100%" to "99%" and Chrome/Safari/WebKit-based browsers should behave like Firefox and Opera:


```
<div id="text-area">
<hr align="center" [b][color=red]width="99%"[/color][/b] size="1" noshade class="linetop" id="line1" color="#333333">
<h1>VISUALISING SOUND /</h1>
<div class="left">
```
As for the two images that aren't scaling the way you would like, I think I've figured that out as well. Apparently, the images are NARROW enough that the scaling doesn't kick in when we expect it to. As a result, the images shift around instead of changing dimensions. One idea would be to combine the two images into a SINGLE image of the combined width. Attached is an example. Use the composite image instead and see if that scales the way you want.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, using a composite image seems to work well. Attached are some screenshots which demonstrate the scaling in action.

Peace...


----------



## mwdesign (Aug 20, 2010)

ahhhh i seeee ok i will make a new image with both images as one and see if that works better. thanks


----------



## tomdkat (May 6, 2006)

Yeah, that's not optimal but it's one solution. If the images will be on the page for viewing purposes only, making a composite image should work fine. Just BE SURE to make the composite image have a transparent background so the current background color/gradient/whatever shows through properly.

Good luck and Merry Christmas to you too! 

Peace...


----------



## mwdesign (Aug 20, 2010)

ok i have changed the last two images and thats now fine and i also changed the hr at the top which has fixed the problem thank you.

One last thing, how would i make the centre column (content) central on the page when it is shrunk because the margins on the right of it and left of it are not the same. also i think the content overlaps the navigation column.

http://www.marcweissdesign.com/fmp.html


----------



## tomdkat (May 6, 2006)

mwdesign said:


> One last thing, how would i make the centre column (content) central on the page when it is shrunk because the margins on the right of it and left of it are not the same. also i think the content overlaps the navigation column.


Again, it's an issue of screen real estate. If the navigation menu has a fixed width and the page width gets more narrow, it won't adjust in size and things will start to overlap. So, again, you'll need to find the appropriate width for the navigation menu such that things will fit the way you want at the lowest resolution you want to support on the page. Given we're using a fixed position for the navigation menu (or the background, I forget), you should be able to adjust the width but might run into issues making the width dynamic (like a percentage). Experiment and see what breaks if you change the width to a percentage rather than being a static number.

Also, when calculating the widths of things, it involves basic math. At a screen resolution of 1024x768, the viewport width will be a certain size when the browser window is maximized. That number won't change much between browsers but more importantly it will be a fixed number in the particular browser you're using. Say in Opera, that width is 950px. Once you get that number, the issue becomes getting all of your content to fit within that space. So, if you have 950px of page width to work with, you've got to figure out how to get your content to fit in that 950px wide space. The width of the navigation menu (including borders and padding), the width of the contact info DIV, the width of the content in the center, etc., all need to be factored in so you'll know how to adjust the sizes.

Using dynamic widths through percentages helps make things more fluid, especially if you can find the percentages that work well at different resolutions. The "sweet spot" percentages, if you will. 

As for centering the content in the middle of the page, I would start by working at the lowest screen resolution you want to support. Get the content looking the way you want and adjust margins, etc, accordingly. With borders enabled, you can better see how the elements are laying out BUT you must also keep in mind the borders, themselves, will show parts of the element that will normally be hidden. So, if the borders reveal the content DIV is overlapping the navigation DIV, that might not really matter since the overlap is invisible with the borders turned off (as long as nothing the user must click gets overlapped).

Here's an example of what I mean:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

On that page, try to click "CSS Co., Ltd.". Then, scroll the page down a bit and then try to click that same link again.  The overlap is present but invisible. In this case, the overlap has a negative impact on the page but if there's space for the overlap to not be intrusive, no one will know anything is overlapping unless they specifically inspect the CSS style rules looking for the overlap.

Good luck!

Peace...


----------



## mwdesign (Aug 20, 2010)

Hi, i tried to make the navigation div fluid as well but it made everything move around, so i think i should leave the page as it is and just change the content and add in the other pages. I dont think the content will overlap with the menu unless it is shrunk to a certain point which is way below 1024 resolution.

One quick thing i have changed the index page now with the original icons you saw and i have basically swapped those with the images from the visualising sound page, but these icons also need to be made fluid and im having an issue making them align according to the text block, also there needs to be padding in between the icons.

I have updated both the index and the visualising sound page to show you how it is currently.

http://www.marcweissdesign.com/
http://www.marcweissdesign.com/fmp.html

I think once i manage to get these icon placement working the website should take form and ill just need to clean up the coding. I think i will have to leave the overlapping div situation for a later time.

thank you


----------



## tomdkat (May 6, 2006)

That is because of your style rule:

```
.icons a img {
            max-width: 158px; 
			max-height: 259px;
			min-width:70px;
			min-height:70px;
			width: 19%;
			border: none;
			padding-left:2%;
			padding-right:2%;
			background-position:center;	
}
```
The icon images are NOT in anchor tags:

```
<div class="row" id="images">
  [b]<p class="icons">[color=red]<img src="images/proj1.png" alt="International Style"><img src="images/proj2.png" alt="Home Delivery"><img src="images/proj3.png" alt="Innovate Consolidate"><img src="images/proj4.png" alt="Web Design">[/color]</p>[/b]
  <p class="icons"><img src="images/proj1shadow.png" alt="Visualising Sound"><img src="images/proj2shadow.png" alt="Corporate Identity"><img src="images/proj3shadow.png" alt="E4 Animation"><img src="images/proj4shadow.png" alt="Photography"></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <hr align="left" width="100%" size="1" noshade color="#444444" class="linebottom">
  <p class="copyright">Copyright &copy; 2010 _ Marc Weiss Design</p></div>

</div>
```
Try changing the CSS rule to this:

```
[b][color=red].icons img[/color][/b] {
            max-width: 158px; 
			max-height: 259px;
			min-width:70px;
			min-height:70px;
			width: 19%;
			border: none;
			padding-left:2%;
			padding-right:2%;
			background-position:center;	
}
```
Note the "a" selector has been removed. See if the icons start scaling.

Peace...


----------



## mwdesign (Aug 20, 2010)

ah i see its because i copied that code from the original page. For the icons in order to create padding between the icons should i create two row divs? like u did originally or is there a way to make them align and have equal padding through using a class maybe?


----------



## tomdkat (May 6, 2006)

mwdesign said:


> ah i see its because i copied that code from the original page. For the icons in order to create padding between the icons should i create two row divs? like u did originally or is there a way to make them align and have equal padding through using a class maybe?


Why not experiment with each approach and see which works best! 

Peace...


----------



## mwdesign (Aug 20, 2010)

Hi,

its been a while lol ive had some work to do for a client so havent been able to do much to my site.

I have another client now who wishes to see my site so i am planning to finish it asap lol

I have been messing with the index page and am having a problem trying to align the icons in the images div.

what i have done is create 3 classes:
}[CODE
.aligncenter {
padding-left: 10px;
padding-right: 10px;
max-width: 158px;
max-height: 259px;
min-width:70px;
min-height:70px;
width: 21.5%;
border: none;
}

.alignright {
float:right;
padding-left: 5px;
max-width: 158px; 
max-height: 259px;
min-width:70px;
min-height:70px;
width: 21.5%;
border: none;

}

.alignleft {
float:left;
padding-right: 5px;
max-width: 158px; 
max-height: 259px;
min-width:70px;
min-height:70px;
width: 21.5%;
border: none;	
[/CODE]

I have tried to add a float to the images on the left and right so they align perfectly to the edge of the div, however i am struggling to align the 4 images in the centre so that all padding is the same. The 4 images in the centre align to the left rather than the centre. and this means the padding on the right is a different value. The float value only changes the two images on the right and makes a large gap in between. I am trying to make the right side images align to the right side of the div and the left side to the left, with the central ones equaly in proportion, which is why i have also used % for the padding so that there wont be overlapping and when the window is minimised all the images will shrink to fit.

I will update the index page so you see what I mean.

http://www.marcweissdesign.com/


----------



## tomdkat (May 6, 2006)

Ok. I have ZERO free time and won't be able to look at this until Saturday, at the earliest.

Peace...


----------



## mwdesign (Aug 20, 2010)

ok dats great.. i will keep trying to see if i can find a way also. thanks


----------



## mwdesign (Aug 20, 2010)

Hi, i have been messing around with the icons and have changed them, ive also managed to align them within the 640px wide div. However i have used the max-width-640 class on the images and changed their max width to 210 with 100% width but the images dont seem to be scaling when the window is minimised. Not sure why :S. 

Much appreciated.


----------



## mwdesign (Aug 20, 2010)

Oh and heres the link:

http://www.marcweissdesign.com/


----------



## tomdkat (May 6, 2006)

Ok, a couple of things. First regarding dynamic image scaling. Specifying an image width as a percentage WILL cause the image to scale, but ONLY as needed. Look at the three images you want to scale. They each have a width of 210px. Cool. The DIV those images are displayed in has a width of 640px. Since 210 < 640, the images won't scale the way you want. Why not? Because, there is PLENTY of space for them to be displayed at full width already.

Now, since each of those images is a separate image, their widths will be calculated and processed individually. If you look back at my previous example at dealing with this, I made ALL of the images a composite image with the max width of the DIV they were in. By doing this, when the DIV gets reduced in size, the *composite* image will scale, giving the effect you're after. By using individual images that are MUCH more narrow than the DIV in which they appear, the images won't scale the way you want UNLESS you use JavaScript to change the image width based on the dimensions of the containing DIV automagically.

So, having the individual images scale dynamically when the width of the images is more narrow than the space in which they are to be displayed will be a challenge.

Understand?

Peace...


----------



## mwdesign (Aug 20, 2010)

ok i see so because it reads each image seperate it thinks there is only one image of 210px within a 640px div. Ok well seeing as each of the images needs to be a rollover link, if i make a composite row of the 3 images how would i be able to make them rollovers? 

otherwise i will have to look at java in order to make it work i guess :S


----------



## mwdesign (Aug 20, 2010)

I managed to fix the alignment problem now just got to look to make the the icons scalable and work as rollovers :S


----------



## tomdkat (May 6, 2006)

Cool. Well, I'm basically out for the day. I'll work up some JavaScript (not the same as Java) to resize images based on DIV width and will post it when I can. Keep in mind, it won't work if JavaScript is disabled in the browser. 

Peace...


----------



## mwdesign (Aug 20, 2010)

ok that wud be really great thank you sorry to be a pain. i will try and start learning javascript too. thanks again


----------



## mwdesign (Aug 20, 2010)

hello  just wondering if you by any chance got time to work up the javascript? if you dont have time then is there anywhere i could find the code for the icon problem? :S

thanks alot


----------



## tomdkat (May 6, 2006)

Nope, I've been literally swamped. Sorry. The code is pretty simple. Maybe someone else here could help you write it.

Basically, you would assign each image that is to be dynamically scaled a unique ID. Then, use the window.onresize JavaScript event handler to run a JavaScript function that would fetch the images, based on ID, and then set their new dimensions based on the size of the window.

There might actually be a thread in this forum where I helped someone else do this very same kind of thing.

Peace...


----------



## mwdesign (Aug 20, 2010)

lol i thought you might be busy, its ok no problem, i know what to look for now which is good. thanks for the help


----------



## mwdesign (Aug 20, 2010)

Hi, because of those issues to do with javascript etc. i decided to make my whole site a fixed width layout of 960 px lol.

Im having a slight issue with the icons. i have made anchor tags which hold some rollover text. and have made the backgrounds of the class my image. then i gave the anchor on rollover to change background image position to the rollover.

However when i make another rollover button and anchor tag, it drops below the first one instead of being positioned to the right in a row. Any ideas why this happens?

you can see in the link what i mean. http://www.marcweissdesign.com/

cheers


----------

