|
CSS - Nesting Css Styles
Basically, what i'm trying to work out is if the following is possible.
Code:
.mainBodyColor {
background-color : #FFFFFF ;
color: #000000;
}
.mainBodyFont10pt {
font-size: 10pt;
<mainBodyColor>
}
.mainBodyFont14pt {
font-size: 14pt;
<mainBodyColor>
}
where <mainBodyColor> is a nested call to the style in some way.
etc etc etc
How do i go about nesting/including the mainBodyColor styling within the mainBodyFont10pt style? I know that the following doesn't work Code: <font class="mainBodyFont10pt" class="mainBodyColor "> Some text to go in here</font> What I'm trying to do is have in one place the colour and include it into many styles, so if i want to change the colour scheme of the site i just have to change it in one spot and i know that the whole site will change. Thanks in advance. Similar Tutorialshey! I am having trouble putting a footer on a website because for some reason 2 of my divs are not sticking in the larger 'content' box. I think it has to do with the float definition but cant seem to figure it out. Here is the basic structure i have. is this wrong? Code: <div wrapper>
<div header>
<div logo></div>
<div menu></div>
</div>
<div content>
<div splash></div>
<div float left> </div>
<div float right></div>
</div>
</div>
The issue is that <float left> and <float right> are not staying inside the <content> div and my footer ends up in the middle of the page. I wish i could post the webpage but im a new user. Thanks for your help Hey. While I know some basics of css and html, I generally get bored after the design process lol, so have very little experience actual coding. Basically this is what the end product im looking is forl img266.imageshack.us/img266/8638/helpjj1.jpg The only problem is, I have no idea how to nest (?) that in there, with the text in there as well. I'm also looking for it to stay in the middle on the right there, with the box going larger or smaller. Heh... I would appreciate it soooo much is someone could point me in the right direction. Thanks for your time Tom hi! please can some one help me with followin... i would like to have 2 blocks in line (like one row, 2 colums). First one (left one) have background which is 285px wide. i tried with 2 divs like this: <div style="display:inline; width:285px ; background-image: url(bg.gif);">left content</div> <div style="text-align:right; display:inline; width:200px>right content</div> and IE renders it ok (for me) but firefox ignores "width" of divs and outputs "right content" right after "left content" text. thanks in advance!! Tomislav Hi all I'm learning how to do things in DIVs rather than tables. One thing I'm slowly realising is that DIVs don't naturally nest like tables do. Please see he http://www.mitya.co.uk/csstest As you can see the master DIV (grey border) doesn't surround the inner DIVs naturally as a table would. Presumably this isn't the nature of DIVs and I just have to set heights instead? Thanks in advance Hi all - This is a continuted discussion from this thread. I won't bother re-explaining, but I'm restarting this thread in the hopes to simplify the situation. I have to write out data from Coldfusion in columns rather than rows. This is a schedule with Time down the left side and Days across the top. In order to get this to display correctly, I'm using a nested tables method I found on goolge. Each Row is actually a Table within a table, where the nested table acts as a data cell, and the cells in the outer table are columns. In all my fiddling, I've ended up stumped with the following. I need this to display correctly in at least IE 5.5 and up, Netscape 7, and Firefox. A condensed version of the output is included below. Note that the tables do not end lined up. I need to be able to scale everything up or down and have it all line up (thus, everything is EMs). I originally tried to work with css borders, but found that it was even worse with that - i.e. each top or bottom border was adding pixels to the height of the cells, so where one row would have five items, it would appear "shorter" than another row with 10 items. I also tried using pixels throughout the script. I CAN get it to work when I do this, where everything lines up correctly, but I can't get it to scale! I have since moved to using an image at the top of each data output. Its closer, but still doesn't line up. The image is nothing more than a 1 pixel high gif - Just like this one. As you move down, they get further and further out of sync of the left most column. How can I get this working? I really don't understand CSS well enough, especially across browsers, in order to finish this. Again, here is the 1pixel high gif I used for the following code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
TABLE {
padding: 0em;
font-size: .9em;
width: 9em;
}
TABLE.time-header {
table-layout: fixed;
}
TABLE.time {
table-layout: fixed;
}
TABLE.data {
table-layout: fixed;
}
TD {
vertical-align: top;
}
DIV {
overflow: hidden;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height: 1em;">
</div>
</td>
</tr>
</table>
</td>
<td>
<table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height: 1em;">Monday 6/27
</div>
</td>
</tr>
</table>
</td>
<td>
<table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height: 1em;">Tuesday 6/28
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="time" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr><td>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
09:00 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
09:30 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
10:00 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
10:30 AM
</div>
<div style="height: 2em; "></div>
<div style="height: 2em; border-bottom: 1px solid black;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
End
</div>
</td></tr>
</table>
</td>
<td>
<table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr><td>
<div style="height: 8em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
1 hour
</div>
<div style="height: 2em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
15 min - topborder
</div>
<div style="height: 2em;">
15 min - notopborder
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 2em; border-bottom: 1px solid black;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
End
</div>
</td></tr>
</table>
</td>
<td>
<table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
<tr><td>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 4em;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
30 minutes
</div>
<div style="height: 2em; border-bottom: 1px solid black;">
<div style="height: .1em;">
<img src="table-horiz.gif"><br>
</div>
End
</div>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hey guys. Does anyone know how to trigger haslayout when nesting floats inside other floats? I've been using a span parent with zoom:1 but there's probably a more robust way of doing so. Any thoughts? This is driving me crazy and I can't figure it out. I have a "content" div that is a container for 2 other div's (a sidebar and a main content area). For some reason it isn't rendering in the proper place; it's rendering at the top of the page instead of under the navigation (if I don't assign a height to it it doesn't render at all). It also isn't extending past the end of the other 2 div's to reach the footer. I have tried adding overflow hidden to it but it just makes the other 2 divs not render at all. Any help is greatly appreciated. Here is the HTML and the CSS is below it. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Portal - Layout Generator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div><!-- /#header -->
<div id="navigation">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >Contact</a></li>
<li><a href="#" >Links</a></li>
</ul>
</div><!-- /#navigation -->
<div id="content">
<div id="leftcolumn">
<div class="box_blue">
<div class="box_header_blue">Hello, World!</div><!-- /.box_header_blue -->
<div class="box_content_blue">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aliquam scelerisque eros at est lobortis eget adipiscing felis sodales.</li>
<li>Sed faucibus hendrerit ante, vitae volutpat tellus suscipit sit amet.</li>
<li>Quisque rutrum arcu non ipsum fringilla dapibus.</li>
<li>Aliquam aliquam arcu sit amet nisi viverra facilisis.</li>
</ul>
</div><!-- /.box_content_blue -->
</div><!-- /.box_blue -->
</div><!-- /#leftcolumn -->
<div id="main">
<p>This is the main content</p><br /><br />
<p><a href="layouts/121836.htm">
<img border="0" src="layouts/html.png" width="16" height="16"> HTML File</a></p>
<p><a href="layouts/121836.css">
<img border="0" src="layouts/css.png" width="16" height="16"> CSS File</a></p>
<p>To download, right click and choose 'Save Target as...'</p>
<p> </p>
<p>If you use one of these layouts, please consider linking to CSS Portal.<br />
http://www.cssportal.com</p>
</div><!-- /#main -->
</div><!-- /#content -->
<div id="footer">
<p>This is the Footer</p>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
</body>
</html>
Code:
* { padding: 0; margin: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background: url('images/bg.png') fixed;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#header {
color: #333;
height: 200px;
background: url('images/header.png') fixed;
}
#footer {
height: 100px;
clear: both;
color: #333;
background: #6B6659;
}
#navigation {
float: left;
width: 1000px;
height: 35px;
color: #333;
background: #6B6659;
background: #b5bdc8; /* old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
line-height: 35px;
}
#navigation li {
display: inline;
float: left;
padding: 0 10px;
color: #dddddd;
}
#content {
background: #f6f9fa repeat;
color: #545454;
margin: 0 auto;
box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 2px 0px 5px rgba(0,0,0,.8), -2px 0px 5px rgba(0,0,0,.8);
-webkit-box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
position: relative;
}
#leftcolumn {
color: #333;
background: #EBE3CD;
width: 200px;
float: left;
padding: .5em;
}
#main {
color: #333;
background: #fff;
width: 770px;
float: right;
padding: 8px;
}
.box_blue {
-moz-border-radius: 1.2em 1.2em 1.2em 1.2em;
-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
margin: 1.6em 0;
}
.box_header_blue {
background-color: rgb(23, 71, 115);
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 3em;
text-align: center;
font-size: 1.2em;
-moz-border-radius-topleft: 1.2em;
-moz-border-radius-topright: 1.2em;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px; border-style: solid;
border-color: #86B1E3 rgb(0, 0, 50) rgb(0, 0, 50);
text-shadow: 1px 1px 1px rgb(16, 16, 16);
background-image: -moz-linear-gradient(center top , rgb(45, 90, 141), rgb(71, 93, 167) 50%, rgb(43, 75, 128) 51%, rgb(45, 93, 138));
}
.box_content_blue {
padding: .5em;
background: -moz-linear-gradient(top, #f1f1f1, #fff 75%) #fff;
display: inline-block;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px;
border-style: solid;
border-color: rgb(152, 208, 237) rgb(0, 0, 50) rgb(0, 0, 50);
-moz-border-radius-bottomleft: 1.2em;
-moz-border-radius-bottomright: 1.2em;
}
.box_content_blue li {
padding: 10px 0;
border-bottom: 1px dotted #cccccc;
}
I'm having a problem with the way my div tags are behaving in a page I am trying to build. I have all the div's nested properly (I think) but the problem is is that the footer is appearing right below the top banner. The footer is not nested in the div that contains the rest of the pages content it appears behind everything else actually. I have been messing with my style sheet and moving everything around to no avail. For some reason the div that contains all the content has a height of zero when it shouldn't. I have used similar page structure before on other pages but this is the first time im using two columns of free floating boxes as opposed to one solid column divided in two. I'm leaving the style sheet and the mark up below if you can figure it out that would be great. There is only one image and it shouldn't have anything to do with this problem. I will be eternally grateful to whoever can help me as this has made me seriously consider hitting my computer with a brick. Code:
// here's the stylesheet
body{
background: url('../images/mainbackground.jpg/') repeat fixed;
font-family: calibri, helvetica, 'sans serif';
line-height: 130%;
margin: 0px;
padding: 0px;
}
#banner{
background: #b34150 repeat-x 50% 100%;
border-bottom: 3px solid white;
padding: 0px 0px 0px 0px;
margin: 0px 0px 27px 0px;
height: 100px;
}
#nav{
float: right;
height: 100px
width: 90px;
margin: 0 auto;
padding:0;
}
#nav ul{
list-style: none;
display: inline;
line-height: normal;
}
#nav li{
background: #b34150;
float: left;
margin: 65px 10px 0px;
padding: 5px 20px 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 50px;
height: 30px;
text-align: center;
font-size: 14pt;
}
#nav li a{
text-decoration: none;
color: white;
font-weight: bold;
text-shadow: 0px 3px 3px #000;
}
#nav li:hover{
background: #ec9aa5;
-moz-border-radius:0px;
border: 0px solid #eccdcd;
-moz-box-shadow: 0px 0px 35px #fff;
}
#content{
width: 900px;
margin: 0 auto;
background: none no-repeat;
}
#left_column {
float: left;
width: 700px;
margin: 0 auto;
}
#main{
background: url('../images/banner-back-top.jpg/') repeat-x top center #fff;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-moz-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
width: 650px;
padding: 8px 5px;
float: left;
}
#right_column {
float: right;
width: 175px;
margin: 0 auto;
}
#sidebar{
background: #fff;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-moz-box-shadow: 3px 3px 3px #fff;
-webkit-box-shadow: 3px 3px 3px #fff;
width: 175px;
margin: 0 auto;
padding: 8px;
float: left;
}
#footer{
background: #b34150 repeat-x 50% 100%;
border-bottom: 3px solid white;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 100px;
}
#footer_info {
background: #91323f;
text-align: left;
font: normal normal normal 75%/normal calibri, helvetica, sans-serif;
color: white;
float: left;
}
//And here is the mark up
<html>
<head>
<title>SL | Clothing</title>
<meta name="description" content="description" >
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script type="text/javascript" src="resources/dropdown.js" ></script>
<link rel="canonical" href="">
</head>
<body>
<div id="banner"><img src="images/top.jpg" alt="" >
<div id="nav">
<ul>
<li style="background: #ec9aa5;"><a href="">Home</a></li>
<li><a href="" >Shirts</a></li>
<li><a href="" >Hats</a></li>
<li><a href="" >About</a></li>
<li><a href="" >Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="left_column">
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
</div>
</div>
<div id="right_column">
<div id="sidebar">
Content Goes Here!
</div>
</div>
</div>
<div id="footer">
<div id="footer_info">Copyright 2010 SL CLothing LLC. Web Design and Layout by : Ian Auld</div>
</div>
</body>
</html>
Okay, so here's the issue... I've designed a site using css, and to get the flow I was looking for I had to use "absolute positioning" on some of the page elements. Every thing looks fine except I can't get the page to center in the browser window. I created a div that I used as a wrapper, centered the wrapper... and most everything works fine... the exceptions are the elements that are absolutely positioned... they won't nest within my wrapper div. If I change the type of positioning of ALL the elements on the page to relative then they nest... but I don't want to have to use relative positioning for all my elements. Any words of wisdom? Hi, I'm trying to create a full CSS layout. It's basically a three column design: http://www.definitedigital.com/bookfair/ http://www.definitedigital.com/bookfair/style.css However, on Mozilla the blue border around the main content area with the Copyright disclaimer at the bottom of the page doesn't show correctly. On IE it shows just fine. I'd be really thankful if someone could take a look at my CSS. I'm quite new at designing completely with CSS and don't really know if the approach I just took is the best for what I'm trying to achieve. Thanks, Ralph I am having problems trying to set up a 2 columns inside an existing 2 column layout. The reason why I am doing it that way is because the 2 col layout is part of a template and most pages will be 2 col, but for some there is actually 3 columns, so I need to split the mainColumn into 2 columns. The problem is they are not showing up side by side. If I do display: inline; everything within the id displays that way and that is a problem. So here is what I am trying to accomplish Here is the css: Code: /*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*customer support*/
#csupportWrapper {
padding: 90px 20px auto 185px;
text-align: left;
}
#csupportWrapper span {
color: #000099;
font-weight: bold;
}
#csupportWrapper .large {
margins: 40px auto 20px auto;
}
#csupportWrapper ul {
list-style: none;
padding: 10px 0px 0px 10px;
margin: 0px;
}
#csupportWrapper a:link, #csupportWrapper a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#csupportWrapper a:hover, #csupportWrapper a:active {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#column1 {
padding: 40px 10px 0px 185px;
clear: none;
}
#column2 {
padding: 40px 0px 0px 382px;
clear: none;
}
Thanks! Here is the xhtml starting after the heading part (I can add it too if needed): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="../products/spirometers.html">Spirometers</a></li>
<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="customer_support.html">Customer Support</a></li>
<li><a href="training_services.html">Training & Services</a></li>
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="newsletters.html">Newsletters</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="useful_links.html">Useful Links</a></li>
<li><a href="industry_information.html">Industry Information</a></li>
<li><a href="industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="csupportWrapper">
<div id="column1">
<span class="large">Customer Support</span>
<ul>
<li>Vitalograph Ltd</li>
<li>Maids Morton, Buckingham</li>
<li>MK18 1SW</li>
<li>England</li>
</ul>
<ul>
<li><span>Phone:</span> +44(0) 1280 827110</li>
<li><span>Fax</span>: +44(0) 1280 823302</li>
</ul>
<ul>
<li><span>Email: </span> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a></li>
<li><a href="/enquiry_forms/customer_support_form.htm">On-Line Enquiry Form</a></li>
</ul>
</div>
<div id="column2">
<span class="large">Technical Support</span>
<ul>
<li>Vitalograph Ltd</li>
<li>Maids Morton, Buckingham</li>
<li>MK18 1SW</li>
<li>England</li>
</ul>
<ul>
<li><span>Phone:</span> +44(0) 1280 827110</li>
<li><span>Fax</span>: +44(0) 1280 823302</li>
</ul>
<ul>
<li><span>Email: </span> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a></li>
<li><a href="/enquiry_forms/technical_support_form.htm">On-Line Enquiry Form</a></li>
</ul>
</div>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> I've been trying to find a "solution" that allows me to have a parent <div> (with a fixed position-centered) on a browser page, and have it contain multiple nested <div> tags. I want to be able to do this so it works on both IE and FF, as well MAC. Through several attempts I've utilized a background-image--but don't believe that is compliant with "all" recent platforms, etc. I've also been able to place the nested <div> tags but then shove the parent div's image down ... Does anyone have thoughts, links, suggestions or a quick example to toss my way? Thanks Much and Happy New Year! Des I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.) In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally. Right now I've got Code: .leftnavtext A:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext A:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: underline;
}
.leftnavtext A:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks. I need a way to apply a different style to IE6 and IE7/Firefox. The webpage renders as expected in IE7/Firefox but IE6 needs to be fixed. Here is a mockup of what I need to have: Code:
.featdesc
{
margin-left: 10px;
margin-top: 10px;
width: 400px;
text-align: justify;
if (ie6)
font-size: 11pt;
else
font-size: 10pt;
color: #505050;
}
Is there a way to accomplish this? Hi, I am having trouble setting up different link styles in my site. My code is: Code:
.menu {
font-family: Helvetica;
font-size: 18px;
color: #FFFFFF;
}
a.menu:link {
color : #FFFFFF;
text-decoration : none;
}
a.menu:visited {
color : #FFFFFF;
text-decoration : none;
}
a.menu:hover {
color : #FFFFFF;
text-decoration : underline;
}
a:link {
color : #FFFFFF;
text-decoration : underline;
}
a:visited {
color : #FFFFFF;
text-decoration : underline;
}
a:hover {
color : #FFFFFF;
font-weight : bold;
text-decoration : underline;
}
From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class. So when I use the following code: <div class="menu"><I>01</I> <a href="">HOME</a></div> .. I would have thought the link would follow the style for .menu But it doesn't. It takes the style of the default links as well. How do I properly setup an alternate link style?? This is the website I am working on: http://www.rookscommunications.com/projects/naturalne/index.html Everything is working fine, except the footer. When I view it in FireFox, I'm all set, but most likely most people will be using IE and that's where the problem is. Any thoughts on the bug? I've tied many different things. ALSO... to kill two birds with one stone. Could you peek at my javascript for random images...every now and then it selects a blank image and that's no good. Many Thanks |
|||||||