Total site in CSS?

[kristi99]

hi all,

 

Is it possible to make whole website in css? I don't know how to stretch the gifs in those columns on the sides of the page with CSS.

 

Thanks

------------------------

Software development company

Web application development

[shadiadiph]

here is a rough idea of how to add a gif to something

 

.signup .button{
width: 70px; 
height: 21px;
color: #333;
background: #CCC url(../pix/headerbg.gif) repeat-x;
border: 0px solid #b0bec7;	
margin: 5px 0px 0px 25px;
}

 

 

this makes a gif 1px wide spead accross a button element you can use it with td elements too if you used repeat-y you could use a long gif to come down the element. or just to use one static gif no-repeat left top;

 

 

 

hope this helps

 

[Goafer]

Essentially the answer is yes.  It should be possible to do the entire design for your website in CSS, as long as you structure the HTML correctly.  Make good use of <div> and <span> and remember to include things like <a> in your style properties.

[shadiadiph]

yes it is the best way to do it I think make one main.css template then for then seperate ones for the content center parts that way it is easy to edit and track. I usually make a different center template for each page as having one long css form for an entire site is a nightmare to track

[TheFilmGod]

Essentially the answer is yes.  It should be possible to do the entire design for your website in CSS, as long as you structure the HTML correctly.  Make good use of <div> and <span> and remember to include things like <a> in your style properties.

 

Actually, you shouldn't be using <span> unless its an extremely rare situation. Divs are almost always necessary, but don't forgot you can style certain elements directly.

 

To create a website in css 100% you need to be competent with <ul> <li>, floating/clearing, <p>, and using margins.

[jackpf]

CSS is the way forward. The only other option is using tables, and they can be horrible.

Especially when trying to validate them, considering that virtually all attributes are invalid 

[shadiadiph]

yep tables can be a pain with positioning especially when you have a table in a table in a table thats why i said to make a main page template then seperate css sheets for the central contents then they are easier to go back and edit as long as you name the css the same as the page name you are editing.

I do it so i have a content holder in the main css template then  for example if i have  a news.php I make a seperate news.css for the news content a seperate one for form content etc.

[jackpf]

My old website was completely based upon tables.

 

Horrible.

 

When I found out about CSS I was amazed that you could set an attribute to every occurence of any html element.

 

CSS is pretty good when you think about it...

 

 

[shadiadiph]

tables can still be useful with positining if you want to see where your problem is in a table its much easier by just setting the border to border: 1px solid #ff0000; then you can always see what your problem is usually. lol

[jackpf]

Yeah, I suppose, but I normally debug with my webdeveloper firefox addon.

 

It's amazing, I literally couldn't live without it.

 

You can outline any css elements on mouseover, or by custom, it usually shows me where I'm going wrong.

 

It also offers table/cell outlining.

 

If anyone reading this designs websites and hasn't got it, get it now- it's awesome.

https://addons.mozilla.org/en-US/firefox/addon/60

 

Yeah, I still use tables for some stuff, such as my forum. On the subject/topic view page, I've got around eight columns, and a table would be much more efficient. Generally speaking though, CSS is way better 

[shadiadiph]

yes css is good but I was having problems with browsers displaying differently but i find as long as the page validates on w3 validator css and html code usualy works fine on all browsers

[jackpf]

I think what you probably mean to say is you're having trouble with IE displaying CSS differently?

 

lol

 

IE is a nightmare with CSS, that's the only bad thing about it.

 

Apart from that, it's great.

[TheFilmGod]

I think what you probably mean to say is you're having trouble with IE displaying CSS differently?

 

lol

 

IE is a nightmare with CSS, that's the only bad thing about it.

 

Apart from that, it's great.

 

How exactly does IE7 interpret css incorrectly? I am still yet to find an issue with the IE's rendering engine. All errors that I have debugged thus far, have been caused by poor css styling and non-semantic html coding. I am sure IE8 is just as standard compliant as FF 3.1, if not better.

[jackpf]

IE 8 beta 2 is actually quite good, I must say.

 

It interprets stuff much more similiarly to FF, which is cool.

 

And pardon me if I'm a bit anti-IE, but I find it such a pain in the arse.

 

Once I've finished making a page, I think "Cool, glad that's done."

Then I have a look at it in internet explorer, and spend another several hourse getting it to look the same with conditional IE statements.

 

I think the reason they made the IE conditional statements is because they know their browser sucks and it needs a load of extra CSS to make stuff look the same as it does in every other browser...

[haku]

IE7 deals with floats and margins differently from every other browser at times. Look at this code for example:

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div style="float:left; width:120px; height:100px; right-margin:-120px; background-color:red;"></div>
<div style="padding-left:121px; height:100px; background-color:green;">
<div style="height:100px; width:100px; background-color:pink;"></div>
</div>

</body>
</html>

 

The pink div in both standards-compliant browsers as well as IE site is properly placed up to the edge of the 100px padding of its parent div (the green div). Since the red div is floated left and has a negative margin equal to its width, it should be taken out of the flow of the document entirely, meaning that the div below it (the green div) will sit behind the red div. Standards compliant browsers render this correctly, as can be seen in firefox. Since the green div has a 121px left padding, the red div sits over top of that, and anything contained in the green div will not go behind the red div. Where the problem lies is that IE starts the green div next to the red div, instead of behind it. No other major browser does that.

 

I know that IE7 also has its own rules with z-indexes, but since I never use them, I don't know the specifics. I've read about it in the past though.

 

 

[TheFilmGod]

Negative margins should never be used. You can easily achieve the same effect using absolute positioning.

 

The example is rather extreme. I can give you one too - IE7 doesn't support display: table;... but that doesn't mean it isn't standard compliant. IE7 is the best browser to measure your competence as a web designer of semantic and proper code. If you need to use negative margins or crazy "hacks" for IE7, you haven't done your homework.

 

I am yet to see a flaw in IE7's rendering engine. Haku's example emphasizes IE7's incorrect visualization of negative margins - Negative margins are discouraged by the W3C, and for a good reason. Negative margins are illogical and the same effect can be achieved by more semantically correct coding techniques. It seems as though novices label IE7 as crap, when in reality, these people code garbage.

[haku]

Negative margins should never be used. You can easily achieve the same effect using absolute positioning.

 

The only reason negative margins shouldn't be used is because IE7 doesn't render them properly, as its a non-standards compliant browser. This is the case in point. Standards compliant browsers have no problems with this. And if there is nothing wrong with it, then why has IE fixed the problem in version 8 of its browser?

 

I can give you one too - IE7 doesn't support display: table;

 

Exactly. And that is one of the standards. And since IE doesn't support it, its not standards compliant. And again, since they have fixed this for IE8, they obviously accepted that it was non-compliant themselves.

 

but that doesn't mean it isn't standard compliant

 

Actually, yes it does.

 

IE7 is the best browser to measure your competence as a web designer of semantic and proper code.

 

If it was standards compliant, it would be. But as it's not, FF, Safari or other browsers are a better bet. Better to learn on a browser that is compliant, than one that isn't. Especially since even IE seems to be heading towards compliance with their new brower. Learning on IE7 is just starting off learning the wrong way.

 

If you need to use negative margins or crazy "hacks" for IE7, you haven't done your homework.

 

If IE7 was standards compliant, we wouldn't need to use conditional comments for it. And there is absolutely nothing wrong with negative margins - if there were, they wouldn't exist.

 

I am yet to see a flaw in IE7's rendering engine.

 

I pointed out one, and you pointed out another.

 

Negative margins are discouraged by the W3C

 

Really? Where?

 

It seems as though novices label IE7 as crap, when in reality, these people code garbage.

 

It's often a combination of both. IE7 is screwed up in its own way, but many people are posting garbage.

[jackpf]

Hate to say I told you so, but I told you so.

 

IE 7 is awful. It's obviously not a standards complient browser. Where are you getting your information...the IE website?

[shadiadiph]

w3.org pretty much has everything on there

[jackpf]

IE7 deals with floats and margins differently from every other browser at times.

 

Yeah, I've noticed this.

 

For example, my titles for each page are something like this:

 

.title
{
top: 0;
width: 100%;
text-align: center;
position: absolute;
}

 

But because IE7 starts the div from where my body is, the title is way off to the right. Every other browser, including IE8 displays this correctly.

 

To fix this I had to use the following:

 

	<!--[if lt IE 8]>
		<style type="text/css">
			.title
			{
				position: relative;
				top: -40px;
				margin-bottom: -25px;
			}
		</style>
	<![endif]-->