Jump to content

AP Div


don_miles1

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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/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>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.

Link to comment
Share on other sites

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/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>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

Link to comment
Share on other sites

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://aandbwebdesign.com/KSforum/don.html

Link to comment
Share on other sites

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://aandbwebdesign.com/KSforum/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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...