|
CSS - Embedded Sheet Works / Linked Does Not
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> </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. Similar TutorialsCan you have both inline styles AND a linked style sheet? would this cause confusion? Hi can anyone tell me if I can override embedded CSS with a linked stylesheet? Here is what I want to change: Code: <col width="40%" style="background-color:#EEEEEE;text-align:left;"> I want to change the background-color without changing anything in the above mentioned code, this means I want to change it with an extern stylesheet. 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. does anyone know off hand without me posting any code, why my CSS would work embedded in the page between style tags and not referenced with a link tag (<link type="text/css" rel="stylesheet" href="blah.css" />). this bug occurs in firefox. I dont think you can wrap a <div> inside <a>, but is there any way to make an entire <div> area "linked" ? One idea - Im sure i can hook up an onclick event with javascript, but how would i change the mouse prompt when the user moves thier mouse over it ? Kinda new, bear with me. I have a linked image, and want to add a simple black border w css. I have this coded in an external .css: .rr25 { border-style: solid; border-width:2px; border-color: #000000; } And this is what is in my HTML: (page is linked to external .css) <tr> <td valign="top" align="center"> <a href="photo_gallery/clients/gallery_8.jpg" target="mainpic"> <div class="rr25"> <img src="photo_gallery/clients/gallery_8.jpg" width="80" height="107" border="0"> </a> </td> </tr> OK. The image displays but it is centered with tons of white space on the left and right and a small margin on the bottom. The margin grows/shrinks when I adjust the table width prop. ??????? 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 I have an imaged logo on top of my page that I want to link to the startpage. However, whenever I link the image, I get the typical border that signalizes a link. How can I get rid of this border with the help of my Stylesheet? It seems like I can't even change the color of the border in IE?? Thanks a lot Steve Edit: Never mind -- searched before posting and did not find anything, but after I posted, there it was... Used {border:0;} on the img tag -- voila... 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. 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) 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? 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 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>
Hello! I am new to these forums and would like to get some advice or help on something. First of all is it possible to have more than one CSS menu in a web page? and if so, how do you get them to both work without conflicting? Here is the deal. I am wanting to put a sheet that gives me a nice menu bar. But when I put it in, it messes with the entire page. It conflicts with the original sheet for that page and rearranges everything. Anything will be helpful at this point. Thanks in advance. apollo Hi, I have a style sheet which works fine on my mac, but not on my PC in IE7. I know how to substitute stle sheets based on browsers, but here's the issue at hand. I have 2 styles for the <ul> which follow: ul.nav{ clear:both; width:192px; padding: 0px; display: block; background-color:#000000; margin-top:-11px; margin-left:0px; float:left; } and ul.bodyText{ font-color:#000000 font-size:12px; font-family:helvetica, arial, sans-serif; } it appears that "ul.bodyText is taking on the characteristics of "ul.nav" Or, for some reason, the <ul><li>'s in my Mac look fine, but on my PC, they do not have the indent preceeded by the dot. Here's the site http://www.caillouette.com/NewestSelvan/English/aboutUs.php can anyone tell me why? thanks -Sean Hello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code:
a.red10ullink:link {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:visited {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:hover {color: #333333;
font-size: 10pt;
font-family: arial;}
img.icon {vertical-align: middle;
border-width: 0px;
margin: 0px 5px 0px 0px;}
HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! Hi there. I have a print style that won't display images when printing.. img {display: none;} I have a certain page where I need the print style sheet but will like the images to print. How can I override the print style for the images? I have a tables layout and for some reason everytime I go to add something to the layout (eg. cutenews) the background disappears. By that I also mean it disappears completely from the html coding in index. This is the style for my layout: body, table, td{ font-size: 9px; font-family: sans-serif; color: #66CCCC; letter-spacing: 1px; margin: 0; } .navi{ font-size: 9px; font-family: sans-serif; margin-top: 5px; text-align: left; } .navhead{ width: 100px; height: 38px; padding-top: 21px; padding-right: 0px; font-size: 10px; text-align: right; color: #CCCCCC; margin-bottom:10px; font-family: monospace; text-transform: lowercase; letter-spacing: 5px; background: black url(Bilder/navheader.jpg); } .head{ width: 310px; height: 38px; padding-top: 10px; padding-left: 25px; font-size: 10px; text-align: left; color: #CCCCCC; margin-bottom: 20px; margin-top: 20px; font-family: monospace; text-transform: lowercase; letter-spacing: 5px; background: black url(Bilder/header.jpg); } .content{ width: 310; padding-left: 10px; padding-right: 10px; color: #66CCCC; text-align: justify; } a:link, a:visited, a:active { text-decoration: none; color: #009999; } a:hover { text-decoration: none; color: #00CC33; } Where and what code can I use for a fixed background? Hello I'm having trouble with displaying a background image in a div. It worked fine with embedded CSS but when I changed the CSS to external, the text loads but the bg image doesnt. I'll post some code to explain it... This is in the external style sheet: #navbgtop { position:absolute; left:38px; top:185px; width:194px; height:18px; z-index:2; background-image: url(images/navbartop.jpg); } and yes of course I have made the proper link to it in the <head> tag: <link rel="stylesheet" type="text/css" href="css/nav.css" media="all" /> For some reason the background image wont display. Any ideas? One more question also, does it matter if I use media="all" for the whole website? Or do I even need to bother using media=xyz ? I heard most browsers don't even read that as of yet. Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ? |
|||||||