|
CSS - Excluding Inked Images From Link Properties.
Here is another question. Is there an easy way to excluded images from displaying the link properties I've specified in the stylesheet? Basically on hover the links get a background color and underline. But I also have images that are link that I don't want to do that too.
Here is the site. You can see what's happening on the images towards the bottom. Let me know if posting the code would be easier. Thanks. Similar TutorialsI have a style for links that I use in my main navigation menu, like so: Code:
a.main_nav
{
color:#FFFFFF;
font-size:12px;
}
a.main_nav:link{ text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }
How can I wrap all the links in a <div> and not have to specify the class on each <a> ? Guys I have the following issue regarding links and colours: The colours of links are set thus: a:link : White; a:hover : Blue; a:visited : White; The problem I have is that I want a hovered link to turn blue even if it has been visited. Is there anything I can do about this...? hi guys, silly question i want to make a certain portion of my text smaller, but when i put a span like this around it: <span style="font-size: 10px;"> then only the plain text, and not the links, decrease in size... what should i add? thanks glog On this page: http://www.artquestbeauty.com/css/facials.html, the images appear just the way I want them to. On this page: http://www.artquestbeauty.com/css/skintreatments.html the image of the girl in the orange dress is pushed way down in the div, though I inserted it right next to the "Back Facial" heading. I have a lot of "sandbag" divs that wrap the text around the background image and around the leftimage div. I was thinking this was the problem, but since it works fine on other pages, I'm back to square one. Can anyone see what I'm missing? THe HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <link href="wrap.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> </head> <body> <div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu"> <li><a href="../Library/index.html">Home</a> </li> <li><a href="../Library/about.html">About</a></li> <li><a href="../Library/contact">Contact Us</a></li> <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a> <ul> <li><a href="#">Condition-Specific Treatments</a></li> <li><a href="../Library/facials">Facials</a></li> <li><a href="#">Home Care</a></li> <li><a href="#">Lash and Brow Tinting</a></li> <li><a href="#">Lash Extensions</a></li> <li><a href="#">Makeup Application</a></li> <li><a href="#">Permanent Makeup</a></li> <li><a href="#">Skin Growth Removal</a></li> <li><a href="#">Tattoos</a></li> <li><a href="#">Tattoo Removal</a></li> <li><a href="#">Waxing</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">FAQs</a></li> </ul></div><!-- #EndLibraryItem --><div id="foot"><ul> <li>Patsy Keim </li> <li>1395 Sattler Road Suite #2</li> <li> Canyon Lake Professional Building </li> <li>Canyon Lake, TX 78132 </li> <li>830 964-4315<br /> <a href="contact.html">Contact Us</a> </li> </ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>. <!--end of foot div--></div> <div id="top"></div> <div id="intro"> <!--sandbag divs--> <div id="sb1"><span></span></div> <div id="sbr1"></div> <div id="sb2permanentmakeup"><span></span></div> <div id="sbr2"></div> <div id="sbr3"></div> <div id="sbr4"></div> <div id="sbr5"></div> <div id="sbr6"></div> <div id="sbr7"></div> <div id="sbr8"></div> <div id="sbr9"></div> <div id="sbr10"></div> <!--end sandbag divs--> <h1>Permanent Cosmetics</h1> <p>See also <a href="faq.html">FAQs</a>.</p> <p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p> <p>Call 830 964-4315 today for your free consultation!</p> <h3>A Brief History of Permanent Cosmetics</h3> <p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p> <h3><br /> Safety and Comfort Concerns</h3> <p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p> <h3>Some Permanent Cosmetic Options</h3> <p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p> <p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p> <p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p> <p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p> <h2>Call today for your free skin analysis and consultation.</h2> </div> <div id="leftimagepermanentmakeup"></div> <!--end of text div--> </div> </body> </html> Here's the css: Code: @charset "utf-8"; /* CSS Document */ html { text-align: center; } body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align: center; margin: 0px; padding: 0px; } #content { position:relative; min-height:852px; z-index:1; background-image: url(images/bgdouble.jpg); background-position: right top; border: thin solid #E8D7B9; text-align: center; margin: auto; width: 1000px; background-repeat: repeat-y; } #text { top: 212px; border: medium none #069; position: absolute; height: 103px; width: 630px; text-align: justify; } #top { position:relative; width:1000px; height:215px; z-index:2; background-image: url(images/top.png); background-repeat: no-repeat; top: 30px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #leftimage { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/PerfectSkin1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; } #leftimageabout { position:absolute; width:250px; height:400px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-color: #FFF; text-align: left; list-style-image: url(images/flowerbullet.png); } #leftimagefacials { position:absolute; width:250px; height:700px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/facial.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagehomecare { position:absolute; width:250px; height:212px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/skincondition1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagemakeup { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/clientphotos/makeup1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimageskintreatments { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/SkinProblem1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagestattoos { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/tattoo1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagefaq { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/enzymepeel.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagelashandbrow { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/eyelashes1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagepermanentmakeup { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/permanentcosmetics1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #intro { position:relative; width:auto; z-index:3; top: -30px; margin-top: 0px; margin-right: auto; margin-left: auto; left: 6px; padding-left: 5px; text-align: justify; list-style-position: outside; list-style-type: disc; } h1 { font-size: 24px; font-weight: bold; color: #CAA560; font-style: oblique; letter-spacing: 0.2em; text-align: center; } h2 { font-size: 16px; color: #791B1B; font-style: italic; letter-spacing: .1em; padding-left: 24px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left top; height: 23px; } #foot { position:absolute; width:1000px; height:35px; z-index:2; bottom: -55px; padding-bottom: 0px; } #foot ul li { display: inline; list-style-type: disc; padding-left: 25px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left; } #middle { position:absolute; width:383px; height:316px; z-index:3; top: 315px; left: 249px; } #underimage { position:absolute; width:630px; height:115px; z-index:2; top: 630px; } #sb1{ width: 1px; height: 130px; float: left; clear: left; margin: 0px; padding: 0px; } #sb2 { width: 225px; height: 400px; float: left; clear: left; margin: 0px; padding: 0px; } #sbr1{ width: 375px; height: 130px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr2 { width: 375px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr3 { width: 375px; height: 20px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr4 { width: 400px; height: 120px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr5 { width: 325px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr6 { width: 375px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr7 { width: 475px; height: 180px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr8 { width: 365px; height: 85px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr9 { width: 350px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr10 { width: 375px; height: 2455px; float: right; clear: right; margin: 0px; padding: 0px; } #sb2homecare { width: 225px; height: 230px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2facials { width: 225px; height: 700px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2makeup { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2skintreatments { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; }#sb2tattoos { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2faq { width: 225px; height: 315px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2lashandbrow { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2permanentmakeup { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } .align-right { float:right; margin: 0 0 15px 15px; } .align-left { float:left; margin: 0 15px 15px 0; }
http://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } Hello, I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page... ------------------------ A:LINK {font-family: Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; font-size:12pt; font-weight:bold;} ----------------------- but how can i make it so each class has a differnt a:link, a:visited, ect. Thanks! http://localhost/donkeyshare/content.php?cID=portal PHP Code: /* page properties */ .properties {background-color: #EEEEEE; margin: 0 px} /* table configuration */ .table1 {border: 1px solid #BBBBBB; color:#333333} .table2 {background-color: #DDDDDD; font-weight:bold; font-variant:small-caps; font-size:12px; font-family:verdana} .table3 {background-color: #EEEEEE; font-size:12px; font-family:"Courier New";} /* link configuration */ A:link {color: #333333; text-decoration:underline} A:visited {color: #333333; text-decoration:underline} A:active {color: #333333; text-decoration:underline} A:hover {color: #333333; text-decoration:overline} What do i do if i want to define differnt link properties to table 3, thats difernt then table 2. please take a look and tell me what you think. I'm having some problems getting rid of the border which appears around an image when you turn it to a link. What I'm after happening is like on this forum, where it says new topic there's no blue border around it. I've looked at the source but can't figure out the bit that controls it, so if anyone could help it would be great. Well I have images that I am using as link: Code: <dl class="links"> <dt><a href="index.html"><img class="border" src="images/home.gif" alt ="home" /></a></dt> <dt><a href="aboutme.html"><img class="border" src="images/aboutme.gif" alt ="About Me" /></a></dt> <dt><a href="blog.html"><img class="border" src="images/blog.gif" alt ="Blog" /></a></dt> <dt><a href="guestbook.html"><img class="border" src="images/guestbook.gif" alt ="Guestbook" /></a></dt> <dt><a href="tutorial.html"><img class="border" src="images/webtutorial.gif" alt ="Web Tutorial" /></a></dt> </dl> What I am trying to do is get this into the CSS of my page as I want to make multiple skins for the page. But I am at a loss of how to get the image name of the link into it, so that in different style sheets I can use different pictures. Please Help, Bumfluff To emphasis a link I put a small image (its an "X") before the link. See attached picture. GOOD this works well for text links: Code: <a href="...">text</a> ---> X text BAD I integrate a picture and define the picture as link Code: <a href="..."><img src="..."></a> ---> X <image> How can I avoid to show the X in front of the picture? Here is my CSS code: Code: #content a {
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
padding-left: 22px;
text-decoration: none;
color: #990000;}
#content a:hover {
text-decoration: underline;}
Something like this does not solve the problem Code: 01 #content img a { background-image: none; }
02 #content img>a { background-image: none; }
Any idea is greatly apreaciated. Thanks. I am having a problem with some css image links not showing up in some browsers (IE 7, for example). Seems to work on most Mac browsers (of course!) Any help is appreciated! I've tried a few different things with the code, which explains the few items that are commented out. HTML: <a href="contact-form.php" class="more-info"><img src="images/spacer.gif" width="156" height="79" /></a> <a href="charity.php" class="community"><img src="images/spacer.gif" width="154" height="72" /></a> CSS: a.more-info:link { display:block; overflow:hidden; text-indent:-9999px; width:156px; height:79px; background:url(../images/more-info2.png) no-repeat 0 0; margin:6px 0 0 3px; } a.more-info:hover{ background-position: -156px; } a.community:link{ display:block; overflow:hidden; text-indent:-9999px; width:154px; height:72px; background:url(../images/community.png) no-repeat 0 0; margin:6px 0 0 3px; } a.community:hover{ background-position:-154px; } I use the following CSS for my links, and use a border-bottom to give them a dashed underline... Code: a {
color: #AC4870;
border-bottom: 1px dashed #DDDDDD;
text-decoration: none;
}
a:hover {
color: #DDDDDD;
border-bottom: 1px dashed #AC4870;
text-decoration: none;
}
This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links? Thanks I see that document.getElementById('foo').style.width is a valid property, but yet I see documentation which accesses the style's properties as an array element, example: document.getElementById('foo').style['width']. Are both equivalent? What would be the property equivalent for 'text-align'??? document.getElementById('foo').style.textAlign?? Where can I find the docs for this? I'm trying to write a function that will resize a few <div>s on my page when it loads. Before I got too far, I wrote a simple function to alert the current height of each <div> to be resized. It looks like this: Code: function resizeDivs()
{
var saidDivs = new Array("cBodyMid", "cLeftPane", "cLeftPanelData", "cRightPaneData");
for(i=0;i<saidDivs.length;i++)
{
var el = document.getElementById(saidDivs[i]);
curElHeight = el.style.height;
alert(curElHeight);
}
}
All I get is 4 empty alert boxes. All of the styles are defined in an external style sheet a la: Code: #myDiv {
height: 25px;
}
and they are all assigned to <div> tags a la: Code: <div id="myDiv">here's my div</div> However, if I create a div with the height specified as an inline style, it works. I've got to be missing something really simple here. Anyone know how to get that height property? You know how you can modify Mozilla css with properties like css Code: Original - css Code -moz-border-radius: 4px 4px 4px 4px; -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-radius: 4px 4px 4px 4px; Is it possible to get something like this to work with IE? See on F/F the box is rounded.. but on IE its just a complete square ( duh that's because I'm modding Mozilla css properties ). Hi! Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality. Regards Bjorn Is it necessary to declare properties like : border-bottom:none; text-transform:none; My question is why would I declare them (above) ? Is it not assumed that unless I need something like text-transform:lowercase; I should not declare text-transform:none; ...this just add up more unnecessary lines of code. What are the default properties of selectors? if not declared would it be safe to asumme that those defaul to 0, none, etc depending of the selectors? tahnks I noticed that if you place a border around an object with all sides having different colors, that a diagonal appears in each corner where the two colors meet. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#my_id {
width: 100px;
height: 100px;
border-top: 10px solid red;
border-bottom: 10px solid green;
border-left: 10px solid blue;
border-right: 10px solid black;
</style>
</head>
<body>
<div id="my_id"> </div>
</body>
</html>
Is there anyway to override this so that for example the bottom border extends from left to right edge at a height of 10px (using the above example) instead of gradually decreasing the height as it nears the edge? Edited to add: I know that I could achieve this effect by nesting divs but I was curious as if there was a simpler solution. Hey all, I'm developing an app for a client, and I've implemented quite a bit of it already, and it includes CSS. Code:
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
}
</style>
As you all might know, this changes all <td> tags into this particular style. Is there a class that I can include that contains NO properties (default)? I'm not even sure if it's possible. I just don't want to go back and add class tags everywhere. |
|||||||