Usually 2 divs side-by-side (e.g. left menu and main content) will have the left div floated left with set size, the 2nd div also float with a left margin equal to the width of the left div.
When the left div has no set size (for example if it will contain an image of unknown width) you can still float it left, but instead of floating the 'main content' div, you can set overflow: hidden; in its CSS style (real implementation via external .css).
<!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>
<title></title>
</head>
<body>
<div style="float: left">
<div style="width:200px; height:200px; background-color: Fuchsia"></div>
</div>
<div style="overflow: hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo sodales faucibus. Aenean ante nunc, porta nec lacinia dignissim, eleifend ut quam. Duis quam elit, condimentum ac hendrerit et, sodales semper arcu. Phasellus justo urna, porta quis vestibulum non, fringilla non est. Sed vestibulum bibendum feugiat. Vivamus porttitor justo at sem egestas ultricies vitae et mi. Ut mattis ante sed dui viverra vel scelerisque felis bibendum. Proin nec sapien id orci egestas eleifend. Sed facilisis erat in urna ullamcorper et suscipit urna luctus. Phasellus cursus consequat odio eget auctor. Curabitur eu ante nec lacus ultrices tristique.</p>
</div>
</body>
</html>
SHARE:
When an <a> element is selected the browser can add a grey focus border around, the CSS outline:none; can be use to prevent it on standards browsers, for IE (except IE 8 when not in compatibility mode) adding the (non-standard) hidefocus="hidefocus" attribute to the <a> element seems to work. (Unsure what older versions of IE support this.) http://help.dottoro.com/lhgdtcso.php
SHARE:
If you are display a set of images that potentially will take a while to be returned from the server (for example if pulling them out of a database via an .axd or .ashx) you can use css to to display a loading animation.
For example if you have a page of images using something like:
<img class='advertImage' alt="Car photo" src="AdvertImages.ashx?AdvertID=xxxx" width="250" height="187" />
You can define css as:
.advertImage
{
background-position: center center;
background-repeat: no-repeat;
background-image: url('../img/wait.gif');
}
This css is saying "use wait.gif image as the background of the img element, put it in the centre and have only one (i.e. no-repeat)".
One of the problems is that while the image is loading some browsers (e.g. Firefox) will display the alt description and an empty image icon in addition to the loading animation which looks pretty ugly - hence the quick and dirty.
SHARE:
When working on the client, you may have a number of HTML elements that have some form of logical state, e.g. coins (heads/tails), cards (face up/down), importance (high, medium, low), etc.
You could declare a variable for each element (or an array); when the use changes the state you update the variable representing the elements state and perform any UI changes.
An alternative to this which removes the need for additional variables is to represent the state of the element by which CSS classes are currently added to it.
The example below (view live example) shows one way to achieve this using jQuery. It represents a number of simulated coins and if each coin's state is heads or tails.
<!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>
<title>Maintaining basic state with jQuery and CSS</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnClick").click(function() {
/* Select every element that has the CSS class coin applied
and iterate using the each function */
$(".coin").each(function() {
/* Check the each element to see if it has a tails or heads
css class, and 'flip' the class and the text from T->H */
if ($(this).hasClass("heads"))
$(this).removeClass("heads").addClass("tails").text("T");
else if ($(this).hasClass("tails"))
$(this).removeClass("tails").addClass("heads").text("H");
});
});
});
</script>
<style type="text/css">
.coin
{
background-color: Silver;
font-size: 24pt;
font-weight: bold;
padding: 5px;
}
/* We don't have to define .heads and .tails to make use of
the state maintenance, but they are defined here for visual cues */
.heads
{
color: Black;
}
.tails
{
color: White;
}
</style>
</head>
<body>
<h1>Maintaining basic state with jQuery and CSS</h1>
<span class="coin heads">H</span>
<span class="coin heads">H</span>
<span class="coin tails">T</span>
<span class="coin heads">H</span>
<span class="coin tails">T</span>
<h4>H = heads, T = Tails</h4>
<form action="#">
<input type="button" id="btnClick" value="Flip Coins" />
</form>
<h4>from: <a href="http://www.dontcodetired.com" title="Don't Code Tired" >Don't Code Tired</a></h4>
</body>
</html>
SHARE:
The following ASP.NET page shows a simple example of a menu created using a combination of CSS and jQuery.
The menu is defined as an unordered list (which makes semantic sense) and styled with CSS (a real web site would of course have its CSS defined in external file(s)). When the user moves the mouse over a menu item, a CSS class is dynamically added; then removed when the mouse leaves. In addition a simple "infobox" span is defined whose text is changed to that of the title attribute of the <a> element.
There are lots of examples of image based roll-overs, this one is really cool and based on a simple idea.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<title>Simple jQuery Menu Example</title>
<script type="text/javascript">
var menuPrompt = "Please select a page to view."; // simple prompt for user
$(document).ready(function() {
// initialise the infobox prompt
$("#infobox").text(menuPrompt);
$(".nav_menu_list li a")
.mouseover(function() {
// add the mouseover style
$(this).addClass("nav_menu_item_mouseover");
// set the text of the infobox span to the anchor title attribute
$("#infobox").text("Go to " + $(this).attr("title"));
})
.mouseout(function() {
//remove the mouseover style
$(this).removeClass("nav_menu_item_mouseover");
// reset the text of the infobox span to user prompt
$("#infobox").text(menuPrompt);
})
})
</script>
<style type="text/css">
.nav_menu_list
{
list-style-type: none;
margin: 0 0 0 21px;
padding: 0;
}
.nav_menu_list li
{
float: left;
text-align: left;
}
.nav_menu_list li a
{
display: block;
padding: 0 10px 0 5px;
text-decoration: none;
font-size: 36pt;
}
.nav_menu_item_notmouseover
{
color: #0000FF;
background-color: White;
}
.nav_menu_item_mouseover
{
color: White;
background-color: #ec1c24;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="nav_menu_list">
<li><a title="Page 1" href="#" class="nav_menu_item_notmouseover">Page 1</a> </li>
<li><a title="Page 2" href="#" class="nav_menu_item_notmouseover">Page 2</a> </li>
<li><a title="Page 3" href="#" class="nav_menu_item_notmouseover">Page 3</a> </li>
</ul>
<div style="clear: both;">
<span id="infobox"></span>
</div>
</div>
</form>
</body>
</html>
SHARE:
If you have an ASP.NET master page defined as below which specifies a css class for the body element to generate a background image for the whole page, you might want to override the default background on specific pages.
One way to accomplish this is to use jQuery to replace the css class that is being applied to the <body> element.
The master page below declares 2 ContentPlaceHolder controls; the first (ID="head") exisist within the <head> element, the second (ID="MainContentPlaceHolder") exists within the main body of the page.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body class="defaultbodybackground">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server" />
</form>
</body>
</html>
In one of our child pages we could add the following:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$("body").removeClass("defaultbodybackground");
$("body").addClass("newbodybackground");
})
</script>
</asp:Content>
When the page is loaded, the above jQuery JavaScript runs and replaces the class "defaultbodybackground" with the page specific "newbodybackground".
A cool thing about jQuery is that you can have multiple $(document).ready() defined - for example you could also have some jQuery defined in the master page.
SHARE: