HI,
I'm not really sure what you are asking but you modify any one of those styles by simply added a class where appropriate to either a parent if you want to reach a group or to the individual if there is only one.
e.g.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IMAGE BACKGROUND COLORS</title>
<style type="text/css">
.wrap {
border: 3px solid #000;
text-align: center;
}
.wrap h1 {
background-color: yellow;
color: rgb(0, 0, 0);
font-size: 30px;
font-family: Lucida Console;
font-weight: bold;
margin:0;
text-transform:uppercase;
}
h1.v2 { background:teal }
h1.v3 { background:orange }
.wrap div {
border-top: 3px solid #000;
background-color: green;
text-align: center;
padding: 28px 38px;
}
.wrap img {
border: 10px solid rgb(143, 144, 130);
width:100%;
margin-left:-10px;
position:relative;
}
div.imgwrap2 { background:red }
div.imgwrap3 { background:blue }
</style>
</head>
<body>
<div class="wrap">
<h1>Photo Grouping #1</h1>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
</div>
<div class="wrap">
<h1 class="v2">Photo Grouping #2</h1>
<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
</div>
<div class="wrap">
<h1 class="v3">Photo Grouping #3</h1>
<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
</div>
<div class="wrap">
<h1>Photo Grouping #4</h1>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
</div>
</body>
</html>
If you don't need specific groups then you can remove the wrap from each.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IMAGE BACKGROUND COLORS</title>
<style type="text/css">
.wrap {
border: 3px solid #000;
border-top:none;
text-align: center;
}
.wrap h1 {
background-color: yellow;
color: rgb(0, 0, 0);
font-size: 30px;
font-family: Lucida Console;
font-weight: bold;
margin:0;
text-transform:uppercase;
border-top: 3px solid #000;
}
h1.v2 { background:teal }
h1.v3 { background:orange }
.wrap div {
border-top: 3px solid #000;
background-color: green;
text-align: center;
padding: 28px 38px;
}
.wrap img {
border: 10px solid rgb(143, 144, 130);
width:100%;
margin-left:-10px;
position:relative;
}
div.imgwrap2 { background:red }
div.imgwrap3 { background:blue }
</style>
</head>
<body>
<div class="wrap">
<h1>Photo Grouping #1</h1>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<h1 class="v2">Photo Grouping #2</h1>
<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<h1 class="v3">Photo Grouping #3</h1>
<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<h1>Photo Grouping #4</h1>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
</div>
</body>
</html>
Its all just a matter of specificity and targeting.
Of course I can't give answers for what you might add afterwards and targeting .class div{} will affect all divs so if you added divs for some other purpose then you would need classes on each div instead.
You will also need to change the headings from h1 to h2 or h3 as you can only have one main h1 heading on the page outside of html5.
Simple padding issue (at least I hope heh heh)
Reply With Quote
But your image is too wide, because it's set to width: 100% but also has 10px border on each side, which increases its width by 20px, pushing it out on the right.
Originally Posted by semicolon
Bookmarks