|
CSS - Proper Use Of 'id'
Hi there.
I've got two styles defined for links...one of which is Code:
A:link#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
}
A:visited#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
}
A:hover#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
display:inline;
}
when i want the link to be the 'redir' style, i put Code: <a href="http://www.whatever.com" id="redir">clicky</a> but that won't validate because id's are supposed to be unique. what's the deal? thanks! Similar TutorialsOk, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
I have recently begun training on CSS. I would say I am pretty skilled with the basics of creating a layout. I can pretty much do any layout, 3 column, 2 column, or whatever. The way I have been doing this is though is to specify the width using pixels of each <div> area. I have also been specifying the margins: and padding: using the exact pixels as well. I know this way does not cause the website to resize when I resize my browser. I also know that in order to cause it to resize I need to use %'s and such. Is there an advantage to this besides the obvious resizing ability. What do you guys all do? And is the best way to do a layout to use the <div> and then set up my scripts to display in the content <div> area each time? Thanks. Thanks for reading my question. I went to http://jigsaw.w3.org/css-validator/ to see how I was doing on my CSS. Seems I'm doing ok. I am just having problem with the Scrollbar portion. What is the proper way of doing this? Here is my result from the validation Quote: Errors URI : file://localhost/kelly.css * Line: 0 Context : #info Property scrollbar-face-color doesn't exist : #ffac11 * Line: 0 Context : #info Property scrollbar-highlight-color doesn't exist : #ffac11 * Line: 0 Context : #info Property scrollbar-shadow-color doesn't exist : #d4940e * Line: 0 Context : #info Property scrollbar-arrow-color doesn't exist : #b12514 http://www.websitedev.de/css/validator-faq says a bit about it. Just wondering if Any of the scrollbar stuff is allowed, and will be validated? Thanks, Brad Prior to doing any serious mobile work, I learned if you had an image that was mostly decorative and didn't need to be read as part of the content, you used a background image. In today's world you have to support many mobile devices. There's a nice trick with <img> tags where you give them a max-width of 100%, and they will scale down proportionately on mobile devices. As far as I can tell, there isn't quite as good of a solution for background-images. Say I have a background image in a div, and I set the dimensions to match the background size - 600 x 300. To allow it to scale down on mobile devices, I set a max-width of 100%. But that doesn't scale the background image down, just crops it. So I set background-size: contain, which makes the background scale, but the div is still 300px tall. And that's where I run into the problem. How do I tell the div to only be as tall as its background? Am I missing something? alright I have a css/folder in root directory. I have files in child directories, I'm calling the parent file by ../folderlocation/file to use my css but my images wont load that are in that css... The files in root directory show images that use exact same css.. only difference is those files are in root, and the one in child directories wont show images. The layout is shown though, any suggestions or tips would be greatly appreciated. Hi , I am really stuck in this css . i have tried a lot but cant get it working right in i.e6 . It is working fine with firefox but not i.e 6 .I am already using a javascript which makes css works for i.e 6 . i have attach the image where it shows the difference . Here is my css code . Code:
#nav, #nav ul{
margin:0 0 0 18px;
top:auto;
padding:0px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2em;
font-weight:bold;
font-family:"times new roman";
letter-spacing:-1px;
font-size:17px;
}
#nav li ul{
font-size:15px;
font-weight:normal;
background-color:#000000;
width:auto;
height:auto;
top:auto;
margin:0;
letter-spacing:0px;
border:0 none black;
}
#nav a{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
}
#nav a:hover{
color:#FFB208;
cursor:pointer;
}
#nav li{
float:left;
position:relative;
margin:0 0 0 12px;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:33px;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
vertical-align:text-top;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0 0 0 10px;
float:left;
right:auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
Javascript code:- Code:
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
}
);
}
$(document).ready(function(){
mainmenu();
});
Is there anything more i need to do in my css file? Regards, Umair CSS Definition: span.votelinks { right: 0; position: absolute; padding: 1px 280px 0 0; background: none; font-size: 12px; font-weight: bold; } Its use in a .tag file: <span class="votelinks"> <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=true"><img border=0 src="${pageContext.request.contextPath}/images/good.gif"/></a> ( ${requestScope.UP_VOTES} ) <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=false"><img border=0 src="${pageContext.request.contextPath}/images/bad.gif"/></a> ( ${requestScope.DOWN_VOTES} ) </span> The problem is that the icons are centered perfectly but the text isn't. Is there a way to only pad the text? Thanks in advance, Mark hi, is this the proper way to do this? i'm trying to have every link with certain properties and then have classes define specific links. it works, but i wonder if this is the proper way to do so. Code:
a:link{color: #0000dd; font-family: tahoma; font-size:12px;}
a:active{color: #0000dd; font-family: tahoma; font-size:12px;}
a:visited{color: #0000dd; font-family: tahoma; font-size:12px;}
a:hover{color: #0000ff; font-family: tahoma; font-size:12px;}
a.big {font-weight:bold;}
thank you Hello all. May I ask for your help? I just finished developing a site for personal page (e.g. blog, myspace, etc) promotion, but I'm having troubles correcting my stylesheet. The home page is basically a bunch of pictures of people, but I don't have anyone loaded in the system yet, so I can't get a feel for whether or not it is behaving properly. This probably sounds like SPAM, but oh well. Would anyone be willing to give it a try and provide your thoughts in this post? The web address is http://www.klik.us. Thanks a ton for any help/comments. There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop. temporary site <--- fixed. in a state of constant change. The css is layout.css . I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies). I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up. I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's |
|||||||