|
CSS - Applying Styles To Html Entities????
Similar Tutorialshello. i have a button that pops up to a floating div. this div gets applied html from a source called by ajax. in the html that is being called, i added <style></style> tags to embed specific css for that html. i do this because this html will be used globally across the site it works fine in every browser except safari. safari doesn't seem to render the css. any suggestions? i have a table that i'm using within a div. here is the style #content { float: left; padding: 0 20em 4em 3em; } #content table .content { border: 1; bordercolor: #fff; width: 100%; cellspacing: 0; cellpadding: 0; } when i reference the style for the table within the div, nothing is applying. not sure what im doing wrong here. <div id="content"> <table class="content"> please advise.. i'm guessing its syntax I have a few styles that I was to apply to anything that has a class="title". These work fine when I say, for example: Code: <div class="title">This is my title</div> but, for some reason, they don't work when I use them like so: Code: <table border="0" cellspacing="0" cellpadding="5" class="maintable">
<tr>
<td>
<div class="title">News Updates:</div>
</td>
</tr>
</table>
Can anyone explain to me why this is? If so, how should I go about getting around it? I have a div with a set id and style matching the id. It's very simple, straight forward, but the style is not being applied. When I inspect the element using FireBug it also does not see the style...however when I view the stylesheet in the browser I can see that the style exists within the stylesheet. I'm perplexed...my guess is I'm tired and missing something HTML Code: <div id="event_photos"> <a href="images/events/cce/cce_lowenthal.jpg" rel="lightbox[CCE]" title="People"> <img src="images/events/cce/thumbs/cce_lowenthal.jpg" alt='CCE Lowenthal' width="100" height="67"/></a> </div> CSS Code:
#event_photos {
width: 100%;
text-align: center;
margin: 0 auto;
background-color: red;
}
#event_photos a:link, #event_photos a:visited {
color: #f7f7f7;
}
#event_photos a:hover {
color: #0CB2E8;
}
Hi! Let's say I have this Code: <form id="some_form" ...> <div> <label> Some text <input .... /> </label> <label> Some text 2 <input .... /> </label> <input type="submit ... /> </div> </form> In CSS I have this: Code: #some_form label {margin-button:10px}
This does work in NO browsers! Very strange... If one replaces the label with a div, everything works fine again. I really want to use the labels... I've run into a situation that I've never encountered before. I want to add em dashes to the content of my pseudo-classes, but apparently it isn't working. I'm using regular hyphens for now, like so: Code: #secondary h2:before {content: "- "}
#secondary h2:after {content: " -"}
I've tried the hex and dec values for the em dash, and those don't work either. Is there something easy that I'm missing, or is this a limitation of these pseudo-classes? Thanks for your time. Hi, I've got a webpage that I need to print almost exactly as it appears on the screen. Currently I've got two style sheets linked to, one for the 'screen' and one for 'print'. I know this is working because the top line of my print CSS is: @page {size: A4 landscape;} however I can't seem to alter any of the elements on the print CSS. If I adjust the width, height, even the color it always inherits the stuff from the screen CSS and uses that, ignoring the print CSS. In fact, I can't even define a margin for my page using @page {margin...}. The two style sheets look like this: for the screen: body {..... etc etc all works fine... for the print: @page {size: A4 landscape;margin:3cm;} body {.... etc ALMOST same as above the print CSS is essentially the same as the screen one, except that I want to define different widths and heights for table elements so I can fill an A4 page with a margin. The printing process ignores the widths and heights from the print CSS, and even ignores the margin definitions. It must be reading the print CSS because it knowns to print landscape. What am I doing wrong, or am I completely misusing the @page and media commands? Thanks in advance. Andy Hi all I'm using a reset.css file that sets the text-align for TDs to left. Now I'm using an old CMS that displays an admin bar on top of the page, which is so very old that it is based on tables and uses HTML styles like align="center" to align its content. Naturally, those styles are now overriden globally by the reset.css file. Is there a way to reset this style to "undefined" or something for this admin table, so the browser listens to the HTML styles like align="center" again? Thanks for help Josh Hello, I have been working with websites for a long time now through school and such. I came across an error/problem that I cannot figure out. I'm using list "li" block links for a stacked images for a roll over effect. My newest version of my website will be in many lanuages. I've been using a language mod that allows you to easy switch languages via user interface. For instace, in the html code, for an image or text it would be: <img src=...images/{$langf}/image.gif />. The {$langf} stands for the corresponding language the user is viewing. Back to the CSS, While creating the roll over in only english was easy. but using the {$langf} in the css is a difficult problem. My code starting out is: #nav_bar { width: 950px; height: 35px; background: url(../images/{$langf}/menu.png); margin: 10px auto; padding: 0; position: relative; } But as you can see the bolded "}" shuts the rest of the code off, I need that } to be functional in that image link corressponding with my script. Is it possible to use that in the code, or do i have to basically start from scrath (a years work)? let me know, thanks a lot. The CSS in this file:
Code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title>Comments on 2005-02-09: February 9, 2005 - Final Game</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" /> <link rel="stylesheet" type="text/css" href="comments.css" /> </head> <body> <h2>Posting on 2005-02-09: February 9, 2005 - Final Game in <a href="refresh.php" id="title">XMLBlog</a></h2> <div class="entry"> <p class="normal">I woke up like usual. <em class="entry">My mom couldn't find my lunch bag, so I had to show her.</em></p> <p class="happy">On the way to school, I nearly fell asleep on the bus. <em class="entry">Surprisingly, I felt more rested than before.</em></p> <p class="normal">We had a sub in Physics, along with homework. <span class="happy"><em class="entry">While doing my homework, I talked to this guy that sits nearby.</em></span></p> <p class="happy"><span class="sad">At the beginning of class, I tried to switch with someone to sit near a friend, but our sensei didn't allow it.</span> We just did reading in Japanese, <em class="entry">where I was better than a majority of the class as far as Katakana is concerned</em>. Also, we looked at pizza menus and added up our cost in <ruby><rb>円</rb><rt>エン</rt></ruby>. <em class="entry">some of them looked so delicious, which made me hungry.</em></p> <p class="normal">We watched a video in health, and nothing else.</p> <p class="happy">I basically had English off, since I already finished all of my work. <em class="entry">I also found out that my pre-write can count as a rough draft, since I didn't really do one. Along with that, I get to turn in my completed vocabulary in a day late, since I proved to her that I had it done.</em> For the most part, I just read while listening to music.</p> <p class="sad">Lunch alone, again.</p> <p class="normal">Math was comprised mainly of continuing work on our investigations. <em class="entry">This one didn't have proofs, which made it easier.</em> Due to our teacher talking about homework, we didn't move onto the next one.</p> <p class="normal">We started off with playing our warm-ups for Solo & Ensemble, then went to free time. <em class="entry">For the most part, I goofed off.</em> <span class="hider">Also, someone was trying to lift a stand up, but the top flew off and hit them in the chin, hard.</span></p> <p class="sad">Once home, I found that the euphonium I was waiting for didn't arrive yet.</p> <p class="normal">I had a normal trombone lesson this time. <em class="entry">I made somewhat considerable progress, and was taught better hand positions.</em></p> <p class="happy"><strong class="entry">The euphonium came!</strong> It took a while, but it finally arrived. <em class="entry">The nice <strong class="entry">Bach 5GS</strong> my mom bought was too small, since we thought the instrument would be a small-shank. Still, the instrument came with a 6 1/2 AL from Jupiter, which I shall use for the time being.</em></p> <p class="happy">Later on, I found out that there was a 5GS there. <em class="entry">Earlier, I had called Mills about it, and they eventually replied saying there was one.</em> My dad and I went there and bought it.</p> <div class="story"> <div class="title">Final Game (Bothell Lost N/A)</div> <div class="storybody"> <p class="normal">After a quick lyre readjustment for my new euphonium, my dad and I dashed off to the school...</p> <h>Enter: Eighth Graders</h> <p class="normal">When I got there, I found out how <em class="entry">huge</em> the band was. <em class="entry">There even was another baritone player from my old school!</em> My section commented on how good my instrument looked. <em class="entry">When we warmed up, he also commented on the great tone it had.</em></p> <p class="normal"><span class="sad">We had trouble cramming into the stands, so we had to cover a full section and around 1/3 of another.</span> Throughout the entire game, I told the eighth grader some things to remember, and cracked a few jokes with him.</p> <p class="normal">When the game actually started, we got into our final setup. <span class="sad"><em class="entry">I was near someone that annoyed me.</em></span> <em class="entry">Also, I talked to the 'leader' of the trumpets a bit, as well.</em> The game for our team was going decently. </p> <p class="sad">The guy in front of me got more annoying. He also hit my section where it hurts most. <em class="entry">I kind of got back at him when he snuck my cell phone away from me.</em> Still, he cracked jokes no matter what. <span class="normal"><em class="entry">Also, the group thrusts were a little messy, but decent to say the least. It <strong class="entry">may</strong> be that the eighth graders haven't gotten used to them yet.</em></normal></p> <p class="normal">At half-time, the little girls danced up with the cheerleaders. <em class="entry">Someone made an insightful comment about how their parents paid them to be sluts.</em> <span class="happy"><em class="entry">Also, the trumpet leader danced and sang with them, and a few of us joined in.</em></span> Of course, we played a few songs. The percussion played, and we did our thing.</p> <p class="happy">Rest came with the third quarter. <span class="sad">Though, when I went to buy drinks, they only had <strong class="entry">Powerade</strong>, which was <em class="entry">okay</em></span> Once back in the stands, I shared the candy I bought with a couple of friends while we chatted. Also, I performed the <strong class="entry">Baritone Test</strong> on the eighth grader's instrument, which proved it as a euphonium. <em class="entry">Though, it still seems too light and small to be a real euphonium. It's the same brand as mine, but a lower-end model.</em></p> <p class="normal"><span class="sad">Our team was losing badly.</span> Still, we kept up our little spirit through it all. It all ended as usual.</p> <p class="happy">My section and I talked on the way back from our last game as sophomores. Also, we played us some <strong class="entry">Oompa</strong>!</p> </div> </div> <p class="normal">After the game, I wondered if there was a Denny's party. My dad and I checked twice, most likely finding it as false; so I went home.</p> </div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 9, 2005 - Final Game&date=2005-02-09" method="post" name="comment" id="main"> <div class="right"> <img src="comments_files/right_main_bar.png" alt="right_side" /> </div> <div class="left"> <img src="comments_files/left_main_bar.png" alt="left_side" /> </div> <div class="center"> Date: <input type="textarea" class="upper" name="date" value="2005-02-09" readonly="readonly" /> Title: <input type="textarea" class="upper" name="title" value="February 9, 2005 - Final Game" readonly="readonly" /> <br /> Name: <input type="textarea" name="name" class="lower" /> E-mail: <input type="textarea" name="e-mail" class="lower" /> </div> <div class="comment"> <input type="textarea" name="comment" class="text" /> <input type="submit" value="Post!" class="click" /> </div> </form> </body> </html> Applied this as a div id and a div class, neither of which apply css to the links and text properly. Also hashed all selectors. Some of these are to be followed by regular text/explanations. What am I missing here? Code: .cont { /*container*/
position: relative;
background: #FBFBFB;
float:left;
border: 1px solid #D3D3D3;
width: 195px;
color:#999;
text-decoration: none;
}
#vt-r {
color:#999999;
text-decoration: none;
font-size: 0.90em;
font-weight: 400;
margin: 10px 0px 7px 15px;
}
.vt-r:link {
color:#3366CC;
text-decoration: none !important;
font-size: 0.70em;
font-weight: 400;
padding: 15px 5px 0 0;
margin: 10px 0px 7px 15px;
}
.vt-r:hover {
color:#333;
text-decoration: underline;
}
<div class="cont">
<div id="vt-r">
<a href="/urladdress.htm">LINK1</a><br>
Example text.<br>
<a href="/urladdress.htm">LINK2</a><br>
<a href="/urladdress.htm">LINK3</a><br>
</div>
</div>
Greetings Not sure about the best way to go about this. I have an Unordered List that has a set height for the List Items. Like so: Code:
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left ul li {
text-align: center;
float: left;
margin-right: 20px;
height: 200px;
margin-bottom: 20px;
}
This works fine for most of the pages, but there is one where I really need the height of the <li>'s to be 350px. I tried just adding a class like Code:
.comics {
height: 350px;
}
I tried adding this to the <li> Code:
<li class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></li>
and also just a <span> Code:
<li><span class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></span></li>
but it still kept the 200px height. Do I need to make a whole new <li> code or am I missing something? Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ? How to define a style so that I can just put <table class="abc"> and it will apply to both table, th, td together? currently i am using: table,th,td{ //style here } it work in all table, th, td. But i just sometimes want to write <table class="abc"> and it would apply in all cell within this table. so that I don't need to write <th class="abc"> , <td class="abc"> in every tag in same table. thx. How do I apply margins to the outside of all of my frames? Just the outside, treating my frames together as one page and adding blank space to the outside of that page rather than adding margins to each frame separately. Sidebar div's background is messed up. Its background should be black until the end, but its cut short. Check it he http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4 PHP Code: #products .sidebar { background: #000000; color: #CCCCCC; padding: 10px 0 0 0; } #products .sidebar ul { margin: 0; padding: 0; list-style: none;} #products .sidebar li { display: block; float: left; width: 124px; padding: 10px 5px 10px 15px;} #products .sidebar li ul { line-height: 15px; } #products .sidebar li li { display: list-item; background: url(../images/img07.gif) no-repeat left 50%; padding: 0 0 0 10px;} #products .sidebar h2 { font-size: 12px; margin: 0px; color: #FFFFFF;} #products .sidebar a { font-size: 10px; text-decoration: none; color: #CCCCCC;} #products .sidebar a:hover { text-decoration: underline;} #products .clear { clear:both; height:1px; width:1px; overflow:hidden; } PHP Code: <div class="clear"></div> <div class="sidebar"> <ul> <li> <h2>Lorem Ipsum</h2> <ul> <li><a href="#">Fusce dui neque fringilla</a></li> <li><a href="#">Eget tempor eget nonummy</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> </ul> </li> <li> <h2>Recipient</h2> <ul> <li><a href="#">Family</a></li> <li><a href="#">For Him</a></li> <li><a href="#">For Her</a></li> </ul> </li> <li> <h2>Price</h2> <ul> <li><a href="#">Under $50</a></li> <li><a href="#">$50-$75</a></li> <li><a href="#">$75-$150</a></li> <li><a href="#">$150 & Up</a></li> </ul> </li> </ul> </div> <div class="clear"></div> Hi , I have writen an advertising script that basicly lists my text link advertisers , this works everywhere on my site except for on my portal page where i have to use an iframe to insert the content instead of an include. the links come up fine however they are the default blue / purple not the colours defined in the style sheet I tried to make a few changes to the style sheet and iframe however nothing seemed to work , so I am hopign somoen can tell me where i am goin wrong first lets start with the example list of links all located on a page called New3.html Code: <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> The page with the iframe is called New2.html and contains the following Code: <html>
<head>
<style type="text/css">
<!--
#main_iframe a:link{
color:purple;
}
#main_iframea:visited{
color:red;
}
#main_iframe a:hover {
color:black;
}
#main_iframe a:active{
color: green;
}
-->
</style>
<title></title>
</head>
<body>
<iframe id="main_iframe" name="main_iframe" src="New3.html" frameborder="0" scrolling="NO">
</iframe>
</body>
</html>
what I basicly want is for the css in the page New2.html to effect the links that are imported from New3.html unfortunately it's not as easy as just putting the css into New3.html though because the css file used will depends on the skin of the users cms The logic with my above examplkes is that I tried to set the iframe with the id or main_iframe and then i tried to set the link variables for that id , but as you can see it didn't work thankyou so much in advance to anyone that can help Fallen Angel I have a css stylesheet and an xslt stylesheet. In my xml doc i apply the xslt stylesheet, but how do i also apply the css? thanks This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes: {padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;} Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great. Ehud hey guys i have this so far
Code: div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
background-color: #e4ebeb;
}
but what i can figure out is how to show the link they are on as a selected button so having the button be red if they are on that link... Code: <div id="navbar2"> <ul> <li><a href="index.php?page=update">Basic</a></li> <li><a href="link2.html%20">Button 2</a></li> <li><a href="link3.html%20">Button 3</a></li> </ul> </div> |
|||||||