PDA

View Full Version : Div elements not editable in Design View


WebGirly3
12-13-2011, 05:29 PM
I am having 2 issues with editing my site in Dreamweaver/Contribute. If I open the home page (http://www.countryclubrentalsinc.com/new) in Dreamweaver Design View, the two divs below the slideshow (contentSidebar & contentLeft) are UNeditable, unless I go into the code. When I put my mouse over the divs, I get a "No" symbol and cannot edit any of the text.

If I take out the fading photo slideshow at the top, the divs are editable so I assume it has something to do with overflow or z-index. I'm really not sure, I have spent way too much time trying to figure this out to no avail.

Also, you'll notice in my screenshot below, in Design View, the spry menus are always open. I run into issues when I'm editing other interior pages with page titles because the menus are open and in the way.

I will be launching this site soon and my customer will be editing it in Contribute so the Home Page obviously, needs to be editable. Please help!

http://www.countryclubrentalsinc.com/new/screenshot.jpg

The CSS for the slideshow is embedded into this page (index.html) but I will also paste it below:

#slideshow {
padding: 0px;
margin:0;
clear: both;
height: 350px;
width: 640px;
overflow: hidden;
}
#slideshow-caption{
padding:0;
margin:0;
}

#slideshow img, #slideshow div {
padding: 5px;
background-color: transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0;
}CSS for the template:

* {
vertical-align: baseline;
border: 0 none;
outline: 0;
}

body {
background-image: url(../images/bg.gif);
padding: 0;
margin: 0;
}
#outerWrapper {
position:relative;
width: 960px;
background-color: #f5f3ef;
overflow: visible;
margin-right: auto;
margin-left: auto;
-moz-box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
z-index: -1;
height: 100%;
margin-bottom: auto;
}
#outerWrapperForListings {
position:relative;
width: 960px;
background-color: #f5f3ef;
overflow: visible;
margin-right: auto;
margin-left: auto;
-moz-box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
z-index: 0;
height: 100%;
margin-bottom: auto;
}
#headerWrapper {
width: 100%;
background-image: url(../images/headerbg.gif);
height: 129px;
overflow: visible;
clear: both;
}
#header {
width: 960px;
overflow: auto;
margin-right: auto;
margin-left: auto;
clear: both;
}
#headerContent {
float: left;
width: 657px;
}
#headerSidebar {
float: right;
width: 303px;
height: 129px;
line-height: 15px;
text-align: right;
background-image: url(../images/navright.gif);
background-repeat: no-repeat;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
logo {
float: left;
height: 128px;
width: 277px;
}
#navWrapper {
position: relative;
width: 100%;
background-image: url(../images/navbg.gif);
background-repeat: repeat-x;
position: relative;
clear: both;
height: 34px;
z-index: 20;
}
#nav {
width: 968px;
margin-right: auto;
margin-left: auto;
height: 34px;
}
#contentWrapper {
width: 100%;
overflow: auto;
}
#content {
float: left;
width: 910px;
font-family: Arial, Tahoma, sans-serif;
font-size: 14px;
line-height: 20px;
margin-top: 10px;
margin-right: 25px;
margin-bottom: 20px;
margin-left: 25px;
}
#contentLeft {
float: left;
font-family: Arial, Tahoma, sans-serif;
font-size: 14px;
line-height: 20px;
margin-top: 10px;
margin-right: 25px;
margin-bottom: 20px;
margin-left: 25px;
width: auto;
/* [disabled]clear: left; */
/* [disabled]z-index: 500; */
}

#contentForListings {
float: left;
/* [disabled]width: 915px; */
font-family: Arial, Tahoma, sans-serif;
font-size: 14px;
line-height: 20px;
margin-top: 10px;
margin-right: 25px;
margin-bottom: 15px;
margin-left: 20px;
overflow: visible;
}

#contentSidebar {
float: right;
width: 269px;
background-color: #DDD8C8;
font-family: Arial, Tahoma, sans-serif;
font-size: 14px;
color: #000000;
line-height: 20px;
padding-top: 11px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 25px;
margin: 0px;
height: 324px;
/* [disabled]clear: right; */
}
p {
font-family: Arial, Tahoma, sans-serif;
/* [disabled]font-size: 12px; */
line-height: 18px;
}

#contentSidebarCarlBetsy {
float: right;
width: 269px;
margin-bottom: auto;
margin-right: auto;
background-color: #E4DFD1;
height: 325px;
font-family: Arial, Tahoma, sans-serif;
font-size: 14px;
color: #333333;
line-height: 20px;
padding-top: 15px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}

.listingsnav {
background-color: #F5CE94;
height: auto;
width: auto;
margin: 0px;
}
.listingsnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.listingsnav ul li {
display: inline;
font-family: "Times New Roman", Times, serif;
font-size: 19px;
color: #293E11;
/* [disabled]padding: 12px; */
/* [disabled]line-height: 30px; */
}
.listingsnavSeparator {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #293E11;
margin: 0px;
}

.listingsnav ul li a {
text-decoration: none;
color: #293E11;
line-height: 37px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
}
.carlbetsyphoto {
border: 1px solid #333;
padding: 10px;
width: 150px;
height: 113px;
background-color: #669ACC;
float: right;
margin-right: 15px;
margin-top: 20px;
}
#ListingsContent {
float: left;
width: 100%;
margin-right: 25px;
position: relative;
margin-top: 10px;
z-index: 10;
clear: both;
/* [disabled]border-bottom-width: 1px; */
/* [disabled]border-bottom-style: solid; */
/* [disabled]border-bottom-color: #999; */
margin-bottom: 15px;
padding-bottom: 5px;
}
#ListingsContact {
clear: both;
width: auto;
background-color: #ABDEF8;
color: #000;
font-size: 14px;
font-family: Arial, Tahoma, sans-serif;
line-height: 20px;
text-align: center;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
padding-top: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #8F8F8F;
/* [disabled]border-top-width: 1px; */
/* [disabled]border-top-style: solid; */
/* [disabled]border-top-color: #999; */
margin-top: 1px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#ListingsSidebar a {
color: #1B3550;
}



.listingsnav ul li a:hover {
text-decoration: none;
background-color: #EEAB46;
}


#footerWrapper {
width: 960px;
overflow: visible;
clear: both;
-moz-box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
z-index: -100;
margin-right: auto;
margin-left: auto;
}
.headernav {
font-family: Arial, Tahoma, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #369;
text-decoration: none;
margin-right: 115px;
margin-top: 34px;
margin-bottom: 0px;
}
.headernav a {
text-decoration: none;
}

.headerPhone {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-weight: bold;
color: #70B0CF;
font-size: 21px;
margin-right: 100px;
margin-top: 4px;
line-height: 21px;
}

#footer {
background-color: #CFEAA8;
width: 100%;
overflow: auto;
clear: both;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
}
#footerCopyright {
width: 930px;
overflow: auto;
clear: both;
font-family: Arial, Tahoma, sans-serif;
font-size: 11px;
color: #000;
font-weight: bold;
line-height: 18px;
margin-right: auto;
margin-left: auto;
padding: 15px;
text-align: center;
}
.RequestBar {
width: auto;
overflow: auto;
clear: both;
font-family: Arial, Tahoma, sans-serif;
font-size: 14px;
color: #000;
/* [disabled]font-weight: bold; */
line-height: 20px;
padding: 10px;
background-color: #ABDEF8;
text-align: center;
}


h1 {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #369;
letter-spacing: 1px;
font-weight: normal;
line-height: 26px;
}
h2 {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #333;
background-color: #CFEAA8;
letter-spacing: 1px;
padding-right: 6px;
padding-left: 6px;
float: left;
padding-top: 6px;
width: auto;
clear: both;
font-weight: normal;
margin-top: 5px;
position: relative;
padding-bottom: 0px;
margin-bottom: 0px;
}
h3 {
font-size: 20px;
font-weight: normal;
line-height: 25px;
color: #333;
}
h4 {
font-size: 19px;
font-weight: normal;
line-height: 22px;
font-family: "Times New Roman", Times, serif;
padding: 0px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
}

.bottomnavh1bg {
background-image: url(../images/footerbg.gif);
background-repeat: repeat-x;
padding-left: 15px;
width: 265px;
background-position: center top;
float: left;
list-style-image: url(../images/bullet.gif);
padding-top: 0px;
padding-right: 15px;
padding-bottom: 15px;
font-family: Arial, Tahoma, sans-serif;
font-size: 14px;
line-height: 20px;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
.bottomnavh1bg ul li a {
color: #333;
text-decoration: none;
}
.bottomnavh1bg ul li a:hover {
color: #000;
text-decoration: underline;
}
.bottomnavh1bg ul li a:visited {
color: #333;
text-decoration: none;
}
.CommunityHeaderImg {
border: 1px solid #369;
float: right;
margin-top: 10px;
}
.ListingMainPhoto {
border: 1px solid #369;
float: left;
margin-top: 18px;
margin-right: 20px;
margin-bottom: 18px;
padding: 2px;
}

#slideshow {
padding: 0px;
margin:0;
clear: both;
height: 350px;
width: 675px;
position: relative;
z-index: 5;
float: left;
}
#contentSidebar img {
border: thin solid #CCC;
margin-bottom: 6px;
}
#slideshow-caption{
padding:0;
margin:0;
}
#slideshow img, #slideshow div {
padding: 0px;
background-color: transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin: 0;
}
.PoolComment {
font-size: 15px;
}
.NotAvailable {
color: #F00;
}
.LeasePending {
color: #006;
}

Ricky55
12-13-2011, 06:33 PM
This file looks as though it makes use of some templates.

Have a look in your templates folder and try to edit the files from with there.

WebGirly3
12-13-2011, 06:43 PM
Yes, I am using templates but I've placed these divs in an editable region so they should be editable but they are not. All the other pages that are using this same template are working fine. It's ONLY the home page that is having the problem and I believe it has something to do with the slideshow but I can't figure out why.

gentleone
12-13-2011, 11:39 PM
The problem is not only in Design View, it's also in the browser... I can't select the text in the 2 divs.

I find the CSS of the template a bit weird with all these overflow visible, but this is not causing your issue.... I just don't see the point of using them in this case.
What's also weird is the heavy use of z-indexes while they're also not needed and one of these z-indexs, the one of the outerWrapper, is causing the issue. Remove that z-index and you'll be fine (for now).

WebGirly3
12-14-2011, 03:05 AM
I had to use so many z-indexes so the shadowed border around the edges of the frame would show properly and so the navigation menu would appear over the the content instead of under the slideshow.

I know there's a problem with z-index but if I take them out, other things are affected. This also doesn't explain why my menu stays open at all times. Any other suggestions?

DWcourse
12-14-2011, 09:11 AM
Gentleone has given you the answer. Get rid of the z-index for outerWrapper and the problem will go away.

To keep your box shadows as you have them delete the z-index and the position properties in #outerWrapper.

You can also safely delete the z-index property in the #footerWrapper rule.

You should only rarely need a z-index.

BTW, the way you've done the box shadow won't work in some older browsers or in IE prior to IE9.

I'd also recommend you find a good book or online source about CSS. A lot of what you've done just doesn't make sense.

WebGirly3
12-14-2011, 03:03 PM
I deleted the z-index for outerWrapper and footerWrapper and it did fix the problem with the uneditable divs.

I am newer to CSS and still taking classes. I've learned a lot since first building this site back in August but it's been hard to go back now and figure out what I did wrong when I built the templates originally.

DWcourse, you said that a lot of what I've done doesn't make sense. Besides the z-index, what specifically are you referring to?

Thanks for your help.

Corrosive
12-14-2011, 04:00 PM
Well, take this for instance;

#ListingsContact {
clear: both;
width: auto;
background-color: #ABDEF8;
color: #000;
font-size: 14px;
font-family: Arial, Tahoma, sans-serif;
line-height: 20px;
text-align: center;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
padding-top: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #8F8F8F;
/* [disabled]border-top-width: 1px; */
/* [disabled]border-top-style: solid; */
/* [disabled]border-top-color: #999; */
margin-top: 1px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

Firstly it could be cleaned up and 'minimised' using shorthands;

#ListingsContact {
clear: both;
width: auto;
background-color: #ABDEF8;
color: #000;
font-size: 14px;
font-family: Arial, Tahoma, sans-serif;
line-height: 20px;
text-align: center;
padding: 10px 25px;
border-bottom: 1px solid #8f8f8f;
margin: 1px 0 0 0;
}

Also I have never come across width: auto; before. A div will fill available space anyway or you can give it a specific width. If it is playing silly buggers then width: 100%; makes more sense.

Plus you can compound a lot of your styles where they are repeated. For example you have a font-family and other styles that are the same across your header tags so why not use;

h1, h2, h3, h4 {font-family: "Times New Roman", Times, serif; font-weight: normal; font-size: 24px;}

...and so on. Then put your specific h styles individually.

Basically your CSS could be half the weight/size it is with some careful consideration.

Finally I don't see why you have 'floated' your header tags. AFAIK that is not valid CSS (but I could be wrong). Also the auto width has appeared again!

There are other things that you can do as well but those are some starting points.

DWcourse
12-14-2011, 04:10 PM
Actually the code you posted for box-shadow will work, I was viewing late at night i Firebug and didn't notice you'r additional rules.

The use of the overflow property generally isn't necessary or desirable.
Height:100% generally doesn't have the effect you'd expect. The width of divs is 100% by default.

There are other items including the way you used floats, clears and heights. Basically your CSS is overly complex as if you corrected one item, that changed something else - you corrected that item, that changed something else, etc.

The more (needlessly) complex your CSS becomes, themore likely you are to end up with cross browser issues.

gentleone
12-14-2011, 06:13 PM
I have to agree with the boys... The CSS became overly complex, because you've tried to fix things with all kinds of CSS properties while the problem lies from the start of this project.
The layout of the website is pretty basic, so all you needed was just basic CSS. The normal page flow and a few floats was enough to laid out the home page.

Regarding the width property. The default value of width is auto and setting a width to auto in the css is only when you want to reset a previous declared width value of that block element back to its default. So in your case it was indeed useless. If you build a responsive design witb CSS3 media querries then you'll need to do this a lot, but not with fixed width layouts.

DWcourse
12-14-2011, 06:23 PM
But, in all fairness to you, CSS is hard. Getting your early pages to work - even with some sloppy code - is a big achievement. Don't get discouraged. You're willing to ask questions so you'll figure it out. It just takes time.

Everyone here is still learning.

You might want to check out the Firefox plugin, Firebug. It's great for debugging CSS.

WebGirly3
12-14-2011, 11:03 PM
Yes, that is exactly what I was doing. Fixing problems and causing myself other problems along the way. I appreciate all of the advice. I've cleaned up a good amount of the CSS code and taken out the unnecessary floats, overflows & auto widths/heights. And after all of that, everything is still in the right place!

I will continue to clean this up but thanks to all for helping sort through some of this. I very much appreciate it. This project has been a CSS nightmare with the data tables and then spry menus, which I plan to replace with much simpler code very soon.

Thanks again!

edbr
12-14-2011, 11:52 PM
old saying i take solace in , "Anyone who never made a mistake, never made anything' but its not so polite in the original version. :)

Corrosive
12-15-2011, 07:46 AM
old saying i take solace in , "Anyone who never made a mistake, never made anything' but its not so polite in the original version. :)

Not going to furnish us with the rude version then Ed?

edbr
12-15-2011, 08:30 AM
no that was written by fanny adams

gentleone
12-15-2011, 07:16 PM
You might want to check out the Firefox plugin, Firebug. It's great for debugging CSS.
Agree, a must have in your toolbox. But every browser has its developer extension and Safari & Opera have it even standard in the browser.

It took me 2 miniutes to discover through Firebug what was causing your problem by just disabling some CSS declarations in your stylesheet.