|
CSS - Aligning Headings?
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. Similar TutorialsHi 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 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 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 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 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. www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. Hi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot Hi all, I am having trouble getting my third column to sit in place correctly. Here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html --> <HTML><HEAD><TITLE>CSS layout using divs</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META content="" name=Keywords> <META content="" name=Description> <STYLE type="text/css" media="all"> @import url( css/commonSite.css ); </STYLE> <META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD> <BODY> <DIV class="panelS"> <DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt=""> <DIV class="colTwo"> <DIV class="linkS"> <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> </DIV> <DIV class="colThree"></DIV> </DIV> </DIV> </DIV> </BODY></HTML> Code:
.panelS
{
BACKGROUND-COLOR: #adadad;
WIDTH: 760px;
position: absolute;
}
.colOne {
FONT-WEIGHT: bold;
FONT-SIZE: medium;
LEFT: 0px;
WIDTH: 85px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
}
.colTwo {
FONT-SIZE: medium;
LEFT: 85px;
WIDTH: 475px;
HEIGHT: 21px;
background-color:#FF6633;
position:relative;
}
.colThree {
FONT-SIZE: medium;
LEFT: 560px;
WIDTH: 200px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
background-color:#00CCCC;
}
.linkS
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:link
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:visited
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:hover
{
FONT: bold 10px Verdana;
COLOR: #0055c3;
TEXT-ALIGN: right;
TEXT-DECORATION: underline
}
I was wanting all the columns side by side. Any ideas where i might be going wrong? Cheers I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... http://s125392025.websitehome.co.uk/layout.html I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image. Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please? PHP Code: <!DOCTYPE html PUBLIC> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } #mid, #left { top:120px; } #midcontainer { width:400px; margin:0 auto; position:relative; left:35px; top:44px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; } #midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:180px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:50px; } #leftcontainer { width:200px; position:absolute; left:5px; top:150px; } </style> </head> <body> <!--This is the main site header properties--> <div id="top"> <div id="topbody"> <h5>Main Site Header</h5> <p class="top1">This is where the main image, and TopNav will go.</p> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <h5>Middle</h5> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </body> </html> i seem to be having trouble aligning two css layers i have a border and then content within in (content is images) i would like to align another layer in here to the middle left. can this be done? also the HTML is wrapping around the image, any way i can stop this? as the images should be along the bottom below the image. the link and data are as follows: http://wakefieldfhs.co.uk/stu/users/njacques/9 and one last thing i just noticed while testing all this, its not displaying the footer and ending data (this only occurs on my server, not on my test server. :S Code: (
layout->doExifBorder();
echo("EXIF INO HERE");
$layout->endBorder();
$layout->endBorder();
footer(); // for future refernce footer.inc include the end div's!!
?>)
(this would equate to: ) Code: <div class='t-exif'><div class='b-exif'><div class='l-exif'><div class='r-exif'><div class='bl-exif'><div class='br-exif'><div class='tl-exif'><div class='tr-exif'>EXIF INO HERE</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div> <div class="footer" align="center"> <a href='about.php'>about</a> | disclaimer | privacy | terms of use<br></div> </div> </body> </body> </html> Whta's the best way to do this? I'm tryiong to avoid using tables. but i cant think of a more liquid way to do it... .........key:value someOtherKey:someOthervalue ...more keys:more values ...........k:v (the periods are just placeholders for whitespace) Thanks! http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done? I used float:right; and float:left for starters but I can not get the columns any closer to each other. Any help is greatly appreciated, - mike I'm building a site: www.bunjareecottages.com.au At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected. What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom. Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned. Any ideas? I am redesigning my site, changing it from 2 columns to 3. I can't seem to get the 3rd column where I want it. See: http://www.jwsuretybonds.com/jw09/surety-bonds/commercial-bonds/ My goal is to make the grey "Get Started Now" box to the far right, the text in the center, and the nav buttons to the left. Is it possible to do this by only modifying the CSS? If I have to change the HTML it will create a TON of work in recoding my templates. Hi guys, I'm having some serious problems in IE with my site I'm working on here http://www.q-net.net.au/~benvangrootel/fvd/index.html the main problem is the amount of space in between the head banner and the content underneath and also the links under the images on the right - they aren't aligned properly compared to how they look in mozilla. I have no idea how to fix this, is there any quick fix? css is here Code: /* Layout Crap */
body {
text-align:center;
background-image: url(bg.jpg);
background-repeat: repeat-x;
}
#frame {
width:697px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
background-image: url(left_bg.gif);
background-repeat: repeat-y;
}
#contentleft {
width:175px;
padding:0px;
float:left;
background:#fff;
}
#contentcenter {
width:550px;
padding:0px;
float:left;
background-image: url(left_bg.gif);
background-repeat: repeat-y;
}
#contentright {
width:147px;
padding:0px;
float:left;
background-image: url(right_bg.gif);
background-repeat: repeat-y;
}
#contentright_container {
margin-left: 19px;
margin-top: 70px;
}
#contentright_container_nodule {
font-family: arial;
margin-bottom: 10px;
margin-left: 3px;
}
#contentright_container_nodule li{
list-style-type: square;
color: #EDAE00;
line-height: 12px;
margin-left: 14px;
}
#contentright_container_nodule a{
color: #2A2A2A;
font-size: 8pt;
padding-right: 30px;
}
#contentright_container_nodule a:hover{
color: #EDAE00;
font-size: 8pt;
}
#contentheader {
width: 697px;
height: 74px;
background-image: url(head_bg.gif);
background-repeat: no-repeat;
}
#contentheader img {
top: 10px;
left: 74px;
position: relative;
}
#contentcontainercontainerlol {
top: 100px;
left: 12px;
position: relative;
}
#contentcontainer {
background-image: url(content_container_bg.jpg);
background-repeat: no-repeat;
}
#contentcontainer h1 {
color: #EDAE00;
font-family: arial;
font-size: 17px;
padding-top: 17px;
margin-left: 15px;
margin-bottom: -8px;
}
#contentcontainer p {
color: #afafaf;
font-family: arial;
font-size: 13px;
padding-left: 20px;
padding-right: 26px;
line-height: 20px;
}
#footer {
position: relative;
margin: 0;
padding: 0;
clear: both;
background: url(footer.gif) no-repeat top left;
background-repeat: no-repeat;
width: 697px;
height: 35px;
text-align:center;
font-size: 7pt;
font-family: arial;
color: #CFCFCF;
}
#footer a {
color: #CFCFCF;
}
/* Menu Crap */
#navContainer {
top: 37px;
right: 60px;
position: relative;
}
#nav {
width: 409px;
height: 20px;
background: url(image.jpg);
margin: 10px auto; padding: 0;
position: relative;
}
#nav li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#nav li, #nav a {height: 20px; display: block;}
#home {left: 0; width: 44px;}
#profile {left: 45px; width: 61px;}
#operations {left: 105px; width: 87px;}
#services {left: 192px; width: 68px;}
#customers {left: 260px; width: 85px;}
#contact {left: 345px; width: 72px;}
#home a:hover {background: transparent url(image.jpg) 0 -20px no-repeat;}
#profile a:hover {background: transparent url(image.jpg) -44px -20px no-repeat;}
#operations a:hover {background: transparent url(image.jpg) -105px -20px no-repeat;}
#services a:hover {background: transparent url(image.jpg) -192px -20px no-repeat;}
#customers a:hover {background: transparent url(image.jpg) -260px -20px no-repeat;}
#contact a:hover {background: transparent url(image.jpg) -345px -20px no-repeat;}
thanks in advance |
|||||||