CODEWITHSUNDEEP
cssfluid-layout
rockit
rockit

Reputation: 3796

Css - Fluid layout, changing the look of the site at a per-determined width

I'm trying to work on a navigation bar much like the one at http://seesparkbox.com/ Generally, When a user is viewing the page in a computer browser window, I want the navigation to go fully horizontal.

However, if the user is looking at the navigation from a smaller width (causing a line wrap of my navigation bar) I would like to re-format the navigation bar by putting the company logo on top of the navigation text, and making the navigation text (links) smaller in size to accomodate the browser size.

I just need a little point in the right direction. If there is a simple answer then great and I really appreciate the help, if there isn't if there is a tutorial that you know of that can help with this I would appreciate that too.

I'm still fairly new at css.

Upvotes: 1

Views: 129

Answers (2)

Roger
Roger

Reputation: 156

Something like this should do the trick. This will toggle based on 3 widths:

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

<link href="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >

<link href="pad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" >

Hope This Helps!

Thanks!

Upvotes: 0

sandeep
sandeep

Reputation: 92793

You can use % width with media Query for a Fluid layout.

Read these article for more

http://css-tricks.com/6206-resolution-specific-stylesheets/

http://css-tricks.com/138-the-perfect-fluid-width-layout/

Upvotes: 2

Related Questions