|
CSS - Div Hyperlink Problem
The width spreads across the whole page, i only want it to be as long as the content in the div. How can i solve this?
Code: <style type="text/css">
.three {
display:block;
width:auto;
height:100px;
position:relative;
border:1px solid black;
}
.three a {
width:100%;
height:100%;
position:absolute;
}
</style>
Code: echo "<div class='three'><a href='two'></a>test</div>"; Similar TutorialsHi can any one suggest a solution to my problem. I have all my a tags as - a{border-bottom: thin #0066FF solid;text-decoration:none;padding-bottom: 2px} and my img tag as img {border-bottom: none} However I have 4 images in 1 div that just wont accept it. So it must be precedence right. But theres no selector after it that would cause the issue so I've ruled that out. So I tried a more deeper selector. #rightside img/#rightside a img/#rightside img a/ They didn't work. So in frustration I added a class to the 4 images a tag and then tried .info/.info img/.info a img/.info img a/ Still no joy. I then moved the class to the img tag in desperation and tried - .info/img .info Still no joy. I tried all these with the below css - {border-bottom: none} {border-bottom: thin #FFF solid} {border-bottom: 0px} {border-bottom: transparent} {border: none} {border: thin #FFF solid} {border: 0px} {border: transparent} I know it's not precedence because there is 1 image after these in a different p tag that takes effect.ie: no border. It's not a selector on the same tag as there is no border on the tag. I then drop kicked my computer across the room and decided to ask for help. Any one got any ideas? The code looks similar to this - <div id="new-image"> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> </div> the css is - #new-image {text-align: center;width:180px;margin:-10px 0px 13px 15px} .info {border-bottom: none} The a tag css is above this in the css code. Cheers in advance Jazajay Hi I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet.. Kindly post ur suggestions to my email adddress godwinsharmila@yahoo.com Thanks in advance.. Regards Sharmila solved. Hi i have a css code as below, Code:
.profile a:link, a:active, a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #3B6D06;
text-decoration: none;
}
.profile a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
color: #DE6200;
}
and I am using it as Code: <a href='http://domain.com' class=profile>text</a> but it is not applying css settings on the hyperlink. can anyon help please? thanks Hay gys !..... I'm confusing of this, i want to give the anchor from css class, and give hyper link inside the anchor,so how can i achieve this ? pls help ! Thanks hello friends, please tell me how can i specify a hyperlink, active, hover and visited attribute in body { } for example i have the following css BODY { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #F2F2F2; font-family: Arial; font-size: 11px; color: #000000; text-align: left; } now i want to specify the default hyperlink with active, hover and visited attribute within body. Thx. On my page I have 2 different hyperlink styles, one for my menu and one for any hyperlink in the content. One is under #menu in my stylesheet and the other under #content. With FF everything looks great, but when I open my site in IE6, the hyperlink styles seem to combine. Any ideas? I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great. HTML <a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank"> <img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" /> </a> CSS a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934} I have this website that i am using CSS for much of the styles. I have used hotspot hyperlinks in parts of the images. Now there is the blue line that a link in html normally has around the entire div the hotspot is in. If clicked its the purple colour that a clicked (visited) hyperlink has. The link to the page in question is itxtme.com/still_lime/os_z_b.html This only occurs in IE, it is not occuring in Opera. All the other links are working correctly. All source is in the webpage (view/source code) Kind regards how i can work around this! Scott I've got my normal navigation links styled using the standard a:link, a:hover etc etc. I want to include an image on one of my pages which links to a download, because the style applies to all 'a hrefs' the properties for my text links are assigned to the image (for instance a border is given). Is there a way to assign a different class to the image hyperlinks? Cheers. okey i m just putting hyperlink on picture and i get blue boarded around it? how can i remove it? I have page that automatically changes the images in a container via css. Does anyone know if its possible for each image to have a different hyperlink? Would have done this in Flash but, IT Security is not on board with that yet. Any suggestions? Can I make certain hyperlinks to be (eq) red and the others (eq) blue in one page with one css file? Hi, I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Ok i want more than one div on the same line.... but this code isnt working. My divs are formatted to look like tables... just so you know. Code:
<center>
<div class="top">
<div class="header">
Header, Yo!
</div>
</div>
<div class="bg">
<div class="left">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
<div class="main">
<div class="header2">
MAIN TITLE HERE
</div>
</div>
<div class="right">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
</center>
I've added a border around my exiting web sites main interface page (all the content gets generated via php inside this page). But I'm having two probelms with the <div> structure that are driving me mad. I've moved all the styles inline and I've taken out almost all the php to make the file more readable. I have two points of confusion. 1) Why is the lower part of the border showing outside the container with the background. 2) How do I get the side parts of the border to fill the entire side. I googled this and have given all the containing div's heights, but every time I give these elemnts height other than the size of the image in the background they shrink to about 20 pixels. Code: Thanks for any help. You can see the real web page at www.greystackcellars.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php print $meta_title ?></title>
<style>
.HeadLine {
clear:both;
background-color: #8c8170;
height: 25px;
text-align: center;
vertical-align: middle;
padding-top: 7px;
color: #FFFF99;
font-size: 14px;
}
.Bottom {
COLOR: #333333;
font-size: 10px;
text-align: center;
clear: both;
background-color: #8C8170;
width: 820;
height: 25px;
padding-top: 7px;
}
</style>
</head>
<body style="margin:0; padding:0; height:100%;" >
<div ID="Container" style="border: solid #8C8170 2px; margin: 0 auto; width: 962px; z-index: 1; height: 100%; background: url(images/background.jpg); background-repeat: repeat;">
<div id="top_decoration" >
<div style="width:54px; height:51px; float:left; background: url(images/label-border-top-left.gif);"></div>
<div style="float:left; width:857px; height:51px; background: url(images/label-border-top-mid.gif);" ></div>
<div style="width:51px; height:51px; float:right; background: url(images/label-border-top-right.gif);" ></div>
</div>
<div id="border_container" style="height:100%; clear:both;">
<div id="left_border" style="height:550px; float:left; width: 20px; background: url(images/label-border-left.gif); background-repeat: repeat;">
</div>
<div id="content_container" style="float:left; width:920px;">
<div id="Banner" style="position:relative; height:150px; width: 100%;">
<div id="YouAreHere"
style="
padding-left: 10px;
float:left;
width:220px;
height: 140px;
">
</div><!-- your are here -->
<div id="logo" style="float:left;">
<IMG src="images/logo.jpg" border="0" alt="Grey Stack Cellars"/>
</div>
<div align="right" style="float:right; padding-right: 20px; height:150px;">
<table height ="100%" width="100%">
<tr><td align="center">
<?php if ($_SERVER['HTTPS'] == 'on')
{
?>
<img src="images/icon-thawte2.gif" alt="Thawte SSL">
<?php
}
?>
</table>
</div>
</div> <!-- banner -->
<div id="headline" style="clear:both; background-color: #8c8170; height: 25px; text-align: center; vertical-align: middle; padding-top: 7px; color: #FFFF99; font-size: 14px; width: 100%;">
<a href="index.php?Page=Home" class="head">Home</a> |
<a href="index.php?Page=Bennett Valley" class="head">Bennett Valley</a> |
<a href="index.php?Page=WineCategory& Category=Current Release Wines" class="head">Buy Wine</a> |
<a href="index.php?Page=People" class="head">Information</a> |
<a href="index.php?Page=ContactUs" class="head">Contact</a> |
<a href="AccountFunctions.php?Mode=Cart" class="head">View Cart</a> |
<a href="index.php?Page=Background" class="head">Trade</a> |
<a href="http://www.greystackcellars.com/HomeGrown/index.php?Page=AccountManager" class="head">My Account</a>
| <a href="AccountFunctions.php?Mode=LogOut" class="head">Log Out</a>
</div><!-- headline -->
<div ID="Wrapper" style="width: 920px; z-index: 1; height: auto; min-height: 400px; vertical-align: top; background: url(images/background.jpg); background-repeat: repeat;"> <!-- This has almost everything -->
<div ID="main" style=" padding: 10px 0px 10px 0px;"> <!-- this has just the padding -->
<div class="DialogTitle" style=" color:#555555;">
<?php print $page_title ?>
</div><!-- page title -->
<?php
if (!file_exists($page_file))
print ("Internal error: File ".$page_file." for Page ".$_REQUEST['Page']. " not found<br>");
else
require_once($page_file);
?>
</div> <!-- main -->
</div> <!-- Wrapper -->
<div class="Bottom">
<a href="index.php?Page=SiteMap" class="bottom-link">Site Map</a> |
<a href="index.php?Page=Terms" class="bottom-link">Terms & Conditions</a> |
<a href="index.php?Page=Privacy" class="bottom-link">Privacy Policy</a> |
<a href="index.php?Page=Gallery" class="bottom-link">Photo Gallery</a>
</div> <!-- Bottom -->
</div> <!-- content_container -->
<div id="right_border" style="float:right; width: 20px;">
<img src="images/label-border-right.gif" width="20" height="555">
</div>
</div> <!-- left and right border_container -->
<div id="bottom_decoration" style="clear:both">
<div style="width:56px; height:56px; float:left; background: url(images/label-border-bot-left.gif);"></div>
<div style="float:left; width:848px; height:51px; background: url(images/label-border-bot-mid.gif);" ></div>
<div style="width:56px; height:56px; float:right; background: url(images/label-border-bot-right.gif);" ></div>
</div><!--bottom decoration-->
</div> <!--Container-->
</body>
</html>
Peter |
|||||||