CSS - Designing A Site For Computer, Iphone And Ipad

hey..

i have this design



where i need it to do this http://www.456bereastreet.com/lab/cssframes/

only in the orange field where there is a login form on the picture..

but i can't get it working.. so i am very stock..

plz help

I am new to design but really doing my best to keep up with the big boys. I am trying to tweak my site on Wordpress to have a oversized, and fluid footer.

Long story short I want my site (sac247[dot]sacobserver[dot]com) to have a footer that looks like venturebeat[dot]com or mashable[dot]com. Can someone help me get started on how to break my colors out of the widget box?

I am curious to know what many of you think about the design consideration for 800 x 600. I am about to start a major project and am considering going to a fixed width of 1024 instead of my current default of 770. As I see it only about 1 of 10 use 800 x 600, and I think that will go down in the not too distant future. I wouln't mind learing how to scale a site so it looks good in any resolution but as I understand it you can not scale images that many of my site layouts depend on. Tom

Sorry if I'm being repetitive, this has been discussed before, but still there is something preventing me from making CSS boxes behave properly.

Everything has to do with stopping <TABLE> and starting <CSS>-based thinking. I mean, there shouldn't be so much magic and wonderdust as I trick myself into believe.

My problem is very simple;

I'd like the design to do the following:
[wrapper: full width, 5px padding all over]
[variable size image container, 2 px padding all over, staying on the left at all times]
[variable size text container, staying on the right at all times, stretching full width so it touches the image container]

Here's an example of the design:
Code:

------------------------
|      (wrapper)       |
||------||------------||
||image || text       ||
||------||------------||
------------------------

I thought I had it made when I read that you basically can look at creating a table based design as using a combination of DIV's and SPAN's, havind the DIV's being looked at as rows and SPAN's as columns/cells. But for some reason I can't seem to get the full grip out of it.

I've had *some* success with this, but I'm having horrible problems with making the text get to the top left of the container. It *always* stays at bottom left, no matter how I adjust my DIV's, SPAN's or properties of those. I can't seem to make the boxes have any actual "space"; when I add margin properties to either box, I can't locate it, it's as if the container isn't there. I can get the wrapper to behace though.

While I'm at it, is there some good, solid, documentation of how the boxes work and interact? I've read *alot* of different articles, looked at w3c, checked other peoples code (which actually have teached me the most), but I'd like to have some kind of resource that gives me the knowledge of "box modelling" to such an extent that I should be able to solve in not all but most problems, like this simple one.

Thanks for taking time to read through all this. I know it won't become a FAQ or rooted topic, but I'm hoping perhaps someone with the same problem as I have will benefit from this.

hola.

1.i am looking for quick tutorials on how to cross-platform web design a page without using tables.

2. and why people dont like to use tables?

++thanks in advanced.
+ckill3r

Dear Mac People... Do you see what I see?
For some reason the "As Recommended By:" box is not appearing on my co-workers' mac-laptops.
(but it is on my mac and my PC)
This link ( http://myproviderwebcapital.com/healthcare-capital-financing/ ) should look similar to this image
http://i.imgur.com/JiH5Q.png

ListInventory.com

It looks all "squished" on the iPad.
Been tasked with finding out why.
Worked fine until adding the featured product block on the right yesterday.

What did I screw up? It doesn't do this in Safari for Windows.

Hi

I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution.

What are the industry best practices for designing and developing such websites.

Your help is appreciated

Thanks

The IPad is underlining my phone links automatically making them invisible. I am aware of the fix using the meta tag. The problem is that these numbers are substituted by javascript in our AdWords tracking. I am afraid the <meta name="format-detection" content="telephone=no" /> will cause the phone tracking not to work on IPad. This is the simple css for the phone number:
#phone {
position:absolute;
left:285px;
width:250px;
top:237px;
height:25px;
font-size:18px;
color:#0F2532;
}
and the site is assistedfertility.org. Is there a css rule I can add to #phone that will remove the automatic underline? What other ways that wont effect javascript number tracking?
Thanks

I have a div on a web page set up so that all the links inside that div should not be underlined. Works great on every OS and browser I have tested it on... except one particular computer running Windows XP and Internet Explorer 8. That computer shows the links underlined. Other computers running Windows XP and Internet Explorer 8 show the links not underlined as intended.

Is there some kind of personal browser setting in Win/IE8 that overrides the style sheet? I looked in Internet Options and found the option to underline links Always/Hover/Never, but that option seems to be set to always by default, and does not override the style sheet on other computers.

Has anyone else dealt with a problem with using custom fonts w/ @font-face and Ipads? I have a site http://osake.garychus.com and throughout the site the font Lato is messed up, but on all other platforms it looks great.

I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).

Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.

What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?

Hi;
why my container display different of size from different computer?
In my computer, i can see the whole container(even i use different browser), but in some computer, just can see the part of the container, could anyone can help me, please.

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<style type="text/css">
html head{
   border:0;
   padding:0;
   margin:0;
   
}
body{
  padding:0;
  border:0;
  margin:0;
  background-color:#CCCCCC;
}

#container {
   position: relative;
   width:1200px; 
   height:750px;
   border:0;
   padding: 0;
   margin-top:40px;
   margin-bottom:auto;
   margin-left:auto;
   margin-right:auto;
   background-color:#FFFFFF;
   }
</style>
</head>
<body>

<div id="container">
The new Prime Minister's personal support is still firming though.

Polling of 1500 people by Auspoll early last week showed she has a 45 per cent approval rating, an 18 per cent disapproval rating and a whopping 37 per cent have reserved their judgment.

The polling was taken before the asylum issue blew up in the Government's face.

Labor's election planning has been brought forward by the rise of Ms Gillard as leader.

A senior Labor source confirmed last week that former prime minister Kevin Rudd had been planning a late election, which was expected in about October.

Among a series of announcements last week that have been widely interpreted as a clearing of the decks was a decision to axe the Green Loans program and put the Government's controversial internet filter on hold for a year.

Even on social issues Ms Gillard appears to be travelling well. Her much publicised early admission that she does not believe in God is not troubling many voters.

The Auspoll survey found that having an atheist Prime Minister was of no consequence to 62 per cent of people, 20 per cent said they actively support a PM who does not believe in God while less than 18 per cent were opposed.


 </div>

</body>
</html> 

I am having trouble trying to work out why on an iphone my css file never gets used.

when a user arrives at my site with a screen size <= 1024 i apply a different style sheet using this function - http://www.kelvinluck.com/2006/05/s...ts-with-jquery/. i know this isnt a way of doing it for an iphone as you use user.agent but i am doing it for smaller screens at the same time.

Code:

<link href="index.css" rel="stylesheet" title="screen" type="text/css" media="screen" />
        <link href="css/mobile.css" title="mobile" rel="alternate stylesheet" type="text/css" />

that is how i order my stylesheets in my html. on opera on the iphone the css works fine but its just safari. on android the site works fine.

any help would be really grateful

thanks in advance

Here's the CSS excerpt:

div#uhgWrapper
{
width: 320px;
height: 268px;
}
div#uhgWrapper[footerIncluded="false"]
{
height: 310px;
}
body[orient="landscape"] div#uhgWrapper
{
width: 50px;
height: 50px;
}
body[orient="landscape"] div#uhgWrapper[footerIncluded="false"]
{
height: 50px;
}


this works great for Safari on the desktop but, the last two elements aren't recognized on Safari on the iPhone.

Any suggestions?

TIA