|
CSS - Swapping Content, Preserving Same Location
What I don't like about my code below is that space is kept for Sections A and B, even when they are not visible.
Code: <div id="container">
<div id="A">
Section A.
<input type="button" value="Toggle extra" onClick="toggleExtra()">
<span id="extra"></span>
</div>
<div id="B">
Section B.
</div>
</div>
What I really want is for Section A to take the place of Section B when the other button is clicked. Purpose: I want the user to arrive at my web page and click a button to establish why they are there. If for A, they will be shown content for topic A. If for B, content for topic B. (Further illustration: If you toggle the extra text on in section A and then view Section B, the blank area for Section A is that much bigger...) Functional but incorrect code: Code: <html>
<head>
<link rel=stylesheet href="../common.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//<![CDATA[
function switchIt(mode) {
if (mode == 'A') {
document.getElementById('A').style.visibility = 'visible';
document.getElementById('B').style.visibility = 'hidden';
}
else {
document.getElementById('A').style.visibility = 'hidden';
document.getElementById('B').style.visibility = 'visible';
}
}
var toggle = -1;
function toggleExtra() {
toggle *= -1;
if (toggle == 1) {
document.getElementById('extra').innerHTML = "<br>extra";
}
else {
document.getElementById('extra').innerHTML = "";
}
}
//]]>
</script>
<STYLE TYPE="text/css">
<!--
body {
text-align: center;
}
#container {
margin:0 auto 0 auto;
width:400px;
border:2px outset white;
}
#A {
visibility:hidden;
border:2px outset white;
}
#B {
visibility:hidden;
border:2px outset white;
}
-->
</STYLE>
</head>
<body>
<form>
<input type="button" value="Show section A" onClick="switchIt('A')">
<input type="button" value="Show section B" onClick="switchIt('B')">
</form>
<div id="container">
<div id="A">
Section A.
<input type="button" value="Toggle extra" onClick="toggleExtra()">
<span id="extra"></span>
</div>
<div id="B">
Section B.
</div>
</div>
</body>
</html>
Thanks! oak island Similar TutorialsThe tables I will be swapping out are 1 row in height and are used for navigation. I have several tables with set widths I need to switch. The table columns do not have fixed widths, or in some cases several columns have set widths while the rest are relative to them and the tables set width. An example would be: Code: <table width="400"> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> </table> Now when rendering the browser would estimate each <td> width relative to the <table> width. In this case approx 33% each. If I were to change the text in each column it would re-adjust the widths making a more even adjustment according to the content size. Now I know every one hear knows that but I just wanted to make it crystal clear as to what I am trying to do with CSS and either <DIV> or <OL> tags. If I used either methods below is there a way I could just set the text and have the <DIV> or <OL> auto apply the relative width like a <TABLE> would? Code: <div style="width:400px;"> <div style="float:left;">column 1</div> <div style="float:left;">column 2</div> <div style="float:left;">column 3</div> </div> <ol style="width:400px;margin:0px;padding:0px;list-style:none;"> <li style="float:left;">column 1</li> <li style="float:left;">column 2</li> <li style="float:left;">column 3</li> </ol> I can do a decent amount of stuff with CSS but this issue always has stumped me and no matter how long I research I don't come up with any proper answers. Ok...Im developing a new site for my web design group. the url is : http://www.amweb-design.com/beta/ Anyways on the top of it i have a Featured client section that fades in when the page loads. Well i also have some < > i want to be able to switch the images of clients and them fade. Im kinda new at css so any help or examples would be great! thanks in advance Austin I'm sure it's something stupid and obvious, but could someone tell me why this works (h1 goes away and image is seen): #branding { height: 100px; position: relative; z-index: 10; } #branding h1 a { position: absolute; top: 16.5px; left: 293px; width: 214px; height: 67px; text-indent: -9999px; background: url(../images/branding.png) no-repeat; } and this doesn't (h1 goes away, but no image swap): #nav_main { position: relative; z-index: 2; height: 50px; } #nav_main h2 { position: absolute; z-index: 6; top: 0; left:0; height: 120px; width: 800px; text-indent: -9999px; background: url(../images/nav_mainh2.png) no repeat; } Hi Guys, I'm trying to create a category list. One first load, the category list is going to be a short list of the top 5 major categories. Each major category will have a sublist of 3 subcategories below it. Lastly, there will be a link labeled 'more' that when clicked, will toggle out divs and display a full category list. Lastly, all other primary categories will have their short list hidden as well, so you only see the Primary Category followed by a 'more' link. Here's a crude example of what I mean. First block is 'first load'. Then the next block would be how it'd look if I clicked the "more" link below vehicles -------------------------------- Vehicles -Cars -Trucks -Motorcycles MORE Stuff -Musical Instruments -Camping -clothing MORE Electronics -televisions -stereos -video games MORE ------------------------------ ex. Vehicles -Cars -Trucks -Motorcycles -Boats -Tractors -antiques -commercial Less Stuff MORE Electronics MORE ------------------------------ I think every primary category (ie vehicles) will require 3 divs. Div1 - short list with 3 sub categories Div2 - full list of all subcategories Div3 - hidden list At first load, the DIV1 variant will be displayed for all primary categories. When the 'more' link is clicked for a particular primary category, it will swap it's div1 for it's div2, and at the same time, swap all other categories div1 for their div3. If the 'less' link is clicked on div3, everything would revert back to normal, all primary categories showing div1. I need to find/write some javascript which would toggle the div's. Does this make sense? Am I going about this the right way? I'd think the code would look something like the following, with each Primary category being cat1, cat2, cat3, etc. Code for first Primary Category Code: <div id="cat1div1">
sample text
<a href="javascript:toggle2('cat1div1','cat1div2');javascript:toggle2('cat2div1','cat2div3'); javascript:toggle2('cat3div1','cat3div3');">
more
</a>
</div>
<div id="cat1div2">
a whole bunch of sample text
<a href="javascript:toggle2('cat1div2','cat1div1');javascript:toggle2('cat2div3','cat2div1'); javascript:toggle2('cat3div3','cat3div1');">less</a>
</div>
<div id="cat1div3">
<a href="javascript:toggle2('cat1div3','cat1div2');">MORE</a>
</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. Im having problems dividing 2 divs into 2 columns. In the following code , I would like "category odd" to appear on left, and "category even" on right- on the same row The current css for the columns is: .categories .categories1, .categories .categories2 {display:inline-block} Working perfect in firefox, not working at all in explorer 6+7. Quote: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .categories {width:950px;} .categories .categories2 { display:inline-block; width:400px; } .categories .categories1 { display:inline-block; width:400px; } .categories .categories1 .categoriesheader1 {width:300px} .categories .categories2 .categoriesheader2 {width:300px} --> </style> </head> <body> <div class="categories"> <div class="categories1"> <div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div></div> <div class="categories2"><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div></div> </div> </body> </html> Hi, am okay to CSS, but i have a problem i just can solve, i hope one of you can help. I have a gallery site, what i have not create my self, download and install type of thing and i have made a custom header menu, but i can not get et to locate correctly. As you can see on this site pictures.rcheli.dk there is a menu at the top " Home | RC Earth | Blog | Pictures | Contact " and i can get i to align to the right. If i resize the windows it scales with the window. You can see here rcheli.dk how i wold like it to work, the location of the menu. Can anybody help me with this issue, i think i have tried every thing. I'm currently working on a very basic website, which seems on the edge of finishing. www.meltonbusiness.co.uk Tiny hiccup remains is that the image RIGHTLY appears on "content area's" top right in Firefox but the same image appears right at the bottom of the Content. Can anyone help. My CSS at this stage looks like: Code: html, body
{
margin:0;
padding:0;
}
body
{
font:75% verdana, arial, sans-serif;
background:white;
}
p
{
margin:0 10px 10px;
padding:0;
}
h1
{
height:100px;
line-height:100px;
text-align:center;
font-family:"lucida calligraphy", verdana, arial, helvetica, sans-serif;
font-size:36px;
color:#534;
margin:0;
}
.spacer
{
clear:both;
background:url(spacer.png) top left;
}
.montage
{
background-color:black;
text-align:center;
clear:both;
height:80px;
}
.wrapper
{
float:left;
width:100%;
}
.content
{
margin:0 260px 0 100px;
padding:5px 0 0 10px;
}
.content ul
{
display:block;
}
.content li
{
display:block;
list-style-type:disc;
padding:5px 0px 5px 0px;
color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
letter-spacing:0.2px;
text-align:justify;
}
p
{
line-height:1.4;
color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
letter-spacing:0.2px;
text-align:justify;
}
h2
{
font-size:20px;
border-bottom:solid thin #666666;
color:blue;
font-family:Georgia, "Times New Roman", Times, serif;
}
.heading
{
font-weight:bold;
text-decoration:underline;
}
.nav
{
float:left;
width:100px;
margin-left:-100%;
margin-top:20px;
}
.nav ul
{
list-style-type:none;
margin:0;
padding:0;
}
.nav ul li
{
display:block;
margin-top:0;
background:url(navbg.png) left repeat-x;
border-bottom:1px solid #000;
font-weight:700;
padding:10px;
}
.nav a
{
color:white;
text-decoration:none
}
.nav a:hover
{
color:yellow;
text-decoration:none;
}
.nav img
{
margin-top:30px;
}
.right_col
{
background:red;
float:right;
width:250px;
margin-top:20px;
margin-right: 0px;
margin-left: -250px;
}
.advert
{
position:relative;
float:left;
left:20px;
background-color:#CCCCCC;
width:80%;
color:#006600;
padding:20px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-align:center;
}
.advert a
{
text-decoration:none;
color:red;
}
.advert a:hover
{
text-decoration:underline;
}
.footer
{
float:none;
width:100%;
border:1px solid #322;
padding:10px;
background-color:#a54;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
letter-spacing:1px;
color:white;
}
.footer a
{
text-decoration:underline;
color:white;
}
.footer a:hover
{
text-decoration:overline;
color:#F0F8FF;
}
hr
{
text-align:left;
width:100%;
color:maroon;
background-color:maroon;
height:1px;
}
I have a tab bar that sits on top of two div columns. The bar is supposed to sit in the center of the top of the left column. I can achieve this perfectly via Code: position: absolute; top: 16%; left: 30%; The problem here lays in the fact that anyone NOT running my screen resolution is telling me that it's not where it's supposed to be. How can I put this where it needs to be, regardless of who is viewing it, and how crappy their PC might be? How to change current page to other location after few seconds by using css script. Succeed by using meta refresh & onload in HTML but how to do in css. Thanks & Regards Can anybody help with a code to change the location of a dropdown menu to appear over the image on hover?? I have the code working perfect but can not get the location... <a href="(will be page in site)" class="menuanchorclass" rel="anylinkmenu4"> <img src="images/kids-button.gif" width="260" height="263" alt="Kids" style="border-width:0" /></a> 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 I have a page where the <select> is very screen right. it has little room to show the full name in the <option> so i do like "S - Summary". You only end up seen the S. When the dropdown happens, my clients wants to see the whole name. This works in FF, but not IE. Can i via CSS control the location of the options. Say move them left 50px. Thanks. 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! I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. 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 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; } 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 */
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? |
|||||||