|
CSS - Stroke On Text
Hello,
If we can put a stroke on a text as a style using Photshop is it possible to use it on CSS alone? Similar TutorialsI 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. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> I'm having trouble with a page I'm working on- I posted here a few weeks ago with something sort of similar. This time, though, I'm at a loss, I've tried several different things but nothing worked. http://www.geocities.com/nny555/eup/newschedule.html As you can see, the div where the content is, the text is stretching right through the div. Is there any way to fix this? Hi, Howdo you get text and and image on the same line. I want text and 2 images on the same line but the image appears on the next line like a <br> has been entered. There is plenty of room for all data.Each has its own <div>. Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway. I want to know how to use CSS on just a little text. For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time. As another example, I want to render the following two lines Johnny G. Doe 123 West South Street in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>. I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it. I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know. Thanks. --Johnny Is it possible to have text run around a div positioned with absolute positioning? Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution. Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word? Thanks. OK, I have a few links stacked vertically and I'm trying to get them to align to the right. You can see the links here Please look at the sub navigation to the left of the big image. My CSS looks like this: Code: a.subnav{
font-family:arial,helvetica, sans-serif;
font-size:11pt;
color:#FFFFFF;
line-height:24px;
text-decoration:none;
text-align:right;
}
what am I doing wrong? How can I get the text to align to the right? - thanks Hi, I have a webpage that has a fixed background with a header. I want my content to be able to scroll without overlapping my header. Meaning, the content needs to be masked? Or on a different z-index? Or in a frame? I know these are possible but nothing seems to be working. Please help!!! HTML CODE: Code:
<div id="background">
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="safaris.html">Safaris</a></li>
<li><a href="lodging.html">Lodging</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div></div>
<div id="content">
<h1><span>About Us</span></h1>
<p> Welcome to Trompettersfontein. Our expertise is to create exclusive and
unique safaris, professionally assisting you in your most unforgettable
hunting experience. Originally a cattle ranch during the 1960's, we are
now a prominent name in the gaming and ranching industry. Located in the
Elisraas region, Lepahale, in the Limpopo province close to thabazambi and
the waterburg area creating a wildlife oasis making it a prime hunting ground
of South Africa. Situated on 1000 hectors, with special hunting permission
our total hunting area extends over 3000 hectors of typical bushveld area.
The terrain makes makes excellent meat hunting and bow hunting grounds.
Owned and managed by Marius Moolman, a professional game hunter since 1986.
An exceptional tracker with a vast knowledge of the bush and game, he has
studied the age-old natural relationship between predator and prey. He has
also had the privilege of hunting the Big 5 and is a great host and sense
of humour that will leave you with a longing of coming back soon.</p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
</div>
</div>
CSS CODE: Code:
body {
background:#000000;
margin:0px;
padding:0px;
width:100%;
}
#background{
background-image: url('Images/background2.jpg');
background-repeat: no-repeat;
background-position:top;
background-attachment: fixed;
margin:0px;
padding:0px;
width:100%;
height:100%;
z-index:-10;
}
#menucontainer {
width:650px;
margin:auto;
padding:150px 0 0 0;
}
#menu{
width:650px;
margin:0px;
position:fixed;
z-index:5;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: none;
}
a:visited, a:active {
color: #FF6600;
text-decoration: none;
}
#menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
text-decoration: none;
list-style-type:none;
margin:0px;
text-transform: uppercase;
font-weight: bold;
}
#menu ul li{
display:inline;
margin: 0px;
padding:3px 14px 3px 14px;
}
#content{
width:500px;
margin:auto;
padding:0 0 400px 0;
position:relative;
top:30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align:justify;
z-index:1;
}
h1 {
background: url('Images/about.png') no-repeat top left;
width:168px;
height:38px;
}
h1 span {
visibility:hidden;
}
p {
line-height: 18pt;
}
As I am pretty new to CSS (about 3 months now) please be patient if I dont understand very advanced coding. Thanks for your time and effort. Any help is much appreciated. I have a string of text. What I'd like to do with it is to have it displayed in an arc formation like a half circle. I've looked through a manual that I have but I've not finding anything. Any help would be appreciated. I have run into a problem in 2 of my pages in IE they Render fine in Firefox but in IE you cannot see the top part of the text and in some you don't incounter this problem. but when you refresh page the Title and author and the top text will not show in IE just disapper and it will show up when you Scroll or Highlight the text. I been trying to figure out this problem for quite sometime now. The First Page Second Page Code:
.top_article_pic {
float:left;
margin: 0 9px 0 0;
}
div#articles_bg {
width:850px;
background:#2A475F;
padding:24px;
}
div#articles_page {
background:#FFF;
border:1px solid #000;
padding:12px;
}
div#articles_page2 {
height:800px;
background:#FFF;
border:1px solid #000;
padding:12px;
}
span.h1 {
font-family:Arial,Verdana,Sans-serif;
font-size:2em;
color:#2A475F;
font-weight:bold;
}
span.author {
font-family:Arial,Verdana,Sans-serif;
font-size:.9em;
font-style:italic;
color:#2A475F;
}
div#articles_page p.main_article {
margin:18px 0 0 0;
font-family:Arial,Verdana,Sans-serif;
font-size:.8em;
color:#000;
}
div#articles_page p.main_article_p{
width:500px;
margin:18px 17px 0 0;
font-family:Arial,Verdana,Sans-serif;
font-size:.8em;
color:#000;
float:left;
background:#FFF;
}
img.right_thumb {
border:1px solid;
}
p.click_enlarge {
font:.8em Arial,Verdana,Sans-serif;
color:#2A475F;
}
div#articles_page p.main_article_p2{
margin:12px 0 0 0;
font-family:Arial,Verdana,Sans-serif;
font-size:.8em;
color:#000;
background:#FFF;
}
img.right_float {
float:right;
margin:0 0 0 15px;
border:1px solid #000;
}
p#left_article {
margin:10px 0 0 0;
color:#000;
font:.8em Arial,Verdana,Sans-serif;
}
p.article2 {
margin:9px 0 0 0;
text-align:justify;
font:.8 Arial,Verdana,Sans-serif;
width:530px;
font:.8em Arial,Verdana,Sans-serif;
}
div.right_pic {
width:161px;
padding:10px;
font:.8em Arial,Verdana,Sans-serif;
color:#2A475F;
margin:0 10px 0 0;
float:left;
background:#ccc;
border:1px solid #000;
}
Thanks in Advance Hi I have a CSS drop down menu but when I hover over one of the dropped down items the text the text on the original hover button dissapears. This is because the text is the same color as the rollover color. How could I make it so that the rollover text color is different? At the moment only the drop down items text changes color on hover Code:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color:#f0eccd;
}
#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
width:95px;
height:30px;
display:block;
color:#ff9a29;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color:#ff9a29;
}
#navMenu ul li:hover ul li a:hover {
background:#ff9a29;
color:#FFF;
}
#navMenu a:hover {
color:#FFF;
}
Thanks Thomas Hi, I have a site that is givign trouble when trying to highlight text. For some reason, when I highlight the text, the main image of the page is highlighted as well. It works fine in FF, I can highlight JUST the text, but in IE, it wants to include everything else. I thought it was layer order, but I adjusted that and it seems not to be it: Here's an example page. Try highlighting some of the bio text in IE and youll see what I mean. http://leahdevonmusic.com/content/view/6/26/ Can anyone help? This is per client request, they want people to be able to copy and paste her bio when they visit the site for publicity reasons. You can still copy and paste the text fine regardless of the image beign included in the highlighting, but they dont want people to be confused by the image being highlighted as well.... |
|||||||