Advertisements
G’day, I have an ID called #img in my style sheet where I have written border-radius: 15px; in my html I have assigned the id to a div . However, this does not border radius my images. if I use the img selector it Applys it to all images, i dont want the logo or the first image to be radiused.
heres my code:
HTML
`
<head>
<title></title>
<link href='stylesheet.css' rel='stylesheet'>
<body>
<div id="page">
<table id="menu">
<tr>
<div id="logo">
<div id="Top"></div>
<image src="assets/logo32.png"></image>
</div>
<td><a href="#AB", style="color: black; text-decoration: none;" ;>About Us</a></td>
<td><a href="#T" , style="text-decoration: none; color: black;" ;>Testimonials</a></td>
</tr>
</table>
<div>
<image src="assets/htgreen-hero.jpg"></image>
</div>
<div id="text">
<h2>Towards a zero electricity bill</h2>
<div>
<hr>
</div>
</div>
<div id="text">
<p>Sick of getting big power bills? You've replaced all the old bulbs with LEDs, got a new fridge and
super-efficient heat
pump and youre still paying around $1200 a year? Your next step is to let HT Green work with you to
design and install a
system that uses solar, wind or geothermal that's guaranteed to wipe that power bill for now and into
the future.</p>
</div>
<div id="texta">
<div id="pad">
<h3> Solar PV solutions</h3>
</div>
<div>
<hr>
</div>
</div>
<div id="texta">
<p>
<div id="img">
<image src="assets/pv250.jpg"></image>
</div>
Solar Photovoltaic systems have come of age. Installers now can guarantee
reliable cost-free power to your home or business. ROI is now taking less time
than ever thanks to the ever decreasing equipment costs and better technology.
</p>
<p>If you have battery storage such as a Tesla Powerwall or similar Lithium Ion
chemistry solutions then you can take your savings even further.</p>
<p>Call us now to discuss which solution is the best fit for your home. </p>
<div id="pad2">
<h3> Geothermal</h3>
</div>
<div>
<hr>
</div>
<p>
<div id="img">
<image src="assets/geo250.jpg"></image>
</div> Energy from the earth. It sounds simple because it is. The earth is warmer
than
the air and we can use this to heat your home. HT Green can engineer a solution
to fit your situation to give you free plentiful home warming energy year-round.</p>
<p>Geothermal power is cost effective, reliable, and environmentally friendly, but
has previously been geographically limited to areas near tectonic plate
boundaries. Recent technological advances have dramatically expanded the
range and size of viable resources, especially for direct applications such as
home heating.</p>
<p>
Geothermal wells tend to release greenhouse gases trapped deep within the
earth, but these emissions are much lower than those of conventional fossil fuels.
As a result, geothermal power has the potential to help mitigate global warming
if widely deployed instead of fossil fuels.
</p>
<div id="pad">
<h3> Wind Turbines </h3>
</div>
<div>
<hr>
</div>
<p>
<div id="img">
<image src="assets/turbine250.jpg"></image>
</div>
If you have the space and the aspect, we have the know-how to engineer a
wind turbine system that generates electricity when the wind blows. Team a
wind turbine with a solar PV system and you increase your energy generation
potential..</p>
<p>New to wind power? HT Green can show you more about how a wind turbine
works, the benefits of wind energy and how a wind turbine is installed.</p>
<p>
If you're not sure on the type of turbine you need, before you buy from us,
contact one of our wind power experts for the right advice.
</p>
<div id="pad">
<h3 id="AB"> About Us </h3>
</div>
<div>
<hr>
</div>
<div id="marg">
<p> HT Green was established in 1997. We specialise in green technologies such as solar, wind turbines,
geothermal and
now small-scale hydro plants.</p>
<p>Company Directors Robert and Janet Wilkins built HT Green from the ground up with a small business grant
and big
dreams to power homes and businesses with energy derived from natural sources.</p>
</div>
<div id="button2">
<div id="btext2">
<p><a href="#Top" , style="color: black; text-decoration: none;" ;>Back to Top</a></p>
</div>
</div>
<div id="pad2">
<h3 id="T"> Testimonials</h3>
</div>
<div id="pad">
<div id="page2">
<div id="text2">
<p>
<div id="test">
<image src="assets/testimonials/j-g-brown-200.jpg"></image>
</div>
"We installed our solar panels last year and our electricity bill is
now less than zero. We actually went into credit in late Spring!"
<strong>June & Gavin Brown, Surrey Hills NSW</strong>
</p>
</div>
</div>
</div>
<div id="pad3">
<div id="page2">
<div id="text2">
<p>
<div id="test">
<image src="assets/testimonials/s-p-hill-200.jpg"></image>
</div>
"We toyed with the idea of installing a hydro system a while back
and never got around to it but thanks to HT Green's Hydro Oasis
System it was easy! Our creek supplies our total energy needs."
<strong>Sandra & Peter Hill, Adelaide SA. </strong>
</p>
</div>
</div>
</div>
<div id="pad3">
<div id="page2">
<div id="text2">
<p>
<div id="test">
<image src="assets/testimonials/r-sanderson-200.jpg"></image>
</div>
"I can look forward to no more electricity bills! HT Green took
care of everything; recommended!" <strong>
Roberta Sanderson, TAS </strong>
</p>
</div>
</div>
</div>
<div id="button2">
<div id="btext2">
<p><a href="#Top" , style="color: black; text-decoration: none;">Back to Top</a></p>
</div>
</div>
<div id="hrs">
<div id="textb">
<p> <strong>Copyright © 2022</strong> </p>
</div>
</div>
</div>
</div>
</body>
</head>
STYLESHEET
------------------------------------------------------------------
body {
margin: auto;
font-family: Arial, Helvetica, sans-serif;
background-image: url('assets/bg800bulbs.jpg');
background-color: #FFFFFF;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
#page {
width: 960px;
height: 3210px;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
background-color: #FFFFFF;
border-radius: 15px;
}
#menu {
position: relative;
float: right;
width: 30%;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 10px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
#logo{
float:left;
padding-left: 20px;
padding-top: 10px;
}
#text{
float: left;
margin-left: 50px;
margin-right: 50px;
text-align: left;
border-radius: 5px;
background-color: #FFFFFF;
}
hr{
width: 860px;
margin-left: 0px;
}
#texta{
float: left;
margin-left: 50px;
margin-right: 50px;
text-align: left;
}
#img{
display:block;
float: right;
margin: 0px 0px 15px 20px;
padding: 10px;
border-radius: 5px;
background-color: #FFFFFF;
margin-right: 50px;
border-radius: 15px;
}
#pad{
padding-top:50px;
}
#pad2{
padding-top:100px;
}
#text2{
text-align: right;
padding-top: 20PX;
padding-right: 20PX;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 300;
}
#page2{
width: 800px;
height: 250px;
border: rgb(79, 229, 240);
border-style: solid;
border-width: 1px;
margin-top: -20px;
margin-bottom: 30px;
background-color: #d4d4d4;
padding-bottom: 20px;
}
#test{
padding-top: 10px;;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px;
border: #79d5ff;
}
#hrs{
width: 960px;
height:50px;
margin-left: -50px;
margin-top: 130px;
margin-bottom: 30px;
background-color: #e78c1d;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#pad3{
padding-top:10px;
}
#textb{
color: #d4d4d4;
font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;
margin-top: 20px;
padding-top: 1px;
}
#button{
background-color:#c4c1c1;
width: 200px;
height: 50px;
margin-top:125px;
margin-left: 300px;
border-color: black;
}
#btext1{
margin-left: 60px;
padding-top: 2px;
}
#button2{
display: block;
background-color:#efeded;
width: 300px;
height: 30px;
margin-top:100px;
margin-left: 280px;
border: black;
border-radius: 15px;
}
#btext2{
margin-left: 100px;
padding-bottom: 10px;
}
#marg{
margin-right: 50px;
}
I've tried everything for the love of god.
>Solution :
You are selecting the wrapping element and not the image itself.
Replace:
#img{
display:block;
float: right;
margin: 0px 0px 15px 20px;
padding: 10px;
border-radius: 5px;
background-color: #FFFFFF;
margin-right: 50px;
border-radius: 15px;
}
With:
#img img{
display:block;
float: right;
margin: 0px 0px 15px 20px;
padding: 10px;
border-radius: 5px;
background-color: #FFFFFF;
margin-right: 50px;
border-radius: 15px;
}
Notice how we target the actual image and not the wrapping element.