|
CSS - Help With Adding Href To Div Element...
Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out...
I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself... What I'm trying to accomplish is the same thing, only with a div that has textual content.... I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings... I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail.... I hope this is a decent enough description of the problem... anyway to accomplish this??? Similar TutorialsMy css is at CSS. The site is at site The problem I am having is that on the .maintextdiv or the .subtextdiv if I add any left or right margin values IE6 in strict mode is adding that value to the parent element, #rightbox. I should clarify that if I add margin values to just one of them it displays fine, but if I add margin values to both of them then I end up with the problem of extra space added to the parent element. More wierdness, if those (maintextdiv and subtextdiv) are not floated then the problem doesn't show up at all. It's only once they got floated did I have problems. This behavior doesn't show up in FF or Safari. Anyone with any ideas? Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! how may i define that <a name> is not related to general selector by <a> tag? e.g. i don't want when i mouse over <a name> to change its color defined ny a:hover. assidning separate class to them is nightmare. Code:
<div id="topNav">
<ul id="cssdropdown">
<li class="topNavTitle"><a href="" class="atopNavTitle">---A---</a>
<ul class="subuls">
<li><a href="a.php">AAA</a></li>
<li><a href="b.php">BBB</a></li>
</ul>
</li>
<li class="topNavSep"></li>
<li class="topNavTitle"><a href="" class="atopNavTitle">---B---</a></li>
</ul>
</div>
<style type="text/css">
li.topNavTitle a.atopNavTitle {
margin-top: 20px;
padding-top: 20px;
}
</style>
Hi, I am trying to move <a href="" class="atopNavTitle">---A---</a> <a href="" class="atopNavTitle">---B---</a> down 20px. I have tried the above style but it does nothing. What do I do wrong? Hi there, this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site. I know the #blah should be used to set an id for it, but here's my concern; 1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">). 2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different? thanks in advance. Hi, I am at this point too tired to continue to search for my answer, so I am going to just ask... I would like to be able to control the color and underlining of the links in the unordered list. This list will appear on every page in the site. I am not sure what the CSS code is or in which class/id to place it in my css file. the page code is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="nav.js" type="text/javascript"></script>
<title>Natura Culina :: Welcome</title>
</head>
<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()" bgcolor="#D89607">
<div class="allcontent">
<div id="header">
<ul id="navigation">
<li><a href="index.php">home</a></li>
<li><a href="products.php">products</a></li>
<li><a href="ingredients.php">ingredients</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="testimonials.php">testimonials</a></li>
<li><a href="links.php">links</a></li>
</ul><!---end navigation--->
</div><!-- end header -->
<div class="textArea">
<p align="center"><span class="header1">Welcome to
Natura Culina Organic Skin Care </span></p>
<p><br />
<img src="/images/all229.jpg" width="367" height="233" align="left" class="left" /><span class="bodyBold">Natura
Culina</span> creates luxurious skin care products that will appeal to your
senses, inspired by skin care traditions used at centuries old European
Spas.</p>
<p>We are <em><span class="bodyBold">so over</span></em> using chemical
solutions for our skin problems because they are so unsatisfactory.<br>
We are <em><span class="bodyBold">so back</span></em> to feeding
our skin with natural ingredients, oils, vitamins and antioxidants.</p>
<p>All the oils used in our products are cold pressed and certified
organic. All our ingredients are carefully blended to create effective,
nourishing and natural products for your skin. All body products
are made after placing an order to assure freshness. </p>
<p> </p><p> </p><p> </p>
<p align="center"><em><span class="bodyBold">Start loving your skin
again with Natura Culina Food For Your Skin.</span></em></p>
</div><!---end contentBGColor--->
</div><!---end allcontent--->
</body>
</html>
and the CSS sheet code is this: Code: body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #D89607;
}
#body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #E1A21A;
}
.allcontent {
width: 736px;
margin-left: auto;
margin-right: auto;
border: thin dotted;
margin-top: 10px;
}
#header {
background-image: url(/images/banner1.jpg);
background-repeat: no-repeat;
height: 260px;
margin-top: -18px;
}
.textArea {
background-color: #E1A21A;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#navigation li {
float: left;
list-style: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 240px;
}
#navigation {
font-size: 16px;
font-weight: bold;
color: #fff;
}
img.left {
padding: 0px 10px 0px 0px;
float: left;
}
.header1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.bodyBold {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
}
.itemBorder { border: 1px solid #73090E }
.itemText { text-decoration: none; color: #F3F7FD; font: 14px Arial, Helvetica }
.itemTextHeaders { text-decoration: none; color: #E6EBF2; font: bold normal 13px Verdana, Arial, Helvetica, sans-serif}
Hi, is there a method of setting the color for title="some text" in a hyperlink ? e.g. [<a href="index.php?page=links.php" title="Redlake Valley business websites">Local Links</a>] TIA Mike Hello! could someone take a look at my site and tell me why the links inside my content are whacked out? when you click on them they jump around... i have been trying for two days to figure out which other style i am using is interfering, but i cant find that little sucker...and i have deconstructed it several times... i think i am just too close to the code and need another pair of eyes. here a link to a page with the problems...its the sample menu links in the center of the page green-bistro dot com on the menus page oh, and another strange thing, like on this page, if i link to a page with .php in the extention, the link wierds out, but the mailto link works fine... green-bistro dot com on the eco events page thanks in advance for anyone who can help!!! Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css). Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script: http://javascript-array.com/scripts...drop_down_menu/ And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code: Code:
<html>
<head>
<style>
<!--
#sddm a
{ display: block;
}
#sddm span
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #3D97D6;
border: 1px solid #5970B2}
#sddm span a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #3D97D6;
color: #FFF;
font: 11px arial}
#sddm span a:hover
{ background: #2875DE;
color: #FFF}
-->
</style>
<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
</head>
<body>
<span id="sddm">
<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
<a href="#">Add as Friend</a>
<a href="#">Send message</a>
<a href="#">View Profile</a>
<a href="#">Report</a>
</span>
</span>
this text comes after the username
</body>
</html>
So i hope its clear what i wanna do, i always find it hard to explain things Hi there, I want to create a hyperlink to an external page from my web site. Is it possible to show that external content on my page without using frame set. From the attachment, link 1 & link 2 are external links inside a div. I want to show it on the second div on the bottom. Thanks. I've got two hidden maps which display in a div when the link is hovered. If I put an H3 inside the anchor to style the link text, it doesn't inherit the link and hover colors of the rest of the site. If I move the H3 outside the <a href> it breaks the hidden span stuff in Firefox. But the colors work! If I just use normal text it works fine but displays inline and small and crappy... Here is my CSS for the div: Code: div#maplinks {margin:10px 0; padding:0;}
div#maplinks a span {display: none;}
div#maplinks a:hover span {display: block;
position: absolute; top: 1em; left: 330px; width: 420px;
padding: 0px; margin: 0px; z-index: 100;
background: white;
text-align: center;}
and the HTML Code: <div id="maplinks"> <a href="images/sabah-map-400X319.jpg"><h3> View Sabah Map</h3><span><img class="centimg" src="images/sabah-map-400X319.jpg" width="400" height="319" border=0 alt="Sabah Map"><p class="credit">Sabah Tourism</p></span></a> <a href="images/borneo-map.gif"> Map of Borneo and Region<span><img class="centimg" src="images/borneo-map.gif" width="420" height="330" border=0 alt="Borneo Map"><p class="credit">Expedia.com</p></span></a> </div> <!-- maplinks --> How would I address this <h3> element? Or do I try to style that div's a:link and a:hover? (that didn't seem to work). Hi, My CSS has a simple declaration for "A" href tags: Code:
a {
color:#8D603B ;
text-decoration: underline;
font-weight:bold;
}
a:visited {
color:#8D603B ;
font-weight:bold;
}
a:hover {
color:#A97043 ;
font-weight:bold;
}
So, this is used throughout the site. However, I want to specify a different style for the "A" tag if it is within a certain DIV. For example, Code: <div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div> <div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div> The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS. Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)? Thanks very much! Hello friends! I have a menu item href called "underbar-tag0". When I hover this: the background of the class changes - as you can see in the code. Everything is fine. But what I also want is that when I hover the href: a (another) floating div should get visible. (First not showing, but when hover the menu href it gets visible) (the name of the "invisible" Div is protip, the position of it is not important at the moment.) This is what my HTML looks like. Code: <div class="protip"></div> <div class="underbar"> <a href="" class="underbar-tag0">Click here.</a> </div> This is what my CSS looks like. Code:
.protip {
height: 164px;
width: 191px;
z-index: 500;
position: absolute;
background-image: url(../../Root/recommended.png);
}
.underbar {
height: 42px;
width: 1100px;
}
a.underbar-tag0 {
display: block;
width: 90px;
height: 32px;
float: left;
color:#000;
background-image: url(../../Root/buy_blue.png);
background-repeat: no-repeat;
background-position: 0px 0px;
margin-right: 0px;
padding-top: 9px;
padding-left: 40px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 80px;
font-weight: bold;
}
a.underbar-tag0:hover {
color:#9C0;
background-image: url(../../Root/buy_blue.png);
background-repeat: no-repeat;
background-position: 0px -45px;
I have searched the Internet very long time without answers. Is this possible, like somehow link so when the class "underbar-tag0:hover" activates then "protip" is displayed? Sorry if my English is bad, I am from Europe but I think you understand me. Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work: <a href="test.html" style="a:hover { color: #DA8525; }">Test</a> Is that suppose to work? I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code Code: .globalNav, .globalNav td {
margin: 0px;
padding: 0px;
width: 100%;
height:28px;
border-bottom: 1px solid #94AEC1;
border-collapse: collapse;
}
.globalDiv{
color:#fff;
width:100%;
height:28px;
background:#94AEC1 url(../images/grad_bar.gif);
background-color:#94AEC1;
margin:0px;
padding: 0px 0px 0px 10px;
overflow:hidden;
}
.globalDiv a{
font-size:10pt;
color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
text-decoration:underline;
}
.globalDiv a:hover{
text-decoration:none;
}
Thanks Hi, I have a link in my page. When the user hovers over the link, the page is flickering. This is the code I have used Code:
a
{
color: #42C0FB; background: inherit;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
line-height: 1.8em;
}
a:hover
{
color: #6C757A; background: inherit;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
<a href="WelcomePage.asp?UserName=User_nm" id="Welcome" title="Home Page" target="_blank">Welcome to my Page</a>
I am checking in IE 6 and IE 7. How to avoid the flickering, when user hovers over the link. Thank you I'm having a funky issue with a page in IE. I've got tables and have css setting the border properties of cells in the table. My issue is when mousing over Anchors in td's in the table the borders of the td's will sometimes dissapear. Its just funky. Its doing it on 2 different machines running IE6 ...Has anyone esle seen this? Is this some variant of the Guillotine Bug? I want to change this: LIST-STYLE-TYPE: square; I want to show a picture in the place of that square. Can this be possible? |
|||||||