Have a page to install links to other sites with link inputs as follows:
<div id="mainContent">
<div id="links">
Go To Google
Go To Yahoo
Go To ESPN
Go To ABC News
Go To Youtube
</div>
</div>
controlled by the following css in an external stylesheet
div#links a {
width:550px;
display:block;
margin-left:10px;
margin-top:2px;
padding: 2px 5px 2px 5px;
text-decoration:none;
font-family:arial;
font-weight:bold;
text-align:center;
background-color: black;
color: white;
font-size:9pt;
border: 3px red ridge;
}
a:hover {
background-color:navy;
color:red;
font-style:italic;
}
The display including the hover worked when operated in a standalone situation with the css in the head, however when I move it into a real content area in a page and install the css in the external style sheet the hover no longer works!
You are probably not linking to your stylesheet the right way.
Either you haven't linked it at all:
<link href="/style/style.css" rel="stylesheet" type="text/css">
Or you are using a local path:
You should (almost) always use relative paths for linking to content on the web.
So:
http://example.com/style/style.css
or
file://host/path/style/style.css
becomes
/style/style/css
Related
I'm redesigning my company's website and am trying to create a horizontal navigation bar with button links (which I've managed somewhat). The problem is that the exact same menu is supposed to appear on every page (of which there are 100+) and the button options may increase of decrease in the future.
My question is this: Is there a way to place the button text and associated links in the external css to make re-coding and future edits to all those pages simpler? I've searched and tried everything I could think of. The below code is still very much a work in progress, so any advice would be appreciated.
Relevant css:
/* BEGIN Menu Buttons*/
#menu {text-align:center;}
#menu ul {
display: inline-block;
list-style-type: none;
text-align: center;}
#menu ul li {
float: left;
width: 140px;
height:50px;
list-style-type:none;}
#menu li a {
width: 130px;
height:40px;
padding:5px;
display:block;
color: #fff ;
background-color: #000 ;
font: Times New Roman;
font-size:14pt;
line-height:40px;
text-align:center;
text-decoration: none ;
border-right:1px solid #fff;
border-left:1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;;}
#menu li a:hover {
border-top: 3px solid #000;
border-bottom: 3px solid #000;
outline: 1px solid #fff;
font-size:16pt;}
/* END Menu Buttons*/
Relevant HTML:
<header>
<div id="menu">
<ul>
<li>Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Maintenance</li>
<li>Parts</li>
<li>Information</li>
<li>Contact</li>
</ul>
</div>
</header>
If I understand your question correctly, the solution I would use is PHP
First of all you would need to save your page to .php for this to work (instead of .html)
Secondly, create a new file (menu.php) and paste in the MENU code above.
In every page that you have, you replace the menu HTML code with this:
<?php
include 'menu.php';
?>
(assuming you put the menu.php in the same folder as the rest of your pages)
Now, if the content of your menu expands, just edit menu.php and your menu is updated on all pages that have your menu.php file included.
Another solution for you, If you aren't using php and you need an html solution, you can always lean on the iframe.
<iframe id="iframe" src="xxx.html" width="500" height="180"></iframe>
but the problem with this is you woudl need to update the width on every page, should your menu become larger (wider) than this iframe accounts for.
I've seen tons of ie css questions, but none that seem to address what I'm asking here. Forgive me if I've missed one and asked a dupe:)
I have a website (asp.net mvc2, c#) littered with links similar to this:
<a href="<%= Url.Action("Action", "Controller")%>">
<div class="buttons">
<button type="button"> Click Me</button>
</div>
</a>
These work fine in Chrome, FF and Safari, but not in IE9. The button itself seems to cancel out the link. In other words, the link is only active on the very outer edge of the button (if at all).
I'm not very fluent with Css, but here's the relevant bit (I think, though I suppose the problem could lie elsewhere...):
.buttons a, .buttons button{
display:inline-block;
text-align: left;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #0b0101;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
Does anyone know a workaround or hack for this? Thanks!
I'm not sure what you're trying to achieve with a <button> tag inside an <a> tag, but it isn't valid HTML, so it's no surprise it's not working properly -- perhaps more of a surprise that it is working in some browsers.
In any case, there's no need for this kind of thing, as an <a> tag can be styled to look and work like a button without needing any additional elements inside it.
For example, see http://www.cssbuttongenerator.com/ which produces CSS for a plain <a> tag with nothing inside it except the button text.
There are dozens of other sites with similar tutorials and techniques, but the basic advice I'd give you hear is to drop the <div> and the <button> and just go with a plain <a> tag.
Hope that helps.
Thanks for the feedback. I didn't realize wrapping a button in an <a> tag was invalid, but sure enough, it is. Anyway the simplest fix for this, imo, was dropping the <a> tag, and adding
onclick="window.location.href='<%=Url.Action("Action", "Controller")%>'"
to the <button> element, essentially turning the button into a link.
I have problem where I can't apply the style in CSS in my ASP.NET MVC application.
The behavior is it applies for the first time and then the subsequent changes to the CSS is not getting reflected in my _Layout.cshtml. I am not sure what I am missing here.
CSS file
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
header,
footer,
nav,
section {
display: block;
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset
{
border:1px solid #ddd;
padding:0 1.4em 1.4em 1.4em;
margin:0 0 1.5em 0;
}
legend
{
font-size:1.2em;
font-weight: bold;
}
textarea
{
min-height: 75px;
}
.editor-label
{
margin: 1em 0 0 0;
}
.editor-field
{
margin:0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid
{
display: none;
}
#Header
{
color:white;
padding:1px;
}
#Content
{
float:left;
margin:10px;
}
#SideBar
{
float :left;
margin:10px;
padding :10px;
border: dotted 1px red;
width:180px;
font-style:italic;
}
#Footer
{
text-align:center;
clear:both;
}
For example I changed "border" in #SideBar from red to black. But it always show red. I might be doing something fundamentally wrong here.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<!--link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
<link href="#Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;" >
</div>
<div id="SideBar">
#Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
</div>
<div id="Content">
#RenderBody()
</div>
<div id="Footer">
<p>Copyright © XXXXXXX</p>
</div>
</body>
</html>
However, if rename the physical file and change the reference in _Layout.cshtml, I could see the changes I made.
Please help.
Thanks
Hit the Ctrl-F5 for reloading the page without using the cached contents
The browser can cache static files such as CSS files.
If you update a CSS file and the change does not appear when you browse, try using CTRL-F5 within your browser.
This will work when anything else won't, like in my case:
Credit goes to: atticae
You can append a random query parameter to the stylesheet url (for example via javascript or server side code). It will not change the css file that is being loaded, but it will prevent caching, because the browser detects a different url and will not load the cached stylesheet.
<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
Unfortunately ctrl+f5 does not work for me. I have to go to Chrome: F12 -> Network tab -> right click within white area where all the get and post records are -> Clear browser cache. Now if you press ctrl + f5 or just f5 it should work.
In my case the problem was I had a resource style file which was referring by the code
string location = Page.ClientScript.GetWebResourceUrl(typeof(PageBase), "MyNS.Common.Web.Base.CommonStyle.css");
LiteralControl include = new LiteralControl(string.Format(tempLink, location));
When I change / add some style in the file it was not reflecting in the CommonStyle.css
it was not reflecting in the web page even after clearing the cache(ctrl + f5 , ctrl + shift + f5)?
On my analysis I found the reason was -
stop the debugging, rebuild the solution and run it again so that all
the web resource styles load once again, simply clearing the cache as
we does normally for any html change will not help,after doing this my
change in the style got reflected in the web page and it fixed my problem.
I'm trying to make a 30x30 pixel box. I don't care if it uses a button, a, span, whatever.
I can't get anything to show up uniformly across all browsers.
Here are the requirements:
Must append to the end of an
existing line (no line breaks)
Must be able to assign click events in jQuery
Must be a square
Appears flat with no sort of bevel
You should be able to achieve what you want simply by styling an 'A' tag in your css.
CSS:
a {
display:inline-block;
width:30px;
height:30px;
background-color:#ccc;
border:1px solid #ff0000;
}
HTML:
See working example: http://jsfiddle.net/fQP6J/1/
<html>
<style>
.btn {
BORDER: 1px solid; COLOR: black; height: 30px; width: 30px;
}
</style>
<button class=btn >btn</button>
</html>
If you take a look at http://www.jumo.com/about, you will notice that the three links on the nav are set up as anchors. Looking at the code, we can find that the CSS responsible for this is:
/* ?OPTIONS? */
.section_options {
border-bottom:1px solid #94CB41;
display:none;
font-size:14px;
margin-bottom:25px;
margin-top:0;
padding-left:10px;
width:98%;
z-index:20;
line-height: 21px;
}
.section_options a {
border:1px solid #cccccc;
border-bottom:0px solid #cccccc;
color:#555555;
margin-right:9px;
opacity:0.6;
padding:9px 14px 2px;
}
.section_options a.selected {
background:white;
font-weight:bold;
color:#555555;
opacity:1;
padding-bottom:3px;
border:1px solid #94CB41;
border-bottom: 1px solid white;
margin-left:4px;
}
as well as this in the HTML
<style>
#about, #team, #contact { display:none; }
</style>
Going further down into the HTML, we can see where these sections are called -
<div class="section_options" id="section_nav" style="display: block;">
About Us
Our Team
Contact
</div>
<div id="about" class="section">
and
<div id="team" class="section">
and
<div id="contact" class="section">
Yet when I apply this code I just get the three tabs being displayed, but nothing else,and the anchor links do nothing. I know if I change the {display:} to block or inline it will display the content, but the selection of the links does not work, the anchoring has no effect. Does anyone know why this is? I have a feeling it has something to do with the section_nav not being declared in the CSS, but not sure.
Thank you!
The page you are looking at uses JavaScript to switch between tabs and apply/remove the selected class to/from the active tab header. If you want to see how they do it, you can download their scripts.