Spry Menu Bars In Fluid Layouts

[RachelleY]

I am currently working on an 11 page site. I am working with fluid layouts in dreamweaver6. In the browser and tablet versions everything runs very well. I am using a vertical spry menu bar with only three main topics, the one is broken down into quite a few more. When I go to phone version the whole thing squishes up and becomes unreadable. Is there a way to use css to spread it across the top more in phone view or even to set it to go horizontal in only that view?

 

My link - this is a rough draft of the site so perhaps you can see what i am talking about. It is an assignment for school and my teacher does not know either :-| starting to make me question the college education system, but none the less I would love to figure this out.

[grabenair]

You need what is called responsive web design. Google it to get more info. But here is the short version. You add a style sheet and link it in your header or add some css to the bottom of your style sheet. If you add a style sheet in the header make sure it is under the main css.

 

Here is what you do if adding to the bottom of your css write this line of code. This is called a media query.

 

@media (max-device-width: 320px) {
     Your new css rules here. They will only apply to media that is 320 px and under in width. You can change the 320px to anything that you want. What you do is change the size of your stuff to fit. Like content from 960px to 315px.  
}

 

I know this probly made it worse but this is a very big subject this is way I gave you what to google.

 

Here are a couple of links that I like to get you started.

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.lynda.com/Web-Responsive-Design-tutorials/Responsive-Design-Fundamentals/104969-2.html

[Moloney]

I think that media queries might not be necessary for this project because the navigation menu is only three elements wide.

But responsive designs using css is the answer --- essentially you need to change your widths to percentages instead of pixels.

But you would have to learn at least a little bit about how to use css.

[grabenair]

Just a fyi for Stephenius. Responsive design is what happens to your web site when the viewport is different sizes. For example phone 480, 768 tablet. Then you use media queries to target the view port size. So to sum up they go hand in hand.

 

Back to Rachelle Y, Try this to fix your problem:

<meta name ="viewport" content = "width=device-width">

 

This goes in the head of your document. What it does for a fluid layout is tell your website what size of viewport your site is being viewed on.

 

There are other properties that you can put in the meta tag but this should fix your problem. If you would like to do some research on this go to http://dev.w3.org/csswg/css-device-adapt/

 

Hope this helps and not made it worse.

Edited January 17, 2013 by grabenair

[RachelleY]

Thank you all for your help (to those that replied here and in mail). I got it figured out. I am new to these forums but so far I have found you all to be the nicest, most helpful, and accurate group to date of the forums I am on. And the quick response times are great.

 

Thank you

 

Rachelle.

[Johnclr]

grabenair :

 

You need what is called responsive web design. Google it to get more info. But here is the short version. You add a style sheet and link it in your header or add some css to the bottom of your style sheet. If you add a style sheet in the header make sure it is under the main css.

 

Here is what you do if adding to the bottom of your css write this line of code. This is called a media query.

 

@media (max-device-width: 320px) {

Your new css rules here. They will only apply to media that is 320 px and under in width. You can change the 320px to anything that you want. What you do is change the size of your stuff to fit. Like content from 960px to 315px.

}

 

 

am agree with your answer.

 

thank you.

Edited April 18, 2013 by Andrea
Link Deleted

[grabenair]

Well I do not generally respond to an old post. But sense this was brought to the top again I went and checked out the like to the site RachelleY was having problems with to see how she fixed it. And am writing this incase she is watching this. Just wanted to say good job on the responsive site!! It looks awesome on my phone.

Edited April 18, 2013 by grabenair