Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hey everyone, I'm kind of new to the whole CSS way of designing sites, but I will try to explain to my best ability what I'm trying to do.
http://www.ryannickel.com/myd2.0/myd2.0/template2.htm
that is where I'm currently at
there will be 2 parts, the header, and content
HEADER
2 columns. Left one has a static width, with some content in it. Right column will have a repeating image that will merge in seamlessly with the left.
When the browser window is resized I want the right one to expand and contract as needed.
BODY
3 columns (holy grail). Left and right colums are static width.
left column and center column have the same background colour
right column has a different background colour (I'd like to have this one span the entire height)
When the browser window is resized, I would like the center column to expand and contract as needed.
The problem I seem to be having is that I seem to be getting different output in different browsers, and I have NO idea how to fix them... any pointers would be GREATLY appreciated.
Thanks -
-
CommentAuthorDarren Hoyt
- CommentTimeJul 4th 2006
Some people may disagree and suggest you start completely by hand, but you could always try using some existing CSS templates....
http://www.mollio.org/
http://blog.html.it/layoutgala/
http://www.inknoise.com/experimental/layoutomatic.php
http://tools.i-use.it/
http://www.intensivstation.ch/en/templates/
....to build your intial page since the layout looks pretty standard. Since these templates are generally built by reputable and experienced developers, I would study their code carefully and see how they acheived their columns, floats, text styling and so forth, and then for your next design try to do it all from scratch. If that gives you troubles, this is a good book to get you over some browser and layout issues. Just an idea. -
-
-
CommentAuthorMister Bubbles
- CommentTimeJul 9th 2006
You should look at OWD. They have a lot of awesome templates to start from.
For the header, you can make it expandable with a percentage width. For the three columns, you'll probably need a wrap div (a container over all of them). Fix it's width, and float the first two columns left each with a 33% width (or according to your wrap width). Clear the far left one to the left. For the right one, obviously float it right and clear it right. If you're using padding and margins though, adjust the column width percentages accordingly.
Basic Styling
body {
padding: 0;
margin: 0;
}
.header {
width: 800px;
height: 200px;
}
.wrap {
width: 800px;
}
.lcolumn {
position: relative;
float: left;
clear: left;
width: 33%;
}
.mcolumn {
position: relative;
float: left;
width: 33%;
}
.rcolumn {
position: relative;
float: right;
clear: right;
width: 33%;
}
Basic Markup
<div class="header"></div><div class="wrap"><div class="lcolumn"></div><div class="mcolumn"></div><div class="rcolumn"></div></div>
The code should work, but I don't know since I didn't test it. Fix whatever you need to.
Cheers,
Josh -
-
Here are some things I've found helpful when trying to make things cross-browser compatible:
1) Try to never use an explicit width declaration and padding declaration on the same element. This helps avoid problems with ie's box model. The better option is to apply your width to a containing element and use margins/padding on the inner elements to create the appropriate spacing.
2) When doing three column layouts, if your design calls for either flanking column to stretch to the bottom it is hellish to manage. It involves much hacking, excessive margins and exciting floats.
3) Watch out for google desktop, it appearently hates internet explorer's rendering engine. I'm serious.
If you plan your site properly, and take proper care when creating your css, cross browser compatibility is really easy. -
-
CommentAuthorMister Bubbles
- CommentTimeJul 11th 2006
I agree. -
-
I agree
-
As any of you used the Yahoo templates they try to give off as APIs?
1 to 7 of 7