|
CSS - Content Management System For Css/html??
This might not be the best place in the forum for this question, but here it goes...
I am looking to start using a CMS and wanted to see what you use, why you like it, etc? Right now, I am looking into WordPress, CMS Made Simple, and a few others... Thanks in advance... Similar TutorialsHi, I plan to use CSS with CMS on my website. I would like to use CSS content management system for the inherent benefits of managing my website myself. I have seen a few websites developed by Imageworksstudio.com using CSS CMS together in a very correct manner. Can any of you please guide me what CSS content management system they have used? Can you point me to any online resources that help in using CMS and CSS to develop a website and make it SEO friendly. Thank You, Rheanna Francis In the interest of tableless design, I'm trying to organize columns and rows of data with divs and spans, but they aren't conforming to the static width I've set for them. First let me ask, since tables were originally designed to organize data, is it still considered acceptable to use them in this way since the concept of tableless design has taken hold? Also, is it acceptable to use divs and spans to organize data since they were designed only for layout purposes? If it is acceptable, what's going on here? I'm specifying a width for the spans, but they aren't taking that width, they are only as wide as the text, which doesn't wrap. See, nothing here about width: Code: .alt0{ /* Alternating cells for search and management list */
background-color: #eeeeee;
}
.alt1{ /* Alternating cells for search and management list */
background-color: #dddddd;
}
.default { /* Default Text */
color: #222222;
text-decoration: none;
font-color: #222222;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
Two rows: Code: <div class="alt0" style="width: 800px;"> <div class="default" style="width:600px;"> <a href="index.cgi">test post</a> </div> <div class="default" style="width:200px;"> 1 March 2006, 01:36 pm </div> </div> <div class="alt1" style="width: 800px;"> <div class="default" style="width:600px;"> <a href="index.cgi">aaaaatest post</a> </div> <div class="default" style="width:200px;"> 1 March 2006, 01:36 pm </div> </div> Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! Hello everyone, after a good bit of browsing around in an attempt to understand how to apply push/pull as supporter by the 960 css FW I've utterly failed. I'm simply doing the layout right now to see where to place elements and so forth, and as far as I understand the following code would push the logo box 3 columns up (3*60=180px): Code: <div class="grid_6 push_3"> <p>logo</p> </div> Whilst this here, would pull one of my textboxes back 6 columns (6*60=360px); Code: <div class="grid_3 pull_6"> <p>text column</p> </div> Yet while using dreamweaved and previewing the page in firefox, for some reason, even after saving the index page, i still get the logo box on the top left corner, so anyone able to tell me why it wont adhere to the pushes and pulls? Oh btw, these DIV's are place inside of the <body> tags. And here's the full code of body so far: Code: <body> <div class="grid_6 push_3"> <p>logo</p> </div> <div class="grid_3 pull_6"> <p>text column</p> </div> <div class="grid_3"> <p>text column</p> </div> <div class="grid_12"> <p>big box</p> </div> </body> Need help converting the above to use 960 grid system. Most is already done by "cloning" the FourKitchens.com main page but I can't get this last bit of code converted. This code is contained within a container-16 element: Code:
<!-- COLUMN-LEFT -->
<div id="column-left" class="grid-11 suffix-1">
<!-- COLUMN-LEFT-INNER -->
<div id="column-left-inner" class="grid-11 clearfix">
<!-- CONTENT -->
<div id="content">
<!-- CONTENT-BODY -->
<div id="content-body">
<!-- HEADER_IMG -->
<div id="header_img">
<img src="images/banner4.jpg" width="640" id="banner" />
</div> <!-- END HEADER_IMG -->
<!-- FILTER-ROW -->
<div id="filter-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Filter by :</strong> <a href="categorytasks.php?category=&mny=&f=l">Latest</a> | <a href="categorytasks.php?category=&mny=&f=p">Most Popular</a> | <a href="categorytasks.php?category=&mny=&f=r11">Highest Rated</a> </td>
<td> </td>
<td><strong>For $</strong>
<form name="mnyform" method="post" enctype="multipart/form-data">
<select name="mnyindex" onChange="indexcategoryload(document.mnyform.mnyindex.value)">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1">1</option>
</select>
</form>
</td>
</tr>
</table>
</div> <!-- END FILTER-ROW -->
<!-- TASK-ROW -->
<div id="task-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="107">
<img src="taskimages/a4d11fddb35c9f__donate.jpg" width="106" height="76" />
</td>
<td width="17"> </td>
<td width="476">
<a href="task_desc.php?No=21" class="mainheading">I Will Keep it real for $1</a></span><br />
Just keep it real<br /><br />
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="15%">
<a href="task_desc.php?No=21" class="heading">
Read more
</a>
<img src="images/small_twitter.jpg" width="43" height="27" align="absmiddle" /> <span class="share" onClick="showHideDiv('share21')" style="cursor:pointer;"> Share</span>
</td>
<td width="8%">
<div id ="share21" style="display:none;">
<td width="4%"> </td>
<td>
<a href="fb_link" target="_blank" class="heading">
<img src="images/btn-facebook.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
<a href="twitter_link" target="_blank" class="heading">
<img src="images/btn-twitter.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
</td>
<td width="4%"> </td>
</div>
</td>
<td width="1%"> </td>
<td width="17%" align="right"><a href="task_desc.php?No=21"><img src="images/order_now_btn2.gif" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div> <!-- END TASK-ROW -->
</div> <!-- END CONTENT-BODY -->
</div> <!-- END CONTENT -->
</div> <!-- END COLUMN-LEFT-INNER -->
</div> <!-- COLUMN-LEFT -->
I'm trying to create a context sensitive help system so that users can click an icon and get additional information about the section of the web page they're viewing. I want a layered div to come to the top and display this information then close upon the user clicking a button / link. I have all that working fine. The problem I'm having is I only want one help layer to appear at a time. So if the user fails to close the currently open layer, i want to automatcially close this layer then display the next one. Applicable CSS: Code:
.helpText {
position: absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
color: #000000;
font-size: 13px;
float:left;
}
.top {
position: absolute;
bottom: 90;
left: 110;
width: 100px;
height:5em;
background-color:#FFFF99;
z-index:1;
padding:.5em;
border: 1px;
border-style: solid;
border-color: #000000;
}
HTML: Code:
<DIV id="button">
<input type="button" name="button" value="?" onclick="helpText(\'matches\');">
<DIV id="matches" class="top" style="display:none;">
<DIV class="close">
<input type="button" name="button" value=" X " onclick="helpText(\'matches\');">
</div>
<div class="helpText">
It works here too!
</div>
</DIV>
</DIV>
javascript: Code:
function helpText (elm) {
/*
The function below successfully alters the class ".top" to not display, the problem is it works globally. So since two or more "helpText" divs will use this class even the one i want to display will be hidden.
*/
// alterCssClass(".top","display","none");
var div = document.getElementById(elm);
if (div.style.display == "") {
div.style.display = "none";
} else {
changecss("#"+elm+".top","display","");
div.style.display = "";
}
}
Any help would be greally appreciated. Thanks in advance. This is driving me crazy! I'm experimenting with the "MyGosu" menu (the drop-down menu at the top of the page) inside of the default Mambo template. See my efforts he http://www.mediamogulsweb.com/client/Mambo/ The menu works fine in Mozilla/Firefox, but is failing in IE6 and IE7... In IE, the pop-out submenus don;t appear...But I'm thinking that they actually do appear, but are being obscured by the header image (or something else?)....So I adjusted the z-index of the header image div to "1", but that didn;t do the trick... What is going on here? Any ideas are appreciated... Hi, I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? hi, I have a layour where the container is 100% high, and then I have a header and nav then I have a #main and #bar divs (columns) then #footer I would like for the footer to stick to the bottom and the main, and bar expand to the bottom (even if there isn't enough text) does this make sense, heres my css PHP Code: html,body { height:100%; margin:0px; padding:0px; background: #eee; } #container { height:100%; margin: 0 auto; width: 720px; border-left: 1px solid #000; border-right: 1px solid #000; background: #f00; } #header { height: 170px; background: #ff0 url('../images/header.gif'); } #nav { height: 25px; padding: 5px; background: #666; } #main { width: 400px; float: left; padding: 10px; background: #fff; } #bar { padding: 10px; margin-left: 420px; border-left: 1px solid #006; background: #fff; } #copy { height: 30px; background: #999; clear: both; } my css : Code: #contentright {
width:171px;
padding:0px;
float:left;
background:#fff;
}
I am new to useing css for layout and am running into a problem where if I do Code: <div id="contenteight"> some text </div> then try to do it again Code: <div id="contenteight"> some more text </div> it doesn't place the new text on the right, but rather at the bottom left. also my while page is inside of Code: #frame {
width:823px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
any help thanks Hi, I'm knocking up a new site and I'd like to place the content first in the source code, followed by the nav code etc. The design of the site goes: header -> main content -> footer. The navigation will sit in the header above the main content. all the nav links etc. are text and will be resizable by the user as that is good accessibility practice. This means the header can change height as the font expands. So my question is... I see how I could put the header and nav last in the soiurce code and then position it absolutely, and position the main content etc. under it. but how do I do this when the height of the header can vary if the user alters the text size etc.? any tips ladies and gentlemen? I am working form a template that I am modifying a website and the the content is working fine in Chrome, Safari, and FF, but the part of the sidebar shows up in IE7 and no other content. Any asssitance will be appreciated. I tried different hacks with no luck. I got errors for unscrollable content but I don't believe that is it because I tried all "fixes" Code: /* begin Page */
www.justgreek.com/questions.html
body
{
margin: 0 auto;
padding: 0;
background-color: #D08C35;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
}
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0;
}
#art-page-background-glare
{
position: absolute;
width: 100%;
height: 630px;
left: 0;
top: 0;
}
#art-page-background-glare-image
{
background-image: url('images/Page-BgGlare.png');
background-repeat: no-repeat;
height: 630px;
width: 817px;
margin: 0;
}
html:first-child #art-page-background-glare
{
border: 1px solid transparent; /* Opera fix */
}
#art-page-background-gradient
{
position: absolute;
background-image: url('images/Page-BgGradient.jpg');
background-repeat: repeat-x;
top:0;
width:100%;
height: 900px;
}
#art-page-background-gradient
{
background-position: top left;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}
form
{
padding:0 !important;
margin:0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* end Page */
/* begin Box, Sheet */
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 955px;
min-width:55px;
min-height:55px;
}
.art-Sheet-body
{
position: relative;
z-index: 1;
padding: 4px;
}
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
width: 66px;
height: 66px;
background-image: url('images/Sheet-s.png');
}
.art-Sheet-tl
{
top:0;
left:0;
clip: rect(auto, 33px, 33px, auto);
}
.art-Sheet-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 33px, 33px);
}
.art-Sheet-bl
{
bottom: 0;
left: 0;
clip: rect(33px, 33px, auto, auto);
}
.art-Sheet-br
{
bottom: 0;
right: 0;
clip: rect(33px, auto, auto, 33px);
}
.art-Sheet-tc, .art-Sheet-bc
{
left: 33px;
right: 33px;
height: 66px;
background-image: url('images/Sheet-h.png');
}
.art-Sheet-tc
{
top: 0;
clip: rect(auto, auto, 33px, auto);
}
.art-Sheet-bc
{
bottom: 0;
clip: rect(33px, auto, auto, auto);
}
.art-Sheet-cr, .art-Sheet-cl
{
top: 33px;
bottom: 33px;
width: 66px;
background-image: url('images/Sheet-v.png');
}
.art-Sheet-cr
{
right:0;
clip: rect(auto, auto, auto, 33px);
}
.art-Sheet-cl
{
left:0;
clip: rect(auto, 33px, auto, auto);
}
.art-Sheet-cc
{
position:absolute;
z-index:-1;
top: 33px;
left: 33px;
right: 33px;
bottom: 33px;
background-color: #FFFFFF;
}
.art-Sheet
{
margin-top: 10px !important;
}
#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:955px;
}
/* end Box, Sheet */
/* begin Header */
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 947px;
height: 136px;
}
div.art-Header-png
{
position: absolute;
z-index:-2;
top: 0;
left: 0;
width: 947px;
height: 136px;
background-image: url('images/Header.png');
background-repeat: no-repeat;
background-position: left top;
}
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 947px;
height: 136px;
background-image: url('images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */
/* begin Menu */
/* menu structure */
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}
.art-menu li li
{
float: none;
}
.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}
.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}
.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}
.art-menu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.art-menu
{
padding: 4px 2px 0px 2px;
}
.art-nav
{
position: relative;
height: 29px;
z-index: 100;
}
.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 29px;
background-image: url('images/nav.png');
}
.art-nav .l
{
left: 0;
right:0px;
}
.art-nav .r
{
right: 0;
width: 947px;
clip: rect(auto, auto, auto, 947px);
}
/* end Menu */
/* begin MenuItem */
.art-menu ul li
{
clear: both;
}
.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 25px;
cursor: pointer;
text-decoration: none;
margin-right: 4px;
margin-left: 4px;
}
.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 75px;
background-image: url('images/MenuItem.png');
}
.art-menu a .l
{
left:0;
right:11px;
}
.art-menu a .r
{
width:422px;
right:0;
clip: rect(auto, auto, auto, 411px);
}
.art-menu a .t
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #DEDEDE;
padding: 0 2px;
margin: 0 11px;
line-height: 25px;
text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r
{
top:-25px;
}
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-25px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-25px;
}
.art-menu a:hover .t
{
color: #F0F0F0;
}
.art-menu li:hover a .t
{
color: #F0F0F0;
}
.art-menu li:hover>a .t
{
color: #F0F0F0;
}
.art-menu a.active .l, .art-menu a.active .r
{
top: -50px;
}
.art-menu a.active .t
{
color: #000000;
}
/* end MenuItem */
/* begin MenuSubItem */
.art-menu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 180px;
overflow:hidden;
line-height: 20px;
margin-right: auto;
background-image: url('images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0px;
border-style: solid;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-menu ul ul a
{
margin-left: auto;
}
.art-menu ul li a:hover
{
color: #3B3B3B;
background-position: 0 -20px;
}
.art-menu ul li:hover>a
{
color: #3B3B3B;
background-position: 0 -20px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #3B3B3B;
}
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #3B3B3B;
}
/* end MenuSubItem */
/* begin ContentLayout */
div.art-content
{
width:709px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right auto;
}
.art-contentLayout
{
position: absolute;
top: 156px;
margin-bottom: 6px;
width: 947px;
}
/* end ContentLayout */
/* begin Box, Block */
.art-Block
{
position:relative;
z-index:0;
margin:0 auto;
min-width:15px;
min-height:15px;
}
.art-Block-body
{
position: relative;
z-index: 1;
padding: 7px;
}
.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
width: 14px;
height: 14px;
background-image: url('images/Block-s.png');
}
.art-Block-tl
{
top:0;
left:0;
clip: rect(auto, 7px, 7px, auto);
}
.art-Block-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 7px, 7px);
}
.art-Block-bl
{
bottom: 0;
left: 0;
clip: rect(7px, 7px, auto, auto);
}
.art-Block-br
{
bottom: 0;
right: 0;
clip: rect(7px, auto, auto, 7px);
}
.art-Block-tc, .art-Block-bc
{
left: 7px;
right: 7px;
height: 115px;
background-image: url('images/Block-h.png');
}
.art-Block-tc
{
top: 0;
clip: rect(auto, auto, 7px, auto);
}
.art-Block-bc
{
bottom: 0;
clip: rect(7px, auto, auto, auto);
}
.art-Block-cr, .art-Block-cl
{
top: 7px;
bottom: 7px;
width: 1px;
background-image: url('images/Block-v.png');
}
.art-Block-cr
{
right:0;
clip: rect(auto, auto, auto, 7px);
}
.art-Block-cl
{
left:0;
clip: rect(auto, 7px, auto, auto);
}
.art-Block-cc
{
position:absolute;
z-index:-1;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
background-color: #F8EFE2;
}
.art-Block
{
margin: 7px;
}
/* end Box, Block */
/* begin BlockHeader */
.art-BlockHeader
{
position:relative;
z-index:0;
height: 30px;
padding: 0 7px;
margin-bottom: 7px;
}
.art-BlockHeader .t
{
height: 30px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
white-space : nowrap;
padding: 0 6px;
line-height: 30px;
}
.art-BlockHeader .l, .art-BlockHeader .r
{
display:block;
position:absolute;
z-index:-1;
height: 30px;
background-image: url('images/BlockHeader.png');
}
.art-BlockHeader .l
{
left:0;
right:6px;
}
.art-BlockHeader .r
{
width:947px;
right:0;
clip: rect(auto, auto, auto, 941px);
}
.art-header-tag-icon
{
height: 30px;
background-position:left top;
background-image: url('images/BlockHeaderIcon.png');
padding:0 0 0 12px;
background-repeat: no-repeat;
min-height: 12px;
margin: 0 0 0 5px;
}
/* end BlockHeader */
/* begin Box, BlockContent */
.art-BlockContent
{
position:relative;
z-index:0;
margin:0 auto;
min-width:1px;
min-height:1px;
background-color: #FFFFFF;
}
.art-BlockContent-body
{
position: relative;
z-index: 1;
padding: 8px;
}
.art-BlockContent-body
{
color:#383838;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-BlockContent-body a:link
{
color: #832121;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
color: #525252;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
color: #290A0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
.art-BlockContent-body ul
{
list-style-type: none;
color: #4A4A4A;
margin:0;
padding:0;
}
.art-BlockContent-body li
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
}
.art-BlockContent-body ul li
{
padding:0px 0 0px 13px;
background-image: url('images/BlockContentBullets.png');
background-repeat:no-repeat;
margin:0.5em 0 0.5em 0;
line-height:1.2em;
}
/* end Box, BlockContent */
/* begin Box, Post */
.art-Post
{
position:absolute;
z-index:0;
margin:0 auto;
min-width:706px;
min-height:1px;
}
.art-Post-body
{
position: absolute;
z-index: 1;
padding: 10px;
}
.art-Post
{
margin: 7px;
}
/* Start images */
a img
{
border: 0;
}
.art-article img, img.art-article
{
border: solid 1px #C4C4C4;
margin: 1em;
}
.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}
/* Finish images */
/* Start tables */
.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
width:auto;
}
.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
background-color:Transparent;
}
.art-article th, .art-article td
{
padding: 2px;
border: solid 1px #5C5C5C;
vertical-align: top;
text-align:left;
}
.art-article th
{
text-align: center;
vertical-align: middle;
padding: 7px;
}
/* Finish tables */
pre
{
overflow: auto;
padding: 0.1em;
}
/* end Box, Post */
/* begin PostHeaderIcon */
.art-PostHeader
{
text-decoration:none;
margin: 0.2em 0;
padding: 0;
font-weight:normal;
font-style:normal;
letter-spacing:normal;
word-spacing:normal;
font-variant:normal;
text-decoration:none;
font-variant:normal;
text-transform:none;
text-align:left;
text-indent:0;
line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #661919;
}
.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
margin:0;
color: #661919;
}
/* end PostHeaderIcon */
/* begin PostHeader */
.art-PostHeader a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #7A1F1F;
}
.art-PostHeader a:visited, .art-PostHeader a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #4D4D4D;
}
.art-PostHeader a:hover, .art-PostHeader a.hovered
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #BC2F2F;
}
/* end PostHeader */
/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #404040;
}
.art-PostContent p
{
margin: 0.5em 0;
}
.art-PostContent, .art-PostContent p
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-align: justify;
color: #84561E;
}
.art-PostContent
{
margin:0;
}
/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to an unvisited link. */
a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #3B3B3B;
}
/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #BC2F2F;
}
/* Finish Content link style */
/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
font-weight: normal;
font-style: normal;
text-decoration: none;
}
/* Start Content headings Fonts & Colors */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #8F2424;
}
h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #BC2F2F;
}
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #595959;
}
h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #A72A2A;
}
h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #292929;
}
h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #292929;
}
/* Finish Content headings Fonts & Colors */
/* end PostContent */
/* begin PostBullets */
/* Start Content list */
ol, ul
{
color: #404040;
margin:1em 0 1em 2em;
padding:0;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}
li ol, li ul
{
margin:0.5em 0 0.5em 2em;
padding:0;
}
li
{
margin:0.2em 0;
padding:0;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position:inside;
}
.art-Post li
{
padding:0px 0 0px 13px;
line-height:1.2em;
}
.art-Post ol li, .art-Post ul ol li
{
background: none;
padding-left:0;
}
.art-Post ul li, .art-Post ol ul li
{
background-image: url('images/PostBullets.png');
background-repeat:no-repeat;
padding-left:13px;
}
/* Finish Content list */
/* end PostBullets */
/* begin PostQuote */
/* Start blockquote */
blockquote,
blockquote p,
.art-PostContent blockquote p
{
color:#2E2E2E;
font-family: Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-align: left;
}
blockquote,
.art-PostContent blockquote
{
border:solid 1px #DD7878;
margin:10px 10px 10px 50px;
padding:5px 5px 5px 41px;
background-color:#EEBABA;
background-image:url('images/PostQuote.png');
background-position:left top;
background-repeat:no-repeat;
}
/* Finish blockuote */
/* end PostQuote */
/* begin Button */
.art-button-wrapper .art-button
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:33px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
}
.art-button-wrapper
{
display:inline-block;
position:relative;
height: 33px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}
.firefox2 .art-button-wrapper
{
display:block;
float:left;
}
.art-button-wrapper .art-button
{
display:block;
height: 33px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
white-space: nowrap;
text-align: left;
padding: 0 21px !important;
line-height: 33px;
text-decoration: none !important;
color: #FAF3EA !important;
}
input, select
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FBEFEF !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button
{
color: #F2F2F2 !important;
}
.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 92px;
background-image: url('images/Button.png');
}
.art-button-wrapper .l
{
left:0;
right:10px;
}
.art-button-wrapper .r
{
width:409px;
right:0;
clip: rect(auto, auto, auto, 399px);
}
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -33px;
}
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -66px;
}
/* end Button */
/* begin Footer */
.art-Footer
{
position:relative;
z-index:0;
overflow:hidden;
width: 947px;
margin: 5px auto 0px auto;
}
.art-Footer .art-Footer-inner
{
height:1%;
position: relative;
z-index: 0;
padding: 8px;
text-align: center;
}
.art-Footer .art-Footer-background
{
position:absolute;
z-index:-1;
background-repeat:no-repeat;
background-image: url('images/Footer.png');
width: 947px;
height: 150px;
bottom:0;
left:0;
}
.art-Footer .art-Footer-text p
{
margin: 0;
}
.art-Footer .art-Footer-text
{
display:inline-block;
color:#000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
}
.art-Footer .art-Footer-text a:link
{
text-decoration: none;
color: #DEAF73;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-Footer .art-Footer-text a:visited
{
text-decoration: none;
color: #333333;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-Footer .art-Footer-text a:hover
{
text-decoration: none;
color: #291C0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
/* end Footer */
/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
font-family:Arial;
font-size:10px;
letter-spacing:normal;
word-spacing:normal;
font-style:normal;
font-weight:normal;
text-decoration:underline;
color:#D69D51;
}
.art-page-footer
{
margin:1em;
text-align:center;
text-decoration:none;
color:#949494;
}
/* end PageFooter */
/* begin LayoutCell */
.art-contentLayout .art-sidebar1
{
position: absolute;
margin: 0;
padding: 0;
border: 0;
left: 0;
overflow: hidden;
width: 236px;
}
/* end LayoutCell */
/* begin LayoutCell */
.art-contentLayout .art-content
{
position: absolute;
margin: 0;
padding: 0;
border: 0;
right: 0;
overflow: hidden;
width: 709px;
}
.art-contentLayout .art-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 945px;
}
.ProductItem {
border-color:#CCCCCC;
border-style:solid;
border-width:1;
padding:5;
padding-top:10;
width:200px;
}
.ProductItem {
font-size:11;
width:200px;
}
.ProductItemClick {
text-align:center;
width:100%;
cursor:pointer;
}
.ProductItemImage {
text-align:center;
width:200px;
cursor:pointer;
height:125px;
}
.ProductItemName {
height:40;
text-align:center;
line-height:14px;
}
.ProductItemShortDesc {
border-color:#857358;
border-style:solid;
border-width:1;
background-image:url(Images/DescBG.png);
color:#FFFFFF;
height:35;
padding:0;
!padding:3;
font-size:10px;
line-height:12px;
}
/* end LayoutCell */
Not sure if this is a CSS question or a Javascript question. Leaning towards CSS so here goes: Please refer to: http://www.larreamma.com/ When the page is first loaded the scrolling 'News & Events' content initially displays... outside the container it is allocated to(?). That is, a couple of lines briefly display below the 'News & Events' background. Once it is "loaded" it displays within the box, as expected. Can this be eliminated? The scroller being used is 'DOMnews 1.0' from http://onlinetools.org/tools/domnews/ . I had inquired there some time ago but have not gotten a reply. Thank you in advance. Hi guys, I am trying to achieve the following: Box 1 | ------ Box 2 | ** With a 3rd box to the right of box 1&2 I have got this far but cant work out how to do 'box2' Code: <div id="box2"> box 2 </div> <div id="box3"> box 3 </div> Code:
#box2 {
float: left;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box2 {
width: 100px;
/* ie5win fudge ends */
}
#box3 {
float: right;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box3 {
width: 100px;
/* ie5win fudge ends */
}
Can anyone possibly help? I feel like I've been posting a lot of questions lately and I attempted to search for an answer on this one as it should be something simple. However, the search wasn't cooperating with me. Anyway, here is the latest problem: http://www.sprechereast.com/documents.html In Firefox, the brown left navigation bar cuts off when the content on the right is shorter than the nav bar. Seems to display correctly in IE6, but I realize that FF is technically correct and there is something wrong in my CSS. Funny thing is, I'm certain this worked in the past as I've had this site up problem free for awhile. I'm thinking this might have happened with the latest FF update. Is this possible? Once again, thanks in advance for the help and any links to good reading material on the subject. |
|||||||