CSS - Need Advice About Using Em Or %

Hello,

Here's the site, it's being built on a CMS called Sitestaker.
http://www.mera.sitestacker.com

I can't for the life of me fix all the messed up positioning. here is my CSS. I used another CSS file from a previous site, so there are duplicates and who knows what else I am missing so I can easily lay this thing out. Where can get some CSS templates that I could use to start out a new site. the cms is using Cake PHP if that helps any. I am not a programmer and it is driving me nuts attempting to do the job of one. thanks for your help. I have managed with my other sites, but I can't fix this one. www.theinlan.com
Code:

body {
	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #666;
	background-color:#FF9933;
	margin: 10 10 10 10;
	
}

#header {
	background-color:#FFFFFF;
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	height: 133px;
	
	

	
}
#header_right{
		
	
}



#search {
	
	width: 150px;
	margin-left: 10px;
	float: right;
	
	
}

#header_container {
	background-color:#cc6600;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	
}

#header_wrapper {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 133px;
	background-color: #cc6600;
	
	/*/#cc6600/*/
		
}


#menu_wrapper {
	width: 900px;
	/*/background:url(images/mera_slice_09.jpg) repeat-x;/*/
	
	margin-right: auto;
	margin-left: auto;
	
}

#menu {
	background-color:#333333;
	width: 900px;
	padding: 10px 0px 0px 0px;
	font-size: 14px;
	
	font-weight: bold;
	
	
}

#menu .item {
	
	float:left;
	width: 120px;
	margin-right: auto;
	margin-left: auto;
	height: 30px;
	padding-top: 13px;
	text-align:center;
	
	
}


#menu a {
	color: #666666;
	text-decoration:none;
	
}

#menu a:hover {
	color: #CCC;
	
}


#menu .main_menu {
	float:left;
}

#breadcrumbs {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #666;
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
	
	
}


/*/#r1c1 {
	width: 100%;
	
	height: 38px;
}/*/

#r1c1 {
	background-color:#CC9966;
	
	/*/Dan's New Stuff/*/
	
	width: 180px;
	float:left;
	
	/*/ width: 800px;/*/
	/*/padding: 40px 0px 0px 20px;/*/
	font-size: 14px;
	margin:30px 10px 10px 10px;
	padding: 10px;
	/*/font-weight: bold;/*/
	
	
	
} 

#r1c1 .item {  /*/ controls positioning of menu items & text/*/
	
	width: 175px;
	height: 30px;
	
	text-align:middle;
	background:url(/data/sites/34/images/merabutton.png);
	background-repeat:no-repeat;
	padding:5px 0px 0px 0px; /*/controls positioning/*/
	
	
}

#r1c1 a { /*/ this is the menu font styling/*/
	color: #333333;
	text-decoration:none;
	padding:5px 0px 0px 10px;
	
}

#r1c1 a:hover {  /*/ this is the menu button hover color/*/
	color: #999999;
	
}


#r1c1 .main_menu {
	
}


#r1c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 640px;
}

#r2c2 {
	padding: 15px 0px 15px 15px;
	margin-left: auto;
	margin-right:  auto;
	width: 700px;
	float: left;
}

#r3c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
}

#r2 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r4 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r2c2 .title {
	
	font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	line-height: 40px;
	
}
#content_area {
	background-color: #e6ebba;
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
	margin-bottom: 0px;
	
	
}
#content_bg { /*/ white content area with dropshadow edges/*/
	width: 1275px;
	
	margin-left: auto;
	margin-right:  auto;
	background: url(images/me) repeat-y ;
	/*/height: 1000px;/*/
/*/padding-left: 40px;
	padding-right: 45px;
	}
	/*/

#mainpositions{    /*/ look at tables created in index to see how it was done
						tables ,once formatted work the best to hold together 
						two column layout accross browsers./*/
	width:900px;
	margin-left: auto;
	margin-right:  auto;
	
	}

#footer_wrapper {
	/*/
	background:url(images/mera_slice_02.jpg) repeat-y;
	width: 100%;
	margin-top: 0px;
	position: bottom;
	/*/
}

#footer {
	background:url(/data/sites/34/images/footer.png) repeat-x;
	/*/width: 100%;/*/
	margin-left:auto;
	margin-right:auto;
/*/	color: #FFF9933; 
	text-align:center;
	padding-top: 30px;/*/
	height:369px;
	
}

#r3c1 {
	
	padding: 10px 10px 10px 10px;	
	
}

#r2 {
	
	
}

.cells {
	padding: 10px 10px 10px 10px;	
	vertical-align: top;
	text-align: left;
}


#menu .style .menu .submenu_item {

	background: url(images/dropdown.png) repeat-x;

	height:27px;
	text-align: left;
	font-size: 12px;

	padding-left:10px;
	padding-right:14px;
	padding-top: 10px;
	width: 900px;
	cursor: pointer;


}

#menu .style .menu .submenu_item_children {

	
}

#menu .style .menu .submenu_item:hover{

	color: #ccc;

}

#menu .style .menu .submenu_item:hover > div > a{

	color: #CCC;

}

#menu .style .menu .submenu_item a {

	text-decoration:none;

	color:#6699FF;

}

.submenu_item, .submenu_separator {

	display:none;

	position:absolute;

}

HERE IS THE INDEX FILE

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{{PAGE_TITLE}}</title>
<base href="{{BASEHREF}}" />
<link href="{{CSS_HREF}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="{{JS_SRC}}" ></script>
<style type="text/css">
<!--
body {
    margin-left: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
}
-->
</style>
<meta name="verify-v1" content="mQhyWuqXn58ls4L3sIdz1oujvxtwMSi8YIWGW8HPAGg=" />
{{HEAD}}
</head>
<body>

<div id="header_wrapper">
<div id="header_container">

    <div id="header" tpl_position="header">{{HEADER}}</div>
    <div id="header_right" tpl_position="header_right">{{HEADER_RIGHT}}</div>
    <div id="search" tpl_position="search">{{SEARCH}}</div>
</div>
</div>
<div id="menu_wrapper">
    <div id="menu" tpl_position="menu">{{MENU}}</div>
</div>

<div id="content_area">

<table id="content_bg" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>


<div id="breadcrumbs" tpl_position="breadcrumbs">{{BREADCRUMBS}}</div>


<div id="r1c1" tpl_position="r1c1">{{R1C1}}</div>


<div id="r2c2" tpl_position="r2c2">{{R2C2}}</div>
 
<div id="r3c2" tpl_position="r3c2">{{R3C2}}</div>
  </td></tr>
</table>
</div>

<div id="footer_wrapper">
<div id="footer" tpl_position="footer">{{FOOTER}}</div>
</div>


</body>
</html> 

okay i want to make myself a website and to make it decent i seem to need to know HTML, PHP, CSS etc etc :s it all seems really hard i know quite a bit of macromedia flash and i know quite a bit of html but i am all new to CSS and PHP. CSS from what i can gather is what i need to know and i don't have a clue about it can somebody give me a link to an easy tutorial for CSS? or if anyone knows where i can start? most tutorials i just end up giving up on because i just can't be bothered reading any further thanks fir reading this i just need to know the basics so i can have a play around with and teach myself.

Daz

Hi,

I am quite familiar with css - have a few books on the subject but always struggle when trying to work with a design of my own.

I guess where I struggle is in what to do first ... how do I work ... my work flow. I always seem to get part of it right but then as I go further ... I find that my next step might undo my previous ... so I end up with a maze or positioning problems etc. I struggle with getting everything positioned properly ... not sure why.

I was hoping someone could start me off in the right direction ... you a what to do first series of steps ... or maybe a workflow from someone more exprienced in the design area of things - I'm more of a backend kinda guy.

Really anything would help ...

Thanks

Hi,

Im interseted in creating V.3.0 of my site in a css valid layout using Div's and Xhtml compliant code. I am vaguely familiar with this practice, however would like some preliminary feedback and advice on how to go about doing it.

Here's a preliminary screenshot of my site in jpg. format, thanks.

http://uberserver.ath.cx/~rohan/PS1.0.jpg

Here's the main site (v.2.0) if you're interested.

http://www.ubertropolis.tk

Thank you!

http://www.beckin.com
http://www.bestdropshipper.net

I just recently updated my firefox to the most available version. This firefox version absolutely sux. I don't know why all these browsers have to keep causing trouble for designers.

You will notice that my css style for Beckin Designs no longer works.

Code:

<style type="text/css">
@font-face {
	font-family: English;
    font-weight: normal;
	src: url(fonts/English_.ttf);
}
</style>

If you view this site in other browsers or the firefox version previous to the latest release you will notice it displays fine. However, not in the new firefox.

Next, the best dropshipper menu doesn't display correctly either.

How can I go about fixing these issues? Do I need to do some time of if statement. Please let me know exactly how to address these issues.

Thanks!!

Hello,

I'm a self taught web designer, i've not really got much experience of CSS and i'm having a few issues with some alignment.

I'm in the process of developing a site for my cousin, what i'm trying to achieve is the left menu to be at the top of the page, and the text to be in the center of the screen, as i'm new here i'm not able to post a link to my site, so have posted the CSS below.

Playing with css and looking at Google I've padded the text so its where i want it, but i can't get the menu to come up from below the text.

Any help / links in the right direction would be really appreciated.

Code for the text:
Code:

p.mainbody
{ 
z-index: 1000; 
vertical-align:top; 
padding-left: 200px; 
padding-right: 250px; 
text-align:left;

code for the menu:
Code:

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ 
ul.MenuBarVertical 
{ 
vertical-align:top; 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
cursor: default; 
width: 10em; 
/*height:10em;*/ 
} 
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ 
ul.MenuBarActive 
{ z-index: 1000; } 
/* Menu item containers, position children relative to this container and are same fixed width as parent */ 
ul.MenuBarVertical li 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: relative; 
text-align: left; 
cursor: pointer; 
width: 10em; 
} 
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ 
ul.MenuBarVertical ul 
{ 
margin: -5% 0 0 95%; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: absolute; 
z-index: 1020; 
cursor: default; 
width: 8.2em; 
left: -1000em; 
top: 0; 
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ 
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } 
/* Menu item containers are same fixed width as parent */ 
ul.MenuBarVertical ul li { width: 8.sem; } 
/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ 
/* Outermost menu container has borders on all sides */ 
ul.MenuBarVertical { border: 1px solid #CCC; } 
/* Submenu containers have borders on all sides */ 
ul.MenuBarVertical ul { border: 1px solid #CCC; } 
/* Menu items are a light gray block with padding and no text decoration */ 
ul.MenuBarVertical a 
{ 
display: block; 
cursor: pointer; 
background-color: #EEE; 
padding: 0.5em 0.75em; 
color: #333; 
text-decoration: none; 
} 
/* Menu items that have mouse over or focus have a blue background and white text */ 
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus 
{ 
background-color: #33C; 
color: #FFF; 
} 
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ 
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible 
{ 
background-color: #33C; 
color: #FFF; 
} 
/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenu 
{ 
background-image: url(SpryMenuBarRight.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenuHover 
{ 
background-image: url(SpryMenuBarRightHover.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ 
ul.MenuBarVertical iframe 
{ 
position: absolute; 
z-index: 1010; 
filter:alpha(opacity:0.1); 
} 
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ 
@media screen, projection 
{ 
ul.MenuBarVertical li.MenuBarItemIE 
{ 
display: inline; 
float: left; 
background: #FFF; 
} 
}

Many Thanks

Hello,

I am creating a form that includes a few JQuery scripts and TinyMCE Editor:
http://www.27lamps.com/Beta/Form/Form.html

I am having a few problems with my CSS:

1. Restyling the Select

(a) When using IE the Drop Down List is on the right instead of on the bottom;
(b) The current item in the list should have a different background color;

(Please check the select on the bottom of the page to check these 2 items working fine.
In this case I used a different class)

2. Error messages

Please, submit the form. After the Name input you will get a error message.
How can I make this message to not expand and still have the padding?
And also having the text aligned left.

One problem I am having with my form is every time I use a list inside my form somethings get "broken".
This is because the form is using a list.

What should be the best way to counteract the styles of the form list into a child list?

Any suggestion to improve my form CSS would be great.

Thanks,
Miguel

I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way.



Here is my css for reference:


Code:

.footerWrapper {
	margin: 20px 0 0 0;
	padding: 0;
	width: 100%;
	background: url(../images/content123bg.png) repeat-x;
}
.footer {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 155px;
}
.footer img {
	margin: 10px 0 0 0;
	float: right;
}
.footer h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
	text-align: center;
	padding: 10px 0 10px 0;
	margin: 0;
	width: 145px;
}
h3.facts {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
	text-align: center;
	padding: 10px 0 10px 0;
	margin: 0 0 0 -3px;
	width: 145px;
}
.footer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #CCC;
	text-decoration: none;
	text-align: center;
	width: 140px;
	margin: 0 0 0 2px;
	padding: 0 0 5px 0;
}
.footer p a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #999;
	text-decoration: underline;
}
.footer p a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
}

#twitter_t {
	margin: 0;
	padding: 0;
}
#twitter_t img {
	width: 150px;
	height: 50px;
	margin: 0;
	border: none;
	padding: 0 230px 0 0;
	/* [disabled]float: left; */
	position: relative;
}
 
#twitter_m {
	width: 370px;
	padding: 0 10px 0 0;
	background:url(../images/twiiterbubble.png) no-repeat;
	float: right;
	height: 140px;
	margin: -40px 0 0 0px;
	border: none;
}
 
   #twitter_container {
	min-height:45px;
	height:auto !important;
	height:40px;
	padding-bottom:10px;
	/* [disabled]padding-right: 10px; */
   }
 
       #twitter_update_list {
	width: 350px;
	padding: 0 0 0 20px;
	overflow: hidden;
	font-family: Georgia;
	font-size: 14px;
	font-style: italic;
	color: #000;
	line-height: 16px;
	font-weight:bold;
       }
 
       #twitter_update_list li {
	width: 350px;
	list-style: none;
	margin: 60px 0 0 0;
       }
 
       #twitter_update_list li a {
	color: #FFF;
	border-bottom: dotted 1px;
	text-decoration: none;
       }
       #twitter_update_list li a:hover {
	color: #09f;
       }

Here is my HTML:

Code:

 <div class="footerWrapper">
  <div class="footer">
  <div class="fltlft">
  <h3>Quick Links</h3>
  <p><a href="http://www.beckin.com/">Home</a></p>
    <p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
    <p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
  <p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->

<div class="fltlft">
  <h3>Help</h3>
  <p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
    <p><a href="http://www.beckin.com/support/">Support</a></p>
  <p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->

<div class="fltlft">
  <h3 class="facts">Facts</h3>
  <p><a href="#">Privacy Policy</a></p>
    <p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->

<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
   <div id="twitter_container">
       <div id="twitter_update_list"></div>

  <!-- end .twitter_container --></div>

  <!-- end .twitter_t --></div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

  
    <!-- end .footer --></div>
  <!-- end .footerWrapper --></div>

Any help with this would be very appreciated.

Hi all, just begun on the path of learning CSS and a little advice needed. I am experimenting with an image and thought it would be easy to animate my banner pic with a flash animation, but its not.

Basically I have a transparent GIF image rather like a picture frame with irregular inside edges. I want the flash animation to show in the centre, ie so that the gif image overlays it and parts are hidden by the jagged edges of the gif.

I thought this would be simple to achieve with what I have picked up so far but not so!

Could someone let me know how to achieve this.

EDIT- sorry should have made it clearer, this is two images, one over the other.

I am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images.

While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only.

What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div?

As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated.