|
CSS - Question About Standard Tags
I downloaded a pre built template (which I never do but I needed something fast) and after validating the website I noticed they used a lot of standard tags like figure, header, footer, and article. The validator does not like that one bit.
Please see he Validator Is there a way around this as far as adjusting the doc type or anything? Will this at all hurt SEO rankings? Thanks! Similar Tutorialshow do you set the width with CSS? i'd like to have a table with two columns, 70% and 30% with text-align left on the 70%, and text-align right on the 30%. any ideas? thanks. I am just wondering if there is such a thing as a standard way of writing html to suite a standard css. So that, for example you could download a new 'standard' css file and have it work straight away with your old html. Sometimes the guys on oswd.org come pretty close, but the html always looks messy. Rogue div tags all over the shop. Can anyone point me to a resource on this, or a design forum where they practise it? Thanks. C I thought that setting properties for a and a:hover like this: PHP Code: a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; text-decoration: none; border-bottom: 1px dashed #960000; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; border-bottom: 1px dashed #FFFFFF; } would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as: PHP Code: a.nav { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; } a.nav:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types? how is that some websites can make the standard toolbar and the address bar disappear upon entering the website Ok, Normally I have no problem centering divs, but somehow I cannot get this to work. I have the following code: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; } </style> </head> <body> <table width="800" border="1"> <tr> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> </tr> </table> </body> </html> It creates a CSS dropshadow and border around the image. That is working perfectly, but on my thumbspage I'd like to have three per row, neatly centered within the table cell. Because of the float:left; it won't center. Obviously removing the float:left; will mess up the drop shadow, so I am looking for another solution. Wrapping it in another div and center it, won't work as well. I am probably overlooking the obvious here, but I cannot see it. Can someone help me out here? Cheers, Ronald Hi, I was wondering if it is possible to make a div, where only the images have a margin. How would I do that ? Can anyone help me thx! greez Hi all, I've got a standard 'submit' button that I've applied a CSS style to, with this code: <input type="submit" name="sign in" value="sign in" style="font-weight: bold; color: #FFFFFF; font-size: 10px; border: 1px solid #FFFFFF; background: #A4B1C1;"> The only problem I'm having is that in IE, there's a black border around it, but in Firefox, there's only the white border stated in the CSS style. Can anybody tell me how I can fix this? Cheers. So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc. My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most. My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image. Maybe that's the case? I'm not an expert on CSS. I can't seem to include a link due to some "akismetspam" phrase not being found? I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall. It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image. Thanks. Hi, I have some code that looks like this . #nav,#nav ul which puts all the listed elements in a vertical list. Now if I do ths #nav ul.. this changes all the elemnts to a horizontal list. What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't. Im trying to control how the text formats within a div tag, that sits inside a menu. The text appears when you rollover the items in the submenu and I want extra information to appear but when it does, it doesnt wrap 'correctly' I have the menu sitting he http://www.electronical.org/tmp/playsongs/ If you rollover 'Products > playsong titles', you will see some blue text appears at the bottom of the submenu. How do I format this so it is the width of the submenu and wraps to the length of it? Thanks for any help. Hi there, this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site. I know the #blah should be used to set an id for it, but here's my concern; 1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">). 2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different? thanks in advance. I am having a heck of a time with this side sub-menu. I cannot seem to get the left margins to be equal in IE 6, 7 or 8? My html: Code: <!-- show_menu2 -->
<ul id="sub_menu" class="menu" style="margin-left:-5px;position: relative; background-color:#CFF">
<li><a href="#" class="menu-expand menu-first navlev2" title="Project">Add-ons Project</a></li>
<li><a href="#" class="menu-expand menu-parent navlev2" title="What Modules">Modules</a>
<ul class="ullev3">
<li><a href="#" class="menu-sibling menu-first navlev3" title="Modules Here">Module</a></li>
<li><a href="#" class="menu-sibling navlev3" title="Admin Tools">Admin Tools</a></li>
<li><a href="#" class="menu-current navlev3" title="Random">Code Snippets</a></li>
<li><a href="#" class="menu-sibling menu-last navlev3" title="Droplet of Link">Droplets</a></li>
</ul>
</li>
<li><a href="#" class=" navlev2" title="AMASP">AMASP</a> </li>
<li><a href="#" class=" navlev2" title="Templates">Templates</a> </li>
<li><a href="#" class="menu-last navlev2" title="Backend Pages">Backend Themes</a></li>
</ul>
</div>
<!-- end of subnavigation -->
My CSS: Code: #submenu
{
padding: 0;
/* [disabled]width: 247px; */
/* [disabled]position: relative;
*/
/* [disabled]left: -15px; */
}
#submenu a
{
text-decoration :none;
color :#5b9acf;
padding-left :12px;
display :block;
background-image: url(../images/bullets_micro/square3.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
}
#submenu a:hover
{
color :#003366;
background-image: url(../images/bullets_micro/square1.gif);
background-repeat: no-repeat;
/* [disabled]background-position: 4px 50%;
*/
}
#submenu a:active
{
border: none;
}
#submenu a.menu-current
{
font-weight :bold;
color :#003366;
background-image: url(../images/bullets_micro/asst3.gif);
background-repeat: no-repeat;
background-position: 4px 50%;
}
#submenu ul
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
/* [disabled]margin-left: -25px;
*/
/* [disabled]position: relative;
*/
/* [disabled]left: -10px;
*/
}
#submenu ul li
{
padding :5px 0;
/* [disabled]line-height :1.4em; */
font-size :12px;
list-style-type :none;
border-bottom :#cccccc 1px solid;
}
#submenu ul li.a
{
padding: 0px 10px;
}
#submenu ul li li
{
border-bottom :none;
padding-bottom :0px;
font-size :11px;
}
#submenu ul li li a:link,
#submenu ul li li a:visited
{
color :#003366;
background-image: url(../images/bullets_micro/diamond4.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
}
#submenu ul li li a:hover
{
background-image: url(../images/bullets_micro/diamond.gif);
background-repeat: no-repeat;
/* [disabled]background-position: 4px 50%;
*/
color: #6DB9FA;
}
/* ====================== */
My test page: (pardon the blue background I just added this to see the container.) http://new.ssmarts.org/page.html Thanks so much. Hello: I am working on a website and cannot for the life of me figure out why the element called "innerloop" keeps appearing behind the menu element "nav". here is the html so far: Code: <title>Casa Grande Acclaim Realty</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="index,follow" /> </head> <body> <div id="main"> <div id="border"></div> <div id="contact_info"> <p>Casa Grande Acclaim Realty<br/> 11283 N. Henness Road<br /> Casa Grande, Arizona 85194 <br /> Phone: (520) 560-8366 <br /> Fax: (520) 421-1444 </p> </div> <div id="logo"></div> <div id="slogan"> Serving All of Pinal County </div> <div id="nav"> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Our Listings</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="innerloop"> lorem ipsizzum fo shizzle my bizzle Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah </div> </div> </body> </html> And this is the css: Code: #main {
width: 875px;
background-color: white;
border-style: inset;
border-color: #800080;
margin-left: auto;
margin-right: auto;
-moz-box-shadow: 5px 5px 5px 5px #008080;
-webkit-box-shadow: 5px 5px 5px 5px 008080;
box-shadow: 5px 5px 5px 5px 008080;
-ms-filter:
}
#logo {
width:300px;
height:170px;
padding:0 0 0 0px;
background:url(redonelogo.bmp) no-repeat;
}
#contact_info {
color: #800080;
font-weight: 550px;
font-variant: small-caps;
font-size: 14px;
float:right;
padding-top:0px;
padding-right:10px;
}
#border {
width: 875px;
height: 57px;
background-image: url(border.bmp);
background-repeat: repeat-y;
}
#slogan {
float: right;
font-variant: small-caps;
margin-right:20px;
padding-top:0px;
font-size:18px;
font-weight: 800px;
text-align:right;
color:#800080;
}
#nav {
width: 875px;
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
font-variant: small-caps;
background-color: #FFFF00;
border-bottom: 1px solid #008080;
border-top: 2px solid #008080;
margin-top: 10px;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #008080;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #800080;
background-color: #fff; }
#innerloop
{
width: 860px;
background-color: white;
margin-left: auto;
margin-right: auto;
border-style: double;
border-color: #800080;
border-width: medium;
}
I am rusty and stuck I took out the html header stuff and stylesheet link to conform to forum rules Thank you hey guys, I got a interesting situation here. I'm building this site... http://www.peelautoradio.com/source/start.php The problem is, I've attempted to pickup the style sheets from an external file (site.css). Everything works fine, however, if you click on a link (that isn't complete) or refresh the page too many times - the styles are lost. here's the css tags. (I'm using include "site.css" in my php now). Code:
<style>
body { margin: 0px;
font-family: Verdana,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #FFFFFF;
}
#topcell {
position: relative;
top: 0px;
left: 0px;
margin: 10px;
width: 750px;
height: 250px;
background-color: transparent;
overflow: auto;
vertical-align: justify;
}
#botcell {
position: relative;
margin: 10px;
top: 0px;
left: 0px;
width: 700px;
height: 250px;
background-color: transparent;
overflow: auto;
vertical-align: justify;
}
#topMenuLinks {
position: relative;
top: 2px;
left: 5px;
width: 548px;
height: 20px;
margin: 0px;
padding: 3px 9px 2px 2px;
}
#topMenuLinks a:link, #menuLinks a:visited {
display: inline;
color: #DCE8FF;
border-left: 4px solid #97163D;
border-right: 1px solid #CB8A9E;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: transparent;
text-decoration: none;
}
#topMenuLinks a:hover {
display: inline;
color: #DCE8FF;
border-left: 4px solid #FFDBE7;
border-right: 1px solid #FFFFFF;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: #EC7A9D;
text-decoration: none;
}
#botMenuLinks {
position: relative;
top: 2px;
left: 170px;
width: 548px;
height: 20px;
margin: 0px;
padding: 3px 9px 2px 2px;
}
#botMenuLinks a:link, #menuLinks a:visited {
display: inline;
color: #DCE8FF;
border-left: 4px solid #97163D;
border-right: 1px solid #CB8A9E;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: transparent;
text-decoration: none;
}
#botMenuLinks a:hover {
display: inline;
color: #DCE8FF;
border-left: 4px solid #FFDBE7;
border-right: 1px solid #FFFFFF;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: #EC7A9D;
text-decoration: none;
}
</style>
Any ideas? Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list. sth like #myId LI { display:inline-block; } #myId LI H2{ display:inline-block; } solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated! here the html <ul id='myId'> <li><h2><a htref=...>somewhere</a></h2></li> <li><h2><a htref=...>somewhere</a></h2></li> </ul> OK Found out a float:left in the li was missing Hello! Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read). So the current html below would be shortened to: Code: <a href="javascript:void(0);" class="sddm"><u>Settings</u> <div id="m1" class="alignl"> <a href="#">HTML Drop Down</a> <a href="#">DHTML Menu</a> <a href="#">JavaScript DropDown</a> <a href="#">Cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </a> ORIGINAL CSS/HTML: Code: <style type="text/css">
/* Drop Down Menu */
span.sddm {
z-index: 30;
white-space: nowrap;
position: relative;
}
span.sddm a {
text-decoration: none;
}
span.sddm a:hover {
text-decoration: none;
color: blue;
}
span.sddm div {
position: absolute;
display: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #3366cc;
border-top: 1px solid #c9d7f1;
border-left: 1px solid #c9d7f1;
top: 18px;
}
span.sddm div a {
position: relative;
display: block;
margin: 0px;
padding: 2px 5px;
width: auto;
text-align: left;
text-decoration: none;
white-space: nowrap;
}
span.sddm div a:hover {
background: #3366cc;
color: #fff;
}
span.sddm .alignl {
left: 0px;
}
span.sddm .alignr {
right: 3px;
}
</style>
<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>
Hello, I've been messin with this all night but just can't get the result i'm after. The bit of code which follows, almost works - except the fields on the right hand side don't align to the top (to be in line with the top of each text on the left). What am I doing wrong? Can anyone please help me? Thanks, JT EDIT: Screenshot of the current output is attached too for information Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Document</title>
<style type="text/css">
div.configset label {
font-weight: bold;
}
div.configset fieldset {
background-color:#FFE391;
border:1px solid;
margin:0.5em 0.5em 0.5em 0.5em;
}
div.configset dl {
font-size: 0.85em;
width:100%;
}
div.configset dt {
float:left;
border-right: 1px solid #FFCC6F;
width:45%;
padding:0.5em 0.5em 0.5em 0.5em;
}
div.configset dd {
clear:both;
margin: 0 0 0 46%;
padding:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<div class="configset">
<fieldset>
<legend>General Options</legend>
<dl>
<dt>
<label for="conf_13">Website Enabled</label><br /><span>Toggle the website on and off. Note that no part of the website (except admin functions) will work if this is set to False.</span>
</dt>
<dd>
<input type="checkbox" name="conf_13" id="conf_13" checked="checked" tabindex="1" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_1">Website Name</label><br /><span>Name of the website. Appears in title of browser and some links</span>
</dt>
<dd>
<input type="text" name="conf_1" id="conf_1" size="40" maxlength="50" tabindex="2" value="Kinetic" />
</dd>
</dl>
</fieldset>
<fieldset>
<legend>Login Options</legend>
<dl>
<dt>
<label for="conf_7">Login Attempts</label><br /><span>Amount of login attempts before time delays start occurring to prevent forced access</span>
</dt>
<dd>
<input type="text" name="conf_7" id="conf_7" size="2" maxlength="2" tabindex="6" value="3" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_8">Login Failure Delay</label><br /><span>Amount of time (in minutes) to delay a member from logging in with the failed account details</span>
</dt>
<dd>
<input type="text" name="conf_8" id="conf_8" size="2" maxlength="2" tabindex="7" value="5" />
</dd>
</dl>
</fieldset>
</div>
</form>
</body>
</html>
|
|||||||