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
-
- CommentAuthoronecreative
- CommentTimeApr 19th 2006
Im working on a site based on open-realty, am in the process of customizing everything... I can't get my right column aligned appropriately and don't really know what I'm not doing.... I'm just working my way through CSS and am learning as I go, so take it easy on me.
http://franksservice.clients.plastictabs.com
Please help! -
Glad to hear you're learning to use CSS for layout, onecreative. Here's some quick tips to help you out:
1) The reason the right column is not aligning next to the other content is for 2 reasons. First, the width of the left column (#maincol) is 850px and the width of the right column (#rightcol) is 176px (156px width + 10px padding on each side), for a total of 1026px. The container of those 2 divs (#outer) is set to only 950px. So the first thing you'll need to do is decrease the width of #maincol to at least 774px (774 + 176 = 950). That alone won't do it though, you also need to...
2) Add float: left; to the #maincol div as well. You already have #rightcol floated to the right, so adding the float to #maincol should take care of it
OK that fixes your problem. Floats take a little time to understand when you first start off, but with some work they'll make perfect sense to you (think of floats the same way you used to use the "align" attribute of images and that may help you out. Now for a couple more suggestions...
3) Your XHTML does not validate. While you may be able to get your layout to work with invalid code, I'd recommend writing valid code if at all possible. You'll eventually encounter some errors that you may think are CSS-related, but they're actually errors in the XHTML. Validating your code helps a lot with debugging.
4) You're using tables for layout! :-O I know it's tough to let go of tables, but trust me (and everyone else here), once you learn how powerful CSS is, you'll never want to deal with tables again. So spend some time and figure out how to replace those tables with divs and CSS.
You're taking steps in the right direction... keep going! -
- CommentAuthoronecreative
- CommentTimeApr 20th 2006
I applied the fix you mentioned and it worked just fine, thank you. I was confused with the divs #outer and #inner.... anyway it works.
By the way, I'm also beginning to tune into this validation issue.. what exactly is validated code and how do I debug?
There are tables in some of the template files by default installation in Open-Realty. I will hack them out as I go through each template file. -
- CommentAuthoronecreative
- CommentTimeApr 20th 2006
And I definately appreciate all of your help!!!! -
(x)html validator can be found at http://validator.w3.org/
and css validator at http://jigsaw.w3.org/css-validator/
Get the html to validate first, the css I've found a bit more tricky, but like you I have been teaching myself the last few months.
Hope this helps -
- CommentAuthoropenrealtyuk
- CommentTimeApr 26th 2006
Hi Frank
what you need to do is to design your template as basic html first.
x)html validator can be found at http://validator.w3.org/
and css validator at http://jigsaw.w3.org/css-validator/
like tankedup said
next add in your design into main.html flie as you have done, make sure you
are using open realty 2.2.0
that should be it
Albert :) -
- CommentAuthoronecreative
- CommentTimeApr 26th 2006
Well... I am progressing slowly... the columns now align how I prefer. How would I center this in Main.html?
Also, is there a way I can remove all tables in the templates without harming the code.... I know the tables have classes to define how the content returns, but I've tried to replace the tables with divs to no avail.... help! -
Hi,
I looked at your source and it doesn't look any good :-)
First try to get rid of this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > (just for now)
OR replace it with this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Now let's take a look, you've used the tag "body" 4 times:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
--------------------------------------
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
color:#6699CC;
---------------------------------------
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
-----------------------------------------
body{
margin:0px;
padding:0px;
width:800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
------------------------------------------------
You should only use:
body {
margin: 0;
padding: 0;
color: #6699CC;
background: #FFFFFF;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
And your doc should look like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords"" content="" /> <------- METAS STAY ON TOP
<title>YOUR SITE TITLE</title>
<style type="text/css"> <--------- STYLE TAG STRAT HERE
body {
margin: 0;
padding: 0;
color: #6699CC;
background: #FFFFFF;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
AND THE REST OF THE STYLE
</style> <--------- AND IT ENDS HERE RIGHT BEFORE THE </head> TAG
</head>
<body>
THE DOC ELMENTS, TABLES, DIVS ETC.
</body>
</html>
So you need to start right and you'll learn fast !
1 to 8 of 8