Jump to content


Photo

AP Div


  • Please log in to reply
6 replies to this topic

#1 don_miles1

don_miles1

    New member

  • Member
  • 13 posts

Posted 09 August 2011 - 11:53 AM

In CSS Layout Part 2 (Dreamweaver Cs3 videos) you use the tools to draw 2 apDivs. (columns). When I try this I get a column a few pixels high and across the page. When I turn the dashed line that outlines the "Div" it has no handles and when I look to right column DW does not write any CSS
Thanks for any help
Don
  • 0

#2 Stefan

Stefan

    Stefan Mischook

  • Administrators
  • 4,251 posts
  • LocationMontreal Canada

Posted 09 August 2011 - 12:12 PM

Hi,

Have you tried clicking inside the div?

Another thing to look at is the code view, this way you can a better idea what Dreamweaver is doing behind the scenes. Keep in mind two things:

1. Dreamweaver does not write perfect code.
2. Because of point #1, you need to start learning code (HTML and CSS) so that you can go in there to fix things.

Web design programs like Dreamweaver are not replacements for understanding HTML and CSS, they are there to speed up the process.

... The one exception is with very simple sites.

I hope that helps,

Stefan
  • 0
StudioWeb makes teaching web design and programming easy: StudioWeb

#3 don_miles1

don_miles1

    New member

  • Member
  • 13 posts

Posted 09 August 2011 - 12:55 PM

Hi,

Have you tried clicking inside the div?

Another thing to look at is the code view, this way you can a better idea what Dreamweaver is doing behind the scenes. Keep in mind two things:

1. Dreamweaver does not write perfect code.
2. Because of point #1, you need to start learning code (HTML and CSS) so that you can go in there to fix things.

Web design programs like Dreamweaver are not replacements for understanding HTML and CSS, they are there to speed up the process.

... The one exception is with very simple sites.
I hope that helps,

Stefan



I clicked in the div. Here is the code that DW wrote. I typed in the m... I also tried to chande the width but nothing happened. By the way I gave an incomple thought in my question. I should have said that when I clicked on the dashed line to turn it blue no handles appeared as in your video.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divprob</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:10px;
top:37px;
width:0px;
height:22px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:11px;
top:12px;
width:137px;
height:177px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:13px;
top:18px;
width:81px;
height:181px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:40px;
top:56px;
width:97px;
height:164px;
z-index:1;
}
-->
</style>
</head>

<body>
<div id="apDiv4">nmhgt</div>
<div id="apDiv3"></div>
</body>
</html>

nmhgt
The nmhgt is what I type in the blue box. The blue did not appear when I copied and pasted.
  • 0

#4 don_miles1

don_miles1

    New member

  • Member
  • 13 posts

Posted 09 August 2011 - 07:35 PM

I clicked in the div. Here is the code that DW wrote. (I typed the nmhgt I also tried to change the width but nothing happened. By the way, I gave an incomple thought in my question. I should have said that when I clicked on the dashed line to turn it blue no handles appeared as in your video.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divprob</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:10px;
top:37px;
width:0px;
height:22px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:11px;
top:12px;
width:137px;
height:177px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:13px;
top:18px;
width:81px;
height:181px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:40px;
top:56px;
width:97px;
height:164px;
z-index:1;
}
-->
</style>
</head>

<body>
<div id="apDiv4">nmhgt</div>
<div id="apDiv3"></div>
</body>
</html>

nmhgt
The nmhgt is what I typed in the blue box. The blue did not appear when I copied and pasted.
Stef in the video (CSS layout part 2 Dreamweaver CS 3) made two APDiv boxes using the crosshairs. My DW CS3 will not do this, I have something turned off maybe.
Any help to solve this immediate problem would be appreciated. I plan on going through more of the videos on CSS and html. I have been a member of the University for awhile but am just now starting to utilize it.
Don
  • 0

#5 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,730 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 10 August 2011 - 05:00 AM

I don't know what 'blue' you're referring to - you have no colors defined in your CSS anywhere, so nothing could be blue.

The reason 'nmhgt' does not show is that the division (4) it is in is overlapped by the other division (3), so it's there, but hidden.

I copied and pasted your code up there, added background colors to the 2 divisions you have in your html and changed the z-indes of (4) from 1 to 2 so i'll be above the other division - and this is what I have: http://aandbwebdesig...Sforum/don.html
  • 0

#6 don_miles1

don_miles1

    New member

  • Member
  • 13 posts

Posted 12 August 2011 - 12:07 AM

I don't know what 'blue' you're referring to - you have no colors defined in your CSS anywhere, so nothing could be blue.

The reason 'nmhgt' does not show is that the division (4) it is in is overlapped by the other division (3), so it's there, but hidden.

I copied and pasted your code up there, added background colors to the 2 divisions you have in your html and changed the z-indes of (4) from 1 to 2 so i'll be above the other division - and this is what I have: http://aandbwebdesig...Sforum/don.html


I believe I have been asking the wrong question.
In Stef's design view of DW CS3 in the CSS Layout Part 2 of the videos in the University section the WYSIWYG was correct; however, when I tried to draw the AP Div in design view, as soon as I got the rectangle that marks the borders of the AP Div the correct size and let up on the mouse button, the box ("container") changed to a narrow box, it's border made of dashes. It did not produce anything near to WYSIWYG. When I previewed my creation in the browser it was OK.
How can I get my design view to give me WYSIWYG?

Thanks,
Don
  • 0

#7 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,730 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 12 August 2011 - 04:54 AM

How can I get my design view to give me WYSIWYG?


Sorry, I cannot help you with this - I've never created a site in design view. One of the reasons for that is that the code that is created, isn't always correct.

What works best for me when I follow tutorials is to recreate what's shown as the video goes and to check my results often. Then, if something's nto right, I can go back to where I was last correct and review the steps - usually, I missed something or messed something up.
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users