|
CSS - Position Buttons - 5 On A Line
Hi
I am working on a site where the front page will have multiple rows of 5 albums. each record is brought to the page via php. I have finally sussed the best method to display all results but have a problem with the position of the pay now buttons. http://www.dondolla.co.uk/DDPS shows the problem, the last 2 images have more varying lines of text, this caused the pay now buttons to sit at varying heights. the following is the code outputted by the script: Code:
<td background="images/content_03.jpg"><div align="center">
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td valign='top'><a href='mxt.php?mixid=7'><img src='miximage/carmix4cover.jpg' width='100' height='100' border='1'></a>
<br>
<div align='center'><font color='#A12407' size='1' face='Verdana, Arial, Helvetica, sans-serif'><strong>Dolla Cham<br>
Car Mix 4 - Culture</strong></font></div><br>
<FORM TARGET='paypal' ACTION='https://www.paypal.com/cgi-bin/webscr' METHOD='post'>
<INPUT NAME='cmd' TYPE='hidden' id='cmd' VALUE='_cart'>
<INPUT NAME='business' TYPE='hidden' id='business' VALUE='paypal@dondolla.co.uk'>
<input name='item_name' type='hidden' id='item_name' value='Car Mix 4 - Culture'>
<input name='amount' type='hidden' id='amount' value=''>
<input name='no_note' type='hidden' id='no_note' value='1'>
<INPUT TYPE='hidden' NAME='cn' VALUE='Special Instructions (optional'>
<INPUT NAME='currency_code' TYPE='hidden' id='currency_code' VALUE='GBP'>
<INPUT NAME='submit' TYPE='image' id='submit' SRC='images/addtocart.jpg' ALT='Add to Cart' BORDER='0' class='gallery'>
<INPUT NAME='add' TYPE='hidden' id='add' VALUE='1'>
</FORM>
</td>
<td valign='top'><a href='mxt.php?mixid=6'><img src='miximage/carmix3cover.jpg' width='100' height='100' border='1'></a>
<br>
<div align='center'><font color='#A12407' size='1' face='Verdana, Arial, Helvetica, sans-serif'><strong>Dolla Cham<br>
Car Mix 3 - Dancehall</strong></font></div><br>
<FORM TARGET='paypal' ACTION='https://www.paypal.com/cgi-bin/webscr' METHOD='post'>
<INPUT NAME='cmd' TYPE='hidden' id='cmd' VALUE='_cart'>
<INPUT NAME='business' TYPE='hidden' id='business' VALUE='paypal@dondolla.co.uk'>
<input name='item_name' type='hidden' id='item_name' value='Car Mix 3 - Dancehall'>
<input name='amount' type='hidden' id='amount' value=''>
<input name='no_note' type='hidden' id='no_note' value='1'>
<INPUT TYPE='hidden' NAME='cn' VALUE='Special Instructions (optional'>
<INPUT NAME='currency_code' TYPE='hidden' id='currency_code' VALUE='GBP'>
<INPUT NAME='submit' TYPE='image' id='submit' SRC='images/addtocart.jpg' ALT='Add to Cart' BORDER='0' class='gallery'>
<INPUT NAME='add' TYPE='hidden' id='add' VALUE='1'>
</FORM>
</td>
I have tried different ways of displaying this correctly under css but with no luck, and i cannot find the same problem posted elsewhere, any help? Cheers Similar TutorialsHi -- I am viewing on FF, Safari, and IE 5.2 - all for Mac. I have 3 buttons I am trying to line up and size and they look fine in FF and Safari at this point, but IE is showing them as all the same size (as opposed to being the length of the text plus padding) and is not right aligning them in the cell. I did add a table in this code just to see if I could get it to work, but it isn't anyway. If anyone can help me, I'd appreciate it. my button css: div.button{ float:right; } div.button a { display:block; position:relative; border-width:2px 0; border-color:#ccc; border-style:solid; color:#990033; text-decoration:none; margin:11px 4px; background-image: url(site_images/bgbutton.gif); background-repeat: repeat-x; background-position: left center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:100; letter-spacing:0px; text-align:center; } div.button a span { display:block; position:relative; margin:0 -1px; border-width:0 2px; border-color:#aaa; border-style:solid; padding:4px 16px; } div.button a:hover { border-color:#A57C8A; color:#333; } div.button a:hover span { border-color:#A57C8A; } /*table added*/ #buttontable td { width:250px; font-family: Verdana,Sans-Serif,Arial; vertical-align: top; font-size: 12px; height: 16px; align: right; } the page code: <tr> <td colspan="2"><br /><br /> <div id="buttontable" align="right"> <table><tr><td> <P></P> <div class="button"> <p><a href="#"><span> Add To Bag</span></a></p> </div><br/><br/> <div class="button"> <a href="#"><span> CONTINUE SHOPPING </span></a> </div> <P> </P><br/> <div class="button"> <a href="#"><span>Add To Wish List</span></a> </div></td></tr></table> </td> </tr> any help you can give me as to how to get the same result in IE would be appreciated. I'd also appreciate knowing how it is looking on browsers on a pc. Thanks!! My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! I want to get buttons like these with my CSS: http://members.cox.net/npalmi188/test.jpg how do I do this? (don't worry about the color codes) everytime I try to get something near it I get this gay gray extra bevel to my button, anybody know how to fix that? here's the code I was using that had the gray bevel: Code: input.button
{
font-family: MS Sans Serif;
font-weight: none;
font-size: 10px;
color: #ffffff;
background: #4C5844;
}
How to make div stick to top of a page and align center Hello, I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this? Hei ppl. i am begenning of designing in css but i have a problem.. i have my website www.zyxep.net/byensguf/ i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border.. and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything.. here is my css code: Code:
body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
margin: 0px auto;
left:150px;
top:0px;
width:760px;
height:420px;
z-index:1;
border-left: 1px solid black;
border-right: 1px solid black;
}
#header {
margin: 0px auto;
left:0px;
top:0px;
width:760px;
height:200px;
z-index:2;
background-image: url(images/logo.jpg);
border-bottom: 1px solid black;
}
#menu {
margin: 0px auto;
left:0px;
top:200px;
width:760px;
height:20px;
z-index:3;
border-bottom: 1px solid black;
}
#content {
margin: 0px auto;
left:0px;
top:220px;
width:760px;
height:180px;
z-index:4;
border-bottom: 1px solid black;
}
#footer {
margin: 0px auto;
left:0px;
top:400px;
width:760px;
height:20px;
z-index:5;
}
#login {
margin: 0px auto;
left:760px;
top:15px;
width:400px;
height:50px;
z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
and my index.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>ByensGuf.dk - Byens bedste guf</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="zyxep"> <META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio"> <META NAME="Description" CONTENT="zyxep.net - portfolio"> <meta name="REVISIT-AFTER" content="1 DAYS"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu">menu</div> <div id="content">content</div> <div id="footer">Footer</div> <div id="login"> <form action="login.php" method="post"> <div> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input type="submit" value="login" id="loginsubmit"> </div> </form></div> </div> </body> </html> plz help me.. i am so confused The problem that I am having is that my nav buttons will not show up unless you click on the the space first than they are there. This is the code it is done is html, css and php help would be great thanks.
PHP Code: <?php ?> <html> <head> <title>CSS</title> <style type="text/css"> a.menu , a.menu:link { font-family:Arial, Helvetica, sans-serif; font-weight : bold; font-size:12px; line-height : 30px; text-align : center; text-decoration:none; color : #ffffff; } a.menu:visited { background : url('Images/Untitled-1.png') no-repeat 0% 0%; width: 160; height: 35; color : #ff0000; } a.menu:hover { background : url('Images/Untitled-2.png') no-repeat 0% 0%; color : #ffffff; font-weight : bold; } a.menu:active , body { background : url('Images/Untitled-2.png') repeat; font-weight : bold; line-height : 30px; text-decoration : none; text-align : center; color : #ffffff; } body { background-image : url(Images/brushedmetallighter.jpg); } </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> <body> <table width="199" height="210" border="0" align="left" bordercolor="#666666"> <tr> <td width="187" height="80" align="left" valign="top" background="brushedmetallighter.jpg"> <?php $hostname = "xxxx"; $database = "xxxx"; $username = "xxxx"; $password = "xxxx"; $connpt = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); mysql_select_db($database, $connpt); $sql = "SELECT * FROM mega ORDER BY productsID"; $result = mysql_query($sql, $connpt) or die(mysql_error()); if (mysql_num_rows($result) < 1) { print "There are no items to display."; } else { while($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $Name = $row['productsName']; $productsID = $row['productsID']; $LeftBanner = $row['LeftBanner']; $BottomBanner1 = $row['BottomBanner1']; $BottomBanner2 = $row['BottomBanner2']; $BottomBanner3 = $row ['BottomBanner3']; $UpperLeftImage = $row ['UpperLeftImage']; $UpperRightImage = $row ['UpperRightImage']; $LowerLeftImage = $row ['LowerLeftImage']; $LowerRightImage = $row ['LowerRightImage']; $Label = $row['Label']; echo "<a href=\"mg_frame3.php?productsID=".$productsID."\"target=\"mainFrame\" class=\"menu\">".$Label."</a> "; } } ?> </td> </tr> <tr> <td height="50" align="left" valign="top" background="brushedmetallighter.jpg"><p><br> <br> </p> </td> </tr> <tr> <td height="71" align="left" valign="top" bordercolor="#000000" background="brushedmetallighter.jpg></td> </tr> </table> </body> </html> Hi, Im just learning css and notice that alot of elements such as navigation can be done using bullet points. Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent? my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it? Code: .nav {
height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
line-height:30px;
}
.bul-sec {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-position: outside;
list-style-image:url(images/bullets/sec.gif);
line-height:30px
}
or is there a better way to do this? Thanks! Was working on a new design for one of my sites today and when I inadvertently discovered using buttons as tabs, however... I am more of a programmer than I am a designer. The tabs look differently in Firefox than they do in IE. In IE, I give the currently tab more padding than the other buttons and those other buttons stay attached to the <div> below them. In Firefox/Mozilla, the other buttons are raised up. See here* *You will notice that the Home page has rounded corners, while the About page does not; can't decide which one I like better The other issue I have in IE is that when I button is being clicked/activated, it detaches itself from the <div> below. -- Maybe a good time to also ask how I can accomplish something using div's or span's that I used to do with table's: How would I have a 700px wide box, with a div at the top, split 50/50 so that I could have a small logo at the top left and a search box (on the same row) at the top right? I have always: Code: <table width="700"> <tr> <td width="50%">logo</td> <td width="50%" align="right">search box</td> </tr> </table> -- One mo If I am using HTML 4.01 strict, can I still use: Code: <td align="center" valign="middle"> or do I have to: Code: <td style="text-align:center;vertical-align:middle"> Cheers! Is there a way to create oval buttons with CSS? I have an image of the button, and if I slice the image up in three sections, for example with two ends and a middle section for text, it becomes a mess if you go over a certain length. Is there a better way using CSS? 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. I've created navigation buttons in Photoshop by making an 818px wide document, spacing out the words, then slicing them up. My navigation division is 818px wide but when I insert the buttons I created, they don't fit. I do not have any borders around them that I can tell. Why would this happen? http://www.oharenoise.org/new/2009_news_releases.htm Hi, Im trying to style the button tags, mainly to obtain rounded corners, using images. I can't use '<a>' links to style, which would be simpler, as the button is being used for a program written specifically to use button tags. I have the button working in IE 5, 8 and 9 and firefox but other incarnations do not. body { behavior:url( hover.htc ); } Code: /* REQUIRED BUTTON STYLES: */
button {
position: relative;
color:#000000;
border: 0;
padding: 0;
cursor: pointer;
overflow: visible; /* removes extra side padding in IE */
outline: 0;
}
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button span {
position: relative;
display: block;
white-space: nowrap;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Google Chrome only - fix margins */
button span {
margin-top: -1px;
}
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
button.submitBtn {
padding: 0 15px 0 0;
margin-right:5px;
font: normal 12px Tahoma;
color:#000000;
text-align: center;
background: transparent url(btn_sprite2.gif) no-repeat right -140px;
}
button.submitBtn span {
padding: 3px 0 7px 15px;
height:15px;
background: transparent url(btn_sprite2.gif) no-repeat left top;
color:#000;
}
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
background-position: right -210px;
}
button.submitBtn:hover span, button.submitBtnHover span {
background-position: 0 -70px;
}
button.submitBtn:active, button.submitBtnActive { /* the redundant class is used to apply the hover state with a script */
background-position: right -140px;
}
button.submitBtn:active span, button.submitBtnActive span {
background-position: left top;
}
Code: <button value="submit" class="submitBtn"><span>Submit</span> The above is the method i have used so far. Does anyone know how i could improve on this, or another method that maybe beneficial? Any help will be appreciated. Cheers. Okay so I have a basic CSS navigation panel on the left-hand side of my webpage. Basically I surrounded an <li> tag with a solid border so it's a rectangle with some text in the middle (ie. about, home, contact us, articles, etc) and I linked it using an <a> tag: Example: Code: <ul> <a href="home.html" class="button"><li>HOME</li></a> <a href="about.html" class="button"><li>ABOUT</li></a> ... </ul> Then for CSS: Code: #navigation ul {
width: 128px;
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
background: #CCC;
padding-left: 5px;
margin-top: 5px;
border: 1px solid #000;
border-left: 10px solid #336699;
}
#navigation a.button {
color: #333;
text-decoration: none;
}
#navigation a.button:hover {
color: #FFF;
}
The url is: Wolfenzon Schulman It's a website for a firm I work for. So basically, on the FF edition, the buttons work as intended, the entire <li> tag is linked (<a>'ed) and you can click on any part of it to activate the :hover and follow the link. The IE version, you can only hover over the text and anywhere before that (probably because of the padding-left: 5px associated with it). No matter what I've seemed to come up with, the IE version will just not cooperate. I am currently working on a project for which I am considering using either Flash or CSS. Basically, what I need to do is draw a button, say a simple circle, on top of another image. Alternatively, I could also use an image of the circle if need be. Either way, what I need to do is be able to position that image in a specific spot over the other image. I was able to get this to work in IE, but not Firefox. Is there a way that I can place the image on top of the other image and keep it relative to the original, larger, image? To give you a better idea of what I'm trying to do, think about putting pointers on a map like google maps. Are there any tutorials or examples of this that anyone can suggest? Brent |
|||||||