|
CSS - Standard Buttons And Address Bar
how is that some websites can make the standard toolbar and the address bar disappear upon entering the website
Similar TutorialsMy 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 thought that setting properties for a and a:hover like this: PHP Code: a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; text-decoration: none; border-bottom: 1px dashed #960000; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; border-bottom: 1px dashed #FFFFFF; } would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as: PHP Code: a.nav { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; } a.nav:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types? I am just wondering if there is such a thing as a standard way of writing html to suite a standard css. So that, for example you could download a new 'standard' css file and have it work straight away with your old html. Sometimes the guys on oswd.org come pretty close, but the html always looks messy. Rogue div tags all over the shop. Can anyone point me to a resource on this, or a design forum where they practise it? Thanks. C I downloaded a pre built template (which I never do but I needed something fast) and after validating the website I noticed they used a lot of standard tags like figure, header, footer, and article. The validator does not like that one bit. Please see he Validator Is there a way around this as far as adjusting the doc type or anything? Will this at all hurt SEO rankings? Thanks! Ok, Normally I have no problem centering divs, but somehow I cannot get this to work. I have the following code: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; } </style> </head> <body> <table width="800" border="1"> <tr> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> </tr> </table> </body> </html> It creates a CSS dropshadow and border around the image. That is working perfectly, but on my thumbspage I'd like to have three per row, neatly centered within the table cell. Because of the float:left; it won't center. Obviously removing the float:left; will mess up the drop shadow, so I am looking for another solution. Wrapping it in another div and center it, won't work as well. I am probably overlooking the obvious here, but I cannot see it. Can someone help me out here? Cheers, Ronald Hi, I was wondering if it is possible to make a div, where only the images have a margin. How would I do that ? Can anyone help me thx! greez 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. I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc. My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most. My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image. Maybe that's the case? I'm not an expert on CSS. I can't seem to include a link due to some "akismetspam" phrase not being found? Hi all, pls can anybody help me out in writing a code to hide the address bar and IE bar with css..it is very urgent.. thank you in advance Hi there everyone. I just wanted know how I could put an icon on the address (URL) bar for my webpage like this devshed site? Thanks a lot. Vinh Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
Hi, I am trying to find a way to print address labels from a web page. The page will either be ASP or ASP.NET. Is it possible to get enough control over the print layout to create consistent labels? The browser will be IE6 and the printer will be printing onto standard address labels that you buy for this sort of thing. If it is possible, could someone please point me in the right direction, I am stumped. Thanks, Matt Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think). Just one example: https://www.gmx.net (a commercial email service provider in Germany). How can this be done? Ciao, Meph 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;
}
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 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 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 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! 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/ |
|||||||