CSS - Header Buttons Question
Hi I am trying evenly space a header menu and for some reason when it needs to word wrap it shoots the text to the bottom (even if I adjust the width on #header li a).
Thanks so much. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body{ color: #fff; font: 10pt Arial, Helvetica, sans-serif; } * { margin: 0; padding: 0; } #header{ width:760px; margin: 0 auto; } #header ul{ height: 44px; line-height: 44px; display: block; list-style: none; background: #1F2C56; } #header li{ display: inline; background: #395A8D; float: right; } #header li a{ height: 44px; line-height: 44px; display: block; width: 94px; text-align: center; border-left: 1px solid Black; float: left; } #header li a:hover{ background: #1F2C56; text-decoration: none; } #header .visual{ height:263px; background: #1F2C56; border-top: 3px solid Black; } a{ color: #FFFFFF; text-decoration: none; } </style> </head> <body> <div id="header"> <h1>Welcome</h1> <ul> <li><a href="link8.html">Link 8 Link 8 Link 8</a></li> <li><a href="link7.html">Link 7</a></li> <li><a href="link6.html">Link 6</a></li> <li><a href="link5.html">Link 5</a></li> <li><a href="link4.html">Link 4</a></li> <li><a href="link3.html">Link 3</a></li> <li><a href="link2.html">Link 2</a></li> <li><a href="link1.html">Link 1</a></li> </ul> <div class="visual"> </div> </div> </body> </html> Similar TutorialsOkay I learned html/css about two years ago, and haven't really used it much since. but I'm trying to get back into it and have run into a problem with my design. Basically what I have is a DIV tag in the index that is used to center everything on the page, and provide a border. Basically what I wanted to do was add buttons that I made in photo shop and a banner to every page I'm making, so I put them in a SSI file. That works just fine, but what I'm trying to do is make them positioned relatively positioned to the DIV in the index but still have them in the SSI file, but every time I try to add the styles to either my SSI file, style sheet for the index page, or right to the main index it wont position them inside the div. Sorry if that really didn't make sense. If you need an example take a look at the texts from last night home page (sorry it wont let me include a url) and I'm trying to get it kinda like that but with the buttons along the top of that centered outlined portion, and the banner above that. I'm really stumped here, ladies and gentlemen, so if anyone has any idea how I can get this working that would be amazingly helpful. And if I missed anything you need to know just let me know, its pretty late and I can't really think straight right now, haha Thanks in advance. I have a Header, and inside that header I want to have a Black empty I guess you would say mini Header that will be at the top of my main Header. How would one glue the mini Header to the top of the Main Header? Would one use Position: Relevant, Margin ? ?, top: ? Left: ?....? Thank you Hi I have seen alot of sites having a top banner going across the page for example corkd.com When I try to create a table 100% width and put a bg color. It always shows the table one line below the top. How do I move it to way at the top? Or am I not doing it correctly? Hey all, I have a seemingly simple problem with my link and header styles that I keep thinking had a really obvious solution which I can't see, so maybe it will be glaringly obvious to someone on here! Notes: I'm a bit of a css beginner and I'm using Wordpress on my site. I want to style the link-attributes of a specific <h3> tag so it won't underline when hovered. (the current hover-decoration is specified in the overall a: styles of the website). Only thing is that I can't use a link class because the <h3> tag has only <?php the_category(', ') ?> inside, which displays and links to the relevent categories of a blog post. So how can I style the link without creating a link class?? Appreciate anyone's thoughts on this, Cheers! 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 Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. 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; } Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/ I'm designing a web site and I have everything look identical in IE 5.01-7, Firefox 1.5 and Opera 9 (I still have to check mac compatibility) - though one thing that isn't the same on all is the input buttons. In IE, they're relatively the same but in Firefox it is completely off. I've attached an image to show what they all look like. I've tried a few things but I can't manage to get the firefox button to align correctly with the text input to the left of it. Here's my CSS for the inputs: Code: input { background: #fff; border: 1px solid #000; height: 23px; } any help is appreciated, thank you! I'm trying to get these CSS buttons into a CSS list, but they aren't stacking vertically and I can't seem to remove the bullet (at least, not on FF). Any insight as to how I can get these to appear top to bottom? http://www.concrete-creative.com/buttons/buttons_list.html the HTML: Code: <div> <ul class-"buttons"> <li class="button1"><a href="#"><span>Gray Buttons</span></a></li> <li class="button6"><a href="#"><span>Orange Button</span></a></li> </ul> </div> the CSS: Code: ul.buttons { list-style-type: none } /* GRAY BUTTON */ li.button1 a { background: transparent url('images/gray_ends.png') no-repeat scroll top right; font-family: Helvetica, Verdana, Arial, sans-serif; color: #000000; display: block; float: left; font: normal 11px arial, sans-serif; height: 22px; margin-right: 6px; padding-right: 8px; /* sliding doors padding */ text-decoration: none; } li.button1 a span { background: transparent url('images/gray_body.png') no-repeat; display: block; line-height: 12px; padding: 5px 0 5px 8px; } li.button1 a:hover { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ } li.button1 a:hover span { background-position: bottom left; } then same CSS for orange button - button6 I have 2 buttons that are not lining up in IE7. I have it working Safari and Firefox on the MAC, but my PC IE browser won't align the buttons. I have tried everything, but no luck. Here's the site: http://www.caillouette.com/Utilitrek/four/ Here's the CSS for the button elements: Code: #bottombox{ clear:both; float:left; display:inline; width:710px; height:61px; margin:0px 0px 0px 0px; } .collectionBig { position: relative; font-family: arial, helvetica, sans-serif; background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat; display: inline; width: 271px; height: 61px; margin: 0 0 0 0px; padding: 0; } .collectionBig a { background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat; display: inline; color: #000000; font-size: 11px; width: 271px; height: 61px; float: left; color: black; text-decoration: none; } .collectionBig img { width: 271px; height: 61px; border: 0; background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat; } * html a:hover { visibility:visible; } a:hover img { visibility:hidden; } .memberBig { float:right; position: absolute; top:0; margin-right:5px; font-family: arial, helvetica, sans-serif; background: url(images/nav/bigBN/membershipBig_on.gif) no-repeat; /* white-space: wrap; */ display: inline; width: 414px; height: 61px; padding: 0 0 0 0; } .memberBig a { display:inline; color: #000000; font-size: 11px; width: 414px; height: 61px; float: right; color: black; text-decoration: none; } .memberBig img { width: 414px; height: 61px; border: 0; } "collectionBig" and "memberBig" are wrapped inside of the "bottombox" div any help is appreciated. -S 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! 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. Hi I have built some nav buttons on my site and they looked as I wanted however when i attached links to them a border appeared around the image can someone tell me how to get rid of them please. DYNAMIC WEB DESIGN thankyou in advance. 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 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! 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. 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? 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> I'm trying to do custom active buttons in a Joomla horizontal menu. But they don't align correctly with the text. I assume it's because the pseudo element with the button is an absolute inside a relative positioned section. The only way I can move it is to fiddle with padding on the relative section. But that fixes some buttons and messes up others. I've tried a lot of other things but they move the whole element and not just that background image. Does anyone know a way to do this? Here's the code: Code: ul.frc-hmenu>li>a { position: absolute; display: block; height: 23px; cursor: pointer; text-decoration: none; color: #4A4A4A; padding:3px 12px; line-height: 23px; text-align: center; } /*change from absolute positioning*/ ul.frc-hmenu>li>a:before, ul.frc-hmenu>li>a:after { position: absolute; display: block; content:' '; top: 0; bottom:0; z-index: -1; overflow: visible; background-image: url('../images/menuitem.png'); } |