Re: css in design mode? (dw mx 04)

krb100 wrote:

1. When I design my page in dw then my css layout looks out of "wack" but when
I preview it in a browser it looks fine? Is there a way to adjust so that what
I see in design view is not totally off!?

It depends what version of DW you are using. Prior to version2004 the
rendering of css positioning wasnt very good. 2004 is better, but still
not flawless.

2. How do I make pictures active / or clickable when using css? What rule do
I use?

You cant do that using css. Thats need to be done by simply attaching a
behaviour to them

thanks Osgood,

THanks for both your answers.

I use dw mx 2004. It is when I use css that the design sometimes blows out in my design view. Do you have any ideas what could be causing it?

krb100 wrote:

thanks Osgood,

THanks for both your answers.

I use dw mx 2004. It is when I use css that the design sometimes blows out in my design view. Do you have any ideas what could be causing it?


Without seeing the css code/html you are using I have no idea. MX 2004

is pretty good at showing css in design view but it is by no means
perfect. Maybe you are just doing something which it cant show correctly.

If you want to paste the html and css code here or give a link to the
page i'll take a look at it and see if I can detect the problem. There
may not be one of course.

krb100 wrote:

thanks here is the code:

I would need to see your stylesheet as well.

Css/dollaraday1.css

Hi Osgood, here is the style sheet, hope it clears matters up. Thanks for your
time and help. All the best

body {
margin: 0px;
padding: 0px;
color: #8f9295;
font: 12px Verdana, Arial, Helvetica, sans-serif;
background: #a5a5a5 url(../assets/shared/page_background.gif) repeat-y 50%
0px;
}
#wrapper {
background-color: #ffffff;
padding: 0px;
width: 740px;
margin: 0px auto;
}
#masthead {
background: url(../assets/masthead2.jpg) no-repeat;
height: 30px;
padding-top: 101px;
border-bottom: 10px solid #dadada;
}
#navigation {
padding: 0px;
width: 740px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
margin: 0px;
padding: 0px;
float: left;
background: url(../assets/rollover.gif) no-repeat left top;
display: inline;
}
#navigation a {
font: bold 13px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
height: 23px;
width: 155px;
padding: 7px 0px 0px 30px;
}
#navigation a:hover {
background: url(../assets/rollover.gif) 0px -40px;
}
#content {
padding: 22px;
}
#footer {
font-size: 85%;
background-color: #FFFFFF;
text-align: right;
clear: both;
padding: 30px 22px;
}
#leftColumn {
float: left;
width: 337px;
margin-right: 22px;
}
#rightColumn {
float: right;
width: 337px;
border: solid 1 px;
}
.greyArea {
padding: 10px;
background-color: #e6e6e6;
}
p {
line-height: 18px;
margin: 0px 0px 1em 0px;
}
a {
font-weight: bold;
color: #f68a56;
text-decoration: none;
}
a:hover {
color: #444444;
text-decoration: underline;
}
.textRight {
font-family: Arial, Verdana, sans-serif;
color: #666666;
margin: 0px;
padding: 0px;
}
.logo {
background-image: url(../assets/drop.jpg);
background-repeat: no-repeat;
float: left;
height: 80px;
width: 82px;
z-index: auto;
padding: 10px;
margin: 10px;
}
.kids1 {
background-image: url(../assets/kids1.jpg);
background-repeat: no-repeat;
margin: 10px;
padding: 10px;
float: right;
height: 163px;
width: 203px;
cursor: hand;
display: inline;
}
.happyKid {
background-image: url(../assets/kid.jpg);
background-repeat: no-repeat;
float: right;
height: 134px;
width: 122px;
cursor: hand;
margin-top: 10px;
padding-top: 10px;
padding-left: 40px;
}

Your calculation are out by 4px.

Make both the #leftColumn and rightColumn <div> 335px instead of 337px wide.

Here the calculations:

The wrapper <div> is 740px wide. Inside this is the content <div> which
has 22px padding.

740px - (22px x 2) 44px = 696px. (This is the total width you have to
work with)

Your leftColumn is 337px wide + the border (1px x 2) 2px = 339px

Your rightColumn width is the same as the the leftColumn = 339px

339px x 2 = 678px + (margin-right on the leftColumn 22px) = 700px.


Therfore the total width of your left/right columns + borders and margin
= 700px, 4px too wide.





krb100 wrote:

Hi Osgood, here is the style sheet, hope it clears matters up. Thanks for your
time and help. All the best

Should have also mentioned that border and padding width in all modern
browsers, apart from PC IE5x, are added to the width of the <div>

PC IE5x includes the padding and border width inside the <div> width.

Therfore you have to re-calculate the widths for PC IE5x and feed it
seperate css styles.

Since #content <div> has no width declared you dont have to do anything
to that, even though it has padding.

leftColumn and rightColumn, after you have made the changes from 337px
wide to 335px wide, to cater for all other browsers, will only be 333px
wide in IE5x

Its not a big issue in your case losing 2px off each <div> width.
However if you want to correct this you can include a hack in your styles.

*html #leftColumn, #rightColumn {
width: 337px;
}

Only IE will see this.

Thank you for your help. I am gratefull for the runtrough. I will take a look at it. :-)