|
CSS - Can I Move An Image Using Css Like An Arrow Pointing At Links?
Hobby Helper Model Trains
The above link is where my problem is... If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange. There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move. Any help will be GREAT!! THANKS! Similar TutorialsI made my url's in my css and in some includes like that > url(http://www.blalala.com) ,, but i want to run my pages on my computer too (to check the codes most the time) without overloading my page. I use "../" thing but it doesnt apply for the inner pages thats in inner folders. what should i do ?? does everbody do like that? Hi, Av been having a lot of problems with my drop down working in IE since I added the flash fade to the images. Can anyone point me to the code that is responsible for keeping the drop down menu at the top of the header image.. How can I change it to make it at the bottom? Thanks This is in the header section Code: <!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie.css" />
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression(
(document.documentElement.clientWidth > 1152)? "1150px" :
(document.documentElement.clientWidth < 702) ? "700px" :
"auto");}
</style>
<![endif]-->
<?php wp_head(); ?>
I.E css Code: #header-image {
float: left;
width: 100%;
height: 383px;
background-repeat: no-repeat;
background-position: left top;
background-color: #FFFFFF;
margin-bottom: 20px;
}
Main stylesheet Code: #nav li {
position:relative; /* establish stacking context for the AP'd dropdown sublist */
float:right;
padding:0;
line-height:1.75em;
}
#nav li a {
float:left;
padding:0 .5em;
border-right: 1px solid #333;
color: #CCCCCC;
text-decoration: none;
}
#nav li a.first {border:none;}
#nav li:hover,
#nav li.sfhover{
background:black;/* background for all links on hover */
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF}/*1st level font color on hover*/
/*=== All Sublist Styles ===*/
#nav ul {
position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
width:12em; /*150px*/
margin-left:-999em;/* hide the sublist */
padding:0;
left:0; /* IE6/7 need this to position the sublist correctly on hover*/
top:1.75em;
background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
float: none;/*reset the float from #nav li*/
display:block;
height:auto;
line-height:1.5;
border:none;/*reset borders from #nav li*/
}
#nav li li a {
float: none;/*reset the float from #nav li*/
display:block;
width:11em;/*IE6 needs a width (12em total with padding)*/
padding:0 .5em;
border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/
/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a,
#nav li.sfhover li a {color:#000;} /*2nd level font color*/
#nav li li:hover a,
#nav li li.sfhover a {color:#FFF;} /*2nd level font color on hover*/
/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}
label.screen-reader-text {
display: none;
}
.avatar {
display:none;
}
thanks Hello! I have the site (w w w . s t e f a n t r e g o . c o m /wordpress) ... and I am trying to place a tv graphic I made under my twitter feed as an aesthetic effect. Currently I have: body { background-image:url('/Images/tregotv.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:983px 400px; display:block; } This looks fine on my computer -- BUT -- when I go to my photo section, travels section, the format of the site changes. Therefore my background image and twitter feed don't align correctly. Is there any CSS way to correctly align the background image to always be positioned under my twitter feed without format issues? Or would I need to get assistance with an alternate code such as Java script, or PHP to position the picture so the twitter feed always fits inside the tv? I appreciate the help!! -Stefan twitter: @stefantrego w w w . stefantrego . c o m / w o r d p r e s s PS. Sorry for the spaced out web addresses -- due to being a new user I cannot post links right away. My code works well in Internet Explorer and Safari but it does not work the way I want it to in Firefox and Opera. My items with red borders should always stay close to the blue bar in the background. But in Firefox and Opera the body background moves to the left when the window size is small, and the items with red borders appear to move away from the blue bar. The problem is the way in which these browsers center the background image for the body. Can anyone help me fix this issue? Thanks! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css" media="all">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
}
body {
background: #555 url(http://www.glidestor.co.uk/images/PageBackground.gif) repeat-y scroll 50% 0;
color: #111;
}
#page {
width: 617px;
margin: 0 auto 0 auto;
padding: 0 0 0 160px;
text-align: left;
position: relative;
border: 1px solid #55aa77;
}
#homeFeatures {
margin: 420px 0 0 0;
}
#homeFeatures #f1, #homeFeatures #f2, #homeFeatures #f3 {
padding: 0 40px 0 12px;
font-size: 9pt;
font-weight: 300;
width: 200px;
display: block;
text-decoration: none;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="page">
<div id="homeFeatures">
<a href="#" title="Item 1" id="f1"><strong>Item 1</strong>J khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Pring Design" id="f2"><strong>Item 2</strong>T khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Item 3" id="f3"><strong>Item 3</strong>B khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
</div>
</div>
</body>
</html>
Hey, so I have a div section where I want links to go, which all have an arrow image before them. I want a bit of space after the image too. Whats the easiest way to set this up? Thanks! Sorry if I ask this once before 'cause I don't remember which hack is it for, IE or non-IE... What's the difference between those two below?? Code:
html>#wrapper {HEIGHT: auto;}
Code:
* html #wrapper {HEIGHT: 100%;}
Thanks, FletchSOD I've inherited some custom code and I'm working on getting a drop down arrow graphic to show up... I can get it to show up but it is forced to the left of the drop down. So I have: V |___drop down/select list____| Here is my CSS controlling the dropdown: PHP Code: .dropdownplatform_game { background: url("../images/drop_down18.png") no-repeat scroll 0 0 !important; width: 230px; height: 20px !important; cursor: pointer !important; margin: 0 0 0 30px; } I've tried background: right and background-position: right and when I do that the drop down arrow graphic disappears. Am I missing something simple here? Here is the PHP code for the drop down/list box: PHP Code: <div id="dropdown" class="dropdownplatform_game" onclick="show_dropdown('platform');"> <input id="platform" name="platform" type="text" autocomplete="off" readonly value="<?php echo JText::_('PLATFORM')?> *" size="13%" class="survey_search_inputbox" /> <ul id="dd_list_platform" class="dd_list_game"> <?php for ($i = 0; $n = count($platforms), $i < $n; $i++) { $platform = $platforms[$i]; ?> <li onclick="changeValText('<?php echo $platform->id?>','<?php echo $platform->name; ?>','platform');"> <?php echo $platform->name; ?> </li> <?php } ?> </ul> </div> Works great other than the arrow graphic not lining up. Hello. On my website 2uk2 there is a domain search in the header. I want to make that litle arrow on the domain extension box purple. Using normal CSS i cant seem to acomplish it, i have tried assigning a "class" to the box, but it has no affect on it, it only sets the background colour. I have the scrollbar colour defined aswell, but again, no affect.. If anyone knew how i could fix that I'd really appreciate it! Regards Steven Billings I need help. I want to change the style and errow of list list Menu . Here is HTML CODE: HTML and CSS Syntax : Code: <select id="el01"> <option selected>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> Here is CSS Code: HTML and CSS Syntax Code: #el01 {width:135px; border:1px solid #000000; height:18px} /* Width */ #el02 { /* Text and background colour, blue on light gray */ color:#00f; background-color:#990000; } #el03 {background:url(listmenu.jpg)} /* Background image */ /*#el03 {background-image:url(listmenu.jpg)}*/ /*#el04 {border-width:6px}*/ /* Border width */ #el05 {border:9px dotted #00f} /* Border width, style and colour */ #el06 {border:none} /* No border */ #el07 {font-family:"Courier New",Courier} /* Different font */ #el08 {font-size:2em} /* Bigger text */ #el09 {font-size:0.5em} /* Smaller text */ #el10 {font-weight:bold} /* Bold text */ #el11 {padding:1em} /* Increase padding */ #el12 {text-align:right} /* Change text alignment */
Know i want to change the errow to my designing errow. I want this through CSS, no Jquer involved.I am attaching the image that u want to use . I want to replace default errow image to mine in which two errow pointing up and down. Please help me. When you make a normal drop down menu in a form tag you get your text field and then that small grey box with the down arrow in it. Is it possible to change that grey colour to some other colour? Thanks. Hi all, This is probably simple, but I can't get it working for some reason. At http://www.bartlett-family.net/chri...ett/index2.html I want the 8 image links below the "Quote of the moment" to be centered between the vertical lines. I'd appreciate help. CSS is here and the class in "centerinline". My website works in safari, but not in IE or firefox. My question is, how do I get my links to match up in the other browsers? I am converting my news system from tables to pure CSS. So far its going great, and I'm almost complete except for one problem; Each post has a category, and the category image is displayed in each post using "background-image" in CSS. Although it somehow comes back in the background of each link within the <div> (in Firefox). I have attached an image of what I'm talking about. Here's the html (simplified): Code: <div class="games"> <div class="newstoryinfo"> <h2>Topic goes here</h2> </div> text text text text text text text text text text text text text text text text text text text text text and so on... </div> Here's the CSS Code:
.news {
background-image: url("/img/topics/1.gif");
background-color: transparent;
background-repeat: no-repeat;
border: 1px solid black;
padding: 10px;
}
.news div {
text-align: justify;
margin-left: 1ex;
margin-bottom: 10px;
padding-left: 60px;
padding-right: 5%;
line-height: 1.6em;
}
.newstoryinfo {
padding-top: 5px;
color: #888;
font-size: 11px;
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, sans-serif;
}
Can someone please tell me how to make links in the "text text text.." area display with a white/transparent background? Thank you! Hi all, I am having difficulty with the background for an image link. I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test page</title>
<style type="text/css">
a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; }
a:hover img { background: none; }
.box { background: #00ff00; padding: 1em; }
.box img { border: 0; }
</style>
</head>
<body>
<div class="box">
<p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
<p><a href="#">Text link</a></p>
</div>
</body>
</html>
I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with Code: a:hover img { background: none; }
But this does not fix the issue. Any thoughts? I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet. Hi, I have some links in a <ul> list. I have set them to have a background image using CSS. When I rollover the links using IE6 the egg timer appears briefly. No such problem with FF or Opera. Anyone come across this before? Here's my CSS: Code: #section1 div ul{
padding:0;
margin:0;
}
#section1 div li{
list-style-type:none;
margin:15px 0 0 0;
}
#section1 div li a{
color:#fff;
text-decoration:none;
padding-right:20px;
background: transparent url(/newsite/images/square.gif) right center no-repeat;
display:block;
}
edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
On this page: http://lfswear(dot)com/sites/lfs2/index.php?main_page=product_info&cPath=1&products_id=8 I can't seem to get the "Size" div to move over right to match up with the color one... Any help would be greatly appreciated. Hi, Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down. Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link.. Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner).. any thoughts? |
|||||||