|
CSS - Selecting Text Within Anchors
Hi,
I've came across multiple menu css examples which uses <span> or <b> intermediate tags to select the text within an anchor. These tags, however, seem like a crutch which shouldn't be need. How would I select this text without using the intermediate tags? Code: <ul class="mymenu"> <li class="current"><a href="http://www.xyz.com/"><b>xyz</b></a></li> <li><a href="http://www.abc.com/"><b>abc</b></a></li> <li><a href="http://www.aaa.com/"><b>aaa</b></a></li> </ul> Thanks Similar TutorialsI have a web site using XHTML 1.0 Strict. The main body of the web pages is absolutely positioned 225px from the left, 100px from the top and is 750px wide. There is a banner and menu at the top and then another menu with links to the left. They are also absolutely positioned as well. I am using IE 6.0 as the main web browser since this is a corporate environment. The problem that I am having is that when I select text in the main body it either selects everything from the top down to the cursor or from the cursor to the end. I have troubleshot this and narrowed it down to the absolute positioning. It works fine in IE 7 with the absolute positioning. Does anyone know why this is happening and is there a work around for this? Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code: #content {
position:absolute;
width: 750px;
left: 225px;
top: 100px;
z-index: 500;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
background-color: #ECE9E2;
}
Hello all, Newbie here. I shall demonstrate how much of a Newbie I am by posing a question which is so basic to all of you, but escapes me altogether. What styles apply to what element? That is, what element gets a background and determines size of a menu? Or put a different way, do I have to style a UL element, or just style the LI? Why is it that I don't have to set a color attribute for a LI element if I set it for an anchor element? As you can tell I am a very confused person. I managed to fake my way through a website, but would like to add (Suckerfish) dropdowns to the horizontal nav bar. But, I cannot for the life of me get the dropdown list items to space as I would like. That is because I don't understand the basics of a list! If it helps the site in question is www.lif-tech.com/dropdown.html. The CSS which drops the nested items is he Code: @charset "utf-8";
/*Over-ride browser*/
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
/* This div contains website*/
#wrapper {
margin-right: auto;
margin-left: auto;
background-color: #4D4D4D;
width: 760px;
border: 1px solid #000;
text-align: left;
}
/*Header*/
#mastHead {
width: 720px;
background-color: #4D4D4D;
text-align: center;
padding-right: 40px;
}
/*Div to hold logo. "Same Day Service" in HRML beneath*/
#mastHeadL {
height:110px;
width:190px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
/*Used for positioning - could probably go*/
#mastHeadR {
height:95px;
width:355px;
float: right;
padding-top: 10px;
}
/*Hor Nav div*/
#hNav {
font-size: large;
font-weight: bold;
text-align:center;
line-height:40px;
color: #FFFFFF;
height: 40px;
background-color: #000;
background-repeat: repeat-x;
background-image: url(../images/header.jpg);
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #666666;
position: relative;
clear:both;
}
/*Position 1/2 way left...*/
#hNav ul {
clear: left;
float: left;
border:0 0 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
/*so li can be positioned 1/2 that distance right to center menu*/
#hNav li {
display:block;
width: 105px;
height: 40px;
float: left;
list-style: none;
position: relative;
right: 50%;
}
/*style Hor Nav anchors*/
#hNav a {
display: block;
width:105px;
height: 40px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #DA251C;
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
}
/*Insert first red separator line*/
#hNav a.first {
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #DA251C;
}
/*Suckerfish...*/
#hNav ul ul li {
height: 2em;
text-align: center;
line-height:1em;
background-color: #4D4D4D;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #666666;
left:-1999px;
}
#hNav ul ul a {
height:auto;
line-height:1em;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #666666;
font-size:12px;
}
#hNav a:visited {
color:#DA251C;
display: block;
outline: none;
width:105px;
text-decoration: none;
font-size: large;
}
#hNav ul ul a:visited {
color:#DA251C;
display: block;
outline: none;
width:105px;
text-decoration: none;
font-size: small;
}
/*Make button black for sunken affect*/
#hNav a:hover {
background-color: #000;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #666;
border-right-style: solid;
border-right-color: #333;
}
#hNav a:visited ul li {
border:0
}
#hNav li:hover ul li {
left: auto;
}
/*Create Vert Nav column*/
#vNav {
float: left;
width: 130px;
margin-top: 40px;
overflow: hidden;
clear: left;
}
#vNav ul {
margin-right: -42px;
text-align: center;
padding: 0px;
width: 127px;
list-style-type: none;
background-color: #4D4D4D;
border: 1px;
border-style:solid;
border-color:#4D4D4D;
}
#vNav a:hover {
background-color: #000000;
outline: none;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #333333;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #666666;
}
#hNav a:visited .vNav ul a{
color:#DA251C;
display: block;
text-decoration: none;
font-size: large;
}
#vNav a {
display:block;
color:#99FF00;
text-decoration:none;
font-size: .75em;
font-weight: bold;
color: #FFFFFF;
padding-top: 0.75em;
padding-right: 1em;
padding-bottom: 0.75em;
padding-left: 1em;
line-height: 1.5em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #4D4D4D;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #4D4D4D;
}
#vNav a:visited {
color:#DA251C;
}
/*Content is white only from Vert Nav right*/
#content {
background-color: #FFFFFF;
float: left;
width: 590px;
padding: 20px;
}
/*Style the font to be bolder than regular text*/
#content p {
font-size: medium;
font-weight: bold;
}
#contentImg {
float:right;
padding-left:1em;
}
/*Footer clears all floats*/
#footer {
clear: both;
height: 80px;
width: 758px;
background-color: #000000;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
text-align:center;
line-height: 5em;
}
#footer a {
text-decoration:none;
color: #FFFFFF;
}
#footer a:visited {
color:#DA251C;
}
/*Inside pages at bottom - big and bold, and centered*/
#phone {
text-align:center;
color: #FF0000;
font-size: 2em;
font-weight:bold;
width:70%;
margin-left:auto;
margin-right:auto;
}
/*This div contains "View Printer Friendly versions*/
#print {
width:50%;
float: right;
font-size:10pt;
}
#print img {
float:right;
border: none;
}
/*Center address below phone*/
#address {
color:#000;
font-size:.4em;
font-weight:normal;
line-height:1.5em;
}
/*Remove border from images*/
#wrapper img {
border:none;
}
/*Remove border from visited boxes*/
#wrapper img a {
text-decoration:none;
}
/*Display page User is on as black*/
#homepage #home, #billofrights #bor, #warranty #war,
#guarantee #mbg, #rental #rental, #service #service,
#products #products, #contact #contact, #techtalk #tf,
#faq #faq, #parts #parts,
#ot #ot, #pm #pm
{color:#000}
I want the dropdowns list items to vertically space as the Vertical Nav Bar does. I think the problem is I styled the lists differently - LI (and A) for the Horizontal and UL and A for the Vertical Nav... Sorry for the lenghty code, the unneeded styling, and the blatant stupidity. This is why I am a mechanic and not a website designer! Thanks, -John Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help Well they seem to work in both IE and FIREFOX but I just can't seem to get anchors to work in Safari. Apparently this is an issue to do with CSS and the overflow property. I found some information on it he http://blog.deconcept.com/code/over...flowsafari.html However the fix doesn't seem to work for me. The page I am working on is he http://www.tumbara.com/demo/index2.php?action=about#c1 I've tried all sorts of things to try to get this to work but no such luck. I'm just at my wits end. Any ideas what could be happening here? Hello all, I am having difficulty with creating a menu: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu {
width: 200px;
display: block;
float: left;
} /* end #menu */
#menu ul { list-style-type: none; }
#menu ul li { background-color: #0000ff; margin-bottom: 1em; }
#menu ul li a {
display: inline;
width: 100px;
text-decoration: none;
color: #000000;
font-size: 0.8em;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #ffffff;
} /* end #menu ul li a */
#menu ul li:before { content: url("images/menu_left2.png"); }
#menu ul li:after { content: url("images/menu_right2.png"); }
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="get_an_estimate.php">Get An Estimate</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="job_opportunities.php">Job Opportunities</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
For starters, I would like the link to be 100px wide no matter what. I can achieve this with display: block in the anchor tag definition, but then that pushes each image onto a new line. The way I have it now is closest, but the images do not line up with the anchor tag. The anchor tag seems to be pushed down by about 4 or 5 pixels. I've tried various combinations of margin adjustions but nothing seems to fix it. Also, I tried just adding extra pixels to the top of the image but that pushes the whole block down, not just the images. Any thoughts? Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. For example lets say I have this line of code and I want to select the userid in order to style a particular user on a site/forum. <div class='username'>Test <span class='userid'>(223647)</span></div> How do I go about selecting the 223647 ID so I can assign it a specific style? Thank you in advance for any help. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> I'm having trouble with a page I'm working on- I posted here a few weeks ago with something sort of similar. This time, though, I'm at a loss, I've tried several different things but nothing worked. http://www.geocities.com/nny555/eup/newschedule.html As you can see, the div where the content is, the text is stretching right through the div. Is there any way to fix this? Is it possible to have text run around a div positioned with absolute positioning? Hi, Howdo you get text and and image on the same line. I want text and 2 images on the same line but the image appears on the next line like a <br> has been entered. There is plenty of room for all data.Each has its own <div>. Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway. I want to know how to use CSS on just a little text. For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time. As another example, I want to render the following two lines Johnny G. Doe 123 West South Street in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>. I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it. I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know. Thanks. --Johnny Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution. Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word? Thanks. |
|||||||