CSS - Get Me Started Writing The Css.

Is there a way to detect whether someone is using a mobile device, and write specific CSS according to whether the viewer is using a computer or Iphone/ Blackberry or other mobile device?

Any links or info is appreciated.

thanks
-

Hi,

I'm currently trying to write a website that will look like this:

http://andrew.estyles.com.au/website.jpg

The website will be anchored to the top left of the screen and will stretch 100%. The main content area (light blue) must stretch vertically to fit the content, and the side bar (purple) must stretch to the same height as the main content area.

What I want to do is let the user hide the side bar by clicking on a button on it (using Javascript). When they click the button, I want the side bar to shrink to about 10-20px in width (enough so that it's still there and you can click another button on it to show it). When the button is clicked to hide it, I want the main content area to move left and fill in the space where the side bar was (and similarly, I want it to move back to the right when the side bar is expanded)

I'm having troubles figuring out the CSS to do this. Here's what I've got so far:


HTML:

Code:

<div id="topBanner">Banner goes here!</div>
<div id="menuBar">{{T_MENU}}</div>
<div id="main">
	<div id="leftBar">Side Bar</div>
	<div id="content">Main Content
	</div>
</div>

CSS:

Code:

/* GENERAL STYLES */

body
{
	margin: 0px;
}

img
{
	border: 0px;
}

/* END GENERAL STYLES */


/* top website banner */
#topBanner
{
	width: 100%;
	height: 100px;
	
	background-color: #CCCCCC;
	
	border: 0px solid black;
}

/* bar containing the menu */
#menuBar
{
	width: 100%;
	height: 20px;
	
	background-color: #666666;
	
	border: 0px solid black;
}

/* container for leftBar and content */
#main
{
	width: 100%;
	
	background-color: #0000FF;
	
	background-image: url('../images/main_background.gif');
	background-repeat: repeat-y;
}

/* left bar containing quick links etc */
#leftBar
{
	float: left;
	
	width: 140px;
	
	padding: 5px;
}

/* main content area */
#content
{
	font-family: Verdana, Ariel, Helvetica, Times New Roman;
}

Using that code, I get my side bar fine etc, it all works fine - but I'm not sure what I should be doing to hide it (I don't mean I don't know the javascript code to do it, I just mean I don't know what I actually need to modify in the divs). Also, you'll note that I'm using the faux column method described here to put in my side bar if that makes a difference. The image I am using is just 150px (size of my side bar) one colour on the left, and then another colour for the rest of it. So when I shrink the side bar, I need to adjust the background images too.


So yeah, if anyone can send me in the right direction I'd appreciate it!

Cheers.

I have a header.inc file and a footer.inc file that is called to each new file that I create.

The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file.

What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file.

Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??.

Hope this is clear...thanks alot

Hey, does anyone know if there's a mozilla equivilent to writing-mode?

um .. that's all

Thanks