|
CSS - Structure Classes
Hello,
I have 3 type of h2 headers on my web site: 1 - Post titles on a blog (Ex: <h2>New documents available for download</h2>) 2 - Content section title (Ex: <h2>Contacts</h2>) 3 - Sidebar content section title (Ex: <h2>Publicity</h2>) I am trying to build my CSS to style the 3 different headers but I am having some problems. I could use: h2.Post, h2.Content and h2.Sidebar or: h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar or even: h2 (for Post), h2.Content for content and then h2.Sidebar to change Content class so it fits Sidebar. So a section in sidebar would be: <h2 class = "Content Sidebar">Publicity</h2> Could someone help me in deciding how should I structure my classes? Thank You, Miguel Similar TutorialsI want to make a seperate component with style sheets associated with it so I can change the look in the future. My intended goal is something that will look like a two column table with the contents of each column being aligned to the right, and left, respectively so they nearly meet in the middle. Text: SelectDropDown Text: AnotherDropDown More Text: AnotherDropDown Kind of like that, where the colons should be matching up, and the drop downs should begin at the same place. What would the div/span structure look like? For example if I want the component to be 400 pixels wide, and the two columns meet at the center. Thanks in advance. I am trying to create a table where I could toggle visibility of certain rows by style="display: block" and style="display: none" It works well in Internet Explorer. In Firefox the following table structure displays rows "First Name" and "Last Name" on left side. Why? I would like it positioned exactly above "State" row, like it is in IE. How do I do it? Code: <table width="100%"> <tr align="left" id="f_name_holder" style="display: block"><td width="30%" align="right">First Name:</td><td>Mike</td></tr> <tr align="left" id="l_name_holder" style="display: block"><td width="30%" align="right">Last Name:</td><td>Rourke</td></tr> <tr align="left"><td width="30%" align="right">State:</td><td>Alabama</td></tr> <tr><td width="30%"></td><td colspan="1"><input type="submit" name="submit" value="Submit" /></td></tr> </table> Thank you. Hi, Im just starting another website and have coded the first page, ive run into a few problems on other projects later on indevelopment so would like it if someone could look over my code, let me know if there are sections that can be coded better? LINK HERE Also in FF it doesnt line up perfectly on the date, any ideas? Thanks in advance, Mike Hi, I have used the UL and LI elements to build a tree as follows: Code:
<div class="tree">
<ul>
<li>
<span>One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
<ul>
<li>
<span>Child of One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
</li>
</ul>
</li>
...
</ul>
</div>
The result of the above XHTML would be somethings as follows: Code: - One <Radio> <Button> - Child of One <Radio> Button> ... Now I want to try and get the following result through CSS: Code:
- One <Radio> <Button>
- Child of One <Radio> Button>
- Another Child <Radio> Button>
- Second Child <Radio> Button>
- Two <Radio> Button>
- Child of Two <Radio> Button>
...
That is in other words I want to have still have elements indented for every child element but all the controls of the elements are under each other at the right side of the div element. Is this possible? If so are there any example I can use? I have wrapped the controls inside a span because I felt that this would help. However I do not know how I can change the width of each 'li' element depending on its position in the three! (unless I use javascript, which I am trying to avoid). Also I do not know if CSS wise this is the best way forward. Thanks for any suggestions. Regards, Sim085 When I zoom into my webpages, the structure of the website does not stay the same, all my elements start shifting and moving around... I am trying to figure out a way to position elements so when I zoom in or out they stay in the exact same position... any suggestions? I am working on a multi-css document website for the May 1 Reboot and hit a huge snag on one of the websites. The CODY version's navigation keeps jumping around. The navigation is really similar to one of the other sites (BRIANNE) and hers is stable. If anyone can help that would be awesome! web address http://www.studio66design.com/html/hidden/may_1_reboot/ css files http://www.studio66design.com/html/hidden/may_1_reboot/css_files/cody_rules.css thanks Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance Hi, I'm building a table -like structure with divs and spans. When the columns have long text, the text overflows a bit funnily, so that the text in right column continues from left column. I have example at: http://www.viewinteractive.fi/tests/div.htm The page was validated before I put the code there within the textarea. The important part is he Code:
<html>
<head>
<style type="text/css">
div.r1 {
background-color: #ccc;
width: 400px;
}
div.r2 {
background-color: #eee;
width: 400px;
}
span.s1 {
color: #700;
width: 150px;
border-right: 2px solid black;
float: left;
}
span.s2 {
color: #070;
}
div.sep {clear: both; }
</style>
</head>
<body>
<div class="r1">
<span class="s1"> Sometimes this stuff get's quite long. </span>
<span class="s2"> And it is not a problem, if both columns are long.</span>
</div>
<div class="sep"></div>
<div class="r2">
<span class="s1"> Now if... </span>
<span class="s2"> ... only right column is long, the page looks a bit funky. </span>
</div>
<div class="sep"></div>
<div class="r1">
<span class="s1"> If left is long, it looks ok in IE, but not Firefox. </span>
<span class="s2"> And right is short.</span>
</div>
</body></html>
I'd rather do this with tables, but that is not an option atm. Any helps? t.j Hi all, I have created a tree menu that is dynamically loaded from the directory structure on my web server. Because it takes a while to load, I was wondering if there is any way to cache the menu so that the browser doesn't have to load it again and again. My idea is to cache it twice a day maybe (to keep up to date as it is accessing the report). Does any one know a way of doing it? Regards, Sameer. heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg main.css .main-header-back { background-repeat: no-repeat; background-position: 793px 0px; overflow: hidden; } index.php .main-header-back { background-image:url('/images/main/image.gif'); } I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element. Hi people, critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black <style type="text/css"> h3.Big Bird{color:yellow;}/*Class Font#CookieM{color:blue;}/*Id*/ </style> <h3 class="BigBird">Big Bird</h3> <font Id="CookieM">Cookie Monster</Id> Hope to hear from you soon. kaz ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out. Thankyou All Hi all, I have about 10 different titles on my page. I would like to have 10 different colors for each of these titles. Can this be done without having to create classes for each one of them like: .title_one { color: #ffcc00; } .title_two { color: #cc00aa } and so on... Please advise. Thanks. hey all, i have a image which is a link and i wanted to change the blue box around it to something more inkeeping with the site. So i did this css Code:
a.greenToblack {
color:#000000;
font-size:13px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.greenToblack:link {color:#000000; font: Georgia;}
a.greenToblack:visited {color:#000000; font: Georgia;}
a.greenToblack:hover {background-color:#667138; color:#667138; font: Georgia;}
and impletmented it as so Code: <a class="greenToblack" href="product.php?range_id=<?php print ($row->range_id) ?>"><img src="images/tmbnail/<?php print ( $row->tmbnail )?>" width="75" height="75" border="2"></a> it works perfectly in FF but not in IE..... any ideas why?? thanks RF I cant seem to get my cellpadding working for tables, what do i have to input. I have tried: .header {background:#2D759F; width:100%; cellpadding:5} all the others work, jus the cellpadding which does not. I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example: PHP 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" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> .class1,.class2,.class3 { border: 1px solid black; width:400px; line-height: 100px; text-align: center; } .class1 { background: none; } .class2 { background: red; } .class3 { background: blue; } .class1.class2.class3 { background: black; } </style> </head> <body> <div class="class1">Test Content 1</div> <div class="class2">Test Content 2</div> <div class="class3">Test Content 3</div> <div class="class1 class2 class3">Test Content 4</div> </body> </html> The four divs should all be different colours as follows: div1: transparent/white div2: red div3: blue div4: black However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3. Any ideas? Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet: Code:
<html>
<head>
<style type="text/css">
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1">
.class1 -- should be red
</div>
<div class="class1 class2">
.class1.class2 -- should be yellow
</div>
<div class="class2">
.class2 -- should be green
</div>
</body>
</html>
Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique? Thank you, answers appreciated! I have a series of image buttons with rollovers that are generated in CSS so I've applied a class to each like this: <a class="homebutton" title="Home" href="#">This is the Home Button</a> This works great but I now would like to apply a second class to the href that calls an animated scroll function from a javascript file. I've tested the function on a simple button and it worked perfect: <a href="#divtwo" class="scroll">Scroll Down</a> What I would like to do is essentially combine the two so that it would be something like: <a class="homebutton" title="Home" href="#divtwo" class="scroll">This is the Home Button</a> But when I do that it ignores the "scroll" class and simply jumps to the #divtwo location on the page without the animation. Ideas on how to have two classes on one button? Any help would be GREATLY appreciated! is it possible to use two classes for one element. I want to use two classes for one element I thought perhaps it is possible not to create another class to combine both of them. perhaps there is a form of superclass and subclass in css. |
|||||||