|
CSS - Aligning Text To Bottom Of Div
hey all,
here's my test page http://www.pyesnflpool.com/ at the top... Im trying to get the two links (Register & Recover Your Password) to be beside the arrows and Email Pye beside the mail image it is running off two scripts, one for the links (snippetSideLine)and the other is holding together the header (elementTopPage) As you can see on side-b I was making some effort to align them to the bottom with no success, my thoughts were to align to the bottom and than do a padding-bottom: 15px; or whatever, because I tried padding-top:120px to side-a which put the links in the right spot but left the rest of the page all over the place any help is much appreciated, thanks Code:
<!-- snippetSideLine -->
<div>
<?php
if (isset ($this->User) && !empty ($this->User)) {
if ($this->User->Type == 1) {
?>
<a href="../admin/index.php">Admin Panel</a>
<?php
}
?>
<a href="../members/myaccount.php">My Account</a>
<a href="index.php?Logout">Logout</a>
<?php
}
else {
?>
<a href="../members/register.php">Register</a>
<a href="../members/forgotten.php">Recover Your Password</a>
<?php
}
?>
</div>
<!-- End: snippetSideLine -->
Code:
<!-- start: elementTopPage -->
<style type="text/css">
#wrapper {
text-align: left;
vertical-align: text-bottom;
margin: 0px auto;
padding: 0px;
border:0;
width: 850px;
}
#side-a {
float: left;
width: 458px;
height: 167px;
background: url('../images/top_left.jpg') no-repeat;
}
#side-b {
float: right;
width: 168px;
height: 167px;
vertical-align: text-bottom;
vertical-align: baseline;
background: url('../images/top_right.jpg') no-repeat;
}
#content {
float: left;
width: 224px;
height: 167px;
background: url("../images/top_bg.jpg") repeat;
}
</style>
<!-- elementTopPage -->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="side-a">
<?php
$this->Snippet ('SideLine');
?>
</div>
<div id="content">
</div>
<div id="side-b">
email pye
</div>
</div>
</div>
<!-- End: elementTopPage -->
Similar TutorialsI'd like to have a container, a row, really. And I'd like text aligned to the top of the div, and then some more text aligned to the bottom of the div, like this: ------------------------------------------ Top text Bottom text ------------------------------------------ The thing is, I can't use tables, so if someone knows how to accomplish in a completely tableless way, I'd appreciate it! I did try the following, but it didn't work: Code:
.mainDiv{
position: relative;
float: left;
width: 150px;
}
.mainDiv .upper {
top: 0;
position: absolute;
}
.mainDiv .lower {
bottom: 0;
position: absolute;
}
I seem to have messed up while slicing...If my font size is too large, it'll mess up my table positioning...I'd like to know if there's any way to align text to the bottom of a table collumn? Is there anything I can put in my style sheet to do this? Am I not being clear enough? Please help. EDIT : I've got a picture uploaded. See how on the left there's that white space? And under "Welcome" there's also a lot of space? I figure if I could align the text to the bottom, it'd fix both problems. =/ Is there a way to align something from the bottom of the page? So I'm still on my quest to be able to create my 1st entirely CSS site, and need some help as I'm not sure how to do this. I want to be able to align a navigation list at the bottom right of the content area. Also while I'm at it, I want the site to be at a minimum 462px (just an example), but would like for it to increase in height if the content itself expands beyond the 462. And the navigation menu, I'd like to somehow keep at the bottom right of the viewable area. Thanks... here's the code... HTML Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div class="outer"> <div class="logo"> <img src="images/logo.gif" /> </div> <div class="spacer"> </div> <div class="nav"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a><br /> <a href="#">Link 4</a><br /> <a href="#">Link 5</a><br /> <a href="#">Link 6</a> </div> <div class="content"> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </div> </div> </body> </html> CSS Code: Code:
body {padding:0px;
margin:0px;
}
div.outer {background-image:url('images/bg2.jpg');
background-repeat:no-repeat;
width:770px;
height:462px;
}
div.logo {text-align:right;
padding:10px;
height:75px;
}
div.spacer {float:left;
width:200px;}
div.nav {float:right;
text-align:right;
padding:20px;
}
div.content {background-image:url('images/bg3.jpg');
width:400px;
padding:20px;
}
.nav a{text-decoration:none;
color:black;
font-size:20px;
font-family:"sans serif", verdana, arial;
}
.nav a:hover{text-decoration:underline;
}
Hello, Let's say this... I have an element that has a height of 600px. I have an element inside of that element that I want aligned to the very bottom. How could I accomplish this feat? Ok, so I just used Pagination for the first time (Yay). I'm creating a make shift shopping cart, and was trying to align "Add to Cart" to show at the bottom of the product listing. Right now, the products show 5 per row, and the format is: image of item item name price Then there is some padding and I want the submit button to appear at the very bottom of the div (within the a href if possible). I have the a href set as display:block, so when hovered over, the area is gray. I want the submit button to be within that area. I have tried with several variations (I did move the </a> to after the </form> line: - Placed the <form> lines within a separate div and tried aligning it to the bottom using margin-bottom - Tried styling the <input> using margin-bottom as well. My knowledge of divs isn't really that good as I never really used them much before, so I'm sure it's something simple enough. Right now when I do place it in the <a href></a> area, the Add to Cart button shows up right under the item_name... so it's staggered as item names may take up 1, 2, or 3 lines. And keeping it under the link area makes the button too far down. If you need further info, let me know. Here's the code to pulling the info from the products table: Code:
$query = "SELECT `id`, `image`, `item_name`, `msrp` FROM products $limit";
$result = mysql_query($query, $conn) or die(mysql_error());
$i == 0;
while($row = mysql_fetch_array($result)) {
extract($row);
$i ++;
$image_loc = "images/products/" . $image;
$j = $i/5;
$display .= "<div id=\"store\"><a href=\"view_item.php?id= ".$id."\"><img src=\"".$image_loc . "\" style=\"width:100px; padding-bottom:5px;\"><br />" . $item_name . "</a>";
if ($logged_in != 'false') {
$display .= "<form action=\"add_cart.php\" method=\"post\">";
$display .= "<input type=\"hidden\" value=\"".$id."\">";
$display .= "<input style=\"margin-left:20px;\" type=\"submit\" value=\"Add to Cart\">";
$display .= "</form>";
$display .= "</div>";
}
if (is_int($j)) {
$display .= "<div style=\"clear:both;\"></div>";
} else {
}
}
Here's the CSS: Code:
#store {width:150px;
float:left;
padding-bottom:30px;
padding-left:15px;
padding-right:15px;
}
#store a{display:block;
text-decoration:none;
padding:10px;
height:200px;
}
#store img{border:0;
}
#store a:hover{background:#ccc;}
I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> Hi, I'm having a problem which I though should be fairly simple, but I've been hacking at it for many hours now. I want to align blocks horizontally at the bottom of a containing block. The containing block has a fixed height while the contained block do not. Here's a mockup of what I want: URL How should I modify the following code so that it renders like the above? Code: <div style="height:50px">
<div style="float:left">one</div>
<div style="float:left">two</div>
</div>
Thanks! The problem that I am having stems from attempted compatability for 1. IE/other browsers, and 2. Not scrolling or having an absurd amount of dead space on different resolutions. Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else. I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn. I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them? The Actual Problem I Have: (Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly. Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is Code: <html> <head> <link rel="stylesheet" type="text/css" href="poing.css"> <link rel="icon" type="image/png" href="img/RL16.png"/> <title>[ eroding.net ]</title></head> <body> <table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" valign="bottom"><tr><td width=100% align=center valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td background="img/top_left.png" width=14 height=39></td> <td background="img/top.png" width=622 height=39><img src="img/top_left2.png" border=0></td> <td background="img/top_right.png" width=14 height=39></tr></td> <tr><td background="img/left.png" width=14 height=1></td> <td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 background="img/table_bg_grunge.png" valign="top"> <br><br> <center> aaa <br><br> </center> </td><td background="img/right.png" width=14></tr></td></table> </tr></td></table> </body></html> CSS Code: body { font-style: normal; font-variant: normal; font-weight: normal;
font-size: 12px;
font-family: Tahoma, Arial; background-color: #0F0F0F;
color:
#424242; background: url(img/damask.png);
background-attachment:
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align:
bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}
sm {font-size: 0.9em; }
a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }
What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box." But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that). Please view: http://www.archanix.com/aib/about/ Notice the red square aib logo towards the bottom of the page. I have been successful in aligning the image to the bottom of the div. But because I'm using position:relative; bottom:72px; it pushes my footer down farther than I want. Any way i can get around that? Any help would be greatly appreciated. Thanks, Jesse 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%;
}
I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties: #gNav { width:768px; height:19px; text-align:left; vertical-align:middle; } i need for the three text links to line up directly in the middle (vertically) of that <div>. To achieve this in IE6 and NN+, I attach the following style to the text. .nookum { font-size:.9em; vertical-align: 25%; color:#FFFFFF; } I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>. Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE? How do you go about vertically aligning text in a <div> tag that is 200px in height? Hi all, I have a pesky little problem that I can not seem to figure out on my own. I have a set up like this PHP Code: <span class='navitem'><a href='index.php'> <img src='myimage.gif'>Go Home</a></span> My Css Code is PHP Code: #leftnavcontent .navitem { border-bottom:1px dotted #DADADA; font-size:12px; font-weight:normal; line-height:16px; } #leftnavcontent .navitem img { margin-right:5px; border:none; } My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky. Any ideas? I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form My external css div looks as follows: #content_funny{ width: 315px; height: 51px; background-image:url(images/funnyvideos1.gif); background-repeat:no-repeat; float:left; clear:left; margin:0px 0px 0px 0; display:inline; } My index file is as follows <div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div> For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet. Any help with this is much appreciated, I m pulling my hair out Code: <ul> <li>Some text<div class="right">right</div></li> <li>Some text<div class="right">right</div></li> <li>Some text<div class="right">right</div></li> </ul> I would like to alight the above divs to the right. I tried to do something like: .right { float:right; width: 48%; } But that makes them seem to fall down one line and the stack funny. I also tried to do something line: Code: <ul> <li><div class="left">left</div><div class="right">right</div></li> <li><div class="left">left</div><div class="right">right</div></li> <li><div class="left">left</div><div class="right">right</div></li> </ul> And Code: .left
{
float:left;
width:48%;
}
.right
{
float:right;
width: 48%;
}
But they all sorta did wierd things I didn't understand. Then I thought perhaps the LI weren't block elements and so that's why they were getting screwed up. So i wrapped a div around both right and left, but that didn't seem to work either. TIA, Mark How does one align the text to the left of a div? I have "text-align:left;" specified, however the text is centered when it is too narrow to fill the screen. The URL of the page in question is http://what-is-what.com . If you type an illegal character, such as "=", in the Ask box then the narrow text that is returned appears centered. Other narrow pages on the same site do the same, of course. Tested in Firefox 1.5.0.7 on Ubuntu. I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it. Code: <li>Song name <img src="beatles.jpg"> Artist Test page: Played songs I have tried margins but then the image moves and the text is always aligned at the bottom of the image. Thanks for your help! |
|||||||