|
CSS - How To Make A Colored Background Behind Text?
I am very, very new at web design, and would like to make a colored background behind text, although I am sure that is not the right name for it!
For example, in this this website I would like to emulate how to make that curved rectangular background behind the Online Poll, but I have no clue what the name or the source code behind it that makes it so! If anyone could even just give me the proper name for it so I can google it, I would be very thankful! Similar TutorialsCan some explain (briefly) how one goes about specifying CSS styles for different link areas in a page. for example, I want navigation links to have a different set of "rules" than footer links. ted Hi all, I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code: Code:
.nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
.nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px; border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
.nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
Note the a.inquiry:hover above - I added that entire line in hopes that would change the color. And here is the HTML in question: Code:
<!-- Navigation Level 3 -->
<div class="round-border-topright"></div>
<h1 class="first">TurnkeySolutionsNow</h1> <!-- Navigation with grid style -->
<dl class="nav3-grid">
<dt><a href="whyusetsn.html">Why Use TSN</a></dt>
<dt><a href="productdevelopment.html">Product Development </a></dt>
<dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
<dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
<dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
<dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
<dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
<dd><a href="productdevelopment-industries.html">Industries</a></dd>
<dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
<dt><a href="contact.html">Contact Us</a></dt>
</dl>
<p> </p>
</div>
The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues. Any help is appreciated - thanks in advance! Patrick Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working. html is... <span class="yellowbox"> <form name="view constituent" method="post" action="constituents_viewm.php"> <input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span> and css is... .yellowbox { background-color:#fdffe3; margin:10px; padding:10px; border: 1px #000; font-size:13px; width:420px; height:100px; } .link_submit { color:#116500; font-size:17px; font-family:Calibri, Arial, Helvetica, sans-serif; background:none; border:none; display:block; text-decoration:underline; cursorointer; float:left; } any help will be greatly appreciated. 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. Hi All, I would like to figure out a way to have my menu item font stay a different color if the user is on that page. I thought that the a:active would do the trick, but apparently a link is only active immediately after clicked and does not carry over to the page that was linked. I am trying to stay away from images and javascript because I can't get them to look right against my background, so I was wondering if there was a css way to create this effect without changing every page. I have a header file that contains this menu because I will be updating it frequently with new links and pages and would rather only change it once... thanks! I am looking for a way to color the padding/margin/border of all the elements on my page, so that I can, with a quick look, see how the elements are interacting with eachother. If you have used firebug, then you know what I mean, because in Firebug, when you hover over an element in "inspect" mode it shows the margins and padding in different colors. I have heard of diagnostic CSS before, but have never seen anything quite like this. Does anyone know how Firebug does it, or know of anything similar? I know the user can enable printing of bg grcs and colour, this is an administrative thing so I can put in the manual that they need to do that in their browser if they want to print a certain page. I have certain rectangles on the page that align perfectly with areas on the background graphic on the screen. However, when I print preview in Firefox this synch is lost and the rects don't line up with the bg graphic. Kravvitz will hate this page cuz it has a few xhtml errors. I don't know how to make those errors go away without ruining something else. For example, "no system id specified." Quote: Your document includes a DOCTYPE declaration with a public identifier (e.g. "-//W3C//DTD XHTML 1.0 Strict//EN") but no system identifier (e.g. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"). This is authorized in HTML (based on SGML), but not in XML-based languages. so if I put that system identifier in it then the page fails to lock if I render a secure version of it because http://www.w3.org is insecure content, and erodes consumer confidence. The "name" attribute well if you don't have it when you post, I don't think the posts will register it, will they? I have proprietery attributes also and they are kinda necessary. The rest of the errors I could probably clear, but 21 is not so bad compared to 2,874..... Anyway here is an example http://demo.tixrus.us/98 How can I get this page to print correctly??? Hi all, I think I came across it a while ago, but I can not find it now. There was this trick on how to make a CSS gradient background, it was something like background-color: #123456 50%; or something like it. That thing is supposed to fill up a table cell or an entire page with gradient background, if anybody knows what I am saying, assist me, please. I wish I could describe it better than that, but I don't think I can! Thank you, Chris Even when I zoom out to the least point, I want my background image in my webpage to stay normal size. How do I do this? I have a gradient background image that goes from dark to light. At the bottom of the table if the body of text grows too large the table will stretch past the length of the background gradient image exposing the bgcolor for the page (not acceptable). If I change the bgcolor of the table the color is applied over the background image. Isn't there a way to fix this with CSS? Thanks for any help!!! Like when I make a field.. <fieldset> <fieldset> How can I then make something like, when typing in <text> it'll stay in a locked field. And when clicking "Save" it will send the text to my email? Please help. Would be really cool with a code below. In the html below I want to make the text more narrow (to gert the letters cloer to each other). I read about Css-property font-strech but I cannot get it more narrow. Could someone help? Or is there another way to achieve this? This is the HTML: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css"><!--
h1 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial; text-align: left; text-decoration: none; line-height: 66px;}
h2 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial-black; text-align: left; text-decoration: none; line-height: 66px; }
h3 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial-black; text-align: left; font-stretch: ultra-condensed; text-decoration: none; line-height: 66px; }
-->
</style>
</head>
<body>
<H1>Communication Training</H1>
<H2>Communication Training</H2>
<H3>Communication Training</H3>
</body>
</html>
I know it's really easy but i forgot how to do it! Please post the code here thanks! Currently I have this: <div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this? edit: I can't use <pre> tags because the destroy the formatting in a more annoying way. Issue is I've got text that I want in a certain place on the page. I've run into this situation time and time again, thankfully I've always worked out a creative solution, however I've just been avoiding the problem. It's not something I can use center, or bottom or anything like that on. I've got an image that's in sort of an odd position on the page. I want to have a link directly centered under that image but I can't seem to get the text where I want it. Any suggestions? In the HTML below I use divs contentleft, contentcenter and contentright. Because the text under the Header Contentright is so long I would like to make a scrollbar for the text of contentrigth but withoud the Header contentrigth, so that you alwaus see the header when scrolling the text. Is this possible with these content-codes? This is the HTML I have so far: Code: <head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->
</style>
</head>
<body>
<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>
<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>
<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>
<div id="contentright">
<h1>Header Contentright</h1>
<p>This is the right column. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>
<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->
</div>
</body>
</html>
Hey folks, i'm trying to get the effect of the following image: http://www.dgemu.com/Images/first_steps.jpg Basically I got it all set up 'cept for Metroid's image, which is just driving me insane.. I used absolute positioning on the metroid image so I could use relative positioning on that table thingy and use z-index to put it there, but I'm having problems with the text - it goes behind the image ahhhh - what can I do? I was thinking perhaps adding relative positioning for the text too and make it above the image but what I want is to not touch the image - u know like u do float:right on the image - but I can't use float 'cuz then the z-indexing thing messes up.. hmm.. can anyone help me? I'm trying to make a small box that is entirely clickable with text inside that is not underlined. Could someone explain to me why this code does not work, and what I need to do to fix it? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica;
padding: 30px;
}
.box {
width: 250px;
height: 75px;
padding: 40px 10px 10px 25px;
background: #FFCE4E url('images/gradient_bg.jpg') repeat-x;
border-radius: 5px;
border: 1px solid #E8A935;
}
.box h3 {
font-size: 19px;
color: #333;
padding-bottom: 5px;
}
.box p {
font-size: 14px;
color: #CC0000;
font-style: italic;
}
a .box {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">
<div class="box">
<h3>Main text goes right here.</h3>
<p>Smaller italicized text goes here.</p>
</div>
</a>
</body>
</html>
I'm currently working on a page that has a 3-column layout. The layout is fine as along as the content of the columns doesn't extend passed its given width. Is there a way to have the text either wrap or extend without extending the div it's in. I have attached a pic of what's happening (this is only when I get errors, the rest of the content doesn't extend the div). Is there a way to hide the text that goes beyond the div width? CSS Code:
/* columns */
#lcol {
float: left;
width: 190px;
vertical-align: top;
}
#mcol {
float: right;
width: 350px;
padding-right: 10px;
vertical-align: top;
}
#rcol {
float: right;
width: 200px;
vertical-align: top;
}
/* gray box */
.gray_box_frame
{
background-color: #fff;
border: solid 1px #404040;
width: 100%;
padding: 0px;
margin: 3px 0px 3px 0px;
}
.gray_box_head
{
height: 18px;
background-color: #404040;
}
.gray_smm,
.green_smm
{
display: inline;
float: right;
height: 18px;
cursor: pointer;
}
.gray_box_content,
.green_box_content
{
margin: 0px;
padding: 5px;
}
I am using the CSS popup window to check the forms. But I cant find a way on how to make diffrent texts On the CSS Popup Window. I was doing it in the following way: but it was looking kinda dumb to me.. is there a smarter way to do that without needing to write the popupdiv evrytime i got a new text to write? Code: <style type="text/css">
<!--
#blanket {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/
top:0px;
left:0px;
width:100%;
}
#popUpDivAlert1{
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#popUpDivAlert2 {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
-->
</style>
Code: <div id="blanket" style="display:none;"></div>
<div id="popUpDivAlert1" style="display:none;">
Alert 1
<a href="#" onclick="popup('popUpDivAlert1')">Click Me To Close</a>
</div>
<div id="popUpDivAlert2" style="display:none;">
Alert 2
<a href="#" onclick="popup('popUpDivAlert2')">Click Me To Close</a>
</div>
|
|||||||