asked on

Apply CSS to a specific region in Dreamweaver templates

I'm using a template in dreamweaver to control the look of my website. The template has several images. On every page I have an editable region where the main content goes. I'd like for the IMG tag in the CSS to only control images in this region. How can I make this automatic, without altering the images on the rest of the page (template)?

Jason C. Levine

Hi baadayakazi,

This isn't really a Template issue so much as a basic CSS issue. Because they styles cascade (the C in CSS) you can isolate things to a specific area of your page by using IDs.

#content img {
declaration:property;
}

will affect all img tags contained in the ID content. So

<div id="notcontent">
<img src="someimage.png" />
</div>

is not affected whereas

<div id="content">
<img src="someimage.png" />
</div>

is affected.

Dave Baldwin

That should really be 'class's and not 'id's. 'id' is supposed to be unique on a page and 'class' is for styling multiple items.

Jason C. Levine

Dave,

Since the asker wants all images in a certain area affected and if the area is a unique div (content), then my code affects all images within the div, right?

If only certain images are to be affected and there is no structural relation between them, then classes applied per image would be the way to go.

Dave Baldwin

@jason1178, yes, that's right. I assumed that there would be more than one element in the region he's talking about. If it can be encompassed by a single <div>, then an 'id' will work... except that tables don't always inherit CSS. An oddity in all browsers.

Jason C. Levine

Good point re: tables. I never use them for layout anymore so I tend to forget that they behave in wacky ways with CSS

baadayakazi

ASKER

If I wanted to use tables, how should I proceed?

Jason C. Levine

>> If I wanted to use tables, how should I proceed?

<snark>Don't. Switch to using divs for layout if you plan on doing this for a living</snark>

<notsnark>Change my advice from using IDs to Dave's advice of using classes and the apply the class to the table cell(s) that hold images that are to be affected

.something img {
declaration:property;
}

<table>
<tr>
<td class="something">
<img src="someimage.png" />
</td>
</tr>
<tr>
<td class="something">
<img src="someimage.png" />
</td>
</tr>
<tr>
<td class="something">
<img src="someimage.png" />
</td>
</tr>
</table>

Dave Baldwin

<snark>...</snark> I like that, Jason. I think that's 'semantic markup'. ?? Meaningful at the very least.

Jason C. Levine

I'm writing specs for HTML6. Think of the clarity we could introduce into the online world!

<snark></snark>
<n00b></n00b>
<opinion></opinion>
<fact></fact>

baadayakazi

ASKER

I'm afraid my lack of CSS knowledge makes it a bit difficult to understand how this looks in practice. Below is a sample section of HTML code. Could you tell me how I would apply the IMG style to image1.jpg and image2.jpg only? Also, should I also change the IMG style name in the CSS file (see below)?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Images</title>

<link href="styles/interiorpages.css" rel="stylesheet" type="text/css">

</head>

<body>
<img src="images/image1.jpg">
<p> </p>
<img src="images/image2.jpg">
<p> </p>
<img src="images/image3.jpg">
</body>
</html>

img {
background-color: #fff;
border: 1px solid #a9a9a9;
       clear:right;
float: right;
margin:5px;
padding: 4px;
       -moz-box-shadow:1px 1px 5px #a7a7a7;
       -webkit-box-shadow:1px 1px 5px #a7a7a7;
       box-shadow:1px 1px 5px #a7a7a7;

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

baadayakazi

ASKER

Worked great - Thanks!