Page 1 of 2

Positioning only with CSS?

Posted: Tue Sep 25, 2007 8:51 am
by Sindarin
Hello, having recently discovered the ability of css to position elements freely in a page,
e.g.

Code: Select all

position:fixed;
top:30px;
right:5px;
I've thought of creating a drag and drop program so I'd do websites fast, purely with css and html.

My questions would be:
Is it safe to work only with css to position the whole website, or it there will be any problems? Is it bad practice?
How compatible are browsers with css?
And what's the difference between fixed, absolute and relative positioning? Which is best to use?

To be honest I never worked with css directly though it looks powerful so every positioning I've done to my websites are via the traditional 'tables'.

Posted: Tue Sep 25, 2007 9:09 am
by feyd
It would appear all your questions could be answered with a bit of time in your favorite search engine.

Re: Positioning only with CSS?

Posted: Tue Sep 25, 2007 11:00 am
by matthijs
Sindarin wrote:I've thought of creating a drag and drop program so I'd do websites fast, purely with css and html.
That would be some kind of WYSIWYG program, like Frontpage. Most of the times, such a program doesn't produce very good code (read: produces very bad code). So I doubt you could improve upon that yourself.
Sindarin wrote:To be honest I never worked with css directly though it looks powerful so every positioning I've done to my websites are via the traditional 'tables'.
It is very powerful, and once you get it you won't go back. However, as Feyd suggested, a bit of surfing around and reading tutorials etc would help most at this point, I think.

Posted: Tue Sep 25, 2007 12:30 pm
by figaro11
The position property is a css2 specification, most modern browsers support css2. Here's a good resource when I started css.

Posted: Tue Sep 25, 2007 4:00 pm
by Sindarin
That would be some kind of WYSIWYG program, like Frontpage. Most of the times, such a program doesn't produce very good code (read: produces very bad code). So I doubt you could improve upon that yourself.
That's why I decided to code my own, I've thought of a clever way to do it, it'd be drag and drop and touch and write html/css algorithm, but I didn't know css could position the elements in pixels back then.

Also I can't believe Dreamweaver can't display the exact positioning when it comes to css or layers. Talk about a $500 worth software. *sigh*
The position property is a css2 specification, most modern browsers support css2. Here's a good resource when I started css.
Thanks, I'll take a look in that.

Now one problem I stumbled upon is that if I don't choose a w3c .doctype then the css style is not rendered in IE.
How can I avoid this?

Code: Select all

<html>
<head>
<link rel='stylesheet' href='index.css' type='text/css' />
</head>
<body>
<input type="checkbox" class="checkbox1place">
<img src="042.jpg" width="134" height="103" class="img42place">
</body>
</html>
This is the code. In firefox the stylesheet is correct but IE ignores it.
If I add the doctype then the checkbox is not affected...

Posted: Wed Sep 26, 2007 12:56 am
by matthijs
That's why I decided to code my own, I've thought of a clever way to do it, it'd be drag and drop and touch and write html/css algorithm, but I didn't know css could position the elements in pixels back then.

Also I can't believe Dreamweaver can't display the exact positioning when it comes to css or layers. Talk about a $500 worth software. *sigh*
The problem is not that it's not possible. These programs do exist and do function, up to some point. The problem is that a program will never achieve the level of quality you would get by coding by hand. A program cannot think about what semantic meaning each part of the web page has, it cannot know what parts of the web page are related, etc.
How can I avoid this?
Just add the correct doctype. Why would you not?

Posted: Wed Sep 26, 2007 3:04 am
by Sindarin
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


[quote]The problem is not that it's not possible. These programs do exist and do function, up to some point. The problem is that a program will never achieve the level of quality you would get by coding by hand. A program cannot think about what semantic meaning each part of the web page has, it cannot know what parts of the web page are related, etc. [/quote]

I do agree to a point, but Dreamweaver is up to version 9 after years of development with changes that are less useful to the average web developer.

As you see I found this page that shows an example of positioning with css: [url]http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed[/url]

You can notice there's no doctype and the example works fine in firefox but then IE ignores it completely.

Now try to add a doctype and you'll notice the left text goes some pixels down, why?


[b]Another test I did, I created an html and css file.[/b]

[b]HTML source:[/b]
[syntax="html"]<!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">
<head>

<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<p class="one">Some text</p>
<p class="one">Some mGH text</p>

</body>
</html>
CSS source:

Code: Select all

p.one
{
position:fixed;
left:0;
top:0;
}
In IE looks right but...
in firefox the letters are pushed down one line thanks to the doctype...


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Sep 26, 2007 7:13 am
by matthijs
I would read some more about the how and why of a Doctype if I were you. maybe a bit dry stuff, but important nonetheless. Basically the Doctype tells the browser what kind of document he can expect. "This is a HTML 4.01 strict document", etc. So, if you leave out the doctype, the browser has to guess. And different browsers guess different. And then you see the differences.

(although there are many more differences between browsers so even with a Doctype you will almost always see differences in the way a browser displays your webpages)

Posted: Wed Sep 26, 2007 7:31 am
by superdezign
You may also wish to create a normalization CSS file to normalize margins and paddings of lists, paragraphs, headers, etc. from browser to browser as their defaults are an issue of developer preference, without much standardization.

Posted: Wed Sep 26, 2007 9:52 am
by Sindarin
You may also wish to create a normalization CSS file to normalize margins and paddings of lists, paragraphs, headers, etc. from browser to browser as their defaults are an issue of developer preference, without much standardization.
Sounds like a great idea.
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: Arrow Posting Code in the Forums to learn how to do it too. [/quote]

Thanks, I didn't note the syntax dropdown menu.


Now after some experiments, setting the margins to 0 fixed most of my problems and I finally can use doctype with correct positions in both browsers. Now I have to choose between [b]fixed[/b] and [b]absolute[/b] positioning.

Posted: Wed Sep 26, 2007 10:05 am
by matthijs
Or relative positioning. Or floats. Or natural flow.

Posted: Thu Sep 27, 2007 12:28 am
by Sindarin
So what's the best for keeping your content to the center of the page?
Must I use a table for this?

Posted: Thu Sep 27, 2007 1:54 am
by matthijs

Code: Select all

#content { 
width:650px; // or use % or em
margin:0 auto;
}

Really, I'm happy to answer your questions. But it will also save you a lot of time and energy if you first learn the basics by reading a book or some of the many online tutorials about CSS.

A good book about CSS is Cascading Style Sheets from Briggs et al. Dan cederholms Bulletproof Webdesign is also excellent.

Posted: Thu Sep 27, 2007 2:41 am
by Sindarin
Really, I'm happy to answer your questions. But it will also save you a lot of time and energy if you first learn the basics by reading a book or some of the many online tutorials about CSS.
Thanks, online tutorials will do too. :D

However I understand most of css code, problems arised mostly with positioning.

Code: Select all

#content {
width:650px; // or use % or em
margin:0 auto;
}
I tried adding it to the top of my css file but it wouldn't do anything.
Do I need to add it to all my elements?

My current experiment is this:

Code: Select all

body {
background-image: url('images/bg.jpg');
background-repeat:repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align: center;
}
a:link {
	color: #0000FF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0000FF;
}
a:hover {
	text-decoration: underline;
	color: #0000FF;
}
a:active {
	text-decoration: none;
	color: #0000FF;
}

.banner
{
position:absolute;
left:50%;
top:0px;
margin-top:0px;
margin-left:0px;
z-index:0;
}

.table
{
position:absolute;
left:50%;
top:100px;
margin-top:0px;
margin-left:0px;
z-index:1;
}

.text
{
position:absolute;
left:50%;
top:130px;
margin-top:0px;
margin-left:0px;
z-index:2;
width:722px;
text-align:justify;
border-bottom-style:dotted;
border-width:thin;
border-color:gray;
overflow:visible;
border-collapse:33px;
}
.link1
{
position:absolute;
left:50%;
top:84px;
margin-top:0px;
margin-left:0px;
z-index:2;
font-size:11px;
}

Posted: Thu Sep 27, 2007 2:29 pm
by matthijs
For my code to have any effect, you have to have a div with an ID "content". Or, you could apply the css rules I gave to an element you have in your HTML.

Often, when you want to center a layout you would have a "wrapper" or "container" div, which you give the margin:0 auto rule.

It's also possible to do that with the body element though:

Code: Select all

body {
 width:800px;
 margin: 0 auto;
}
But there is one issue with using the body, with IE5 messing things up. Can't remember exactly, but I know there was something.

Also, for IE5 to center the layout you need the following "hack"

Code: Select all

body { text-align:centre; }
#wrapper { text-align:left; }