Problems with CSS and Dreamweaver

code doesn't show properly

Page 1 of 1

3 Replies - 2720 Views - Last Post: 09 December 2009 - 09:58 AM

#1 Bonecrusher   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 21-November 09

Problems with CSS and Dreamweaver

Posted 21 November 2009 - 03:53 AM

I started a page with Dreamweaver template but it become rubbish.
So I restarted the page with using tables.

The page with tables is like this:

This is the code of page:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
</style>
<link href="main2.css" rel="stylesheet" type="text/css" />
<link href="design2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="400" height="80" class="header" align="center">LOGO</td>
	<td width="400" height="80" class="header" align="center">SEARCH</td>
  </tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="500" height="40" class="menubar" align="left"><a href="/home.html">HOME</a> | <a href="/categories.html">CATEGORIES</a> |</td>
	<td width="260" height="40" align="right" class="menubar">Logged As: 123456789012345</td>
  </tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td height="10" colspan="2" class="headershadow"></td>
  </tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td colspan="2" class="maincontent"><h1> Main Content </h1></td>
  </tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td height="10" colspan="2" class="footershadow"></td>
  </tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="500" height="25" align="left" bgcolor="#3366FF" class="footer">[ <a href="/home.html">Home</a> ] [ <a href="/categories.html">Categories</a> ]</td>
	<td width="300" height="25" class="footer" align="right">Footer note</td>
  </tr>
</table>

</div>
</body>
</html>


This is main2.css:

@charset "utf-8";
#container {
	width: 800px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}



this is design2.css:
@charset "utf-8";
body {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 100%;
}
.header {
	background-color: #C66;
}
.menubar {
	background-color: #369;
	padding: 10px;
	font-weight: normal;
}
.headershadow {
	background-color: #366;
}
.maincontent {
	background-color: #FFF;
	padding: 15px;
}
.footershadow {
	background-color: #99C;
}
.footer {
	background-color: #996;
	font-size: small;
	padding: 5px;
}



This site looks pretty okay with only a problem,
When I assign 500 width - 300 width to the menubar, dreamweaver shows me 500 (480) and 300 (280) values. When I make the values as 460-300, Dreamweaver removes parentheses.
500+300 should be 800, so I don't know what it is the problem.

Then I restarted the page again, but this time I decided to use div and css, not the tables.

This is the result:

the main page:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
-->
</style>
<link href="design.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="headerlogo">
LOGO
</div>
<div id="headersearch">
SEARCH
</div>
<div id="menubar">
MENU
</div>
<div id="userbar">
USER
</div>
<div id="headershadow">
</div>
<div id="maincontent">
CONTENT
</div>
<div id="footershadow">
</div>
<div id="footermenu">
MENU
</div>
<div id="footernote">
NOTE
</div>

</div>
</body>
</html>


main.css:

@charset "utf-8";
#container {
	width: 800px;
}
#headerlogo {
	width: 400px;
	height: 80px;
	float: left;
	clear: left;
}
#headersearch {
	width: 400px;
	height: 80px;
	float: left;
	clear: right;
}
#menubar {
	width: 500px;
	height: 40px;
	float: left;
	clear: left;
}
#userbar {
	width: 300px;
	height: 40px;
	float: left;
	clear: right;
}
#headershadow {
	width: 800px;
	height: 10px;
	float: none;
	clear: both;
}
#maincontent {
	width: 800px;
	float: none;
	clear: both;
}
#leftbar {
	width: 300px;
	float: left;
	clear: left;
}
#rightcontent {
	float: left;
	clear: right;
}
#footershadow {
	width: 800px;
	height: 10px;
	float: none;
	clear: both;
}
#footermenu {
	width: 500px;
	height: 25px;
	float: left;
	clear: left;
}
#footernote {
	width: 300px;
	height: 25px;
	float: left;
	clear: right;
}


and the design.css:

@charset "utf-8";
body {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 100%;
}
#container {
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#headerlogo {
	background-color: #C66;
}
#headersearch {
	background-color: #C66;
}
#menubar {
	background-color: #369;
}
#userbar {
	background-color: #369;
}
#headershadow {
	background-color: #366;
}
#maincontent {
	background-color: #FFF;
}
#leftbar {
	background-color: #09C;
}
#rightcontent {
	background-color: #FF9;
}
#footershadow {
	background-color: #99C
}
#footermenu {
	background-color: #996;
	font-size: small;
}
#footernote {
	background-color: #996;
	font-size: small;
}


Ok, I want to ask problems of this site, please answer them if you can.

1) The site seems perfect in browsers and dreamweaver live view. But in dreamweaver design view, It shows the menubar div and userbar div seperated and in different rows. I think it is a problem like the prior site.

2) I have realised that, in the result (browser view), the container div doesn't contain the footer divs. for example if i add "border: 2px solid #000;" to #container div, every div become surrounded with border except footer. I triple checked if container div contains footer in main source code, but there seems no problem in there.

3- i used #container div to hold all the divs and page layout in the center of window. is there any other method to hold these divs inside the center, other than this #container div?

4- I want the text inside of the div inherit a bit, like the padding of the tables. But when I make padding to the div, It grows the div like a margin. I don't want it to grow, I want it to pad/inherit the text/content. It also seperates the rows when I use padding, is there any method to prevent line seperating?

Please try the codes in dreamweaver to see what is wrong with them.

Is This A Good Question/Topic? 0
  • +

Replies To: Problems with CSS and Dreamweaver

#2 Bonecrusher   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 21-November 09

Re: Problems with CSS and Dreamweaver

Posted 22 November 2009 - 09:59 AM

I solved the first one changing left div's to "float: left; clear: left;" and right div's to "float: right; clear: right;".

I also cleaned the code a bit.

please look at this:

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

body {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #666;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 100%;
}
#container {
	width: 800px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#headerlogo {
	width: 800px;
	height: 80px;
	position: relative;
	float: left;
	clear: left;
	background-color: #C66;
}
#headersearch {
	width: 400px;
	height: 60px;
	position: absolute;
	top: 0;
	right: 0;
	clear: right;
	margin-top: 10px;
	margin-bottom: 10px;
}
#menubar {
	width: 800px;
	height: 40px;
	position: relative;
	float: left;
	clear: left;
	background-color: #369;
}
#userbar {
	width: 300px;
	height: 30px;
	position: absolute;
	top: 0;
	right: 0;
	clear: right;
	font-size: small;
	margin-top: 5px;
	margin-bottom: 5px;
}
#maincontent {
	width: 800px;
	float: left;
	clear: both;
	background-color: #FFF;
}
#leftbar {
	width: 300px;
	position: absolute;
	top: 0;
	left: 0;
	clear: left;
	background-color: #09C;
}
#rightcontent {
	width: 800px;
	position: relative;
	float: right;
	clear: right;
	background-color: #FF9;
}
#footermenu {
	width: 800px;
	height: 25px;
	position: relative;
	float: left;
	clear: left;
	background-color: #996;
	font-size: small;
}
#footernote {
	width: 300px;
	height: 25px;
	position: absolute;
	top: 0;
	right: 0;
	clear: right;
	font-size: small;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="headerlogo">
LOGO
<div id="headersearch">
SEARCH
</div>
</div>
<div id="menubar">MENU
<div id="userbar">
USER
</div>
</div>
<div id="maincontent">
CONTENT
</div>
<div id="footermenu">
MENU
<div id="footernote">
NOTE
</div>
</div>

</div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#3 skrilla   User is offline

  • boots.

Reputation: 2
  • View blog
  • Posts: 3,096
  • Joined: 05-July 02

Re: Problems with CSS and Dreamweaver

Posted 08 December 2009 - 11:46 AM

im having a hard time understanding your question. can you rephrase? also, i do not support using tables for layout. you should, in practice, separate your content from presentation. try using useful CSS and id/class tags like "mainnav" or "primarycontent" "subcontent" because once its marked up semantically, you can adjust your layout anytime in the future by adjusting your CSS (which is how you should be controlling the presentation, anyway) instead of having to recode the whole website.

in summation: can you rephrase for me?
Was This Post Helpful? 0
  • +
  • -

#4 Torroes_prime   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-June 09

Re: Problems with CSS and Dreamweaver

Posted 09 December 2009 - 09:58 AM

Got your code loaded up and am checking it out now.

First thing: Don't trust what Dreamweaver shows you. Open the browser in a browser, or several if you can. Those are where you need to worry about how the page works. The Live view and Design view are nice ways to kinda check your progress but they are quirky and don't always update properly when you make a change.

What I've done is installed Firefox 1-3, IE 4-8, Opera, Chrome and Safari and I check the page in all of 'em and see how they work in those.

Second thing:

Quote

3- i used #container div to hold all the divs and page layout in the center of window. is there any other method to hold these divs inside the center, other than this #container div?


No, There's isn't. If you want your page to be anything other then horizonatal spread starting the in top left most pixel of the window, you would have to use a container of come sort.

third thing: You've got a lot of what I call Cascading conflict going on. What that is when you have 2 or more selectors with the same name. CSS works from the top down, with the lowest instance taking priority. here's what I mean:

Here's a snippet from your main.css:
#container {
	width: 800px;
}



Here's a snippet from design.css
#container {
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}



and then finally, here's a snippet from your inline css (Why you have it inline is beyond me):
#container {
	width: 800px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}



Here's how this would work:

The browser will look at the css formating in this order:
1) Browser Defaults
2) External Style sheets
3) Inline CSS

What ever it finds last, it will use.
So in your particular case it reads the external style sheets, and finds #container should have a width of 800px, background color set to #FFFFFF; no margin, and left text-alignment.

That's all fine, until you start trying to debug and change it. You can spend all day changing the background color of #container in design.css and guess what? It won't change in it document. Because it's using the background color rule from the inline css.

I think that'll help ya address your problems.

Just a reminder: Don't trust what Dreamweaver (Or any visual editor) shows you! If it works in your browsers, you're good.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1