CSS - Can An Entire <div> Element Be Linked ?

Not sure if this is the right place to ask this but it is sort of a CSS problem.

When I change my linked CSS file and refresh the page I'm working on in the browser, the CSS doesn't automatically get refreshed so the changes I've made don't show up. I can force a refresh by using ctrl+F5 but obviously that's no use for a live setting.

Has anyone else come across this problem and if so, do you know of a solution? Is there a way to force the browser to refresh the style sheet?

Thanks.

Im looking to make it so when someone rolls over a img i have linked it makes the text (which is also a link) next to it act like it has been rolled over as well.

Basically its a list set up like this.


Code:

<dt><a href="#"><img src="blah"/></a></dt>
<dd><a href="#">Text link here</a></dd>

I've seen it done a few ways, but none of them work really for my setup. The ones I've seen set up the IMG as a background positioned.

Anyone have an answer?

Some css tags have inherent "stuff" attached to them. I don't know all the ins and outs (getting closer), and I've run into one I need help with.
Here's the site: http://www.carriagedriving.net/article.php

Here's the div css:

Code:

#logo {
	float:left;
	margin: 0px;
	padding: 0px;
}

.Alogo {
	width:250px;
	height:150px;
	/*border:1px dashed gray;*/
}

The coding in the div is an php include which results in this (banner image and alt text changes each time the page is rebuilt/refreshed):
Code:

<div id='logo' class='Alogo'><p align=center><a href="http://www.vermontel.com/~greenall/" target=_blank><IMG SRC="pageads/greenall.jpg" BORDER=0 alt="Greenall Carriage House"></a>
</div>

I get about 12 pixels of white space over the top of the image in both Firefox AND IE, so it's gotta be an inherent property to the link. Sans the link, there's no whitespace above the image.

How do I "fix" this?

Thanks.

HeadElf

First off, I'll preface that I'm not a CSS expert by any means. I've done web development for many years, but have slowed down a great deal over the last few, so never got heavily into the aspects of CSS that completely replace HTML (tables, etc.).

At my current place of employment (where my primary duty is not that of a web developer, thank god), I'm being asked to develop a set of 'templates' using primarily CSS.

I've been using the CSS Sculpter plug in for Dreamweaver, and have had decent results from it, but my main issue at this point is this:

When I take the CSS code from the header of the page and put it into a separate stylesheet and then link to that stylesheet, it jacks up the content portion of the site. It seems to be completely disregarding the right margin of the content div and allowing text to simply run off. When the code (without changes) is pasted back into the header of the page rather than linked to it, the issue is resolved.

Here's the CSS:

Code:

<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
background-color: #666;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
/* Commonly used to style section titles. */
h2 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #000;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #000;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
background-color: #fff;
border-left: solid 1 px #666;
border-right: solid 1 px #666;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 650px;
overflow: hidden;
}
#outerWrapper #header {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #topNavigation {
background-color: #ebebeb;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
height: 10px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn1 {
background-color: #ebebeb;
border-left: solid 1px #666; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #ebebeb;
border-right: solid 1px #666; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */

}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}

#footer {
background-color: #ddd;
width: 650px;
border-top: solid 1px #666; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 0px 10px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin: 0 auto 0 auto;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
width: 16em;
}
#outerWrapper #contentWrapper #rightColumn1 {
width: 16em;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->

--------------

And then the page code:

Code:

<body>

<div id="outerWrapper">
<div id="header"><img src="hockley_header.jpg" alt="" width="650" height="150" /></div>
<div id="topNavigation">
<div align="center">Nav </div>
</div>
<div id="contentWrapper">
<div id="rightColumn1"><h2>H2 rightColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div>
<div id="leftColumn1"><h2>H2 leftColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
</div>
<div id="content"><h1>H1 Main Content</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <a href="#">More...</a></p>
<h2>H2 level heading</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
<p>&nbsp;</p>
</div>
<br class="clearFloat" />
</div>
</div>
<div id="footer">Footer</div>
</div>

</body>

--------

Like I said, I'm completely out of my element here - learning bit by bit. CSS isn't difficult coming from a programming background, but my troubleshooting abilities are definitely not up to par.

Any help on this issue is greatly appreciated.

OK, I have a table I'd like to format with CSS. No problem. I have an external stylesheet that I link to for the rest of my site. I figured I'd add the CSS there and be good to go.

Nope. When I link to the external stylesheet, everything else on my page is formatted correctly, except the table. It's like the table isn't grabbing the CSS information. (Example 1)

When I take the CSS and put it in the header of the page, it works fine (same exact CSS, the only difference is where it's referenced). (Example 2)

Here's a handy tip for you ...

if like me you split your big stylesheet up into smaller ones, put them into a linked stylesheet and import them, like so:

PHP Code:
<link rel="stylesheet" type="text/css" href="main.css"> 





and in the CSS file itself ...

PHP Code:
@import url(css/file1.css);
@import url(css/file2.css);
@import url(css/file3.css);
@import url(css/file4.css); 





some of you no doubt will already do this. here's the crux tho. if you also have some miscellaneous CSS which doesn't fit in any of the extra files and are going to include them in the linking [main] file, then you must include them after the import statements. if you don't Mozilla will ignore the imports and the extra files will not be included in the rendering. code should be like this:

PHP Code:
@import url(css/file1.css);
@import url(css/file2.css);
@import url(css/file3.css);
@import url(css/file4.css);

body
{
   direction: rtl !important;
} 







IE get's this correct regardless of the order.

Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer.
However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page.
I want the div to stretch, but be at least as long as the page.

Here is a simplification of my code as an example:
Code:

<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}

.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />

<div class="footerdiv">a</div>
</div>
</body>
</html>

Hi...new here. I am formatting a small page for mass email and have a div under the header that holds the date. It should be simple but I cannot get it to fill the entire space with color...at least not in Firefox. It looks fine in IE. Go figure. IE is the one that usually gives me trouble.

Anyway, I have done just about EVERYTHING I can think of....to no avail. Can anyone give me a fresh perspective and let me know what's wrong?

http://www.msbanet.org/emails/moasbo/emails/060627_workshops.htm

The css is embedded.

Thanks,

Jeralyn

I know it's probably something simple, but I'm having trouble centering my web page in CSS.

I want to center it no matter what resolution a visitor has their monitor set to or the size of their monitor.

I've tried the following to no avail:

Code:

margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

Any suggestions?

Can you have both inline styles AND a linked style sheet? would this cause confusion?

hi.

I need some formatting help.

I am using niftycorners and the linked list tabs
I am building seem to rest at the bottom, pushing
the bottom of the rounded corners to the right of them.
I have tried clear:left, clear:right, clear:both at the div
and ul levels but that doesnt work.

any ideas?

I have attached a picture of the problem.

Here is the CSS/HTML:

Code:

<style>

body {

margin:20px;

}

#toptabs {
clear:left;
}

#toptabs ul {
    clear:left;
    position:relative;
	width:100%;
	margin-bottom:0;
	list-style:none;
	line-height:1em;
	padding:100px 0px 0px 0px;
}	

#toptabs ul li {
	float:left;
	margin-right:5px;
	padding:0;
}
#toptabs ul li.clear {
	clear:right;
}

#toptabs a {
	display:block;
	color:#444;
	text-decoration:none;
	font-weight:bold;
	background:#ddd;
	margin:0;
	padding:0.25em 1em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	border-right:1px solid #aaa;
}

#toptabs A:hover,
#toptabs A:active,
#toptabs A.he link,
#toptabs A.he visited {
	background:#bbb;
}

#toptabs A.he link,
#toptabs A.he visited {
	position:relative;
	z-index:102;
}
</style>
</HEAD>

<BODY>

  <div id="header">
	  <div id="toptabs">
	    <ul id="venture">
          <li id="current"><a href="#"><span>Profile</span></a></li>
          <li><a href="#"><span>Q&A</span></a></li>
          <li><a href="#"><span>Recommendations</span></a></li>
          <li><a href="#"><span>Connections</span></a></li>
        </ul>
      </div>
    </div>	
</BODY>

Hi,

Not sure if I'm posting in the right area, but here goes.

I'm trying to learn how to send HTML emails, and as I'm in the process of revamping our website using only CSS (no tables), I wanted to format the emails in the same way.

I've created 2 html pages in Dreamweaver - in one, I linked to my stylesheets, and in the other I copied and pasted the contents of the stylesheets and embedded them in my html page. The incorrect result described below is exactly the same for both.

In Outlook, following instructions I found on Macromedia's website, I created a New email, did Insert -> File, clicked the dropdown arrow beside the Insert button, and clicked Insert As Text.

It inserts the images fine, so obviously it's finding the path I've specified (I have alternated between using an absolute path and using a relative path and a base tag) but the layout is completely wrong, eg. the 'LeftPanel' which I've specified as :

#LeftPanel {
position:absolute;
top: 105px;
left: 5px;
width: 190px;
height: 400px;
border: 1px solid #000033
}

is taking up the full width of the email - basically everywhere I've set a specific width/height are not being displayed as specified at all. I've used a browser to view the work I've done on the revamp of the actual website and everything is exactly right, so the stylesheets are working correctly in that context.

Anyone any ideas what the problem is?

Thanks a lot,
J.

hi,

i m trying to design a page with a logo at the top.just like this site.

http://richgirlstore.com/xcart/home.php

but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks...

Well, I have made it work before, and I have even tried to copy the CSS and XHTML from an old site, but it just doesn't work.

I have a div named "wrapper" with a 1 pixel black border. I close the wrapper after the footer at the end of the XHTML, yet the border is not even half way around the site.

Here's the URL: http://www.caillouette.com/Utilitrek/new/

any ideas?


Well, I did some surfing and found that I needed: min-height: 100%
But that didn't appear to work.
thanks
-Sean

Hey guys. I have a basic div and want an image to show up on the top of the div only. Here it is.

Code:

#container #news {
  top:3px;
  width:260px;
  height:194px;
  background-color:#eeeee2;
  float:left;
  margin-bottom:4px;
  background: url(/images/section_top.gif) no-repeat top left;
}

The image spans the width of the div and is only about 20 pixels tall. so it should show up, but the rest of the div should display, obviously. The image does indeed show up at the top. However, the rest of the div gets covered in white for some reason. Anybody know what's up? Thanks in advance.