|
CSS - Aligning Submit Button At Bottom Of Div
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;}
Similar TutorialsIs there a way to align something from the bottom of the page? 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? I'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;
}
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;
}
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 -->
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! 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. =/ 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> 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 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). Morning guys, Im coding my blog and well im having big issues with the tabbed navigaion. Attached to this post you will see a image of what my headers suppose to look like. NOTE: ignore the homepage button NOTE: the green button is what i want to happen as a roll over effect Here is what it looks like in code; URL Check it in firefox and in IE, both have issues. Here is the XHTML: Code: <div id="container" align="center"> <div id="header"> <div id="navbox"> <ul> <li><a href="#">Home</a></li> <li><a href="#">What I Do</a></li> <li><a href="#">Recent Work</a></li> <li><a href="#">Contact Me</a></li> </ul> <img src="images/temp.gif" alt="dg" width="130" height="35" /> </div></div> <div id="content"> </div> <div id="footer"> </div> </div> CSS : Code: body {
margin: 0px;
padding: 0px;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}
#container {
color: #444444;
line-height: 140%;
font-size: small;
font-family: Tahoma;
padding: 0px;
margin: 0px;
}
#header {
width: 750px;
margin: 0 auto;
height: 195px;
background-image: url(images/headerbg.gif);
background-repeat: no-repeat;
}
#tabnav {
padding-top: 100px;
}
#tabnav ul {
display: table-cell;
list-style-type: none
}
#tabnav li {
list-style: none;
float: left;
margin-left: 5px;
width: 129px;
height: 35px;
background-image: url(images/buttonnormal.gif);
background-repeat: no-repeat;
}
#tabnav li a {
display: block;
padding-top: 8px;
width: 129px;
height: 27px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #4d4d4d;
text-decoration: none;
}
#tabnav li a:hover {
background-image: url(images/buttonroll.gif);
background-repeat: no-repeat;
width: 129px;
height: 35px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
#tabnav li a:active {
background-image: url(images/buttonactive.gif);
background-repeat: no-repeat;
width: 129px;
height: 35px;
}
#tabnav li a:visited {
}
#tabnav li a:visited:hover {
}
#content {
}
#footer {
}
Could someone help me with this please? and it it to look like the picture Its been troubling me for days. Mak Hi guys, We CANNOT get our Google Custom Search box and the search button to align correctly in IE or Chrome. It looks COMPLETELY different in both, and wrong in both. You can see the search box on our site (Search Google for DJDEALS) since we can't post URL's. We can't get the search box height to be any bigger than it is (ideally the box and button are the same height) and we can't get both items to align together. In Chrome the button is below the text box, in IE the button is above it! CODE: #search{margin:auto;right:34px;top:188px;position:absolute} .gsc-completion-container{text-align:left;z-index:5 !important;} input.gsc-input{height:28px} Help? I'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this? My Webpage You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding. In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine. Anyone know a trick to get a submit button to display on the same line as an input field and not have it drop. My issue is that it is either pushed down a few pixels, or up a few pixels, as if something is padded. Code: <form action="#" method="post">
<span>Join our mailing list</span>
<input type="text" name="email" value="your e-mail address" class="v-email" />
<input type="submit" value="" name="submit" class="btn" />
</form>
In the above example, the submit button is pushed down a few pixels as if it is padded. In Firefox however, it is pushed up a couple pixels. How can I get it to display inline perfectly. Assume that the styled button and the input field are the same height. Hi there, I have a simple submit button with the word "Search!" as the value. However, in FF, it is appearing aligned nearer the bottom of the button where as in IE it is centered correctly. This is what I mean: This is my CSS: PHP Code: .search_button{ background: url("images/search.jpg") repeat-x; border: 0px solid ; font-family: verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; width: 80px; height: 24px; font-weight: bold; vertical-align:middle; } and my HTML: PHP Code: <input name="" type="submit" value="Search!" class="search_button"/> Any ideas why this is and how I can center it in FF? Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! I have created a nice tablesless form with CSS except for the submit buttons. I can't seem to align them to the middle and in IE6 they overflow the form border html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Interest</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <STYLE TYPE="text/css"> <!-- #Interest label,#Interest input { display: block; width: 200px; float: left; margin-bottom: 10px; } #Interest label { text-align: left; width: 150px; padding-right: 20px; font-weight: bold; } #Interest br { clear: left; } #Interest form { border : 1px solid #000; padding : 5px; } --> </STYLE> </HEAD> <BODY> <DIV ID="Interest"> <FORM METHOD="POST" ACTION="/cgi-bin/form.pl"> <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="paul.wright@npl.co.uk"> <BR> <LABEL FOR="name">Name</LABEL> <INPUT NAME="name" ID="name"><BR> <LABEL FOR="company">Organisation</LABEL> <INPUT NAME="company" ID="company"><BR> <LABEL FOR="email">E-mail address </LABEL> <INPUT NAME="email" ID="email"><BR> <LABEL FOR="phone">Telephone no. </LABEL> <INPUT NAME="phone" ID="phone"><BR> <LABEL FOR="outcome">Comment(s) </LABEL> <TEXTAREA NAME="outcome" ROWS="10" COLS="60" ID="outcome"></TEXTAREA> <BR> <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1"> <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR> </FORM> </DIV> </BODY> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Hey any idea why submit button at this page is not working??? http://www.ajilanyureq.com When viewed in IE my form's submit button shows up with a black border around it, and when clicked onto another blank space of the space, it goes to normal colors as applied in this css code. Code: font-family:verdana,arial,helvetica,sans-serif; font-size:12px; background-color: #FFFFFF; color : #000000; border: 1px solid #A5B4BC; What could fix this? Thank you. Hi all, I've got a standard 'submit' button that I've applied a CSS style to, with this code: <input type="submit" name="sign in" value="sign in" style="font-weight: bold; color: #FFFFFF; font-size: 10px; border: 1px solid #FFFFFF; background: #A4B1C1;"> The only problem I'm having is that in IE, there's a black border around it, but in Firefox, there's only the white border stated in the CSS style. Can anybody tell me how I can fix this? Cheers. |
|||||||