|
CSS - Numbering Headings And Sub Headings (outline Numbering)
Hi
I'm putting together help documentation for an application and I would like the structure of the document to have all headings and sub headings to be dynamically numbered, for example: 1. Main 1.1. Sub1 1.2. Sub2 2. Main 2.1 Sub1 etc I've read about the pseudo class :before, but understand that this isn't supported by Explorer, or else I could use: BODY { counter-reset: chapter; /* Create a chapter counter scope */ font-family:Arial, Helvetica, sans-serif; } H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Could anyone help with any suggestions as to how I could do this please? Thanks Sophie Similar TutorialsCan't seem to find anything on how to format my <ol> in CSS to start with a certain number. I require a break in the middle of my <ol> for further explanation and I need the next <ol> to start at a certain number such as the following...: Code:
1. Item1
2. Item2
3. Item3
<p>
Paragraph of info
</p>
4. Item4
5. item5
6. Item6
I'm having trouble aligning headings in CSS. I've tried creating a class like this - Code:
.rightalign {
text-align:right;
}
and applying it like this - Code: <h1> <span class="rightalign" /> Heading </span> </h1> but it doesn't work, any help? Thank you. Hi I am making a website where i have a main heading on all pages' start. I want to control its looks with CSS, i have an external CSS that controls links and body text etc. i have tried in external CSS Code: H2 {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFCC99;
}
and on pages i use <h2> heading is here </h2> but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet. Please shed some light on this... thanks Is this a display glitch or is it meant to be like this... for example, let's say you have a picture in a div that had text floating to one side. If the text beside the picture doesn't fill the space the heading will be displayed inline beside the floating picture, even if it's in it's own containing div... EDIT: I've found a general fix for this using <div style="clear:both;"> but it's a PITA, and I think I'm doing something improperly. Maybe I'm misunderstanding the use of a floating frame... but, I can't help but think it's a possible display error with the different browsers The site in question... http://cbo4edu.org/newSite/index.html I know this is probably a very simple fix but I've tried everything I could think of so I now have to rely on the Dev Shed community. Can someone please tell me why theh3 tag in the center column is underlined? I only want this heading to be underlined when someone hovers over it. C Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin Is it possible to set link styles that are defined inside of a heading tag... for example, h1 a:link{bleh} h1 a:visited{bleh} h1 a:hover{bleh} I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. I tried to create a button with an outline color, but it doesnt seem to work. Does anyone has worked on outline property ,can u help me!!! <button STYLE="outline: red solid thick">I'm a Button - CLICK ME!</button> Working to set up a template that has containers with rounded corners WITH outlines. I have the round corners and sides...just can figure out how to add the top and bottom line to complete the container. If I use a border-top it extends past the rounded corners. Any help would be greatly appreciated Link to the page in progress: http://www.rustbug.com/test/journey-home-page.html Here is my code: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {color:#000000;background-color:#ffffff;background-attachment:fixed;font-family: Arial, Helvetica, sans-serif;line-height:1.25em;font-size:100%;}
#wrapper {margin:0 auto;width:720px;background-color:#f6f5f3;padding-top:1em;padding-bottom:2em; overflow:hidden;}
#container1 {float:left; display:inline; width:435px; height:auto; background-color:#FFF; border-top:1px #e3e2e1 solid; margin-left:1em; margin-bottom:1em;}
#container2 {float:right; display:inline; width:235px; height:auto; background-color:#FFF; margin-right:1em;}
p.roundcont { font-size:90%; margin:0 10px 0 10px; color: #999999;}
.roundtop { background: url(images/tr.gif) no-repeat top right;}
.middle { border-left:1px #e3e2e1 solid; border-right:1px #e3e2e1 solid;}
.roundbottom { background: url(images/br.gif) no-repeat top right;}
img.corner { width: 8px; height: 8px; border: none; display: block !important;}
</style>
</head>
<body>
<div id="wrapper">
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container2">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">aasdf s asdf sdf sfsdfsdf asdf sdf. afas sdf sfsdf. adf asdf sdf .asdfsdfsdgfga fasdf adfdaf asdf a.</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
</div>
</body>
</html>
I decided to remove all outlines from my website, so I added the following statement to my CSS file: Code: *
{
outline: none
}
However, in Firefox 2 (but not in IE7), the outline still surrounds the content of a <select> dropdown after a new option is selected. Is there any way to get rid of this outline? I know dropdowns are often part of the operating system so that there are additional restrictions on styling them, but I assume Firefox's dropdowns are not. I've already checked, and the outline property is not being set elsewhere in my code. Thanks for your help! How do i set a font outline color as red and the fill with white using css. Does anyone know? hello everyone, does anyone know how can i connect both the outline and the border-radius? it works fine beside the outline is square (btw both does not work on ie for some reason, why's that?) code is: Quote: outline: #ffc614 solid 5px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px; thank you. I have a test template page I have created using two columns with dropshadows and an outline. My question is, when I try to add other content within the div that creates the outline container....it does not expand the outline container, it creates a new outline container. I need to put other elements other than text so, i need to resolve/better understand this issue. the template page can be found at: http: //www rustbug.com / mmtest / template.html I tried everything I can think of in Opera, and no matter what I try, when I focus on a link I get selected highlight on the text. Is there some CSS way of hiding the highlight? I've also posted in the JavaScript forum. Hi all, I've tried both the "shorthand" and regular version of BORDER attribute, and neither works, Yet outline works fine (but I don't want to use that since IE7 doesn't support it). Anyone able to troubleshoot this? Here's part of the CSS code (the ".thumb" class at the end is what's not working) and below that is the url. CSS Code: Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } #thumbBox{ /*Outermost DIV for thumbnail viewer*/ position: absolute; left: 2.5em; top: -4em; width: auto; height: auto; padding: .5em; padding-bottom: 0em; background: #313131; visibility: hidden; z-index: 5; cursor: hand; cursor: pointer; } #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */ font: bold 1em arial; line-height: 1.1em; color: white; padding: .5em 0; text-align: right; } #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */ background-color: #CCC; } #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/ position: absolute; visibility: hidden; border: .125em solid black; background-color: #EFEFEF; padding: .5em; z-index: 6; } .thumb { margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; border-style: dashed; border-color:#CCC; border-width:.125em; }
.gallerycontainer{
I don't think I have the 5 requisite posts, so here's the url in question (# = .) & (| = /) http:||www#bauerbuiltmfg#com|db-series-planters#html Thanks in advance for any help! heys all, in FF, I can get rid of that dreaded link outline via a { outline: none; } but IE7 isn't obeying. Funny enough, it's buggy, sometimes the outline is there, othertimes not. Does anyone know a sure-fire way to fix this issue, hopefully not resorting to apply this.blur() to all the links? Thanks. |
|||||||