|
CSS - Drop Down Style Problem
Hi,
Can't see what is wrong with this line.. maybe i'm being blind? <option style="font-family: verdana; font-size: 10px;" value="http://www.link here.com">LINK HERE</option> Any ideas? Similar Tutorialshi, how do I style a drop box so it is flat not sunk in? on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? Hi, I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down? thanks and regards, Sim085 I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it. This is an example of the problem. Any suggestions? I am trying to use ul list to organize my images. Here is how it should look like. IMAGE IMAGE IMAGE text text text But instead, I get IMAGEtext IMAGEtext IMAGEtext Code:
<style>
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
ul.thumbs li.pagination {
margin: 10px;
padding: 0px;
list-style: none;
display:block;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #000;
}
a:hover.thumb {
background: none;
}
a.thumb span {
width: 100%;
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
</style>
<ul class="thumbs">
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li class="pagination">1. </li>
</ul>
I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div. Footer content section is right above the copyright notice. http://www.aslanyurek.com/rtt/ Code:
/* content footer.css */
#fcontent{
height:80px;
width:790px;
background-color:#999999;
}
#fcontent .help{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
background-color:#FFFFCC;
}
#fcontent .catalog{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
margin-left:10px;
background-color:#F0FFCC;
}
#fcontent li {
float:left;
list-style-type:square inside;
margin-left:25px;
}
#fcontent li a {
display:block;
}
I'm relatively ignorant about css and html, but I've faked my way along so far. But I've encountered a problem. I designed a style for a blog on LiveJournal, and it looks OK there. (http://www.livejournal.com/users/javajed/). I've also put a small bit of JavaScript in my website to embed my blog there. (http://www.jaredvoss.com/). On my website, the embedded blog is all screwy. All three DIVs should be contained within the scrolling layer, but only two of them are. Originally the sidebar DIV was even hidden behind the layer it's embedded in (I brought it forward using a z-index code). It seems like the sidebar DIV is taking it's position cues from the main body of my site, while the other DIVs are taking their position cues from the layer they're embedded in. I want all three DIVs to be aligned as they are on LiveJournal, and contained within the scrolling layer on my website. Any ideas? I've tried using wrapper divs and container divs (maybe not correctly) without success. Thanks for any help! I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set; Code:
a {
color: #005D93;
text-decoration: none;
}
a:hover {
color: #990000;
text-decoration: underline;
}
#thumb {
position: relative;
float: left;
padding-left: 21px;
padding-bottom: 10px;
}
#thumb img {
width: 96px;
height: 145px;
}
#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}
#thumb img a:hover {
border-color: #990000;
}
An example image tag is as follow; Code: <div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div> With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated. Regards, JT Here is some code below. How do I write it, that only the title is bold and not the description? Code: <html>
<head>
<style type="text/css">
.selected {font-weight: bold; }
</style>
</head>
<body>
<ul>
<li class="selected">Title</li>
<ul>
<li>description 1</li>
<li>description 2</li>
<li>description 3</li>
</ul>
</ul>
</body>
</html>
I have a rule called #MainContent. Now I want to change this rule for just one page so I duplicate it but don't add it to the global style sheet but declare the rule for this page only. However this doesnt work the div still changes based on the #MainContent rule in the global css file Im just playing around with CSS and Photoshop and made this so far:- http://www.o0matte0o.myby.co.uk/windows-vista/ Lazy Link It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please? I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S Code:
body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }
#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; }
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }
Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.) this is what i got: a menuBox Code:
<tr align="center" valign="top" height="120">
<td height="120">
<div class="menuBox">
<div class="menuBoxHeader">Menu</div>
<p><a href="blah-blah4">4.</a></p>
<p><a href="blah-blah5">5.</a></p>
<br>
<p>some text>
</div>
</td>
</tr>
I use for the links Code: a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}
for the menuBox Code:
.menuBox { color: #c36;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 2px; font-family: Verdana;
background-color: #fef;
border: solid 1px #c36 }
and for the menuBoxHeader Code: .menuBoxHeader {
color: #efe;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 13px;
font-family: Verdana, Arial, Helvetica;
background: #c36 0px 0px;
margin: 1px 0px 0px;
position: relative;
top: 0px;
left: 0px;
width: 130px;
height: 16px }
So now my two questions. 1. What do I have to do to let it look in all the browsers the same? In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ). 2. The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right? I hope that someone can help me? This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Ok. To more easily explain my problem with you guys, I have included a "Diagram" if you will of the problem. Area 1 is the area where all my buttons and dropdown menus are. Area 2 is the greatly overlapping "background" area that is invisible. What I want is to have Area 2 behind Area 1 and the width and height of Area 2 barely exceed Area 1's. This will allow me to call the "hide()" function for my drop down menus whenever the mouse "seems" to move away from buttons and the menu. http://www.alexwait.com/Nortonville...ester/main.html I've tried doing that, but as you can see, it hasn't worked out too well. Any advice? EDIT/UPDATE: Ok. I've now got the box "behind" the menus and buttons like I want. But when I move my mouse into another element... for some stupid reason I am getting the onMouseOut event being fired for the "behind" element. Thanks again. Hi guys, I've written a drop-down menu, located here (there's only a drop down menu on the "Services" link in the menu. Now, the menu works fine in FireFox, however it completely screws up in IE (I'm not too worried about the menu being put on the right in IE, just moreso about all the gaps its making). To do the menu, I'm simply using an extra table for the drop down menu which has its display property set to none, and giving it the css property of "position: absolute;". Then when it is rolled over, it just changes to "display: block". How would I go about fixing this? Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else. This is the original html template http://www.styleshout.com/templates...ce11/index.html This is my website with drop down menu added but it's not working http://ghazifly.110mb.com/marketplace11/ I guess the template CSS might clash with the dropdownmenu CSS. My index.html navigation code, I think theres nothing wrong with this code. Code: <!-- navigation starts-->
<div id="nav">
<ul><ul id="jsddm">
<li><a href="index.html">Home</a></li>
<li><a href="#">Drop Down Menu</a>
<ul>
<li><a href="#">Other page</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="index.html">Archives</a></li>
<li><a href="index.html">About</a></li>
</ul>
</ul>
<!-- navigation ends-->
My website CSS top navigation code: PHP Code: /* Navigation */ #nav { clear: both; padding: 0; } #nav ul { float: left; list-style: none; background: #E4E4E4 url(nav.jpg) repeat-x; padding: 0; margin: 0 0 0 30px; height: 45px; display: inline; text-transform: uppercase; } #nav ul li { display: inline; margin: 0; padding: 0; } #nav ul li a { display: block; width: auto; margin: 0; padding: 0 15px; border-right: 1px solid #dadada; border-left: 1px solid #fafafa; border-bottom: none; color: #555; font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; } #nav ul li a:hover, #nav ul li a:active { color: #326ea1; } #nav ul li#current a { background: #DBDBDB url(nav-current.jpg) repeat-x; } My dropdownmenu CSS code: PHP Code: /* menu styles */ #jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #324143; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #24313C} #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white} #jsddm li ul li { float: none; display: inline} #jsddm li ul li a { width: auto; background: #A9C251; color: #24313C} #jsddm li ul li a:hover { background: #8EA344} Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working, So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated. Thanks in advance Hi, I am having problems with a jQuery suckerfish drop down menu. The HTML seems fine so I can only assume the problem is with the CSS. It is a vertical drop down menu with three levels, and level two is supposed to drop down to the right hand side of level one, but it is currently dropping straight down and overlapping level one. Level three sits correctly to the right of level two though. Here is the code: /*** ESSENTIAL STYLES ***/ .sf-vertical, .sf-vertical * { margin: 0; padding: 0; list-style: none; } .sf-vertical { line-height: 1.0; } .sf-vertical ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-vertical li:hover , .sf-vertical li.sfHover, .sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active{ width: 100%; } .sf-vertical li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-vertical li { position: relative; } .sf-vertical a { display: block; position: relative; } .sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-vertical li:hover li ul, ul.sf-vertical li.sfHover li ul { top: -999em; } ul.sf-vertical li li:hover ul, ul.sf-vertical li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-vertical li li:hover li ul, ul.sf-vertical li li.sfHover li ul { top: -999em; } ul.sf-vertical li li li:hover ul, ul.sf-vertical li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ .sf-vertical { float: left; margin-bottom: 1em; } .sf-vertical a { border-left: 1px solid #fff; border-top: 1px solid #CFDEFF; padding: .75em 1em; text-decoration:none; } .sf-vertical a, a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #13a; } .sf-vertical li { background: #BDD2FF; } .sf-vertical li li { background: #AABDE6; } .sf-vertical li li li { background: #9AAEDB; } .sf-vertical li:hover, .sf-vertical li.sfHover, .sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active { background: #CFDEFF; outline: 0; } /*** arrows **/ .sf-vertical a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position:relative; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: -10px 0; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ .sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-vertical ul .sf-sub-indicator { background-position: -10px 0; } .sf-vertical ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-vertical ul a:focus > .sf-sub-indicator, .sf-vertical ul a:hover > .sf-sub-indicator, .sf-vertical ul a:active > .sf-sub-indicator, .sf-vertical ul li:hover > a > .sf-sub-indicator, .sf-vertical ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul.sf-shadow-off { background: transparent; } Any help or suggestions would be really appreciated. Let me know if you need any additional information. |
|||||||