|
CSS - How Can I Control The Location Of Html Select Option.
I have a page where the <select> is very screen right. it has little room to show the full name in the <option> so i do like "S - Summary". You only end up seen the S. When the dropdown happens, my clients wants to see the whole name. This works in FF, but not IE. Can i via CSS control the location of the options. Say move them left 50px. Thanks.
Similar TutorialsHi. I want to have full control over the colors of a SELECT element. Example: I want to control the color behind the arrow at the right in the SELECT (the area where you click to expand the SELECT). Is that doable using CSS? If not.. any other way to control this (not from client browser, but from developer code)? Whats the best way to align text in select option drop downs that works also in I.E. 6 and 7 as well Thanks Hello All, following is my code Code: <html>
<head>
<style type="text/css">
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<select name="slt" >
<option class="test">value1</option>
<option>value2</option>
<option>value3</option>
</select>
</html>
In the above code i am trying to apply style for first option i got the color for first option but not the size and weight. The font-size and font-weight attributes are not applied.... can some one help me out in this... Please help me ASAP Thanks in Advance Ramesh currently i am trying to get my navigation to line up in IE, works great in FF... currently i have something that kinda works... Code: * html #navigation {
margin-top:-24px;
}
but it has fatal flaws.. is there any setting i can flick on to get IE to look like FF... here is the link.. Navigation Menu Issues in IE also, for some reason there is a wider gap on the right of the login boxes then in FF... i could define a * html code for it, but would rather not. is there anyway to get the arrow out of the select box? so it just displays the text options and the pull down menu. the arrow sucks. i know you can adjust properties of the arrow, like color, but that does not interest me. any ideas? I want to use the following script found here. I want to alter it so that on rollover a DIV is shown instead of the IMG. Within the DIV will be the IMG and some copy. I have tried to do this but always end up with the rollovers not placing correctly, or the copy shows at all times. Thanks for the suggestions and help. Hi I am making a website where i have a main heading on all pages' start. I want to control its looks with CSS, i have an external CSS that controls links and body text etc. i have tried in external CSS Code: H2 {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFCC99;
}
and on pages i use <h2> heading is here </h2> but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet. Please shed some light on this... thanks Hello everybody, I not an expert in CSS but getting better at it. I'm trying to control the look and feel of a table but its not working. Any help you can give me would be greatly appreciated. <div id="page-container"> <div class = "data_table"> have the table all setup and some css works and some done. </div> </div> Quote: <body> <div id="page-container"> <div class = "data_table"> <table width="760" border="1" cellpadding="0" cellspacing="0"> <tr> <th> Ticket # </th> <th> Description </th> <th> Created </th> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.yahoo.com/');"> <td> 473875 </td> <td> unable to install network card </td> <td> Dec.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.microsoft.com/');"> <td> 474723 </td> <td> Need help setting up my router </td> <td> sept.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://Imar.Spaanjaars.Com/');"> <td> 463175 </td> <td> Need microsoft word training</td> <td> Jan. 07.08 </td> </tr> </table> </div> </div> from external css file Quote: #data_table .table { border: 1px solid black; border-bottom: 1; border-left-style: solid; } #data_table .th { border: 1px solid black; border-bottom: 1 solid black; background: lightgreen; } #data_table .td { border-bottom: 1px solid black; border: 1; } Hello I have the following CSS rule for some text: .Text { font-size:13; color:#2C506A; font-weight:bold; } When the browser renders it, it uses anti-aliasing to give it a better look. I am interesting in displaying the same text without anti-aliasing. Is this possbile via CSS? is there a way to tell the browser to not anti-alias the text? If so, how? regards Hi, I not very good at CSS and I need to create a page that shows divs in other order that are in the script: in my page i want to be something like this: Code:
<body id="body" >
<div id="bodyHolder" >
<div id="mainHolder" >
<div id="mainColumn">Here will be the main content</div>
<div id="leftColumn" > Left Column</div>
</div>
<div id="topLogoHolder">Site Logo</div>
<div id="topMenuHolder" > Top Menu</div >
</div>
<div id="footerHolder"> Footer</div>
</div>
but I want to show: Site Logo, Top Menu, Left Column, Main Column, Footer My problem is with Footer. I can't get to position at the bottom of page (not at the window) because the Main Column is not fixed. The CSS code is : Code:
body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;}
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px; width:810px;}
#leftColumn {text-align:left; display:block; float:left; width:180px; }
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block; position: absolute; bottom:0px; height:100%; clear:both;}
I really don't what to try (google gives me no clue... all my attempts failed ) I'll appreciate any help! Thanks a lot in advance Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> 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}
Hello I am looking for the correct way to control the alignment of elements in my HTML page. in the old days, I used to add the <center> tag whenever I wanted to center some content. if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center"> I also noticed the CSS rule text-align. My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules regards Hello I know that on IE I can control the look of the scrollbar via: * scrollbar-face-color * scrollbar-highlight-color * scrollbar-shadow-color * scrollbar-3dlight-color * scrollbar-arrow-color * scrollbar-track-color * scrollbar-darkshadow-color Is it possible to control its look also in Firefox 1.0 and Opera 7.54? regards Hi there, Check out this screen shot: ...okay, I guess I can't attach a shot or paste a URL to the shot.. I'm using a hoverstate on a dropdown of orange with reverse text - I'm able to get both the background and the text to do what I want but I can't seem to control the WIDTH of the background. Here's where I'm controlling that backgound (orange) behind the dropdown items. #nav ul li a:hover { text-decoration:none; background-color:#d3862a; color: #ffffff; height: 15px; width: 100%; padding: 0px; margin: 0px; display:block; does anyone out there have any ideas? THANKS SO MUCH! I'm loading a pdf document into my html document through an iframe. The document it is being embedded into is a layer that acts like a popup window who's width and height can be adjusted by dragging the window. I'm trying to have the iframe maintain 100% height, but can't seem to get it. <div style="height:350px;"> <iframe src="test.php" height="100%" width="100%"></iframe> </div> Now if I change the height from 350 to 100% on the div element, the iframe will resize to fit to 100% as the window is resized. However the downside to this is that when the iframe initially loads it's only about 50px in height. Suggestions on how to both maintain 100% and initialize at a fixed width? Can I use CSS or javascript to control the page details of an IFRAME? Such as printing in landscape orientation? If it is possible, how? Hi I have the html below and I only want to display the "initial text" and the "some more text" bits of text. Is this possible using only CSS without any modifications to the html e.g. adding id's ? <div id="snav"> <p><span id="somespan">You are he <a title="home page" href="/content/index.html">Home</a> <a href="http://www,saving.com">initial text here </a><br />Some more Text here.</span></p> </div> thanks. G Im having problems dividing 2 divs into 2 columns. In the following code , I would like "category odd" to appear on left, and "category even" on right- on the same row The current css for the columns is: .categories .categories1, .categories .categories2 {display:inline-block} Working perfect in firefox, not working at all in explorer 6+7. Quote: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .categories {width:950px;} .categories .categories2 { display:inline-block; width:400px; } .categories .categories1 { display:inline-block; width:400px; } .categories .categories1 .categoriesheader1 {width:300px} .categories .categories2 .categoriesheader2 {width:300px} --> </style> </head> <body> <div class="categories"> <div class="categories1"> <div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div></div> <div class="categories2"><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div></div> </div> </body> </html> |
|||||||