|
CSS - Aligning Three Elements
I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this:
Code: Picture - Header Text over here I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob. Similar TutorialsI have a logo and would like to align an H1 and an H2 beside it. So, I would have: Code:
| H1 text
image|
| H2 text
If I add a display inline to both elements, I get the H2 beside the H1 instead of under. If I add it to only the H1, I get the H1 beside the image, and the H2 under the image. What would be the proper way to do this? hi....i'm trying to align some elements inthe left cell of a table that separates the two main areas of my site....table structure is as follows Code: <table height="100%" cellSpacing="0" cellPadding="0" width="100%" bgColor="#333333" border="0"> <tr> <td id="leftcell" width="267" vAlign="top" bgColor="#999999"> <div id="logo"><IMG align="right" height="266" src="images/logo-c.gif" width="256"></div> <div id="baby-foot"><A href="mailto:#">dog@the bomb.com</A> P:323-957-0572</div> <div id="maillist"><asp:textbox id="_email" Runat="server" Width="192px">Enter Email To Join Mailing List</asp:textbox><asp:button id="_join" Runat="server" Text="Join" CssClass="join"></asp:button></div> <div id="search"><uc1:sidesearch id="Sidesearch1" runat="server"></uc1:sidesearch></div> <div id="fav"><uc1:favlist id="Favlist1" runat="server"></uc1:favlist></div> </td> <td id="rightblock" vAlign="top"> <td id="rightblock" vAlign="top">....main content area...</td> and the css2 Code: #logo { BACKGROUND-IMAGE: url(../images/logo-c.gif); BACKGROUND-REPEAT: no-repeat; HEIGHT: 266px; BACKGROUND-COLOR: #000000 }
#baby-foot { PADDING-LEFT: 11px; FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 256px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 30px; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none }
#maillist { PADDING-LEFT: 11px; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 60px; BACKGROUND-COLOR: #000000 }
#search { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BORDER-BOTTOM: red 1px solid; BACKGROUND-COLOR: #666666 }
#fav { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BACKGROUND-COLOR: #999999 }
ok....the way it's set up now looks fine in safari and netscape (the fav and search controls push the cell beyond 256px but the right floating logo-c.gif flows with the push) however, in IE the controls are fixed at 256 and the logo-c pushes the cell a few pixels right exposing a slice of the table's back color... any suggestions for a work around? thank, b The Website in Question I just started to remake my portfolio site from scratch, and since I'm a crappy coder, I ran into a brick wall right away. It was easy horizontally and vertically centering the tan rectangle, but for the life of me I can't get the green sliding panel where I want it, and have it otherwise horizontally and vertically centered at all times. How I want it: Example I think the problem may be a conflict between the javascript that enables the sliding function of the green panel and the CSS trying to center it. The javascript demands absolute positioning of the two divs (the part that says "PORTFOLIO" and the part that slides right), because that's what tells the sliding panel where to slide and expand to. However, the CSS demands relative positioning, in order to position the panel a percentage down the page, and half its height in pixels back up again, as well as the horizontal alignment. Below is the source code for the site. At the moment, the sliding panel (its code is shown in blue) is set to be in the top left corner of the site, but it obviously isn't. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title></title>
<style type='text/css'>
body, html {
height:100%;
}
#container{
height:100%;
text-align: center;
}
#panel {
width: 700px;
height: 500px;
position:relative;
top:50%;
margin-top:-257px;
left:50%;
margin-left:-350px;
}
body {
background-image: url(bg3.gif);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
<div id="panel"><img src="work.png"></div>
</div>
<script type="text/javascript" src="Animation.js"></script>
<div style="position:relative;
width:350px;
height:520px;
top:0px;
left:0px;">
<div id="exampleHeader"
style="position:absolute;
width:50px;
height:500px;
top:0;
left:0px;
background:#298b12;
text-align:center;
color:#FFFFFF;
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;"
onclick="runAnimation(animationObject, this)">
<img src="pf.png">
</div>
<div id="examplePanel"
style="position:absolute;
width:0px;
height:500px;
top:0px;
left:50px;
background:#ac926d;
background-image: url(pbg.gif);
background-position:right top;
overflow:hidden;
-moz-border-radius-topright: 25px;
-webkit-border-top-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;"
align="center"
overflow:hidden;">
Content
</div>
</div>
<script type="text/javascript">
var animationObject = new AnimationObject('examplePanel');
animationObject.AddFrame(new AnimationFrame(50, 0, 210, 500, 400));
function runAnimation(animation, header) {
if(header.check) {
animation.RunBackward();
header.check = false;
}
else {
animation.RunForward();
header.check = true;
}
}
</script>
</body>
</HTML>
I just can't seem to get my code to work. Can anybody offer any help to solve this problem? I'd really appreciate it. I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width? Example: Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! 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. 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 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 there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} I am not sure if this is a problem that can be solved with css or not. I have recently switched from straight html to php and have no experience in css. Basically I split my pages into 5 separate areas. Header, footer, right column, left column and center column. The problem that I am running into is that the header and footer are in the right spot on the page but the left, right and center columns are way off. Here is a link to my site OWPT I have my problem, with an example, explained in more detail. Any help would be greatly appreciated. I have been trying to get Son of Suckerfish dropdown menus to work in IE for me for the longest time... I just can't get it to align how I want it to when I add my own "tab" effect. Code: <ul id="nav"> <li id="main1" class="mainMenu"><a href="./index.php">Home</a></li> <li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li> <li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li> <li id="main4" class="mainMenu"><a href="./college.php">College Students</a> <ul> <li><a href="./studentNews.php">News</a></li> <li><a href="./studentLeaders.php">Student Leaders</a></li> <li><a href="./sundaySupper.php">Sunday Supper</a></li> <li><a href="./serventEvents.php">Servant Events</a></li> <li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li> </ul> </li> <li id="main5" class="mainMenu"><a href="./family.php">Family Ministry</a> <ul> <li><a href="./family.php">Overview</a></li> <li><a href="./fmSchedule.php">Schedule</a></li> <li><a href="./fmActivities.php">Activities</a></li> <li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li> <li><a href="./fmYouCanHelp.php">You Can Help</a></li> <li><a href="./fmCoordination.php">Education Coordination Team</a></li> </ul> </li> <li id="main6" class="mainMenu"><a href="./serving.php">Ways to Serve</a></li> <li id="main7" class="mainMenu"><a href="./giving.php">Ways to Give</a> <ul> <li><a href="./giving.php">Financial Home</a></li> <li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34f a442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li> <li><a href="./eft.php">Electronic Fund Transfer</a></li> <li><a href="./matching.php">Matching Gifts</a></li> <li><a href="./meijer.php">Meijer Community Rewards</a></li> <li><a href="./givingTools.php">Tools for Giving</a></li> <li><a href="./endowment.php">Endowment Fund</a></li> </ul> </li> <li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li> </ul> That's the HTML Code: #nav {
float: left;
list-style: none;
line-height: 1;
font-size: 16px;
padding: 0;
margin: 0 0 0.5em 0.6em;
}
#nav ul {
list-style: none;
background: #006600;
padding: 0;
border: 1px solid #000;
}
#nav li.sfhover ul {
left: 1em;
}
#nav a {
display: block;
color: white;
text-decoration: none;
padding: 0.25em;
padding-right:0;
}
#nav ul a {
display: block;
width: 6em;
color: white;
text-decoration: none;
background:none;
border:none;
}
#nav li {
float: left;
padding: 0;
width: 7em;
height:auto;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 13.9em;
font-weight: normal;
border: 1px solid #000;
}
#nav li li {
padding-right: 1em;
width: 13em;
}
#nav li ul a {
width: 12em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav ul li:hover, #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
background: #009900;
}
/* Width of the tabs */
#nav #main1 {
width:3.4em;
}
#nav #main2 {
width:4.6em;
}
#nav #main3 {
width: 4.5em;
}
#nav #main4 {
width:7.85em;
}
#nav #main5 {
width:7em;
}
#nav #main6 {
width:6.8em;
}
#nav #main7 {
width:6.3em;
}
#nav #main8 {
width:5.5em;
}
#nav li {
margin-right: 3px;
border: 1px solid #000;
background: #006600;
color: white;
text-decoration:none;
}
#nav li ul li {
border:none;
background: #006600;
color: white;
text-decoration:none;
}
#nav li ul {
border: 1px solid black;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
And that's the CSS Just in case this will help, here's a link to a test page (just throw together so There is no content other than the menu) http://www.martinlutherchapel.org/test.html So what I want is to have 2 forms with buttons aligned horizontally. <form><input type="submit"></form> <form><input type="submit"></form> They should be like this: [Button 1] [Button 2] But instead, they go like this: [Button 1] [Button 2] And I don't know the CSS for it, so thanks in advance. hey im having a problem with my div aligning in my css. I want the whole site to be centered but start on the top of the page. I can either set all my margins and padding to 0 and get it top left or I can center it in the middle of the screen but theres a giant gap from the top of the screen and where the site actually starts.. any suggestions on how to align it with the top but still keep it centered? Thanks Ok well im new to these forums and ive been looking pretty much everywhere for help, so heres my problem. I bought a joomla template from a company, i got it then installed it, but im having one huge issue i cant seem to fix. The news is piling up next to each other instead of each new news post going above the older one in a nice neat line one post after another. Instead they just moosh together after the first post. I emailed the company and they said i had to edit the css and thats all the help i got. I have no knowledge of css and have no idea how to fix the issue. Any help would be greatly appreciated. A link to my site is below as well as the template css. Please someone help me with this problem. http://almostfinite.info/pku Code: /*------------------------------------------------------------------------
# JA Sanidine II for Joomla 1.5 - Version 1.0 - Licence Owner JA98631
# ------------------------------------------------------------------------
# Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
-------------------------------------------------------------------------*/
/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF;
color: #000000;
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
line-height: 1.5;
}
body#bd {
color: #333333;
background-color: #CCCCCC;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
}
body.contentpane {
color: #000000;
font-size: 12px;
line-height: 1.3em;
margin: 0;
margin: 1em 2em;
width: auto; /* Printable Page */
}
body.fs1 {font-size: 10px;}
body.fs2 {font-size: 11px;}
body.fs3 {font-size: 12px;}
body.fs4 {font-size: 13px;}
body.fs5 {font-size: 14px;}
body.fs6 {font-size: 15px;}
/* Normal link */
a {
color: #D58400;
text-decoration: none;
}
a:hover, a:active, a:focus {
color: #D58400;
text-decoration: underline;
}
a img {
border: none;
}
/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
line-height: normal;
}
/* Small text */
small, .small, .smalldark, .article-meta, .modifydate, .img_caption p, .site-slogan, #ja-login,
a.readon, #ja-botnav, #ja-pathway, #ja-subnav, #ja-contentsl1, #ja-contentsl2, #ja-footer, #ja-col1, #ja-col2, #ja-botsl {
font-size: 92%;
}
img {
margin: 0;
padding: 0;
}
.img_caption img {
border: 1px solid #CCCCCC;
}
.img_caption p {
text-align: center;
color: #666666;
}
.img_caption.left, .img_caption.right {
margin-top: 3px;
}
.no-caption {
margin: 3px 0 3px 5px;
border: 1px solid #CCCCCC;
}
/* Heading */
h1 {font-size: 200%;}
h2 {font-size: 175%;}
h3 {font-size: 150%;}
h4 {font-size: 125%;}
p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
background: url(../images/bullet.gif) no-repeat 20px 6px;
padding-left: 30px;
}
ol li {
margin-left: 35px;
}
th {
font-weight: bold;
padding: 7px 8px;
text-align: left;
}
fieldset {
padding: 7px 5px 5px !important;
border: none;
margin: 1em 0 0;
background: url(../images/sep.gif) repeat-x top;
}
fieldset legend {
font-weight: bold;
background: #FFFFFF;
}
fieldset a {
font-weight: bold;
}
fieldset.input {
padding: 0;
background: none;
}
hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid #CCCCCC;
height: 1px;
}
br {
height: 1px;
font-size: 1px;
}
td, th, div {
font-size: 100%;
}
/* FORM
--------------------------------------------------------- */
form {
margin: 0;
padding: 0;
}
form label {
cursor: pointer;
}
input, select, textarea, .inputbox {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 100%;
}
textarea, textarea.inputbox {
background: #FFFFFF;
color: #333333;
border: 1px solid #DDDDDD;
}
.inputbox {
padding: 3px 2px;
border: 1px solid #DDDDDD;
background: url(../images/input-bg.gif) repeat-x top #FFFFFF;
color: #333333;
font-size: 100%;
}
.button {
padding: 3px 8px 2px;
border: 1px outset #CCCCCC;
background: url(../images/grad-1.gif) repeat-x top #D58400;
color: #FFFFFF;
text-transform: uppercase;
font-size: 92%;
font-weight: bold;
}
.button:hover {
border: 1px inset #CCCCCC;
}
select#ordering, select#limit {
background-image: none;
}
* html .button { /*IE 6*/
padding: 2px 5px !important;
}
*+html .button { /*IE 7*/
padding: 2px 5px !important;
}
/* JOOMLA STYLE
--------------------------------------------------------- */
.article_separator, .article_seperator {
clear: both;
display: block;
height: 30px;
margin: 0;
background: url(../images/sep.gif) repeat-x center;
}
.column_separator {
padding: 0 25px;
}
/* content tables */
.sectiontableheader {
background: url(../images/grad-2.gif) repeat-x top #373737;
border: 1px solid #DDDDDD;
padding: 6px 8px;
color: #FFFFFF;
font-weight: bold;
}
.sectiontableheader a,
.sectiontableheader a:hover,
.sectiontableheader a:active,
.sectiontableheader a:focus {
color: #FFFFFF;
}
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 8px;
background: url(../images/sep.gif) repeat-x bottom;
}
table.contentpane {
border: none;
width: 100%;
}
table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}
table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 30%;
float: right;
}
table.contenttoc td {
background: url(../images/bullet.gif) no-repeat 12px 8px;
padding: 1px 5px 1px 20px;
}
table.contenttoc th {
background: url(../images/sep.gif) repeat-x bottom;
padding: 0 0 3px;
text-indent: 5px;
}
table.poll {
border-collapse: collapse;
padding: 0;
width: 100%;
}
table.pollstableborder {
border: none;
padding: 0;
text-align: left;
width: 100%;
}
table.pollstableborder img {
vertical-align: baseline;
}
table.pollstableborder td {
border-collapse: collapse;
border-spacing: 0;
padding: 4px !important;
background: none;
}
table.pollstableborder tr.sectiontableentry1 td {
}
table.searchintro {
padding: 10px 0;
width: 100%;
}
table.searchintro td {
padding: 5px!important;
}
.blog_more {
margin: 15px 0 0;
padding: 15px 0 0;
background: url(../images/sep.gif) repeat-x top;
}
.blog_more strong {
display: block;
margin: 0 0 5px;
text-transform: uppercase;
}
.blog_more ul {
margin: 0;
padding: 0;
}
.blog_more ul li {
background: url(../images/bullet.gif) no-repeat 4px 8px;
margin: 0;
padding: 0 0 0 12px;
}
.category {
font-weight: bold;
}
h1.componentheading, .componentheading {
font-size: 250%;
margin: 0 0 15px;
padding: 0;
color: #D58400;
}
.contentdescription {
padding-bottom: 30px;
}
h2.contentheading, .contentheading {
margin: 0;
padding: 0;
font-size: 200%;
color: #008EBF;
}
table.blog .contentheading {
font-size: 135%;
}
a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
color: #008EBF;
}
a.readon {
font-weight: bold;
text-transform: uppercase;
}
a.readon:hover, a.readon:focus, a.readon:active {
}
table.contentpaneopen td, table.contentpane td {
}
table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}
.moduletable {
padding: 0;
}
ul.pagination {
margin: 20px auto;
padding: 20px 0 0;
color: #666666;
}
ul.pagination li {
background: none;
display: inline;
margin: 0;
padding: 0;
}
ul.pagination li span {
padding: 2px 5px;
}
ul.pagination a {
padding: 2px 5px;
text-decoration: none;
background: url(../images/grad-4.gif) repeat-x top;
color: #666666;
border: 1px solid #DDDDDD;
}
ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
background: #D58400;
color: #FFFFFF;
}
.pagenavbar {
background: url(../images/icon-pages.gif) no-repeat center left;
font-weight: bold;
padding-left: 14px;
}
.pagenavcounter {
background: url(../images/icon-pages.gif) no-repeat 0 11px;
font-weight: bold;
padding: 8px 14px 0 14px;
}
.smalldark {
text-align: left;
}
div.syndicate div {
text-align: center;
}
.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}
ul.latestnews a, ul.mostread a {
}
/* META
--------------------------------------------------------- */
.article-toolswrap {
display: block;
margin: 0 0 10px;
padding: 0;
position: relative;
}
.article-tools {
display: block;
padding: 0 10px 0 0;
}
.article-meta {
width: 70%;
float: left;
margin-top: 3px;
color: #666666;
}
.createby {
font-weight: bold;
}
.createdate {
padding-right: 6px;
margin-right: 5px;
background: url(../images/vline.gif) no-repeat right;
}
.createdate-icon { /*for clendar style*/
margin: 0 10px 0 0;
display: block;
float: left;
width: 40px;
height: 38px;
text-align: center;
border: 1px solid #CCCCCC;
background: #F8F8F8;
color: #666666;
}
.ja-date {
font-size: 15px;
font-weight: bold;
}
.ja-month {
color: #666666;
font: 9px/14px Arial, Helvetica , sans-serif;
text-transform: uppercase;
display: block;
letter-spacing: 1px;
background: url(../images/grad-4.gif) repeat-x top #999999;
border-bottom: 1px solid #CCCCCC;
}
.modifydate {
width: 100%;
display: block;
color: #D58400;
margin: 15px 0;
}
.article-section {
padding-left: 6px;
margin-left: 5px;
background: url(../images/vline.gif) no-repeat left center;
}
.article-section a {
color: #666666;
}
.article-category a {
color: #666666;
}
div.buttonheading {
position: absolute;
top: 0;
right: 10px;
}
.buttonheading img {
margin: 0 0 0 5px;
border: 0;
float: right;
}
/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
width: 950px;
margin: 0 auto;
clear: both;
background: url(../images/wrapper-bg.png) repeat-y center;
}
.narrow #ja-wrapper {
width: 750px;
background: url(../images/wrapper-bg-n.png) repeat-y center;
}
#ja-container {
padding: 5px 20px;
}
#ja-mainbody {
width: 70%;
float: left;
}
/* PRIMARY COLUMN
--------------------------------------------------------- */
#ja-content {
clear: both;
display: block;
float: right;
width: 70%;
background: url(../images/content-center3.gif) repeat-y center #FFFFFF;
}
#ja-content-top {
background: url(../images/content-top3.gif) no-repeat center top;
}
#ja-content-bot {
background: url(../images/content-bot3.gif) no-repeat center bottom;
}
.narrow #ja-content {
background: url(../images/content-center3-n.gif) repeat-y center #FFFFFF;
}
.narrow #ja-content-top {
background: url(../images/content-top3-n.gif) no-repeat center top;
}
.narrow #ja-content-bot {
background: url(../images/content-bot3-n.gif) no-repeat center bottom;
}
#ja-current-content {
padding: 20px;
margin: 0;
}
/* COLUMNS
--------------------------------------------------------- */
#ja-col1 {
float: left;
overflow: hidden;
width: 30%;
}
#ja-col1 div.ja-innerpad {
padding-right: 5px;
}
#ja-col2 {
float: right;
overflow: hidden;
width: 30%;
}
#ja-col2 div.ja-innerpad {
padding-left: 5px;
}
/*common style for column*/
/* COLLAPSIBLE LAYOUT
--------------------------------------------------------- */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
clear: both;
}
/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
width: 100%;
}
#ja-containerwrap-fr #ja-col1 {
width: 22%;
}
#ja-containerwrap-fr #ja-content {
width: 78%;
background: url(../images/content-center2.gif) repeat-y center #FFFFFF;
}
#ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2.gif) no-repeat center top;
}
#ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2.gif) no-repeat center bottom;
}
.narrow #ja-containerwrap-fr #ja-content {
background: url(../images/content-center2-n.gif) repeat-y center #FFFFFF;
}
.narrow #ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2-n.gif) no-repeat center top;
}
.narrow #ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}
/*content + right*/
#ja-containerwrap-fl #ja-content {
width: 100%;
background: url(../images/content-center.gif) repeat-y center #FFFFFF;
}
#ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top.gif) no-repeat center top;
}
#ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot.gif) no-repeat center bottom;
}
.narrow #ja-containerwrap-fl #ja-content {
background: url(../images/content-center-n.gif) repeat-y center;
}
.narrow #ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top-n.gif) no-repeat center top;
}
.narrow #ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot-n.gif) no-repeat center bottom;
}
/*full*/
#ja-containerwrap-f #ja-mainbody {
width: 100%;
}
#ja-containerwrap-f #ja-content {
width: 100%;
background: url(../images/content-center1.gif) repeat-y center #FFFFFF;
}
#ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1.gif) no-repeat center top;
}
#ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1.gif) no-repeat center bottom;
}
#ja-containerwrap-f #ja-current-content {
padding-left: 20px;
padding-right: 20px;
}
.narrow #ja-containerwrap-f #ja-content {
background: url(../images/content-center1-n.gif) repeat-y center;
}
.narrow #ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1-n.gif) no-repeat center top;
}
.narrow #ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1-n.gif) no-repeat center bottom;
}
/* MODULE
--------------------------------------------------------- */
div.moduletable h3 {
margin: 0 -8px 10px;
padding: 0 0 0 30px;
font-size: 100%;
height: 28px;
line-height: 28px;
color: #333333;
background: url(../images/h3-bg.gif) no-repeat left;
text-transform: uppercase;
}
div.moduletable h3 span {
display: block;
height: 28px;
background: url(../images/h3-bg.gif) no-repeat right;
}
div.moduletable {
margin: 0;
padding: 0 15px;
}
div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.ja-box-br h3 {
margin: 0 -6px 10px;
padding: 0 0 0 30px;
font-size: 100%;
height: 28px;
line-height: 28px;
color: #FFFFFF;
background: url(../images/h3-bg.gif) no-repeat left #333333;
text-transform: uppercase;
}
div.module h3 span,
div.module_text h3 span,
div.module_menu h3 span,
div.module_hilite h3 span,
div.ja-box-br h3 span {
display: block;
height: 28px;
background: url(../images/h3-bg.gif) no-repeat right;
}
div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/box-br.gif) no-repeat bottom right #FFFFFF;
overflow: hidden;
margin-bottom: 5px;
}
div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.ja-box-bl {
margin: 0;
padding: 0;
background: url(../images/box-bl.gif) no-repeat bottom left;
}
div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.ja-box-tr {
padding: 0;
margin: 0;
background: url(../images/box-tr.gif) no-repeat top right;
}
div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.ja-box-tl {
padding: 15px 20px 15px;
background: url(../images/box-tl.gif) no-repeat top left;
}
div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div {
margin: 0;
padding: 0;
background: none;
}
/* mis */
div.banneritem_text {
padding: 5px 0 !important;
}
div.advs {
clear: both;
display: block;
float: left;
width: 100%;
}
div.moduletable li,
div.moduletable_menu li,
div.moduletable_text li,
div.module li,
div.module_menu li,
div.module_text li {
padding-left: 15px;
background-position: 5px 7px;
}
/* HEADER
--------------------------------------------------------- */
#ja-header {
line-height: normal;
position: relative;
padding: 0;
margin: 0 10px;
z-index: 999;
height: 127px;
background: url(../images/header-bg.gif) repeat-x 0 19px #FFFFFF;
border-top: 1px solid #CCCCCC;
border-bottom: 3px solid #D58400;
}
h1.logo, div.logo-text {
margin: 0 20px;
padding: 0;
}
h1.logo {
width: 330px;
height: 70px;
position: absolute;
top: 10px;
}
h1.logo a {
width: 330px;
height: 70px;
display: block;
background: url(../images/logo.png) no-repeat center;
}
h1.logo a span {
position: absolute;
top: -1000px;
}
div.logo-text {
outline: none;
position: absolute;
top: 20px;
}
div.logo-text h1 {
font-size: 250%;
font-weight: bold;
letter-spacing: 2px;
margin: 0;
padding: 0;
}
div.logo-text h1 a {
color: #333333;
}
.site-slogan {
color: #666666;
margin: 0;
padding: 0;
}
#ja-topnav {
position: absolute;
top: 10px;
right: 40px;
}
#ja-topnav ul {
margin: 0;
padding: 2px 0;
}
#ja-topbar {
background: url(../images/grad-3.gif) repeat-x top #2F2F2F;
height: 25px;
margin: 0 10px;
position: relative;
}
/* MAIN NAVIGATION
--------------------------------------------------------- */
#ja-mainnav {
height: 40px;
position: absolute !important;
bottom: 0px;
left: 0;
z-index: 999;
width: 100%;
background: url(../images/mainnav-bg.gif) repeat-x bottom;
}
#ja-mainnav a, #ja-subnav a {
outline: none;
line-height: normal;
}
#ja-subnav {
clear: both;
background: url(../images/subnav-bg.gif) repeat-x bottom #D58400;
margin: 0 10px;
padding: 0 10px;
height: 30px;
}
#ja-subnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#ja-subnav li {
background: none;
margin: 0;
padding: 0;
display: inline;
}
#ja-subnav a {
display: block;
float: left;
outline: none;
padding: 0 15px;
line-height: 30px;
text-decoration: none;
color: #FFFFFF;
}
#ja-subnav a:hover,
#ja-subnav a:active,
#ja-subnav a:focus {
color: #FFFFFF;
background: url(../images/subnav-hover.gif) no-repeat center bottom;
text-decoration: none;
}
#ja-subnav li.active a {
color: #FFFFFF !important;
font-weight: bold;
background: url(../images/subnav-hover.gif) no-repeat center bottom;
text-decoration: none;
}
/* breadcrumbs */
#ja-pathway {
padding-top: 3px;
color: #999999;
text-indent: 15px;
}
#ja-pathway strong {
margin-right: 5px;
}
#ja-pathway img {
margin: 1px 5px;
}
/* Default Joomla! Menu */
ul.menu {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
ul.menu li {
display: block;
background: url(../images/sep.gif) repeat-x bottom;
margin: 0;
padding: 0 0 2px;
line-height: normal;
}
ul.menu li a {
display: block;
outline: none;
padding: 8px 2px;
margin: 0;
text-decoration: none;
color: #333333;
font-weight: bold;
}
ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
color: #D58400;
text-decoration: underline;
}
ul.menu li.active a {
font-weight: bold;
}
ul.menu li ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li li {
border: none;
background: none;
padding: 0;
}
ul.menu li li a {
border: none;
padding: 2px 5px 8px 15px !important;
text-transform: none;
font-weight: normal !important;
background: url(../images/arrow.png) no-repeat 8px 6px !important;
color: #333333;
}
ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
color: #D58400;
text-decoration: underline;
}
ul.menu li li.active a {
color: #D58400;
font-weight: bold;
}
ul.menu li li li a {
color: #333333 !important;
font-weight: normal !important;
padding-left: 25px !important;
background: url(../images/arrow.png) no-repeat 18px 6px !important;
}
ul.menu li li li.active a {
font-weight: bold !important;
}
/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}
.ja-box-left div.module, .ja-box-center div.module {
}
/* Top spotlight */
#ja-topsl {
clear: both;
margin: 0 10px;
padding: 0;
height: 310px;
background: url(../images/topsl-bg.gif) repeat-x bottom #1D1D1D;
overflow: hidden;
}
#ja-topsl1 {
float: left;
width: 70%;
overflow: hidden;
}
#ja-topsl1 div#ja-slideshowwrap {
margin: 20px 10px;
}
#ja-topsl2 {
float: right;
width: 30%;
overflow: hidden;
}
#ja-topsl2 div.moduletable h3, #ja-topsl2 div.moduletable h3 span {
background-image: url(../images/h3-bg-d.gif);
}
#ja-topsl2 div.moduletable {
margin: 20px 0 0;
}
/* Content spotlight */
#ja-contentsl1 {
clear: both;
width: 100%;
padding: 0 0 5px;
}
#ja-contentsl2 {
clear: both;
margin: 0;
padding: 5px 0;
}
#ja-contentsl1 div.module, #ja-contentsl2 div.module {
margin: 0;
}
#ja-contentsl1 div.module h3, #ja-contentsl1 div.module h3 span,
#ja-contentsl2 div.module h3, #ja-contentsl2 div.module h3 span {
background: none;
color: #333333;
height: auto;
line-height: normal;
padding-left: 4px;
}
#ja-contentsl1 ul.latestnews, #ja-contentsl1 ul.mostread {
margin: 0;
}
#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
background: url(../images/icon-pages.gif) no-repeat left center;
padding-left: 15px;
}
#ja-contentsl1 li.latestnews, #ja-contentsl1 li.mostread {
background: url(../images/sep.gif) repeat-x bottom;
padding: 4px 2px 6px;
}
#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
background: url(../images/icon-pages.gif) no-repeat left center;
padding-left: 15px;
}
/* Bottom spotlight */
#ja-botsl {
clear: both;
margin: 0 10px;
padding: 15px 5px;
background: url(../images/grad-2.gif) repeat-x top #373737;
border-top: 1px solid #1D1D1D;
border-bottom: 1px solid #1D1D1D;
color: #999999;
}
#ja-botsl div.moduletable h3, #ja-botsl div.moduletable h3 span {
background: none;
color: #FFFFFF;
height: auto;
line-height: normal;
padding-left: 4px;
}
/* FOOTER
--------------------------------------------------------- */
#ja-footer {
clear: both;
position: relative;
padding: 8px 20px;
margin: 0 10px;
color: #666666;
text-align: center;
border-top: 1px solid #1D1D1D;
}
#ja-footer small {
font-size: 100%;
}
#ja-botnav {
background: #1D1D1D;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
clear: both;
margin: 0 10px;
padding: 5px 0;
text-align: center;
}
#ja-botnav ul {
margin: 0;
padding: 0;
}
#ja-botnav li {
margin: 0;
padding: 0 10px;
background: url(../images/vline.gif) no-repeat left center;
display: inline;
}
#ja-botnav li a {
color: #999999;
}
#ja-botnav li a:hover, #ja-botnav li a:active, #ja-botnav li a:focus {
color: #FFFFFF;
}
/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
position: absolute;
top: -100%;
}
li.ja-firstitem {
background: none !important;
}
.padding-none ul.film li {
margin-left: 0;
}
#ja-tabs {
margin: 0 0 10px 0;
padding: 0;
}
#ja-tabs div {
margin: 0;
padding: 0;
}
#ja-tabs div.module {
background: url(../images/box-br-w.gif) no-repeat bottom right #FFFFFF;
}
#ja-tabs div.module div {
background: url(../images/box-bl-w.gif) no-repeat bottom left;
}
#ja-tabs div.module div div {
padding: 0;
background: url(../images/box-tr-w.gif) no-repeat top right;
}
#ja-tabs div.module div div div {
background: url(../images/box-tl-w.gif) no-repeat top left;
}
#ja-tabs div.module div div div div {
background: none;
}
/* Login */
#ja-login {
position: absolute;
right: 30px;
top: 25px;
color: #666666;
}
label.ja-login-user span,
label.ja-login-password span {
display: block;
width: 25px;
height: 24px;
float: left;
text-indent: -5000px;
}
label.ja-login-user span {
background: url(../images/icon-user.png) no-repeat;
}
label.ja-login-password span {
background: url(../images/icon-key.png) no-repeat;
}
#ja-login label {
float: left;
}
#ja-login form #mod_login_username,
#ja-login form #mod_login_password {
width: 100px;
margin: 2px 0 0 5px;
font-size: 11px !important;
border: 1px solid #CCCCCC;
}
#ja-login form #mod_login_password {
margin-right: 5px;
}
#ja-login form .button {
margin-top: 2px;
}
.ja-login-links {
display: block;
clear: both;
padding: 6px 0 0;
font-size: 92%;
}
.ja-login-links a {
padding: 0 5px;
color: #666666;
}
/*usertools*/
#ja-usertools {
position: absolute;
right: 10px;
top: 8px;
}
#ja-usertools ul {
margin: 0;
padding: 0 10px 0 0;
display: inline;
}
#ja-usertools ul li {
margin: 0;
padding: 0 2px;
float: right;
background: none;
}
/* Search */
#ja-search {
background: url(../images/search-bg.gif) no-repeat left;
position: absolute;
right: 0;
top: 0;
height: 25px;
padding-left: 35px;
font-size: 11px;
}
#ja-search .inputbox {
margin: 3px 3px 0 0;
width: 150px;
background: transparent;
border: none;
color: #999999;
}
#ja-search .button {
font-size: 11px;
}
/*others*/
#ja-banner {
padding: 5px 0 0;
text-align: center;
overflow: hidden;
width: 100%;
clear: both;
}
div.back_button a,
div.back_button a:hover,
div.back_button a:active {
background: none!important;
display: block;
margin: 10px 0;
text-decoration: none!important;
}
.clr {
clear: both;
}
.hasTip img {
border: none;
}
div.ja-innerdiv {
padding: 8px 0 10px !important;
background: url(../images/sep.gif) repeat-x bottom !important;
}
div.ja-innerdiv img.border {
padding: 2px;
border: 1px solid #CCCCCC;
margin-right: 10px;
}
div.ja-innerdiv img {
margin: 5px 0 0 5px;
}
div.module blockquote {
margin: 0;
padding: 0;
}
div.module span.title {
font-weight: bold;
display: block;
margin: 5px 0;
}
/* Tooltips */
.tool-tip {
background: #FFFFFF;
border: 1px solid #CCCCCC;
float: left;
max-width: 200px;
padding: 5px;
z-index: 999;
color: #333333;
}
.tool-title {
background: url(../../system/images/selector-arrow.png) no-repeat;
font-size: 100%;
font-weight: bold;
margin: 0;
margin-top: -15px;
padding: 0;
padding-bottom: 5px;
padding-top: 15px;
}
.tool-text {
font-size: 100%;
margin: 0;
}
#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
margin: 0 10px;
padding: 0;
}
#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
color: #FFFFFF;
margin: 0;
padding: 5px;
}
/* System Standard Messages */
#system-message dd.message ul {
background: #333333;
border: none;
}
/* System Error Messages */
#system-message dd.error ul {
background: #CC0000;
border: none;
}
/* System Notice Messages */
#system-message dd.notice ul {
background: #D58400;
border: none;
}
/* Clearfix */
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
* html > body .clearfix {
display: block;
width: 100%;
}
* html .clearfix {
height: 1%;
}
Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up. Thanks 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. |
|||||||