Learn VBA & Macros in 1 Week!

CSS - Need Some Help With Basic Layout...

Full Excel VBA Course - Beginner to Expert

Need Some Help With Basic Layout...	View Content

I'm new to CSS and I am trying to create a style sheet for a website I am currently getting ready to begin production of and was trying to get my basic layout made up.

I was wandering if you guys could help me out because I keep getting a few concepts mixed up as I am going along through creating this and can't quite get it set up the way I want to.

I tried to comment my CSS so you guys could get a basic understanding of what I was aiming for. Don't worry about the odd backgrounds at the moment b/c I am just using them to easily identify my different divs.

Anyway, here is my css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1014px; /* 1024px total with padding */
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
	padding-right: 10px; 
}

#accounttypeselector { /* select personal or business to affect page display */
	position: absolute;
	width: 100%;
	height: 25px;
	left: 0;
	top: 0;
	padding: 0;
	background: #ff00ff;
}

#servicesbar { /* container for user services */
	position: absolute; /* sitting up this way b/c will be contained within wrapper */
	width: 100%; /* with absolute positoning and being inside wrapper should be 100% of width of wrapper */
	height: 30px; /* 30px should be adequate height */
	padding: 0;
	background: #ffffff;
}

#servicesbar-services { /* container for user services once logged in */
	position: absolute; /* not sure if position for this is right - should be left side of servicesbar */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	padding: 0;
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	position: absolute; /* not sure if position for this is right - should be right side of servicesbar */
	width: 25%; /* want it to be 25% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */	
}

#header { /* will include site banner/logo */
	width: 1024px;
	padding: 0;
	background: #ff0000;
	background-image: "background.gif";  /* if I don't specify a height will this div take on the height of the image? */
}

#navmain { /* navbar that will be located below header */
	width: 1024px;
	padding: 0;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	padding: 0;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 70%;
	background: #66CDAA;
	padding:0;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 15%;
	background: #8A2BE2;
	padding:0;
}

#footer { /* footer to be located at bottom of wrapper */
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}

And here is just my bareboned html where I was trying to put my divs together:

Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > </div>
			<div id= "servicesbar-login" > </div>
		</div>
		
		<div id= "header" > </div>
		
		<div id= "navmain" > </div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" > </div>
			<div id= "bodywrapper-main" > </div>
			<div id= "bodywrapper-news" > </div>
		
		</div>
	
	</div>
	
	<div id= "footer" > </div>
</body>
</html>

Can anyone offer me some suggestions to straighten me out here and also any tips if I am doing anything that isn't the accepted norm.

Thanks in advance and let me know if you have any questions as to what I am trying to do. Really appreciate it.

Nathan

Full Excel VBA Course - Beginner to Expert

Basic Div Layout Help

Similar Tutorials

View Content

heya guys having some drama with what should be a simple task. basically i just want to expand the intro-left div to 100% without pushing the right hand content thats fixed.

Code:

<div id="intro" style="float:left; display:inline; border: 1px solid red; width:100%;">
		<div id="intro-left" style='float:left; border:1px solid green; overflow:hidden; width:auto;'>
			text
		</div>

		<div id="feeder" style="float:right; border: 1px solid black; width:200px;height:400px;">
			text
		</div>
</div>

Basic Layout Question - Containing Div Doesn't Grow

Similar Tutorials

View Content

Hi all,
I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest?

I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix).

Thanks very much for any pointers.

Basic Layout Question - Floats, Other Elements

Similar Tutorials

View Content

Good Day All,

I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all.

http://029c92a.netsolhost.com/abrasives/cutmetalm.html

Colin

Layout Woes - Jquery Script Breaking Layout

Similar Tutorials

View Content

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

Problems With Layout Of Main Column With In 2 Col Layout

Similar Tutorials

View Content

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): 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="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper-->

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*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: inherit;
	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;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Basic Float Question (was "basic <div> Question")

Similar Tutorials

View Content

Hi,

I have three <div>

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div id="container" style="width:500px;height:700px;background-color:green;">
     <div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div> 
     <div id="three" style="float:right;width:100px;background-color:red;">three </div> 
     <div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm  vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
    
 </div>
 </BODY>
</HTML>

I noticed when I increased the % width of my <div two> it goes below my <div three>

I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior?

Css Layout Help..external File Layout Possible

Similar Tutorials

View Content

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

Basic Css Help

Similar Tutorials

View Content

Hi Everyone,

I am quite new to CSS, and I am working on my University Final Year Project.

I currently have just 4 errors, when I validate my page: URL

My CSS page can be found he URL

Can anyone please tell me you I get these errors, the code looks correct to me. Also, do you know any Frontpage/Dreamweaver type programs, which u can directly edit text etc, while keeping to the W3 Standards.

Regards

Alex

Css Basic

Similar Tutorials

View Content

Hi,

suppose I have a class declared in a css file
Code:

.myname  {.......}

that css file I include in my page.
Now if I want to over write that class in my page I do somwething like following in my page

Code:

<style>
.myname  {different stuff}
</style>

is it ok to do something like this, or delcaring class twice may cause problem?

Basic Css Problem, Can Someone Help Please?

Similar Tutorials

View Content

Hi, I'm so glad I found this forum, i have a feeling I'll be here often, lol. I fumble my way through css and get by but I have a really annoying problem with a centre content box on the homepage of my forum, when the browser window is re sized smaller the content box gets moved down the page leaving a big gap in the middle. I have managed to absolute position the box itself but the picture and text that is in it still moves and overlaps the contents box on the right.
Sorry to be so long winded, I'm sure there's an easy coding solution but I can't find it
Thanks for reading

General / Basic Css Help

Similar Tutorials

View Content

Help Needed On Very Basic Css

Similar Tutorials

View Content

Hey all,

I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work.

So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds.

What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has.

I just can't get it to work. Can anyone help me?

Thanks a lot.

Regards.

Css Help (basic Level)

Similar Tutorials

View Content

Hi all!

New to the forum, hopefully somebody will be able to help me out with a problem I am having!

I am currently working on a simple flat website and would like help with the layout. I know what I want, however I cant seem to get the code working

I will upload a picture outlining what I want to achieve, it would be pretty confusing to explain.

URL

Basicaly, heres the idea.

Header
Main Content Container
Footer

The footer must always be visible and stick to the bottom of the page. When displayed in higher screen resolutions, the footer is still at the bottom. That is within my ability, but I am having trouble formatting the Main Content Container. I want it to be a static height, regardless of screen size. However, if it is viewed in a lower screen resolution, the footer is going to eat into this height so I would like to get a vertical scroll bar to appear inside the Main Content Container div to accomodate for this.

I have trouble explaining what I mean please if you have the know how can you help me out? I'd really apreciate it!

Thanks in advance, hopefully I will be able to contribute to the forum in the future

Basic Css Question

Similar Tutorials

View Content

I have a CSS call for all p, like this

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}

now I want headings to be ital, so I add

p.ital {
font-style: italic;
}

and set the class for some p to ital, and they inherit font family and font size. Now I want further inherit, italBold

p.italBold {
font-weight: bold;
}

That is, I want p.italBold to inherit from p.ital, which inherits from p. How can I do this?

Thanks for your help

CJB

Basic Css Help In A Cgi Script

Similar Tutorials

View Content

Hi guys, just dropping a line because I am having the darndest time trying to get this page:

http://www.againsttheline.com/college_football_links/

to look the way I want it to with the CSS the script developer included.

I have never personally used CSS myself, so I'm at a bit of a loss, but I have gone into the CSS file, changed what I though to be correct, but can never get the right results. I would like the categories in the middle of the page to be larger without changing the size of the rest of the links on the page. However, when I change "CatHeaderText" size it has no effect. If I change body text size it has no effect. The only thing that works when I change the font size is the a:link thing from xx-small but then that changes every link on the page and not just the category links in the middle.

Can anyone offer any ideas of how I can make this work?

Thanks,

John

Below is the full CSS

<style>
.bodytext {
font-family: verdana,arial,ms sans serif;
font-size: 10pt;
color: #000000;
}
a:link, a:visited, a:active {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
color: #70191B;
text-decoration: none;
}
a:hover {
font-family: verdana,arial,ms sans serif;
text-decoration: underline;
color: #800000;
}
.dotted {
border: 1px dotted #000000;
}
.catheadertext {
font-family: verdana,arial,ms sans serif;
font-size: l2pt;
font-weight: bold;
color: #000000;
}
.button {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
border-color: #909090;
background-color: #404040;
color: #FFFFFF;
}
.formtext {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
}
.poplisttext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 7pt;
}
.revheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
background-color: #5A636E;
}
.topborder {
border-top: 1px solid #000000;
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
}
.bottomborder {
border-bottom: 1px solid #000000;
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
}
.description {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
padding-left:20px;
}
.adminheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
font-weight: bold;
color: #000000;
}
.admintable {
background-color: #000000;
}
.adminmain {
background-color: #FFFFFF;
}
.subcatheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 9pt;
color: #800000;
}
</style>

Basic Css Question

Similar Tutorials

View Content

I am new to this stuff started php about a month ago

now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page
also
in FF the nav menu is fine just not in the right location
in IE the bottom half of the nav menu sticks out one inch past the top half

here is my css

PHP Code:
#divNav {
    background: transparent url(../images/bk-nav.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 800px;
}

#nav {
    position: relative;
    top: 55px;
    height: 80px;
    width: 800px;
}

#nav li ul, #nav li ul {
    margin: 0;
    padding: 0;
}

#nav a {
    text-decoration: none;
}

#nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 15px;
}

#nav li ul {
    display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    position: absolute;
    top: 25px;
    left: 0;
    padding-top: 15px;
    background: #224d6f;
    height: 28px;
    width: 740px;
    padding-left: 60px;
}

#nav li.on ul {
    background: #f90;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    background: #224d6f;
}

#nav li a {
    color: #224d6f;
    font-weight: bold;
    display: block;
    width: 93px;
    padding: 0;
}

#nav li.on a {
    color: #f90;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    background: #224d6f;
}

#nav li.on ul {
    display: block;
}

#nav li.off:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover {
    color: #f90;
}

/*do the image replacement*/

#nav li span {
    position: absolute;
    left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    display: block;
    position: relative;
    height: 26px;
    background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
background-position: 0 0;
}

#liArtNouveau a {
background-position: -102px 0;
}

#liModern a {
background-position: -204px 0;
}

#liPostModern a {
background-position: -306px 0;
}

#liDigital a {
background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liModern.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #224d6f;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}

#nav li.on ul a {
background: #f90;
}

Basic Css Problems

Similar Tutorials

View Content

Hi There,

I am having a problem with getting padding to work correctly. I am trying to create a simple tabular view and the padding on my text content does not seem to be acting as I want it. In the main text content area I want a padding of .3em all the way around. It looks like the left and right padding is correct in both FF and IE. But in IE7, both the top and bottom padding appear to be more than the .3em. In FF their is no top padding and the bottom padding seems more than what I am looking for. I am including a sample which illustrates my problem. Thank you for any help on what I am doing wrong here.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.revsummary
{
  width: 100%;
  border: #036 solid 1px ;
  margin: .5em 0 .5em 0;
}

.revsummary span
{
  background-color: #eee;
  border-bottom: #036 solid 1px ;
  float: left;
  text-align: center;
  padding: .3em 0 .3em 0;
}

span.revsumtitle
{
  width: 90%;
  background-color: peachPuff;
  text-align: left;
  padding-left: .3em;
}

span.revsumrating
{
  width: 10%;
  margin-left: -6px;
  border-left: #036 solid 1px ;
  background-color: peachPuff;
}

span.revsumdest
{
  width: 35%;
}

span.revsumcl
{
  width: 35%;
  margin-left: -2px;
  border-right: #036 solid 1px ;
  border-left: #036 solid 1px ;
}

span.revsumship
{
  width: 30%;
}

span.revsumwrtup p
{
  padding: .3em;
  text-align: left;
}

span.revsumwrtup
{
  background: none;
  border-bottom: none;
  float: none;
}

#crContentview
{
  padding: .5em;
}

</style>
</head>

<body>
<div style="width: 600px;">
  <div id="crContentview">
    <div class="revsummary">
      <span class="revsumtitle">Some title line</span>
      <span class="revsumrating">AA</span>
      <span class="revsumdest">Label 1</span>
      <span class="revsumcl">Label 2</span>
      <span class="revsumship">Label 3</span>
      <span class="clear"></span>
      <span class="revsumwrtup"><p>Here is a bunch of text, I want this text to have a padding around it and it seems to work fine on the left, right and bottom, but not the top.  I have a feeling this is something to do with the way I am using the spans and floats.</p></span>
    </div>
  </div>
</div>
</body>
</html>

Basic Css Code

Similar Tutorials

View Content

Hi:

I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull.

<FORM METHOD="POST" ACTION="login.php">
<TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK>
<tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr>
<TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR>
<TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD>
<input type="submit" name="submit" value="LOGIN"></TD><TR>
</form>
</TABLE>

Also thanks in advance.

Very Basic Question About A Css File

Similar Tutorials

View Content

Argh - I am not very good with CSS (uhm, obviously) and all I am trying to do is change the color of some list items in a blog menu. It's Wordpress, and, it's not as if the blog is important - but this is driving me insane. I've installed Firebug in an effort to figure out what is making these items red - or #333. I can alter the code in Firebug and it gives a visual representation of what the edit would look like. But when I actually make the edit, nothing happens. And I've deleted my browsing history, used every browser, etc. - and I can change everything else! I am trying to change the text color in the right hand menu from red to, well, something else.

The pages is at: http://www.webputzer.com

The .css file looks like this:

Code:

/*
Theme Name: alibi
Theme URI: http://www.blogchemistry.com/
Description: 2 column, with RHS widget sidebar
Version: 1.2
Author: BlogChemistry
Author URI: http://www.blogchemistry.com/
*/



body {
margin: 0;
padding: 0;  
color: #333;
text-align:center;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #fff;
}


#wrapper2{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

#wrapper3{
border-left: 1px solid #666;
border-right: 1px solid #666;
}

#wrapper4{

}


#wrapper{
width: 770px;
margin: 0px auto;
padding: 0px;
text-align:left;
font-size: 85%;
line-height:20px;
background: #fff;
border-left: 3px solid #333;
border-right: 3px solid #333;
}


#header{
padding: 1px 0px;
margin: 0;
background: #ccc;
}	


#header-inner{
margin:0;
padding:0;
}


		
#content{
clear:both;
margin: 0;
padding: 5px 5px 5px 10px;
background:#fff;
}	

#content-inner{

}

#main {
width: 550px; 
float:left;
margin: 0;
padding: 5px 0 10px 0;
overflow:hidden;
}


#sidebar {
padding: 0;
margin: 0 0 0 560px;
background: #fff;
}


#footer {
clear: both;
margin: 0;
padding: 10px 16px;
text-align: center;
font-size: 85%;

}


#footer-inner{
background: #f2f2f2;
height: 50px;
}

#footer p{
margin:0;
padding:15px 0;
}

#navigation{
padding: 5px 15px;

}

#navigation div.fleft{
float:left;
}

#navigation div.fright{ 
float:right;
}

#credit{
text-align:right;
padding: 0 15px;
}

#credit p{
margin:0;
color:#777;
font-size:85%;
}

#credit p a, #credit p a:hover{
color:#999;
font-weight:100;
}

/*  ********** default styles *********** */

p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-family: georgia, 'Times New Roman', sans-serif;
}

h1{
	font-size: 190%;
}
h2{
	font-size: 160%;
}
h3{
	font-size: 120%;
}
h4{
	font-size: 130%;
}
h5{
	font-size: 100%;
}
h6{
	font-size: 70%;
}


a{
color:red;
font-weight:800;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}

a img{
border:0px;
}

hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}

form{
margin: 0;
padding:0;
}

fieldset{
padding:10px;
margin:0;
border:none;
}

legend{
font-weight:800;
}

code{
	font-size: 90%;
	font-family: "Courier New", Courier, monospace;
	white-space: pre;
}

td{
 vertical-align:top;
}



#tabs {
  float:left;
  width:100%;
  font-size:90%;
	background:#000;
  line-height:18px;
	
	border-top: 1px solid white;
}


    #tabs ul {
	  margin:0;
	  padding:4px 10px 0 10px;
	  list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      padding:5px 15px 3px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }  
	
	


/* Headings */ 

form#searchform2{
display: block;
float:right;
margin: 55px 10px 0px 5px;
}

#header h3{
margin:  0;
padding: 30px 0 0 10px;
}

#header h3 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 220%;
letter-spacing: 1px;
}

#header h2{
margin: 0;
padding: 10px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 130%;
letter-spacing: 1px;
}

h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:8px 10px 5px 10px;
background: #f2f2f2;
color: #444;

}

/* post styles */

.post{
margin: 0 0 10px 0;
padding: 0 5px 5px 5px;
}

.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}

.post h2 {
color: #333;
font-size: 150%;
font-weight:100;
padding: 7px 0 2px 2px;
margin: 10px 0 15px 0;
}


.post h2 a{
color: #333;
text-decoration:none;
font-weight:100;
}

.post h2 a:hover{
text-decoration:none;
color: #333;
}

.postmetadata{
font-size:80%;
padding: 1px 8px 1px 5px;
margin: 0;
border-top: 1px solid #ccc;
}

.postmetadata p{
line-height: 18px;
padding: 0;
margin: 2px 0;
}


.date{
float:left;
text-align:center;
font-weight:800;
margin: 0 10px 0 0;
padding: 0 10px;
border-right: 1px solid #ccc;
color: #444;
}


.dateDay{
display:block;
font-size: 16px;
line-height: 16px;
text-align:center;
}
.dateMonth, .dateYear{
display:block;
font-size: 11px;
padding:0;
line-height: 12px;
}




/*  Comments   */

h3#comments, h3#postcomment{
	font-size: 100%;
	font-family:verdana, sans-serif;
}	

ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}

ol#commentlist li{
	padding: 0px 3px;
	margin: 0;
}

ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}



ul#commentlist{
padding: 0;
margin:0;
list-style-type:none;
}

ul#commentlist li{
	display: block;
	padding: 0;
	margin: 0 15px 5px 15px;
	font-size:90%;
	background: #f2f2f2;
}

ul#commentlist p{
margin: 6px 0;
}

ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}

ul#commentlist li div.gravatar {
	width:50px;
	float:left;
	padding: 10px 0 0 10px;
}

ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}




ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}

ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}


/*  sidebar styles */


#subscribe p{
font-size: 85%;
margin: 3px 0 10px 0;
}



.menu{
padding:0;
font-size:90%;
}

.menu a{
font-weight: 100;
}

.menu a:hover{
text-decoration:none;
}

.menu ul{
margin:0;
padding:0;
list-style-type:none;
}

.menu ul li.widget{
padding:2px;
margin:0 0 0px 0px;
}

.menu ul li.widget ul{
	margin: 0;
	padding:0;
}

.menu ul li.widget ul li{
border-bottom:1px dotted #ccc;
background: #f2f2f2;
padding: 2px 0 2px 15px;
margin:0;
}

.menu ul li.widget ul li ul{
}

.menu ul li.widget ul li ul li{
border-top: 1px dotted #ccc;
border-bottom: none !important;
padding: 2px 0 2px 15px;
}



.menu ul li.widget h3{
font-family: arial;
font-size:120%;
padding:2px 0 1px 4px;
margin:0;
border-top: 3px solid red;
border-bottom: 1px solid #bbb;
color: #333;
font-weight: 800;
font-variant:small-caps;
}

.menu ul li h3 a{
color: #333;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}

.menu form{
display:block;
margin:0px;
padding:4px;
}

.menu input{
margin:3px 0;
font-size:90%;
}

li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}

/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}


#footer a{
font-weight: 100;
}

If anyone could tell me what the heck is making this uneditable - man...I'd sure like to know...

Basic Positioning Question...

Similar Tutorials

View Content

I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example:

<head>
<title>right position</title>
<style type="text/css">
#maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;}
.left {font-size: 2em;}
.right {padding-left: 350px}
</style>
</head>
<body>

<div id="maindiv">
<span class="left">hello world</span>
<span class="right">hi there</span>
</div>

</body>

This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths.

Thanks in advance,

CSS Newbie!