|
CSS - Need Help Aligning Forms (blackoutplaylists)
Hey guys,
On the following page, I need some very simple help aligning these forms using CSS. I've tried a lot however I am not the best when it comes to CSS yet. Here is what the forms look like currently: http://www.blackoutplaylists.com/?page_id=150 And here is what I want the alignment to look like: http://fratmusic.com/playlist/create/ I want the text aligned to the left and I need the rest aligned to the center(ish). I also want to be able to add little text underneath on the bottom. Anyways, here is the code. Any help would be greatly appreciated. Code:
<!-- form start -->
<form method="post" action="http://www.blackoutplaylists.com/wp-content/plugins/tdo-mini-forms/tdomf-form-post.php" id='tdomf_form%%FORMID%%' name='tdomf_form%%FORMID%%' class='tdomf_form' >
%%FORMKEY%%
<div><input type='hidden' id='tdomf_form_id' name='tdomf_form_id' value='%%FORMID%%' /></div>
<div><input type='hidden' id='redirect' name='redirect' value='%%FORMURL%%' /></div>
<!-- widgets start -->
<!-- customfields-3 start -->
<fieldset>
<?php if(isset($post_args["customfields-tf-3-tf"])) {
$temp_text = $post_args["customfields-tf-3-tf"];
} else {
$temp_text = "";
} ?>
<label for="customfields-tf-3-tf" class="required">Who Created This Playlist?:
<br/>
</label>
<input type="text" title="Who Created This Playlist?" name="customfields-tf-3-tf" id="customfields-tf-3-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
</fieldset>
<!-- customfields-3 end -->
<!-- customfields-4 start -->
<fieldset>
<?php if(isset($post_args["customfields-tf-4-tf"])) {
$temp_text = $post_args["customfields-tf-4-tf"];
} else {
$temp_text = "";
} ?>
<label for="customfields-tf-4-tf" class="required">School/Fraternity:
<br/>
</label>
<input type="text" title="School/Fraternity" name="customfields-tf-4-tf" id="customfields-tf-4-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
</fieldset>
<!-- customfields-4 end -->
<!-- content start -->
<fieldset>
<?php if(isset($post_args["content-title-tf"])) {
$temp_text = $post_args["content-title-tf"];
} else {
$temp_text = "";
} ?>
<label for="content-title-tf" class="required">Playlist Name:
<br/>
</label>
<input type="text" title="Playlist Name" name="content-title-tf" id="content-title-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
<br/><br/>
<label for="content-text-ta" class="required">Playlist Code:
</label>
<br/>
<textarea title="Playlist Code" rows="10" cols="60" name="content-text-ta" id="content-text-ta" ><?php if(isset($post_args["content-text-ta"])) {
echo $post_args["content-text-ta"];
} else { ?><?php } ?></textarea>
</fieldset>
<!-- content end -->
<!-- excerpt start -->
<fieldset>
<label for="excerpt-ta" class="required">Description:
</label>
<br/>
<textarea title="Description" rows="5" cols="40" name="excerpt-ta" id="excerpt-ta" ><?php if(isset($post_args["excerpt-ta"])) {
echo $post_args["excerpt-ta"];
} else { ?><?php } ?></textarea>
</fieldset>
<!-- excerpt end -->
<!-- categories start -->
<fieldset>
<?php $defcat = 1; if(isset($post_args['categories'])) { $defcat = $post_args['categories']; } ?>
Select a category:
<select name='categories' class='tdomf_categories' size='1' >
<option value="1"<?php if( (is_array($defcat) && in_array(1, $defcat))
|| ( 1 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Uncategorized</option>
<option value="3"<?php if( (is_array($defcat) && in_array(3, $defcat))
|| ( 3 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Pop</option>
<option value="4"<?php if( (is_array($defcat) && in_array(4, $defcat))
|| ( 4 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Dance</option>
<option value="5"<?php if( (is_array($defcat) && in_array(5, $defcat))
|| ( 5 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Rap/Hip-Hop</option>
<option value="6"<?php if( (is_array($defcat) && in_array(6, $defcat))
|| ( 6 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Study</option>
<option value="7"<?php if( (is_array($defcat) && in_array(7, $defcat))
|| ( 7 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Alternative</option>
<option value="8"<?php if( (is_array($defcat) && in_array(8, $defcat))
|| ( 8 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Reggae</option>
<option value="9"<?php if( (is_array($defcat) && in_array(9, $defcat))
|| ( 9 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Ska</option>
<option value="10"<?php if( (is_array($defcat) && in_array(10, $defcat))
|| ( 10 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Acoustic</option>
<option value="11"<?php if( (is_array($defcat) && in_array(11, $defcat))
|| ( 11 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Country</option>
</select>
</fieldset>
<!-- categories end -->
<!-- i-agree start -->
<fieldset>
<input type="checkbox" name="iagree" id="iagree" <?php if($iagree) { echo 'checked'; } ?> />
<label for="iagree" class="required" > I agree with the <a href='http://www.blackoutplaylists.com/?page_id=84'>posting policy</a>. </label>
</fieldset>
<!-- i-agree end -->
<!-- widgets end -->
<!-- form buttons start -->
<table class='tdomf_buttons'><tr>
<td><input type="submit" value="Send To Blackoutplaylists" name="tdomf_form%%FORMID%%_send" id="tdomf_form%%FORMID%%_send"/></td>
</tr></table>
<!-- form buttons end -->
</form>
<!-- form end -->
<!-- Form 3 end -->
Similar TutorialsHi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. Hi, I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding. The css is just a simple layout: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}
#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}
#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}
#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}
#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}
#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}
#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}
#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}
but in the mainimage div I am inserting the following table and it is not displaying correctly in FF: Code:
<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>
s anyone able to give me a pointer? Thanks.... Whta's the best way to do this? I'm tryiong to avoid using tables. but i cant think of a more liquid way to do it... .........key:value someOtherKey:someOthervalue ...more keys:more values ...........k:v (the periods are just placeholders for whitespace) Thanks! http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done? I used float:right; and float:left for starters but I can not get the columns any closer to each other. Any help is greatly appreciated, - mike The site is located at: http://68.41.210.39:8081/empcoBeta/index.html Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE? The css is as follows: #under { width:84%; height:1%; background-color:#1E77D3; position:absolute; top:5%; left:16%; } #mainleft { width:35%; background-color:white; vertical-align:top; position:absolute; top:10%; left:22% } #mainright { width:40%; background-color:white; vertical-align:top; position:absolute; top:10%; right:2% } body { font-family: sans-serif; font-size: 12px; } .indented1 { padding-left: 5pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } .indented2 { padding-left: 10pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } a:link {color: #17507e; font-size: 2; text-decoration: none; } a:active {color: blue; font-size: 2; text-decoration: none;} a:visited {color: #17507e; font-size: 2; text-decoration: none;} a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;} #column { width:1%; height:81%; background-color:#B4CCEB; position:absolute; top:0%; left:15%; } #leftsidebar1 { width:100%; height:5%; background-color:#B4CCEB; position:absolute; top:0%; left:0%; } #leftbar1 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:5%; left:0%; } #leftsidebar2 { width:16%; height:2%; background-color:#B4CCEB; position:absolute; top:40%; left:0%; } #leftbar2 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:41%; left:0%; } #leftsidebar3 { width:16%; height:1%; background-color:#B4CCEB; position:absolute; top:81%; left:0%; } #credits { position: absolute; left:1%; bottom:20%; } .tcredits { text-align: left; font-size: 9px; font-family: sans-serif; } ive searched google throughout and im blank on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
div
{
width:70%;
margin:0 auto;
height:20em;
border:.4em solid black;
}
p
{
border:.4em solid black;
margin:0 auto;
line-height:8em;
display:inline;
width:55%;
height:8em;
}
span
{
display:block;
color:red;
font-size:2em;
width:60%;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div>
<p>
<span>X</span>
</p>
</div>
</body>
</html>
I need the outer box to be vertiacllly aligned within the viewport, the other boxes vertically aligned within each other. does that make sense? I thought u could do it with line-height but i can't get it working. fresh eyes? Edit: New code there. HI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} How would I prefectly fit a table or div against the edge of a browser without any white space? I've tried setting the margin border to 0px without any success. So what I want is to have 2 forms with buttons aligned horizontally. <form><input type="submit"></form> <form><input type="submit"></form> They should be like this: [Button 1] [Button 2] But instead, they go like this: [Button 1] [Button 2] And I don't know the CSS for it, so thanks in advance. ok... im making a site with CSS... this is my css code - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; font-family: verdana; font-size: 12px; text-align: justify; color:white; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } and this is my code for my PHP page, which reads the css - Quote: <html> <head> <link rel="stylesheet" type="text/css" href="fula.css" /> </head> <body> <div id="head"><img src="image/head.jpg"></div> <div id="content"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated! to view the page this problems on - http://www.outlawz.frihost.net/fula/test2.php I'm building a site: www.bunjareecottages.com.au At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected. What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom. Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned. Any ideas? I know I'm probably still thinking in terms of tables... I have a <div> container with several more <divs> stacked up inside it. They have varying widths. I would like some (maybe not all) to be centered within the primary <div>. Now, I know I can do this: <div align="center">, but align isn't a property in a style sheet, is it? i seem to be having trouble aligning two css layers i have a border and then content within in (content is images) i would like to align another layer in here to the middle left. can this be done? also the HTML is wrapping around the image, any way i can stop this? as the images should be along the bottom below the image. the link and data are as follows: http://wakefieldfhs.co.uk/stu/users/njacques/9 and one last thing i just noticed while testing all this, its not displaying the footer and ending data (this only occurs on my server, not on my test server. :S Code: (
layout->doExifBorder();
echo("EXIF INO HERE");
$layout->endBorder();
$layout->endBorder();
footer(); // for future refernce footer.inc include the end div's!!
?>)
(this would equate to: ) Code: <div class='t-exif'><div class='b-exif'><div class='l-exif'><div class='r-exif'><div class='bl-exif'><div class='br-exif'><div class='tl-exif'><div class='tr-exif'>EXIF INO HERE</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div> <div class="footer" align="center"> <a href='about.php'>about</a> | disclaimer | privacy | terms of use<br></div> </div> </body> </body> </html> http://s125392025.websitehome.co.uk/layout.html I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image. Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please? PHP Code: <!DOCTYPE html PUBLIC> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } #mid, #left { top:120px; } #midcontainer { width:400px; margin:0 auto; position:relative; left:35px; top:44px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; } #midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:180px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:50px; } #leftcontainer { width:200px; position:absolute; left:5px; top:150px; } </style> </head> <body> <!--This is the main site header properties--> <div id="top"> <div id="topbody"> <h5>Main Site Header</h5> <p class="top1">This is where the main image, and TopNav will go.</p> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <h5>Middle</h5> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </body> </html> I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... Hi all, I am having trouble getting my third column to sit in place correctly. Here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html --> <HTML><HEAD><TITLE>CSS layout using divs</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META content="" name=Keywords> <META content="" name=Description> <STYLE type="text/css" media="all"> @import url( css/commonSite.css ); </STYLE> <META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD> <BODY> <DIV class="panelS"> <DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt=""> <DIV class="colTwo"> <DIV class="linkS"> <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> </DIV> <DIV class="colThree"></DIV> </DIV> </DIV> </DIV> </BODY></HTML> Code:
.panelS
{
BACKGROUND-COLOR: #adadad;
WIDTH: 760px;
position: absolute;
}
.colOne {
FONT-WEIGHT: bold;
FONT-SIZE: medium;
LEFT: 0px;
WIDTH: 85px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
}
.colTwo {
FONT-SIZE: medium;
LEFT: 85px;
WIDTH: 475px;
HEIGHT: 21px;
background-color:#FF6633;
position:relative;
}
.colThree {
FONT-SIZE: medium;
LEFT: 560px;
WIDTH: 200px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
background-color:#00CCCC;
}
.linkS
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:link
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:visited
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:hover
{
FONT: bold 10px Verdana;
COLOR: #0055c3;
TEXT-ALIGN: right;
TEXT-DECORATION: underline
}
I was wanting all the columns side by side. Any ideas where i might be going wrong? Cheers I have been trying to get Son of Suckerfish dropdown menus to work in IE for me for the longest time... I just can't get it to align how I want it to when I add my own "tab" effect. Code: <ul id="nav"> <li id="main1" class="mainMenu"><a href="./index.php">Home</a></li> <li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li> <li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li> <li id="main4" class="mainMenu"><a href="./college.php">College Students</a> <ul> <li><a href="./studentNews.php">News</a></li> <li><a href="./studentLeaders.php">Student Leaders</a></li> <li><a href="./sundaySupper.php">Sunday Supper</a></li> <li><a href="./serventEvents.php">Servant Events</a></li> <li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li> </ul> </li> <li id="main5" class="mainMenu"><a href="./family.php">Family Ministry</a> <ul> <li><a href="./family.php">Overview</a></li> <li><a href="./fmSchedule.php">Schedule</a></li> <li><a href="./fmActivities.php">Activities</a></li> <li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li> <li><a href="./fmYouCanHelp.php">You Can Help</a></li> <li><a href="./fmCoordination.php">Education Coordination Team</a></li> </ul> </li> <li id="main6" class="mainMenu"><a href="./serving.php">Ways to Serve</a></li> <li id="main7" class="mainMenu"><a href="./giving.php">Ways to Give</a> <ul> <li><a href="./giving.php">Financial Home</a></li> <li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34f a442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li> <li><a href="./eft.php">Electronic Fund Transfer</a></li> <li><a href="./matching.php">Matching Gifts</a></li> <li><a href="./meijer.php">Meijer Community Rewards</a></li> <li><a href="./givingTools.php">Tools for Giving</a></li> <li><a href="./endowment.php">Endowment Fund</a></li> </ul> </li> <li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li> </ul> That's the HTML Code: #nav {
float: left;
list-style: none;
line-height: 1;
font-size: 16px;
padding: 0;
margin: 0 0 0.5em 0.6em;
}
#nav ul {
list-style: none;
background: #006600;
padding: 0;
border: 1px solid #000;
}
#nav li.sfhover ul {
left: 1em;
}
#nav a {
display: block;
color: white;
text-decoration: none;
padding: 0.25em;
padding-right:0;
}
#nav ul a {
display: block;
width: 6em;
color: white;
text-decoration: none;
background:none;
border:none;
}
#nav li {
float: left;
padding: 0;
width: 7em;
height:auto;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 13.9em;
font-weight: normal;
border: 1px solid #000;
}
#nav li li {
padding-right: 1em;
width: 13em;
}
#nav li ul a {
width: 12em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav ul li:hover, #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
background: #009900;
}
/* Width of the tabs */
#nav #main1 {
width:3.4em;
}
#nav #main2 {
width:4.6em;
}
#nav #main3 {
width: 4.5em;
}
#nav #main4 {
width:7.85em;
}
#nav #main5 {
width:7em;
}
#nav #main6 {
width:6.8em;
}
#nav #main7 {
width:6.3em;
}
#nav #main8 {
width:5.5em;
}
#nav li {
margin-right: 3px;
border: 1px solid #000;
background: #006600;
color: white;
text-decoration:none;
}
#nav li ul li {
border:none;
background: #006600;
color: white;
text-decoration:none;
}
#nav li ul {
border: 1px solid black;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
And that's the CSS Just in case this will help, here's a link to a test page (just throw together so There is no content other than the menu) http://www.martinlutherchapel.org/test.html |
|||||||