Login | Register | FAQ
Anonymous

problem with image links

+ Post a reply

6 posts Page 1 of 1


problem with image links

by htmlcssnewbie » Sat Apr 14, 2012 7:54 am

Good morning everyone, I need help making some images as links. Im working on this website of mine and i have the links on the nav bar on the left hand side styled with css and coded and they work. Now on my products page i have a few images that i want them too link too other websites. But everytime i add an anchor href tag too them they get styled with what's on the css page. And i don't want that. Is there another way too not get them styled with the css code that i already have for the nav links? In other words, i want them too be independent from the css file. Help!
User avatar

htmlcssnewbie

  • Posts: 5
  • Joined: Sun Apr 08, 2012 4:11 am

Re: problem with image links

by XainPro » Sat Apr 14, 2012 9:46 am

add an id attribute in them and style that id different in css file :)
User avatar

XainPro

  • Posts: 3590
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: problem with image links

by htmlcssnewbie » Sat Apr 14, 2012 9:37 pm

I've tried adding a div id. Once i added the a href too the html page and saved it. The image took the style that's applied too the navigation links. So it didn't work. What next.
User avatar

htmlcssnewbie

  • Posts: 5
  • Joined: Sun Apr 08, 2012 4:11 am

Re: problem with image links

by chrisf1288 » Sat Apr 14, 2012 9:49 pm

htmlcssnewbie wrote:I've tried adding a div id. Once i added the a href too the html page and saved it. The image took the style that's applied too the navigation links. So it didn't work. What next.


Can you post the code?
User avatar

chrisf1288

  • Posts: 128
  • Joined: Sun Jun 26, 2011 1:01 am

Re: problem with image links

by htmlcssnewbie » Sat Apr 14, 2012 11:22 pm

So i've pasted the code too the products page and the css code. Also here't the link too the site so that you can see what i mean. Site address: http://businesstestsite.comze.com/
Go ahead and click on the products page and click on the first image (which is the image i want too turn into a link.) As you can see when you place the mouse over it it takes css for the navigation links and applies that. And it brings it down as well (Which is what i don't want). I just want it too be a link too another website page outside of my site. I hope this helps.

Thanks,

HTML CODE:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>PRODUCTS</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<header>
<hgroup>
<img src="banner_bg.gif"/>
<h2>PERSONAL COMPUTER SOLUTIONS</h2>
<h4>QUALITY SERVICE AT A FAIR PRICE</h4>
<h3>714.584.0249</h3>
</hgroup>
</header>
<aside>
<nav>
<a href="index.html">HOME</a><br>
<a href="aboutus.html">ABOUT US</a><br>
<a href="services.html">SERVICES</a><br>
<a href="products.html">PRODUCTS</a><br>
<a href="contactus.html">CONTACT US</a>
<img src="navlogos.gif"/>
</nav>
</aside>
<article>
<div class="productsblock">

<div class="productsheading">
CUSTOM BUILT SYSTEMS
</div>
<div class="customsystemlink">
<a href="http://www.sourcecode.com">
<img src="customdesignedsystem.gif" alt="custom designed systems" width="128" height="128"/></a>

</div>

<div class="customsystemquote">
Need a new desktop computer or laptop? Personal Computer Solutions can build your next computer at competitive prices. Tell us how you'll be using your computer and we'll recommend the right computer for you. All parts are genuine and new. All software 100% legitimate and will pass any test.
</div>

</div>
<div class="productsblock">
<div class="productsheading">
WEB DESIGN/HOSTING SERVICES
</div>
<div class="webdesignhostinglink">
<img src="webhosting.gif"/>
</div>
<div class="webdesignquote">
You’ve probably seen by now that even the smallest of businesses have a website. A website is available 24/7, advertising your company even while you sleep. Through a website, you inform your customers who you are, what you offer. Let Personal Computer Solutions design your new website for you.
</div>
</div>

<div class="productsblock">
<div class="productsheading">
ONLINE STORAGE
</div>
<div class="onlinestoragelink">
<img src="onlinestorage.gif"/>
</div>
<div class="onlinestoragequote">

</div>
</div>

<div class="productsblock">
<div class="productsheading">
PARTS & SOFTWARE
</div>
<div class="parts-softwarelink">
<img src="parts-software.gif"/>
</div>
<div class="parts-softwarequote">

</div>
</div>
</article>

<footer>
<h6>Copyright &copy 2011 Personal Computer Solutions. All rights reserved.<br>Web Master: Alvin Zaragoza</h6>
</footer>
</div>
</body>

</html>

CSS CODE:

#wrapper {
width: 1039px;
height: 943px;
position:relative;
margin: auto;
border: solid thin #EBE6E7;
padding: 10px;
}

body {
background-color: #EBE6E7;
align: center;
}

header {
height: 157px;
width: 1039px;
border: solid thin black;
}

h2 {
font-family: verdana;
font-size: 30px;
font-weight: normal;
word-spacing: 5px;
color: #ff0000;
margin-left: 200px;
margin-top: -143px;
}

h3 {
font-family: times;
font-size: 35px;
font-weight: normal;
color: white;
margin-left: 200px;
}

h4 {
font-family: verdana;
font-size: 18px;
font-weight: normal;
word-spacing: 3px;
color: #fcf238;
margin-top: -26px;
margin-left: 200px;
}

aside {
height: 700px;
width: 200px;
margin-top: 10px;
border: solid thin black;
border-radius: 15px;
background: #FFF;
}

article {
height: 700px;
width: 820px;
margin-top: -702px;
border: solid thin black;
border-radius: 15px;
float: right;
background: #FFF;
padding: 0px auto;
}

footer {
height: 60px;
width: 1039px;
border: solid thin black;
border-radius: 15px;
margin-top: 10px;
background: #FFF;
text-align: center;
padding: auto;
}

nav {
text-align: center;
padding-top: 25px;
margin-bottom: 7.5px;
margin-top: 7.5px;
}

a {
text-decoration: none;
display: block;
border: solid thin black;
*border-radius: 15px;
background: #d9d6d6;
font-size: 20px;
padding: 10px 10px;
margin-right: 10px;
margin-left: 10px;
font-weight: bold;
}

a:hover {
color: #09F;
background: #4D4C4C;
border-radius: 15px;
}

a:visited {
color: #00F;
}

ol {
list-style: none;
}

fieldset {
border-radius: 15px;
margin: 20px auto;
width: 450px;
padding: 0px auto;
background: #efeded;
}

section {
border-radius: 15px;
margin: auto;
width: 500px;
}

.computertower {
margin: 10px;

}

.subheading1 {
font-family: verdana;
color:#3d5aa8;
font-weight: bold;
font-size: 15px;
float: right;
margin-top: 10px;
margin-right: 55px;
}

.list {
margin-top: -200px;
margin-left: 155px;
font-family: verdana;
font-size: 16px;

}

.subheading2 {
margin-top: 50px;
margin-left: 15px;
font-family: verdana;
color:#3d5aa8;
font-weight: bold;

}

.service {
margin-left: 570px;
margin-top: 10px;
}

.paragraph {
margin-left: 15px;
margin-right: 255px;
margin-top: -155px;
font-family: arial;
}

.subheading3 {
color: #0179b5 ;
margin-top: 25px;
text-align: center;

}

.commitment {
margin-left: 25px;
margin-top: 10px;

}

.quote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 125px;
margin-right: 35px;
margin-top: -105px;

}

.commitmentblock {
border: solid thin #404040;
border-radius: 15px;
background: #efeded;
width: 675px;
height: 175px;
margin-left: 75px;
margin-top: 35px;
}

.personalintroduction {
font-family: arial;
font-size: 15px;
margin-top: 15px;
margin-left: 15px;

}

.me {
float: right;
margin-right: 15px;
margin-top: -145px;

}

.meblock {
border: solid thin #404040;
background: #efeded;
width: 750px;
height: 185px;
margin-left: 15px;
margin-top: 25px;
padding: 5px;

}

.paragraph2 {
margin-left: 15px;
margin-right: 55px;
margin-top: 15px;
font-family: arial;
}

.productsheading {
color: #0179b5 ;
margin-top: 15px;
text-align: center;

}

.productsblock {
border: solid thin #404040;
*border-radius: 15px;
background: #efeded;
width: 755px;
height: 145px;
margin-left: 25px;
margin-top: 20px;
}

.customsystemlink {
margin-left: 25px;
margin-top: -25px;
}

.customsystemquote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;

}

.webdesignhostinglink {
margin-left: 25px;
margin-top: -25px;
}

.webdesignquote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;

}

.onlinestoragelink {
margin-left: 25px;
margin-top: -25px;
}

.onlinestoragequote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;

}

.parts-softwarelink {
margin-left: 25px;
margin-top: -25px;
}

.parts-softwarequote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;

}

.servicesintro {
margin-left: 45px;
margin-right: 45px;
margin-top: 25px;
font-family: arial;
font-size: 15px;
}
User avatar

htmlcssnewbie

  • Posts: 5
  • Joined: Sun Apr 08, 2012 4:11 am

Re: problem with image links

by XainPro » Sun Apr 15, 2012 4:10 am

just add
nav in front of these 2 styles in your css
Code: Select all
a {
text-decoration: none;
display: block;
border: solid thin black;
*border-radius: 15px;
background: #d9d6d6;
font-size: 20px;
padding: 10px 10px;
margin-right: 10px;
margin-left: 10px;
font-weight: bold;
}

a:hover {
color: #09F;
background: #4D4C4C;
border-radius: 15px;
}


it should be
Code: Select all
nav a {
text-decoration: none;
display: block;
border: solid thin black;
*border-radius: 15px;
background: #d9d6d6;
font-size: 20px;
padding: 10px 10px;
margin-right: 10px;
margin-left: 10px;
font-weight: bold;
}

nav a:hover {
color: #09F;
background: #4D4C4C;
border-radius: 15px;
}


hope this resolves your problem.
BTW nice and simple website it looks good.
XainPro
User avatar

XainPro

  • Posts: 3590
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1

?>