Learn VBA & Macros in 1 Week!

CSS - Please Explain Why The Following Doesn't Center (an Academic Excercise).

Full Excel VBA Course - Beginner to Expert

Please Explain Why The Following Doesn't Center (an Academic Excercise).	View Content

So what exactly is vertical-align for, if it doesn't do this?

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" xml:lang="en" lang="en">

<body style='color:white;'>

		<div style='display:block; height:600px; background-color:orange; vertical-align:middle;'>
			<div style='position:absolute; display:block; height:50%; width:75%; background-color:green; vertical-align:middle; text-align:center;'>
			<span style='position:absolute; display:block; line-height:100%; vertical-align:middle;'>Please Center me</span>
			</div>
		</div>

</body>
</html>

Full Excel VBA Course - Beginner to Expert

How Do I Center A Div Box In The Center Of A Browser Window

Similar Tutorials

View Content

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\"

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\"

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\"

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\"

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div>

Can Someone Explain This To Me...

Similar Tutorials

View Content

Can someone explain to me how between this html and this css that this site determines the position of each of the divisions?

I'm not seeing how exactly it is interpreting the code to display the header and then move down to the next row, then display the left sidebar and the content and then move to the next row, then display the footer. How is this being done?

I hope that makes sense. I'm starting to grasp alot of the CSS but I'm still not seeing how it is continuing on down from one division/frame to the next row and then displaying 2 divisions/frames and then moving to the next, and I think once I get this concept I'll be set.

Here's the code:
HTML Code:
Original - HTML 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>The Perfect Fluid Width Layout</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> <div id="inside"> <div id="header"> <a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a> </div> <div id="left-sidebar"> <p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p> </div> <div id="main-content"> <h2>Why is this layout "perfect"?</h2> <ul> <li>Works in all major browsers</li> <li><strong>Shrinks</strong> to 780px<br />This accommodates users with 800x600 resolution, with no horizontal scroll!</li> <li><strong>Grows</strong> to 1260px<br />This accommodates users with 1280x768 resolution and everything in between.</li> <li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li> <li>The left sidebar is of "equal height" to the main content</li> </ul> <br /> <p><a href="http://css-tricks.com/examples/PerfectFluidWidthLayout.zip">[DOWNLOAD THIS EXAMPLE]</a></p> <br /> <p> Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. </p> <p> Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. </p> <p> In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. </p> <p> Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. </p> <p> Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait. </p> </div> <div style="clear: both;"></div> <div id="footer"> <p>Footer stuff.</p> </div> </div> <div style="clear: both;"></div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-68528-29"; urchinTracker(); </script> </body> </html>

  
<!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>The Perfect Fluid Width Layout</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
</head>

<body>

    <div id="page-wrap">
        <div id="inside">
            
            <div id="header">
                <a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
            </div>
        
            <div id="left-sidebar">
                <p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>

            </div>
    
            <div id="main-content">
                        
                <h2>Why is this layout "perfect"?</h2>
                <ul>
                    <li>Works in all major browsers</li>
                    <li><strong>Shrinks</strong> to 780px<br />This accommodates users with 800x600 resolution, with no horizontal scroll!</li>
                    <li><strong>Grows</strong> to 1260px<br />This accommodates users with 1280x768 resolution and everything in between.</li>
                    <li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li>
                    <li>The left sidebar is of "equal height" to the main content</li>
                </ul>
                
                <br />
                
                <p><a href="http://css-tricks.com/examples/PerfectFluidWidthLayout.zip">[DOWNLOAD THIS EXAMPLE]</a></p>
                
                <br />
                
                <p>
                Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. 
                </p>
                
                <p>
                Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. 
                </p>
                
                <p>
                In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. 
                </p>
                
                <p>
                Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. 
                </p>
                
                <p>
                Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.
                </p>
            
            </div>
            
            <div style="clear: both;"></div>
            
            <div id="footer">
                <p>Footer stuff.</p>
            </div>
        
        </div>
        
        <div style="clear: both;"></div>
    
    </div>
    
    
    
    
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-68528-29";
    urchinTracker();
    </script>

</body>

</html>

and here's the CSS:
CSS Code:
Original - CSS Code * { margin: 0; padding: 0; } body { font-size: 62.5%; background: black; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: url(images/left-sidebar.gif) repeat-y white; padding-left: 230px; padding-top: 20px; } #header { background: #267f23; text-align: center; } #left-sidebar { width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; }

  

 * {


     margin: 0;


     padding: 0;


 }


  


 body {


     font-size: 62.5%;


     background: black;


 }


  


 p, li {


     font: 1.2em/1.8em Tahoma, sans-serif;


     margin-bottom: 10px;


 }


  


 h1 {


     font: 2.0em Tahoma, sans-serif;


     color: white;


     height: 0px;


 }


  


 h2 {


     font: 1.8em Tahoma, sans-serif;


     color: green;


     margin-bottom: 10px;


 }


  


 ul {


     margin-left: 25px;


 }


  


 img {


     border: none;


 }


  


 #page-wrap {


     background: black;


     min-width: 780px;


     max-width: 1260px;


     margin: 10px auto;


     width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");


     }


     #page-wrap #inside {


         margin: 10px 10px 0px 10px;


         padding-top: 10px;


         padding-bottom: 10px;


     }


     


 #main-content {


     background: url(images/left-sidebar.gif) repeat-y white;


     padding-left: 230px;


     padding-top: 20px;


 }


     


 #header {


     background: #267f23;


     text-align: center;


 }


     


 #left-sidebar {


     width: 150px;


     float: left;


     padding-left: 15px;


     padding-top: 20px;


 }


  


 #footer {


     background: #267f23;


     text-align: center;


     padding-top: 20px;


     padding-bottom: 20px;


     color: white;


 }

Is it merely reaching the end of the width as is determined by the expression in the #page-wrap width statement and then moving to the next line using the margins determined in the #page-wrap #inside?

Thanks for the help!

Could Someone Explain What I'm Doing Wrong Here Please?

Similar Tutorials

View Content

Hi i'm using the html below, for some reason in Dreamweaver the two images in the two lower cells appear on the left, and the text on the top button is up the top of the table cell.

Is my code creating a conflict somewhere that would cause this? When I open it in Firefox or IE it looks fine, its just looking weird in design mode.

HTML Code:
Original - HTML Code <table width="160" cellpadding="0" cellspacing="0" border="0" bgcolor="#454545"> <tr> <td id="menubuttonselected">News</td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2009</a></td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2008</a></td> </tr></table>

  
<table width="160" cellpadding="0" cellspacing="0" border="0" bgcolor="#454545"> <tr> <td id="menubuttonselected">News</td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2009</a></td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2008</a></td> </tr></table>

with these style sheets:

Code:

#menubuttonsmall a  { 	display:block; 	font: bold 14px/1 sans-serif; 	color:#000000; 	background: url("..//gfx//common/button_menu_sub.jpg") 0 0 no-repeat; 	text-decoration: none; 	height: 21px; 	padding-top: 10px; 	border-top: 1px; 	border-top-style: solid; 	width: 144px; 	margin: 0; 	text-align: center; }

Code:

#menubuttonselected { 	background: url("..//gfx//common/button_menu.jpg") 0 0 no-repeat; 	background-position: -480px 0; 	color: #FFFFFF; 	font: bold 14px/1 sans-serif; 	text-decoration: none; 	text-align: center; 	padding-top: 0px; 	height: 40px; }

Cheers,

Mark

Could Someone Explain Adv. Syntax To Me In English?

Similar Tutorials

View Content

Hello! I have been teaching myself the ins & outs of CSS for presentation & there is something I'm not exactly clear about "selectors, classes, ids, rules & definitions, delimiters" and the like.

Sometimes I notice people are creating rules for elements or classes that look very different...I think this has to do with parent elements or selectors/properties, but I am not sure.

Here's a few examples of rules that I don't understand:

Code:

div#navigation

#navigation .navigation a

.body div#navigation > a

I know how to define a rule & class, for example #navbar to set the properties such as text color, background, etc. even a background image for this DIV.

What I'm trying to say is "What the heck is the difference between using a Hash mark (#) versus a period (.) and when the heck did > or < come into play?"

No tutorials on learning CSS seemed to actually explain these, just tell you "that's how it is," so I am very curious to learn more.

Thanks for your help!

Bizarre Ie Bug - Hard To Explain

Similar Tutorials

View Content

link

There's something odd going on with the first quote box div and h2 that I can't quite work out, it doesn't appear to happen to subsequent divs (even though they're just copied and pasted...)

Any ideas what could be causing that and how to fix it?

Thanks
--James

Img Doesn't Appear When I Change Css That Doesn't Apply To Them?

Similar Tutorials

View Content

Exactly that question. I got this menu from a website.

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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; 

text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px 

solid #fff;}

#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px 

center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#888;}

#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}

.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img  {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE 

7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but 

terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species 

within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>

Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag.

Code:

#showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}

I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code.

Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having...

Please Explain My Mistake .. Noob Problem

Similar Tutorials

View Content

Hi ..

I have decided to teach myself Web Development .. and I have jumped into HTML and CSS first .. and will be branching off to PHP once I have a solid HTML and CSS foundation ..

To teach myself practically .. I have decided to make a webpage that does nothing but have a blank coloured background and an area to write text that is surrounded by a rounded rectangle constructed of gifs ..

I know this may not be the most efficient way to do this, but I am using this as an exercise to gain a greater holistic understanding of the way CSS works with HTML.

The desired outcome is to have a rounded rectangle box that will be drawn to fit its container, so that it can be reused all over the place ...

The code is pasted below, and any images can be substituted for the ones in my code .. but my question is .. : in the attached code, why is the final element not lined up horizontally with the other 2 elements ??

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "(*********)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body>
<div id="body">
<div id="container">
<div id="box_top_left">
</div>
<div id="box_top">
</div>
<div id="box_top_right">
</div>
</div>
</div>
</body>
</html>

CSS Code

div#container{
width: 500px;
height : 500px;
position:absolute;
background:#7868723;
}

div#box_top_left{
width: 10px;
height: 10px;
display: block;
float:left;
background-repeat: no-repeat;
background-image: *******
}
div#box_top_right{
width: 16px;
height: 10px;
float: right;
position: relative;
display: block;
top: 0px;
background-repeat: no-repeat;
background-image: ********
}
div#box_top{
width: 100% - 26px;
height: 10px;
display:block;
position:relative;
left : -5px;
margin:0;
background-repeat: repeat-x;
background-image: *******
}

Thanks for any assistance you can give ...

Fixed Width Layouts And Liquid Layouts Explain Please

Similar Tutorials

View Content

Well, I know CSS however I am a bit confused with fixed width and liquid layouts as far as I know fixed width is where you set a divs width in pixels and liquid is in % so it scales to the users screen size?

Which one is best to use? Also, I have the following style sheet which I created, I am guessing this is a liquid layout?

Code:

* {
margin: 0;
padding: 0;
}

body {
font-size: 15px;
background-color: black;
color: white;
}


#header {
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid white;
}

#header h1 {
padding-left: 25px;
margin-bottom: 0px;
}

#content {
padding: 10px;
margin-left: 200px;
border-left: 1px solid white;
}

#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}

#nav {
float: left;
padding: 10px;
padding-left: 15px;
width: 20%;
}

#nav li {
list-style-type: none;
}

#nav a {
text-decoration: none;
}

#footer {
clear: left;
border-top: 1px solid white;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid white;
width: 100%;
}

a {
color: silver;
text-decoration: underline;
}

a:hover, a:focus {
font-weight: bold;
}

a:visited {
font-style: italic;
}

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

p {
margin: 5px;
}


select {
width: 30%;
}

textarea {
width: 40%;
}

.floatimage {
float: left;
margin: 10px;
}

Center <div>

Similar Tutorials

View Content

Thanks for taking the time to read my question.

I have a div that has a specified width, and if I put margin-left: auto; and margin-right: auto; the div centers with in the parent div. I have another div that I don't want to have a specified width, and as a result the auto's don't center the div. How can I center my div? I've tried display: block; and that just makes it as wide as the parent div. If I remove display and put float: left, it sizes properly (shrinks to fit the contents), but floats left and doesn't heed the margin auto's.

The colors are there to see the containers... I don't plan on keeping them..

please see http://www.scopicdesigns.com/LisaCl..._Portfolio1.htm for example.

Thanks,

Brad

Center A Ul

Similar Tutorials

View Content

I'm not quite sure how to do this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Untitled Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
    #content {
      float: left;
      width: 437px;
      margin: 10px;
      margin-top: 0;
    } /* end #content */
    #content ul {
      list-style-type: none;
      margin-top: auto;
      padding-bottom: 1em;
      background-color: #00ff00;
    } /* end #content ul */
    #content ul li { 
      float: left; 
    } /* end #content ul li */
    #content ul li a { 
      position: relative; 
      left: 1px; 
      top: 1px;
      text-decoration: none;
      color: #ff0000; 
    } /* end #content ul li a */
    #content p { clear: both; }
    .shadow { 
      color: blue;
      position: absolute; 
      left: -1px; 
      top: -1px;
    } /* end .shadow */
  </style>
</head>
<body>
  <div id="content">
    <ul>
      <li><a href="#">Link 1<span class="shadow">Link 1</span></a></li>
      <li><a href="#">Link 2<span class="shadow">Link 2</span></a></li>
      <li><a href="#">Link 3<span class="shadow">Link 3</span></a></li>
      <li><a href="#">Link 4<span class="shadow">Link 4</span></a></li>
    </ul>
  </div>
</body>
</html>

I need the text to be centered in the green box. Not sure the best way to do that.

Why Won't It Center?!

Similar Tutorials

View Content

for some reason the text inside the item class will not center. see the attachment. the top is how this code renders, the bottom is how i'd like it to look. i'm sure this is something simple that i'll end up slapping myself fore later

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">

<html>
 <head>
  <title> new document </title>


 <style type="text/css">
 #ticker {
	background: #00f;
	overflow: auto;
	margin-left: 20px;
	margin-top: 10px;
	width: 835px;
	height: 52px;
}

#ticker #items {
	position: relative;
	top: 0px;
}

#ticker .cell {
	display: table-cell;
	vertical-align: middle;
	height: 51px;
	overflow: hidden;
	border-right: 3px solid #01364d;
	text-align: center;
}

#ticker .item {
	float: left;
	padding: 0 10px 0 10px;
	font: bold 10pt Arial;
	color: #fff;
}
</style>
 
 </head>

 <body>
  		<div id="ticker">
			<div id="items">
				<div class="cell" id="item_01" style="width: 160px"><div class="item">Lorem: XXX%</div></div>
				<div class="cell" id="item_02" style="width: 160px"><div class="item">Lorem: XXX%</div></div>
				<div class="cell" id="item_03" style="width: 160px"><div class="item">Lorem: XXX%</div></div>
				<div class="cell" id="item_04" style="width: 160px"><div class="item">Lorem: XXX%</div></div>
				<div class="cell" id="item_05" style="width: 160px; border: 0"><div class="item">Lorem: XXX%</div></div>
			</div>
		</div>

 </body>
</html>

Center <td> In Ie6

Similar Tutorials

View Content

Hi all,

I've got a table here and can't seem to get text-align:center in the cells that have colspan='2' (f1s, f2s...) as an attribute. HTML Code:
Original - HTML Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Game</title> <style type='text/css'> table { border: 1px solid black; } tr.top { font-size:10px; } tr.tall { height:50px; } td { width:20px; border: 1px solid black; text-align:center; } td.name { font-size:18px; width:100px; height:50px; } td.finalscore { color:red; font-size:18px; width:40px; } </style> </head> <body> <table cellpadding=0 cellspacing=0> <tr class='top'> <td rowspan='2' colspan='2' class='name'>Name </td> <td> f1a </td> <td> f1b </td> <td> f2a </td> <td> f2b </td> <td> f3a </td> <td> f3b </td> <td> f4a </td> <td> f4b </td> <td> f5a </td> <td> f5b </td> <td> f6a </td> <td> f6b </td> <td> f7a </td> <td> f7b </td> <td> f8a </td> <td> f8b </td> <td> f9a </td> <td> f9b </td> <td> f10a </td> <td> f10b </td> <td> f10c </td> <td style="background-color:black"> </td> </tr> <tr class='tall'> <td colspan='2'>f1s</td> <td colspan='2'>f2s</td> <td colspan='2'>f3s</td> <td colspan='2'>f4s</td> <td colspan='2'>f5s</td> <td colspan='2'>f6s</td> <td colspan='2'>f7s</td> <td colspan='2'>f8s</td> <td colspan='2'>f9s</td> <td colspan='2'>f10s</td> <td colspan='2'>Score</td> </tr> </table> </body> </html>

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Game</title>
    <style type='text/css'>
        table { border: 1px solid black; }
        tr.top { font-size:10px; }
        tr.tall { height:50px; }
        td { width:20px; border: 1px solid black; text-align:center; }
        td.name { font-size:18px; width:100px; height:50px; }
        td.finalscore { color:red; font-size:18px; width:40px; }
    </style>
</head>

<body>      
    <table cellpadding=0 cellspacing=0> 
        <tr class='top'> 
            <td rowspan='2' colspan='2' class='name'>Name </td> 
            <td> f1a </td> 
            <td> f1b </td> 
            <td> f2a </td> 
            <td> f2b </td> 
            <td> f3a </td> 
            <td> f3b </td> 
            <td> f4a </td> 
            <td> f4b </td> 
            <td> f5a </td> 
            <td> f5b </td> 
            <td> f6a </td> 
            <td> f6b </td> 
            <td> f7a </td> 
            <td> f7b </td> 
            <td> f8a </td> 
            <td> f8b </td> 
            <td> f9a </td> 
            <td> f9b </td> 
            <td> f10a </td> 
            <td> f10b </td> 
            <td> f10c </td> 
            <td style="background-color:black">&nbsp;</td> 
        </tr> 
        <tr class='tall'> 
            <td colspan='2'>f1s</td> 
            <td colspan='2'>f2s</td> 
            <td colspan='2'>f3s</td> 
            <td colspan='2'>f4s</td> 
            <td colspan='2'>f5s</td> 
            <td colspan='2'>f6s</td> 
            <td colspan='2'>f7s</td> 
            <td colspan='2'>f8s</td> 
            <td colspan='2'>f9s</td> 
            <td colspan='2'>f10s</td>
            <td colspan='2'>Score</td>
        </tr> 
    </table>

</body>

</html>

Any pointers?

Center Div

Similar Tutorials

View Content

Thanks for taking the time to read my question.

I have a 19 in CRT and a 22 in wide screen LCD monitor. I am trying to make my content center on the page, regardless of the monitor.

As it stands, it looks to be centered on teh 19 in, but on the 22 in, it is very much to the left side of the screen. I just got the 22 in. Is there something different you have to do for wide screen monitors?

I'm using

margin: auto 0px;

I have margin and padding off for my Body {} and have set marging and padding on all appropreate elements so that they work the same in IE and FF.

In my html page, I'm using xhtml strict.

Thanks,

Brad

Center

Similar Tutorials

View Content

Thanks for reading my question

Why does this not center the contents of my page in Firefox but it does in IE?

This code is in my linked CSS file.

Code:

body {
text-align: center;
margin-top: 10px;
background-image: url(images/fall-leaves.jpeg);
background-attachment: fixed;
/*background-color: #d8d8d8;*/
}

Center Div Over Another Div

Similar Tutorials

View Content

I'm strugling with this code. The homepage is http://thebeadingsite.com and I can't get this to line up properly. Here's my code, any suggestions??

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>The Beading Site</title>
  
<style type='text/css'>
body {
background-color: black;
}
#bg-right {
    background-color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    z-index: -1;
}

#content {
    position: relative;
    top: 0;
    bottom: 0;
    left: 25%;
    right: 0;
    z-index: 0;
}
  </style>
  
</head>
<body>
  <div id="bg-right"></div>

<div id="content"><table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">
			<img src="images/bnt-site-final_01.jpg" width="800" height="158" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/bnt-site-final_02.jpg" width="623" height="421" alt=""></td>
		<td><a href="http://www.etsy.com/shop/mixaleena" target="_blank">
				<img src="images/bnt-site-final_03.jpg" width="72" height="38" border="0" alt="Click here to order online at Etsy!"></a></td>
		<td colspan="2" rowspan="2">
			<img src="images/bnt-site-final_04.jpg" width="105" height="421" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/bnt-site-final_05.jpg" width="72" height="383" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/bnt-site-final_06.jpg" width="526" height="21" alt=""></td>
		<td colspan="3">
			<a href="mailto:mixaleena@thebeadingsite.com?subject=Comments from the front page">
				<img src="images/bnt-site-final_07.jpg" width="247" height="21" alt="" border="0"></a></td>
		<td>
			<img src="images/bnt-site-final_08.jpg" width="27" height="21" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="526" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="97" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="78" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="27" height="1" alt=""></td>
	</tr>
</table>

</div>
  
</body>


</html>

Center A Div Within A Div

Similar Tutorials

View Content

Hello again CSS experts!

I know this question gets asked a lot but I have had a search on here and google and can't seem to get it working for me.

My page has a sidebar div which contains a UL menu (SpryMenuBar from Dreamweaver) I would like to center the menu within the div.

I have tried putting it within a child div and playing with auto margins and left 50%, etc. but no joy.

If anyone could point out what I'm doing wrong I'd would be very grateful.

Another small issue (which I suspect is related) is the <p> in between the two menus wraps around the right of the first menu when viewed in IE.

Jez

index.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>Mseis</title>

<link href="includes/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
  <div id="header">
<?php include("includes/header.php"); ?>
  <!-- end #header --></div>
  <div id="sidebar1">
<?php include("includes/menu.php"); ?>
    <!-- end #sidebar1 -->
  </div>
  <div id="mainContent">
  <div id="navbar">
  <a href="index.php">Home</a>
      <!-- end #navbar --></div>
      
      <div id="pageContent">
        <h1> Main Content </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>H2 level heading </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        <h3>H3 level heading </h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    	  <!-- end #pageContent --></div>
	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
	<br class="clearfloat" />
	<div id="footer">
<?php include("includes/footer.php"); ?>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

menu.php:
Code:

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<div class="menu">
<p>
<ul id="RootMenu" class="MenuBarVertical">
  <li><a href="index.php">Home</a></li>
  <li><a href="about.php">About Us</a></li>
  <li><a href="#" class="MenuBarItemSubmenu">Services</a>
    <ul>
      <li><a href="#">Passive Acoustic Monitoring</a></li>
      <li><a href="#">Training</a></li>
    </ul>
  </li>
<li><a href="#" class="MenuBarItemSubmenu">Personnel</a>
      <ul>
        <li><a href="#">Mseis</a></li>
        <li><a href="#">3rd Party</a></li>
      </ul>
    </li>
  <li><a href="#">Contact Us</a></li>
</ul>
</p>
<p>
The menu should be centered like this text, but looks odd in IE
</p>
<p>
<ul id="StaffMenu" class="MenuBarVertical">
  <li><a href="webmail.php">Webmail</a> </li>
  <?php
  if (strpos($_SESSION["permissions"], "upload") !== false)
  {
	  echo "<li><a href=\"resources.php\" class=\"MenuBarItemSubmenu\">Operator Resources</a>
			<ul>
			<li><a href=\"upload.php\">Upload A File</a></li>
			<li><a href=\"uploads.php\">View Uploaded Files</a></li>
			</ul></li>";
  }
  else
  {
  	echo "<li><a href=\"resources.php\">Operator Resources</a></li>";
  }
  ?>
  <li><a href="client.php">Client Resources</a></li>
  <?php
  if ($_SESSION['loggedin'] == true)
  {
  echo "<li><a href='logout.php'>Logout</a></li>";
  }
  ?>
</ul>
</p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("RootMenu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("StaffMenu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

layout.css:
Code:

@charset "utf-8";
@import url("reset.css");

html, body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-color: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #633C91;
}

#container { 
	width: 80%;  /* this will create a container 80% of the browser width */
	background-color: #FFFFFF;
	margin: 1px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	min-width: 800px;
} 

#header {
	margin: 0; 
	background-color: #DDDDDD; 
	padding: 5px 20px;
} 


#header img {
vertical-align: middle;
}


/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLtHdr #sidebar1 p" rule.
*/

#sidebar1 {
	float: left; 
	width: 15%; /* since this element is floated, a width must be given */
	background-color: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0; /* top and bottom padding create visual space within this div  */
	margin: 0;
	text-align: center;
}

#menu {
	margin: 0 auto;
 }

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/

#mainContent { 
	margin: 0; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
	padding: 0;
	width: 85%;
	float: left;
} 

#pageContent {
	margin: 0;
	padding: 10px;
}

#navbar { 
	background-color: #AAAAAA;
	margin: 0;
	padding: 1px 10px;
} 

#navbar, #navbar a {
	color:#FF0000;
	font-size: small;	
} 

#navbar a:link, #navbar a:visited {
	text-decoration:none;
}

#navbar a:hover, #navbar a:active { 
	text-decoration:underline;
}

#footer { 
	padding: 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
} 

#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

/* Custom CSS */

.msgreen {
	color: #BEDA57;
}

.msblue {
	color: #81C4E2;
}

.mspurple {
	color: #633C91;
}

.failed {
	color: #FF0000;
}


h1 {
	color: #BEDA57;
	font-size: 150%;
	font-weight: bolder;
	margin-top: 5px;
	margin-bottom: 5px;
}

h2 {
	color: #81C4E2;
	font-size: 140%;
	font-weight: bold;
	margin-top: 3px;
	margin-bottom: 3px;
}

h3 {
	color: #633C91;
	font-size: 140%;
	margin-top: 2px;
	margin-bottom: 2px;
}

p {
	margin-top: 10px;
	margin-bottom: 10px;
}

small {
	font-size: 60%;
}

fieldset {  
	margin: 1.5em 0 0 0;  
	padding: 0; 
	background-color: #81C4E2;
}
 
legend {  
	margin-left: 1em;  
	color: #633C91;  
	font-weight: bold;  
} 
 
fieldset ol {  
	padding: 1em 1em 0 1em;  
	list-style: none;  
}  

fieldset li {  
	padding-bottom: 1em;  
}  

fieldset.submit {  
	border-style: none; 
	background-color: transparent;
}

label {    
	display: block;
	color: #633C91;
}

input.btn {
	border: 1px solid;
	background-color: #81C4E2;
	color: #633C91;
	font: bold 80%;
}

input.btnhov{
	border-color: #FF0000;
}

SpryMenuBarVertical.css
Code:

@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 8em;
}
/* 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: 8em;
}
/* 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.2em;
}

/*******************************************************************************

 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;
		f\loat: left;
		background: #FFF;
	}
}

reset.css
Code:

@charset "utf-8";
/* CSS Document */
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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Center My Div

Similar Tutorials

View Content

I have a div that I am using as a pop up layer. I just set the visible attribute on mouseover and mouseout. I want to have that dic pop up in the center of the screen vertically and horizontally. I have not had much luck with other examples but this is what I have:

Div
Code:

<div class="popbox" id="1" onMouseover="showpop('1');" onMouseout="hidepop('1');">
<p class="popboxheader">HEADER</p>
<p class="popboxcontent">
<table>
  <tr>
    <td class="popboxcontentleft" valign="top"><p>some content here</p></td>
    <td class="popboxcontentright" valign="top"><p>more content</p></td>
  </tr>
</table>
</p>
</div>

CSS
Code:

div.popbox {
  text-align: left;
  background-color:#ffffff;
  border: 1px solid black;
  padding: 5px;
  width: 570px;
  visibility: hidden;
  margin:0 auto;
}
.popboxheader { 
  padding: 5px;
  color: white; 
  letter-spacing: 2pt;
  background-color: #003399;
  font-family: Verdana, san-serif;
  font-size:16px;
  color:#ffffff;
  color:#ffffff;
  font-weight:bold;
  text-align:left; 
}
.popboxcontent { 
  font-size: 10pt; 
  font-weight: normal; 
  text-align: left;
  font-family: Verdana, san-serif;
  color:#4074b7;
  color:#0349A3;
}
.popboxright { 
  font-size: 9pt; 
  font-weight: normal; 
  text-align: left;  
  width:200px;
  font-family: Verdana, san-serif;
  color:#4074b7;
  color:#0349A3;
}

Script
Code:

function showpopp(cid){
	  var obj = document.getElementById(cid);
	  obj.style.visibility = "visible";
}
function hidepop(cid){
  		var obj = document.getElementById(cid);
  		obj.style.visibility = "hidden";
}

I am not sure, but I am writingthe div at the end of the content that is always shown on the screen, just for some info. Any help is appreciated.

How Do I Center This?

Similar Tutorials

View Content

I need to center an img that I have fade in how do i change the below code so that it centers in the page

STYLE=\"POSITION: absolute; HEIGHT:75%;WIDTH:75%;TOP:5;LEFT:0;VISIBILITY:VISIBLE;

ZINDEX:1\"

thanks

tim

How Do I Center Div's

Similar Tutorials

View Content

Hello,

I have a container div and i want to put some fixed-width left-floated divs inside it. The problem is i want to make them appear in the center of the container, instead of left. The problem is i don't know how many of them there's going to be, therefore i can't just put them inside of another fixed-width container and set it's margin to auto. I could probably do it with tables easily, but how would i do it in css?

Div Not Center?

Similar Tutorials

View Content

I am having a small problem with centering a main container div..

The main div is 700 pixels wide .. I have numerous divs inside this container div. Everything is peachy, but I cant seem for the life of me to get the container div centered in the browser window...

I tried <div align="center">

even tried text-align:center;

any thoughts?