|
HTML - Class
someone wrote a site for me and they got it all right except no links
my site is here I know a littlee but I can't figure out how to add the links to the nav hotspots Similar TutorialsI've been using CSS for a very long time now and have always used classes when styling certain elements on my pages. I know most of the people out there use ids more than classes though. I've been wondering the difference between these two for a long time now, and recently thought that maybe IDs have a huge advantage over classes? I know about their Javascript capabilities (getElementById...) but what other huge differences are there? What is the difference, and when would each be used? Hello all, I'm really new at this, and I'm having trouble defining and using classes between simple html paragraph and a small .css file...here's what I have so far: [code]<Title>Test & Test</title> <link rel="stylesheet" type="text/css" href="test11.css" /> <p><span class="vil">test1</span><p><span class="text1>test test test test test test test test test test test test.</span></p>[code] and the .css file: Code: .vil { font-family: helvetica; font-style: italic; font-size: 14pt; color: #0000A0; }
.her { font-family: helvetica; font-style: italic; font-size: 14pt; color: #408080; }
.text1 { font-family: comic sans; font-style: italic; font-size: 12pt; color: #000000; }
What am I doing wrong, and how do I fix it? Hello there. I am about to make a new style for my website, but i got in trouble. For some reason the site is not showing up as it should. Sounds weird, huh? Look here to see what i mean. And here to find all the files it is using right now. IF you don't understand what problems there is with the webpage, here is the list i got: - Background-image doesnt show up on community.html - left panel image doesnt show up. Hi, I have a simple menu which currently looks like this Code: <li><a href="page1.html">page1</a></li> <li><a href="page2.html">page2</a></li> <li><a href="page3.html">page3</a></li> I want the first link to have a certain class ie: Code: <li class="current_page_item"><a href="page1.html">page1</a></li> But can anyone tell me how you do this without putting class="current_page_item" within the <li> tag? I've tried stuff like this with no avail... Code: <li id="1"><a href="page1.html">page1</a></li> <li id="2"><a href="page2.html">page2</a></li> <li id="3"><a href="page3.html">page3</a></li> <id="1" class="current_page_item"> I'm sure it fairly simply to someone, but I really don't know much scripting, thanks Hey all, First post here and new to HTML. I have a question regarding DIV ID alignment conflict with a CLASS alignment. I have a logo that I want aligned left (header ID) with the fade-in slide show script to be centered (DIV CLASS). Here's the code in question: <body> <div id="header"> <div align="left"><img src="images/logo1.jpg" width="500" height="133" alt="Orion Images" /> <div class="centerdiv"> <script type="text/javascript"> //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder) new fadeshow(fadeimages, 350, 275, 0, 4000, 1, "R") //new fadeshow(fadeimages2, 140, 225, 0, 3000, 0) </script> </div> </div> </div> <!-- end of header div --> <br /> CSS: #header, #content, #navigation, #footer { position: relative; } #content { top: 0%; width: 60%; left: 20%; font-family: "Trebuchet MS", Verdana, sans-serif; background-color:#000000; color: #C8C6F0; font-size:14px; font-style:italic; font-weight:lighter; } #navigation { left: 0; width:100%; } I'm new to this so maybe I'm overlooking the obvious or don't truly understand what I'm doing. I've done a search but didn't find an answer to my problem. Any help would be greatly appreciate. Thanks for everyone's time! What is the proper use of the ID and CLASS tags. I think I know but I'm not entirely sure. My understanding is that IDs and CLASSes do the same thing. Also, when it comes to the DISPLAY--hmm it's not a selector... modifier?--and its attribute is BLOCK; does that make it so that there's a line break after the </p> like a <br /> does? Thanks in advance for any help. i am new to HTML. I am not able to recognize benefit of class attribute in <DIV> Can anyone give me suggestion? Regards Naresh Vatsal Hi, My document contains below span class: <P> <span class="ErrorText"> <img border="0" src="/wps/images/icn_alert_error.gif" class="DialogIcon" align="absmiddle"/>Path does not exists </span> </P> I want to check for existance of this class in document(jsp) using below function: function preview(){ ..... .... ...... (contentPath is textfield) if(contentPath==null || contentPath.length==0){ alert("Please select a content fragment before attempting to preview"); } else { here i want to check whether above mentioned span class exists in document or not if span class exists then proceed for next step.. else break ..... ............... .... } } I have created a website for our own organisation's intranet. To test it I have uploaded it to my own personal webspace and it works fine. However, I viewed the same website at work and on just one of the pages all of the images were not following the CSS code in the style sheet. I worked out why. The source code for this one page was from an old style sheet that I have since modified. Why does this computer at work view an old style sheet that is no longer on the web? I have viewed the old one at some time on this computer so is it somehow using a cached style sheet and if so how do I stop it? hi guys i want to know the differnce between style and class attbute in html tags.and also i want to know wheter they can replace each other .if not why thanks amir Hey guys, This is my first time here and I am VERY new to developing in HTML, CSS, JS etc. so please bear with me I am using W3Schools as my primary resource at the moment and have a question about the use of the class versus the ID attribute. On the W3Schools site it is stated that ID is intended for identifying a specific element and that the class attribute is intended to be used to identify multiple elements. But as you can simply apply the ID attribute (<div id="element1">) to ANY element, why have the two? Is the distinction between the two more about the fact that you can apply the class attribute to a particular tag type such as: p.blue {color: Blue;} Many thanks for your help with this. RezD BAH Just realised I have posted this in the wrong forum (great start) hopefully a moderator can move this? Thanks. This is what my assignment says to do word by word. "Scroll down to the four div container elements(marked with ids sample 1 through sample4) and place each of the div containers in the samples class." Here is my code and what I thought this instruction meant. HTML Code: <div id="samples_container">
<div class="samples"><div id="sample1">
<h3>Paint Ball Fun</h3>
<a href="sample1.jpg"><img src="sample1.jpg" alt="" /></a>
</div></div>
<div class="samples"><div id="sample2">
<h3>Longs Peak Memories</h3>
<a href="sample2.jpg"><img src="sample2.jpg" alt="" /></a>
</div></div>
<div class="samples"><div id="sample3">
<h3>Trick or Treat!</h3>
<a href="sample3.jpg"><img src="sample3.jpg" alt="" /></a>
</div></div>
<div class="samples"><div id="sample4">
<h3>Michael's First Concert</h3>
<a href="sample4.jpg"><img src="sample4.jpg" alt="" /></a>
</div></
</div>
The thing is it's asking me in my CSS later to make the class .samples, to have absolution positioning. Later then it asks me to set positions for ID sample1 through 4. So i'm guessing what it's trying to do is inbox all sample1-4 inside samples, so that when I declare position as absolute in the class .samples, the other ID's will already be set to absolute position and all I will need to do is assign left and top value. Unfortunately the way I boxed the sample class doesn't seem to work, given how vague the instruction is I doubt I did the right thing but I can't figure anything else. Here's a sample of my CSS just in case. Code: .samples{position:absolute;}
.samples img{width:150px; height:193px; border-width:0px;}
#samples_container{position:relative; top:0px; left:0px; height:450px;}
#sample1{left:0px; top:0px;}
#sample2{left:170px; top:0px;}
#sample3{left:0px; top:170px;}
#samples4{left:170px; top:220px;}
Thanks again in advance. Yep. Another query to do with iframes. Within a table that displays number of members online and other data on my website's forum Portal and board index, an iframe is also inserted that calls one line of text to display active players within another website. Now, the developer has specifically coded the script so that it fits in with style of my board, right down to size/style of text. The problem is, the iframe displays the contents perfect with my main browser; Firefox. However, on checking with Internet Explorer, the line of text is way too big and bottom of text is cut off. I know that to solve this would be to increase the iframe height. The problem then is that in Firefox I'll end up with white space just to compensate for IE to display correctly. I really don't want that. Have I possibly overlooked something here or is it just IE being awkward with iframes? The iframe code (inserted in a table using <tr> / <td>, etc: Code: <iframe height="15" marginheight="0" src="http://fundox.free.fr/roomstats/stats_ss.htm" frameborder="0" width="100%" marginwidth="0" scrolling="no" alt="Fundox data currently unavailable">Your browser doesn't support inline frames, please upgrade to a modern browser that does.</iframe><br /> And this is the code hosted on my developers website: Code: <span style="font-size:1.0em;font-family:Verdana;"> In Fundox, there are currently xx active players :: By room - English: <b>xx</b>, French: <b>xx</b>, German: <b>x</b> </span> Many thanks in advance to any assistance. hi, i have a strange problem. i am using general interface for my application. in that i am using a Date Picker. i need to disable the text box of date picker. i found css class of that text box in gi source. here is the css for text box Code: #JSX span.jsx30datepicker input {
z-index: 2;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
border-style: solid;
border-width: 1px;
border-color: red;
}
i couldn't disable the text box in the above css any clues? i have no help from General Interface designer to do so. so i started changing the source of General Interface. u r help is appreciated. Thanks R Hi, I'm trying to develop a simple gallery of container, that change class when clicked. I'm using bullets to create the containers, and the .toggleClass() to change the state of the container. The desired effect can be seen he http://gabrieltomescu.com/quote/template.html Here's my current HTML: HTML Code: <div id="main">
<ul class="gallery">
<li>
<a id="template1" href="#select" class="thumb"><span><img src="img/templates/01.jpg" alt="PAPER" /></span></a>
<div class="select"><span>SELECT</span></div>
<h2><a href="#">PAPER</a></h2>
</li>
<li>
<a id="template2" href="#select" class="thumb"><span><img src="img/templates/02.png" alt="WOOD" /></span></a>
<div class="select"><span>SELECT</span></div>
<h2><a href="#">WOOD</a></h2>
</li>
</ul><!-- /gallery -->
</div><!-- /main -->
I also have the javascript running to toggle the div class: Code: <script type="text/javascript">
$("gallery li").click(function(){
$(this).toggleClass("selected");
});
</script>
And also the CSS: HTML Code: ul.gallery {width: 550px; list-style: none; margin: 0; padding: 0;}
ul.gallery li {float: left; margin: 10px; padding: 0; text-align: center; border: 1px solid #ccc; position: relative;display: inline; -moz-box-shadow: 0px 0px 10px #cbcbcb; -webkit-box-shadow: 0px 0px 10px #cbcbcb; background: #FFF;}
ul.gallery li a.thumb {width: 150px; height: 150px; padding: 5px; border-bottom: 1px solid #ccc; cursor: pointer; z-index: 99;}
ul.gallery li .select { position: absolute; left: 0px; top: 0px; padding: 0; width: 160px; height: 160px; display: none; background: #000; font-size: 1.2em; filter: alpha(opacity=50); opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}
ul.gallery li .selected { position: absolute; left: 0px; top: 0px; padding: 0; width: 160px; height: 160px; display: none; background: ##0066FF; font-size: 1.2em; filter: alpha(opacity=50); opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}
ul.gallery li:hover .select {display: block; cursor: pointer;}
ul.gallery li .select span {font-size: 20px; font-weight: bold; color: #FFF; text-transform: uppercase; padding-top: 70px;}
ul.gallery li span {width: 150px; height: 150px; overflow: hidden; display: block;}
ul.gallery li h2 {font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px; background: #f0f0f0; border-top: 1px solid #fff;}
ul.gallery li a {text-decoration: none; color: #777; display: block;}
Any help would be highly appreciated!!! Thanks! SOLVED Here are 2 text documents. 1 is CSS and the other is the HTML doc that refers to it. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>TryingHoverClass</titl> <link rel="stylesheet" type="text/css" href="liKS.css"></link> </head> <body> <p>Here is a list</p> <p> <ul style="width:80px; border:1px solid red;"> <li>yahoo <span><a>bob</a></span> </li> <li><a href="http://www.google.com">Google</a></li> </ul> </p> </body> </html> CSS: li:first-child:hover { color:teal; } li span { display:none; } li:first-child:hover span { display:block; position:absolute; background-color:red; border:1px solid yellow; width:50px; height:60px; left:150px; } This is nothing fancy, however when i use firefox to view these files, they act as expected. When i use IE7, nothing <----- comes up in the window. I get a blank page. Where is the error? Thanks, Bo Hi everyone, I was just wondering if it was possible to modify an element from the style tag for example: HTML Code: <style>
.homepage { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: #ffffff;}
</style>
<span class="homepage">onomotopeia</span>
I was wondering if something like this was possible: HTML Code: <% bcolor = "#0000ff" %> <!-- ASP code -->
<style>
.homepage { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: #ffffff;}
</style>
<span class="homepage.color=<%=bcolor%>">onomotopeia</span>
So, what I'm trying to do is have the variable called "bcolor" access the color attribute of the .homepage. I know I could have easily changed the color in the style from #ffffff to #0000ff but I want to be more dynamic, does anyone have any suggestions? I'm trying to make a website for class, and am having a problem. I made a table, but when I change the size of the window, the words wrap and distort. If I made the window big, the table stretches, and if I make it small it squishes up. What's the easiest way to fix this? |
|||||||