|
CSS - Styling Text - Different Style For The Same <p></p>
Hi,
Is it possible to style text on the same line like so.... T est Regards Chad Similar TutorialsI set up a class (named "emphasized") to be bold, italic and color #087112. The color is being applied but for some reason the font is not appearing bold or italicized. (See "Introduction to EFT" text.) The bullets (set up in css as id selector "li") are not being styled either (same thing, the color is applied but not the list styling). Since I'm a new user I'm not allowed to put links in my post but you can see the pages he HTML page can be found at tinyurl dot com /da97nb CSS can be found at tinyurl dot com /de9tqe Help! And thank you! Hi, I've recently built my first site using the Magento eccomerce paltform. I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area. This only happens in IE. I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it. Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page. Thanks, Tim Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Here's the CSS: Code: #tabnav {
float:left;
width:100%;
background:#FFFFFF url("tab_background.png")
repeat-x bottom;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 13pt;
}
#tabnav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#tabnav li {
float:left;
background:url("tab_inactive_right.png")
no-repeat right top;
margin:0;
padding:0;
}
#tabnav a {
display:block;
background:url("tab_inactive_left.png")
no-repeat left top;
padding:8px 15px 4px;
}
#tabnav a:link{
color:293356;
text-decoration: none;
}
#tabnav a:hover{
color:596eba;
text-decoration: none;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabnav a {float:none;}
/* End IE5-Mac hack */
#tabnav #current {
background-image:url("tab_active_right.png");
}
#tabnav #current a {
background-image:url("tab_active_left.png");
padding-bottom:5px;
}
I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ? <input type="text" name="trans1_1" size="6" value="170"/> Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time. http://www.lockheed-martin.co.uk/css/full_layout_test.html ok if you go there, you will see a text resize functionality, if you decrease the browser size, this text will fall out of the border.. any way to fix that? also I was trying to align the menu to middle but margin:auto isnt working like it did for the body? finally I want to style forms without using floats or br but they are not playing ball.. (well the code I have, I think is poor but it works for them but not for submit button which I would like to be on its own) Code:
form {
width:30%;
}
fieldset, input {
color:green;
border:1px solid green;
}
legend {
margin-left:0.5em;
}
label{
white-space:pre;
margin:0 1em 0em 1em;
}
input {
width:50%;
margin-bottom:1em;
}
input[type="submit"] {
padding:2px;
margin-left:1em;
width:auto;
}
form: Code:
<form action="" method="post">
<fieldset>
<legend>Example of a form</legend>
<label>First Name</label>
<input type="text" name="firstName" size="10"/>
<label>Last Name</label>
<input type="text" name="lastName" size="10"/>
<label>Some options</label>
<input type="checkbox" name=""/> Some
<input type="checkbox" name=""/> other
<input type="submit" name="submit" value="submit"/>
</form>
PS> if you go to the link and view source, you will see that I have used very few ids and instead used CSS selectors.. any comment on code would also be appreciated.. The reason for this is mainly for me to learn these selectors & work with them.. and this is the reason I have not used float property.. which I am amazed that you could replicate using overflow:hidden and top & left to align elements.. I have this for my td tag: Code: <td bgcolor="#ffffff" onclick="window.location.href='...'"
onmouseover="this.style.backgroundColor='#f1ffff';
this.style.cursor='pointer';"
onmouseout="this.style.backgroundColor='#ffffff'">
I'd also like to add code to change the text color onmouseover. Can someone post how. Also, why is it different code to change a style when the code is embedded in an event as opposed to an external css file. For example to the change the background color of a <td> from a css file, it would be background-color, but internally its backgroundColor. This seems very conter-intuitive. Where can I find the available style options for the internal style. The W3C site only has for external and <style> tags in the header.Thanks! Can anyone tell me how to make a form text field one solid color? No border or anything, just a rectangle box any color. Thanks! Hey, I'm having a problem changing the background of a text input field to white. The problem seems to go away when I remove the javascript...I know next to nothing about javascript. Any ideas? Code: <label for="email"> <input size=30 id="email" name="iemailaddress" value="Enter your email address here" onFocus="functionEmpty(this.form)" onBlur="emptyFill(this.form)" onKeypress="subEnable(this.form)"> </label> Code: input {background-color:white;}
I'm having a problem getting the text in my nav bar to be formatted with my CSS sheet. ***HTML*** <div id="navbar"> <ul id="nav"> <li class="current_page_item"><a href="">Home</a></li> <li><a href="">Features</a></li> <li><a href="">Purchase</a></li> <li><a href="">Theme Demo</a></li> <li><a href="">Blog</a></li> <li><a href="">Affiliates</a></li> <li><a href="">Support</a></li> <li><a href="">Contact Us</a></li> </ul> </div> ***CSS*** #navbar { width: 960px; height: 47px; do not change Code: Original - do not change Code font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #FFF; font-weight: bold; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #FFF; font-weight: bold; margin: 0px auto 0px; padding: 0px; } The text values aren't able to change for some reason, but the width and height values, padding, etc are. If someone could please help me trouble shoot that would be great. Thank you Paul I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) Hi, I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line. I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other! My page code: <div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1> </div> My stylesheet code: #garden-designer-title { position:relative; left:0px; top:0px; padding: 0; margin: 0; width:526px; height:51px; z-index:7; } #garden-designer-title a { position:relative; font-size: 46px; font-family: verdana, arial, helvetica, sans-serif; color: #009999; font-weight: normal; text-decoration: none; } #garden-designer-title h1 a { display: inline; font-size: 29px; font-family: verdana, arial, helvetica, sans-serif; color: #9482A4; font-weight: normal; text-decoration: none; } Does anyone know what I'm doing wrong?! Many thanks! 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! Hi Guys, Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table. All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad. I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this? Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table? Charlie I see that layout on my site is completely broken in IE7... funnyfurniture.net Could anybody help me to fix my css... Hi, my xml code is: <room> <features> <pool/> <Aircon/> <Radio/> <DVD/> <beds double="2"/> </features> </room> <room> <features> <pool/> <TV/> <VCR/> <beds twin="1" double="2"/> </features> </room> i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list. This is the code i have so far: features{ } features:before { content:"Features"; font-weight:bold; } beds:before{ content:"Beds: "; } beds[sofa-bed]:after{ content:attr(sofa-bed)" x Sofa-bed "; } beds[double]:after{ content:attr(double)" x Double "; } beds[twin]:after{ content:attr(twin)" x Twin "; } The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed. Any idea's? I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet. The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page. Bottom of the Page http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/ The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code. One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags. The following class style did not produce the <textarea> desired attributes. Code:
pre.CodeExample {
/*background-color: transparent;*/
border: medium inset #CCCCCC;
font-family: "Courier New", Courier, monospace;
margin: 1em 2em 1em 2em;
overflow: auto;
padding: .5em .5em .5em .5em;
white-space: nowrap;
}
Please let me know what are the default CSS attributes for the <pre> and <textarea> tags. Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link. http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed. div.ExampleOutput pre.CodeExample I have a menu constructed <div><ul><li><a><img><p>. The li is margined as 16% to space a given number of links across the page in the 100% div. I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work. Any ideas how I can get the <a> border to surround the <img><p> tags? Hello, I am creating a simple navigation bar using a list. My anchor tags inside each list item have a background and margin. The problem is they are overlapping. I then added to the li tag margin-top: 20px. The problem is that the bottom background of the last element disappears. I think I might doing something wrong on my styling because when I fix something, something else gets wrong. Could someone, please, help me out? HTML: <ul id="wmNavigation" class="Bar"> <li> <a title="Page1" href="http://www.name.com/page1">Page1</a> </li> <li> <a title="Page2" href="http://www.name.com/page1">Page2</a> </li> <li> <a title="Page3" href="http://www.name.com/page1">Page3</a> </li> <li> <a title="Page4" href="http://www.name.com/page1">Page4</a> </li> </ul> CSS: ul.Bar {} ul.Bar li { font: normal 1.2em Verdana, Geneva, sans-serif; letter-spacing: 0.1em; margin-top: 20px; } ul.Bar li a { background-color: #202020; color: #E2E2E2; padding: 4px 10px 6px 12px; text-decoration: none; } ul.Bar li a:link , ul.Bar li a:visited {} ul.Bar li a:hover, ul.Bar li a:active, ul.Bar li a:focus { background-color: #303030; } Thanks, Miguel |
|||||||