|
CSS - Help With Aligning An Element In A Td
I have a website test2(dot)gigajobs(dot)com(dot)au
And have a section where user can Jobseekers can login But I can't seem to format the Username and password , register as a jobs seeker and forgot password labels so it is aligned to margin-left:12px; I've tried everything I can think of and am tearinhg my hair out. css td.publish-label{width:200px; } td.publish-label a { color: ##2E8EE8; text-decoration: underline; } td.publish-label a:hover { color: #68AAE7; text-decoration: underline; } html <h2 class="widgettitle">{$translations.applicant_admin.login}</h2> <table border="0" cellspacing="2" cellpadding="2"> <tr> <td class="publish-label"> <a href="{$BASE_URL}applicant/register/">{$translations.applicant_admin.register_account}</a> </td> <br> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.email_address}:<br /> <input {if $errors.username}class="error" {/if} tabindex="1" type="text" name="username" id="username" size="32" value="{$smarty.post.username}" /> <span class="validation-error">{if $errors.username}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.password}:<br /> <input {if $errors.password}class="error" {/if} tabindex="2" type="password" name="password" id="password" size="32" value="" /> <span class="validation-error">{if $errors.password}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label"><a href="{$BASE_URL}applicant/forgot/">{$translations.applicant_admin.forgot_password}</a></td> </tr> <tr> Similar TutorialsHello, 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? I've managed this before, but I can't for the love of Jesus and a trumpet remember how I did it. Basically, I want to be able to add padding to whatever I've got within the <code> element. For example, I might have ; Code: <code> This is text that I want to put padding around, but currently, only the top line is having the padding applied. </code> But the padding (or a border) only applies itself to the top line. If this makes sense, help moi please EDIT Voila, I fixed it as soon as I posted this! Code:
code
{
display: block;
padding: 20px;
}
Hi guys, I just wanted to say that I think devshed is a kick butt place for getting help with all sorts of CSS problems... always seems whenever I post that someone really helpful ends up helping me solve the problem in a way I hadn't thought of... So here's the issue: I need to put two elements into a div, one aligned on the left side and one aligned on the right Now what I'm looking at is the section where I have the Home text and the Quick News. So I've put the design into XHTML and CSS he But I can't seem to get the news line to move over properly. Any suggestions? I have used float:right but it just doesn't seem to work. I tried putting a div in and align=right but that pushes the element onto the next line which I don't want. Any ideas guys? There simply has got to be an easy way to align text within a div that I'm missing somehow. Thanks! At http://www.rietgors.tudelft.nl/combo/ you can see what I'm trying to do. I'd like the two elements to have either the same top or bottom, or have both elements centered vertically in the enclosing DIV. Can this be done using just CSS? Hi, I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div. I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail. The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes). Why won't the email link align right?! My stylesheet code: #garden-designer-contactbar ul { display: block; position:absolute; text-align: right; font-size: 20px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; left:541px; top:0px; width:179px; height:51px; margin: 0; padding: 0; list-style-type: none; z-index:6; } #garden-designer-contactbar li { display: block; text-align: right; } #garden-designer-contactbar a { display: block; position:absolute; text-align: right; font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; font-weight: normal; } My page code: <div id="garden-designer-contactbar"> <ul> <li>020 0000 000</li> <li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li> </ul> </div> Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was. Any help much appreciated! Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! 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>
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 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 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 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 I'm having trouble aligning headings in CSS. I've tried creating a class like this - Code:
.rightalign {
text-align:right;
}
and applying it like this - Code: <h1> <span class="rightalign" /> Heading </span> </h1> but it doesn't work, any help? Thank you. HI 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 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 Perhaps someone could help me. I have spent hours trying to figure out what I am doing wrong. I am designing a page that has centered content with several DIV's that I want to be exactly the same width. The menu DIV does not have a margin, but the main text does. I cannot get the DIV's the same width in Firefox and IE 6.0. If it works in one, it wont work in the other. The link for the page is http://www.snc-cds.com/snctest.html The CSS is at http://www.snc-cds.com/stylesheets/sncstyletesting.css I have tried to use/figure out the box model hack, but I'm not sure if this is what it takes to fix it. Thank you for any help, Steve 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. |
|||||||