Using Visual Aids to see divs (Full Version)

All Forums >> [Web Development] >> Dreamweaver Help



Message


paul rayner -> Using Visual Aids to see divs (6/4/2008 0:22:51)

I've set up a page using CSS and divs. I want to see in Dreamweaver how they look - and I found Visual Aids.

The nav div I've created is 140px wide, and floating left. The main div sits beside the nav div.

In preview, this all works perfectly.

Using visual aids, I just see 3 blocks, rather than the divs as I would expect .

Have I done something wrong?



[image]local://upfiles/131/4136068D75CE4A4FB4F983A55EFF1CE2.gif[/image]




jaybee -> RE: Using Visual Aids to see divs (6/4/2008 2:42:39)

I don't use DW so I can't give a definitive answer but it may be you're expecting Visual Aids to do something it doesn't. This takes you through the basics.




paul rayner -> RE: Using Visual Aids to see divs (6/4/2008 5:03:53)

Thanks Jaybee. Using DW for CSS is new to me too - but I thought I'd try it out.

My inspiration also came from adobe .com - and according to the guru there, DW should show the layout of the nav menu. I just wanna know what I did wrong?? Here's the URL - Adobe




jaybee -> RE: Using Visual Aids to see divs (6/4/2008 17:36:59)

Can't tell what you've done wrong without seeing the code and stylesheet. Can you upload the page and let me have a URL?




paul rayner -> RE: Using Visual Aids to see divs (6/5/2008 3:40:36)

Here's the html-
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="holder">
  <div id="header">
    <p class="callout">My Fake Company </p>
  </div>
  <div id="nav"><p>Test</p>
  <p>test2 </p></div>
  
  <div id="content">
    <div id="div">
      <p>Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Curabitur pellentesque massa vitae risus. Etiam  iaculis imperdiet leo. Fusce eget dui. Proin at quam et arcu molestie  scelerisque. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Praesent cursus ante eget neque.  Cras sem lacus, congue ac, lacinia a, iaculis vitae, massa. Maecenas  tincidunt vulputate dui. Pellentesque auctor. Sed mollis diam eget dui.  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Sed sagittis arcu vel purus eleifend placerat.  Maecenas tempus gravida nisl. Suspendisse bibendum.</p>
      <p>Lorem  ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur  pellentesque massa vitae risus. Etiam iaculis imperdiet leo. Fusce eget  dui. Proin at quam et arcu molestie scelerisque. Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Praesent cursus ante eget neque. </p>
      <p>Cras sem lacus, congue  ac, lacinia a, iaculis vitae, massa. Maecenas tincidunt vulputate dui.  Pellentesque auctor. Sed mollis diam eget dui. Vestibulum ante ipsum  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed  sagittis arcu vel purus eleifend placerat. Maecenas tempus gravida  nisl. Suspendisse bibendum.</p>
      <p>Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Curabitur pellentesque massa vitae risus.  Etiam iaculis imperdiet leo. Fusce eget dui. Proin at quam et arcu  molestie scelerisque. Pellentesque habitant morbi tristique senectus et  netus et malesuada fames ac turpis egestas. Praesent cursus ante eget  neque. Cras sem lacus, congue ac, lacinia a, iaculis vitae, massa.  Maecenas tincidunt vulputate dui. Pellentesque auctor. Sed mollis diam  eget dui. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Sed sagittis arcu vel purus eleifend  placerat. Maecenas tempus gravida nisl. Suspendisse bibendum.</p>
    </div>
    <p> </p>
	 <p> </p>
    <div id="footer">Content for  id "footer" Goes Here</div>
   
  </div>
</div>
</body>
</html>


and here's the stylesheet
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background: #ada189;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#holder {
	width: 760px;
	background: #FFFFFF;
	text-align: left;
	margin: 0 auto 0 auto;
}
#header {
background: #DCCBAC;
}
#nav{
	width: 140px;
	float: left;
	padding: 15px 10px;	
}

#content {
	margin: 0 0 0 165px;
	padding: 15px;
}
#footer {
	padding: 5px;
}
.callout {
    font: bold 130% Georgia, "Times New Roman", Times, serif;
    color: #333;
    margin: 0;
    padding: 20px 10px;
}
p {
    font-size: 80%;
}


I uploaded files to http://www.rightintoit.com/dwcss/index.html
Cheers





jaybee -> RE: Using Visual Aids to see divs (6/5/2008 5:17:35)

Well it all looks fine to me and I've checked it in Firefox, Camino and Safari. Maybe it's a set up problem in DW. Suggest you go take a look at the Adobe forum and see if there's anything on there.




paul rayner -> RE: Using Visual Aids to see divs (6/5/2008 5:22:33)

Thanks for taking the time




d a v e -> RE: Using Visual Aids to see divs (6/5/2008 6:48:49)

what version of dreamweaver are you using?




paul rayner -> RE: Using Visual Aids to see divs (6/8/2008 18:13:17)

Dreamweaver 8 Dave!!

I've posted on the Adobe forum without luck!!




paul rayner -> RE: Using Visual Aids to see divs (7/9/2008 1:24:56)

I found the problem. Solved one in the process of finding another solution.

I went to View/Toolbars/Style rendering.

There's a button there that toggles CSS Display on or off.

Hope this may help someone else.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
9.570313E-02