|
CSS - Positioning A List In My Center Column
OK, I'm back for another CSS lesson - this time on lists.
My site is designed with typical three-column layout. The left and right columns are floated and the center column contains most of my content. Sometimes in the center column of a page I want to include a list, either ordered or unordered. This page is a splendid example: http://stallinswebdesign.com/vs/general_OfficersContactInfo.php. I do not yet know how to manipulate the positioning of a list (and lots of other block-level things, truth be told). 1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to the left a wee bit so that it lies about 1em to the right of that left border? 2. Can you share with me a CSS standards-based technique for marking up the first element of a list so that it is left-adjusted and all of the following list elements are indented from it (and I can adjust the amount of indentation), so the list looks like this: Code:
My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
every cyclist knows that orange and black are the fastest colors
any bike that wins Frame of the Year and Bike of the Year is a winner
the frame stiffness is top-shelf, and the power transfer is amazing
Or, if one can do that with semantic markup other than lists, please let me know. Thank you all for looking; I appreciate your effort. Similar TutorialsHello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! Hello, 1st post on this forum. How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered? I would post links to the pages but this forum will not let me. Thanks for the help So I have a page where the content itself will be an 800px wide light column down the center of the page. But the background (to the left and right of the column) I want to be a gradient lightblue. I would usually accomplish this by making the background color lightblue and simply attaching the gradient to the top using CSS. Then I would create a table for the center column and make it the light background color. The problem is that on short pages, I want the center column to extend all the way to the bottom of the page, irregardless of the content. Unfortunately, height="100%" or it's CSS variants don't work for tables, cells, or even DIVS so I can't force the table to extend down to the bottom of the page. The only way it seems I could do this, then, is by using the body background image attribute or body background CSS to make the column color the background for the entire center of the document, but those attributes are already both used up creating the gradient. Any thoughts on how I might go about this. A sample of what I'm getting at is at http://www.poweredpages.com/fdr/index2.php. There, you can see the background gradient and the column that should extend to the bottom, even if there's very little text. Thanks, Jeremy Ok, so I'm really new to this, but I've spent several hours over the last few days tinkering with things but nothing I'm doing works: In my two column CSS layout my left navigational column is stuck hanging out underneath the center column. It looks like this both in IE and Firefox. I've searched around on here and haven't found anything, but maybe I'm not using the right keywords. Any help or suggestions for this newbie greatly appreciated! My html code: 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=us-ascii" />
<title>Art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- begin header -->
<div id="header"><center><img src="logo.jpg" alt="logo" /></center></div>
<!-- end header -->
<!--begin container div - no content should be outside of the container div -->
<div id="container">
<!-- begin main content -->
<div id="center" class="column">
<br />
<img alt="Still Life" src="slc08.jpg" height="391" width="784" />
<h5>Still Life with Colour '08</h5>
</div>
<!-- end main content -->
<!--begin left nav list -->
<div id="left" class="column">
<br />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About the Artist</a></li>
<li><a href="resume.html">Artist's Resume</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
<!--end left nav list -->
<!--close content div -->
</div>
<!--begin footer information -->
<div id="footer">
<center><p class="foot">Copyright 2008</p></center>
</div>
<!-- end footer information -->
</body>
</html>
My CSS Code: Code: body{
background-color: White;
font-size: 16px;
margin: 0;
padding: 0;
}
#header{
background-color:#333;
height:150px;
}
#container {
padding-left: 200px; /* LC width */
padding-right: 100px; /* RC width */
}
#left{
float:left;
width:200px;
background-color:#afeeee;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#center {
background-color:#ffffff;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color:#48d1cc;
height:100px;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
ul.nav {
list-style: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: large;
}
ul.resume {
list-style: disc;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
line-height: 1.3em;
}
#left a {
border-bottom: 1px solid #333;
border-top: 1px solid #333;
display: inline;
font-family: tahoma,verdana,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 2.75em;
margin: 0;
margin-right: 2px;
text-align: center;
text-decoration: none;
}
#foot {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
}
Please forgive me if this is just a stupid mistake, I'm pretty much a CSS newbie. I generated a CSS menu (http://www.webmaster-toolkit.com/css-menu-generator.shtml) and inserted it into my CSS file. The menu is ok, but it pushed my center column down so that it only touches at a corner, when it should be leveled up and touching along the side. Here's the relevant code: Quote: #c-col{ position: relative; margin: 0px 74px 20px 180px; border: 1px solid #003366; background: #333366; color: #CCFFFF; padding: 20px; z-index: 3; } .buttonscontainer {width: 174px;} .buttons a {color: #333366; border: 1px solid; background-color: #336699; padding: 2px; padding-left: 3px; font: 12px Arial, sans-serif; font-weight: bold; text-decoration: none; border-color: #9999CC #333366 #333366 #9999CC; display: block; margin: 0px; width: 100%; text-align: left;} .buttons a:hover {border: 1px solid; padding-left: 4px; padding-top: 3px; padding-bottom: 1px; padding-right: 1px; background-color: #6666CC; border-color: #333366 #9999CC #9999CC #333366; color: #333366; text-decoration: none;} Have I inserted it in the wrong place or is there something missing/redundant? I'd appreciate any suggestions. Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it. Please anyone help me. You can see the page at: http://www.galakse.no/test/index.php/tscm/news The css is located he http://www.galakse.no/test/design/tscm/stylesheets/tscm.css Any and all help is very much appreciated! Thank you! Hey all, I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems. If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column. This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned. If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first. One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation? Thank you for your time. i want to position a div 383 pixels left of the center of my browser. i've tried using left:50% and a negative margin..anyone have suggestions on things to try? I have the following page. I need the image and all the ajax to be centered on the page, no matter how the user resizes it. I've tried several different methods, but it always seems to screw up the positioning of the ajax buttons. hello Is it possiable to position an image absolutly using its center as a the measurement refrence as opposed to the upper left corner. If so how would I do this. Thanks Nick Carlevaris Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! I'm embedding menumatic into a joomla 1.6 based website. Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page. Anybody have any ideas about how i can do this? (In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work ) below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment. Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think). Anybody have an idea about how to get around this? I tried to justify the text (that would be fine for my purposes), but it didn't work either. CSS: Code:
#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/
/* ----[ LINKS ]----*/
/* all menu links */
.menuMain a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#036 ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
margin:0;
float:left;
color:#fff;
}
/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
}
/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#06c ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
.menuMain a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
background-color:#06c ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin:0 20px 0 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#036;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
.menuMain li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
margin:0 5px;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
.menuMain{
display:block;
list-style:none;
margin-top:0px;
margin-bottom:0px;
margin-left:40px;
margin-right:auto;
z-index:5;
text-align: center;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{ float:none; }
.menuMain li li a{ /* Just submenu links*/
position:relative;
float:none;
}
.menuMain li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
.menuMain li:hover ul{ margin-left: 0; }
.menuMain li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul { margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }
The menu html (an excerpt) Code: <html> <head> <link rel="stylesheet" href="MenuMatic.css" type="text/css" /> </head> <body> <div id="mainMenu" style="width:950px;"> <ul class="menuMain"> <li id="item-101" class="current active"><a href="/ottest/" >Home</a></li> <li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a> <ul> <li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li> </ul> </li> <li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li> <li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li> <li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li> <li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li> </ul> </div> </body> </html> First let me say that I understand why people are using the div / css layer driven table formatting for creating thier column & row layouts. When you place things in a div layer and position them with the css you can control the complete position and look from just the css file. Unlike a table, where everything is restricted to the positioning of the table layout. WOW AWSOME! Now, let me say that for the past 18 hours I have seen nothing but utter bull**** spit out in css. For the past 3 years I have been doing professional web design and for the past 3 years all the design that has come from me has been done (for the most part) in table data. Now, I use CSS a lot, so dont get me wrong... But for positioning and mimicing table layout I have never really gotten into it. Recently we got into a new project that may become very large and my need much updating and changing. The lead programmer of the company suggested to the boss that it all be laid out in div layers controlled by css. So, that means that I have to do it. Great, not such a big deal, but the layout they want and the browsers they want it in I just dont see happening. The layout is as so: Code:
|1-| |2---| |3-|
| | | | |--|
|--| | |
| | |4-|
|5-| |----| |--|
| | |6--| |7--|
|--| |---| |---|
If that makes any sense to you. Now, not only does it have to conform to all the browsers, it also has to work with Dreamweaver so they can easily manage content, and... Not to mention that it has to work with the new IE 7 when it comes out. Now, I have searched and searched for methods on how to make the layout like I described above, and nothing! I keep finding these hacks that will be obsolete in IE7! And, none of this **** renders correctly in Dreamweaver. My boss is on my tail all day hasseling me for updates. Its almost time for bed yet and I am still stuck in this same situation! Why does the layout even need to be in this css positioning anyways? It seems to me that if the website is developed correctly, with includes and all tha bit, than using css for positiong is completly pointless! NOTHING renders the same between IE and Mozilla browsers, NOTHING! Im so frustrated right now I will probably get fired for this **** tomarrow because I told the boss I would have it for tomorrow not realizing that css sucked the big one. If anyone could tell me a place that would make magical css div positioning in all browsers and Dreamweaver for multicolumn & row support please let me know. I dont think it exists, and I think I will try to convense my boss to just use table code. CSS positioning is trash, if it isnt the floats loosing the order, the borders rendering on the outside of explorer, the 1px center graphic positioning, or the rest of the junk that causes me to loose my cool with css, its going to be the lame creation of table formatting that makes me bash my computer into the ground. Anyways, thanks... I hate divs Hey, I'm trying to make a 3-column layout, and I'm having troubles with IE positioning the 3rd column. The address is URL . I have no problems trying to make one where the middle column is the "main" one, but for some reason it is working out now. Also, if possible, I'm also trying to put in a footer image that will cover the whole part of the bottom (from the far left of the browser to the far right of the layout. It's perfectly fine in Firefox, but IE looks bad Thx P.S. here's an image of my problem, since it might look different when someone looks at it as i might still be screwing around w/ it <img src="http://img.photobucket.com/albums/v411/mflotron91/problem.jpg"> hi guys, i was wonering if it was possible to do the following: Say i have three columns, and i want to list category names (dynamically from a database). how would I make it so the first 'column' would stay at a fixed height and forward the next category name into the top of the next column? I know this is an odd question. ebay has a working example of what I'm trying to achieve here. if you view all categories you will see they have 3 columns, and the categories flow through each of the three. i have a feeling the solution to this might be quite easy, but i just haven't found it. anyone know how to do this? I have a list of items and I want to have them in several columns. I will have them in 3 or 4 columns or have it have a set size, like 200px width and have it adjust for the screen resolution. I set the width on the li or a and that does noting. How do i set the width without having to use block? Thanks <ul id="galleryList"> <li><a href="/galleries/index/3">Futurama</a> <li><a href="/galleries/index/4">Simpsons</a> <li><a href="/galleries/index/5">Family Guy</a> <li><a href="/galleries/index/8">Aqua Teen Hunger Force</a> ... </ul> #galleryList { margin: 0px; padding: 0px; display: inline; float:left; } #galleryList li { margin-left: 2px; padding-left: 0px; display: inline; list-style: none; } #galleryList li a { display: inline; margin-left: 0px; padding-left: 0px; background-color: #cccccc; } I cannot get IE6 or 7 to display bullets when using a nested 2 column list. Can it be done or must I use images? Firefox, Opera and Safari work as expected. Hey guys... Now i'm obcessed with CSS, i've def got the bug! I have a list of bullets, using <ul> and <li>. Now rather than have one column, i want two columns, spaced evenly. Now before i would just add a table, but i dont want to, as they are evil! So now i wanted to use CSS? Now currently the list is housed in a <div class='displaybox'>, with the CSS as below. So i could just add a table inside (ie 1 row, 2 cols) and then add the list elements to each side. or is it correct to use a table in this instance? Charlie I'm trying to create a 3 column layout where all the columns are contained within 1 larger <div>. So far I've managed to create 3 columns using absolute positioning that dont allow the back-ground image of the containing <div> to show through. If I use relative positioning, the background-image shows, but the columns are set relative to one another and they stagger from left to right in a diagonal fashion. I can correct it using negative values for the "top" attribute, but it seems bushleague and its incredibly tedious. Is there anyway I can have 3 PROPER (not using the above method) columns while also having the largest containing div's back-ground image show through them? The following gives me the staggered layout: Code:
.leftColumn{
margin-left:20px;
width:100px;
border:thin dotted #999999;
}
.middleColumn{
margin-left:121px;
width: 450px;
border:thin dotted #999999;
}
.rightColumn{
margin-left:572px;
width: 200px;
border:thin dotted #999999;
}
.main{
left:200px;
width: 950px;
background-image: url(Images/PaperBkg.gif);
background-repeat:repeat-y;
}
<div class="main">
<div class="leftColumn">
</div>
<div class="middleColumn">
</div>
<div class="rightColumn">
</div>
</div>
Thanks guys. Hi, I am very new to CSS and very confused. I wrote my site about 10 years ago using tables and have been working very hard the last few weeks updating the code to CSS and XHTML. I have a navigation page that was made as a table using an image to replace the bullet and act as the link. I am having a terrible time rewriting the blasted thing without using a table. The columns will not line up (I suppose I do not understand how to use the negative margin properly) and when I try to use the clear: left; code so my bullet image lays properly it will only clear the bottom of the previous column so there is a giant gap in between the links. I have no idea what I am doing. Here is a link to what the page looks like using the old code. This page will NOT validate, the code is old and depreciated but if you have a peek you can se what I am trying to achieve. www.medeaslair.net/myths.html. Here is what I wrote but I am afraid it is very long. I apologize in advance for how bad it is. CSS 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=iso-8859-1" />
<title>Tableless Three Column List</title>
<style type="text/css">
<!--
body {
color: black;
padding-top: 45px;
background-image: url("images/tan_marble3.jpg");
text-align:center;
font-family: papyrus;
font-weight: bold;
font-size: 15px;
}
#container {
width: 750px;
margin: 0 auto;
text-align:left;
}
li.col1a, li.col1b, li.col1c, li.col1d, li.col1e, li.col1f, li.col1g, li.col1h, li.col1i, li.col1j, li.col1k, li.col1l, li.col1m, li.col1n, li.col1o, li.col1p, li.col1q, li.col1r, li.col1s, li.col1t, li.col1u, li.col1v {
margin-left: 0;
}
li.col2a, li.col2b, li.col2c, li.col2d, li.col2e, li.col2f, li.col2g, li.col2h, li.col2i, li.col2j, li.col2k, li.col2l, li.col2m, li.col2n, li.col2o, li.col2p, li.col2q, li.col2r, li.col2s, li.col2t, li.col2u, li.col2v, li.col2w, li.col2x, li.col2y, li.col2z {
margin-left: 18em;
}
li.col3a, li.col3b, li.col3c, li.col3d, li.col3e, li.col3f, li.col3g, li.col3h, li.col3i, li.col3j, li.col3k, li.col3l, li.col3m, li.col3n, li.col3o, li.col3p, li.col3q, li.col3r, li.col3s, li.col3t {
margin-left: 34em;
}
.coltopper {
margin-top: -51em;
}
#listyles {
display: block;
padding-top: 45px;
margin: 0;
width: 100%;
list-style-type: none;
}
a:link {
color: #06f;
text-decoration: none;
}
a:hover {
color:#f00;
text-decoration: none;
}
image {
border-style: none;
}
li.col2a, li.col3a {
margin-top: -51em;
}
#listyles li {
line-height: 1.5em;
}
h1 {
text-align: center;
}
#email {
text-align: center;
text-decoration: none;
padding-top: 35px;
border: 0;
}
-->
</style>
</head>
The HTML Code: <body> <div id="container"> <img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" /> <img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" /> <h1>Tales of Greek Mythology</h1> <img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" /> <br /> <ul id="listyles"> <li class="col1a"><u>Gods and Goddesses</u></li> <li class="col1b" style="padding-top: 10px;"><a href="aphrodite.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Aphrodite</li> <li class="col1c" style="clear: left;"><a href="apollo.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Apollo</li> <li class="col1d" style="clear: left;"><a href="artemis.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none:" alt="grapes""></a>Artemis</li> <li class="col1e" style="clear: left;"><a href="athena.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Athena</li> <li class="col1f" style="clear: left;"><a href="dionysus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Dionysus</li> <li class="col1g" style="clear: left;"><a href="hades.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hades</li> <li class="col1h" style="clear: left;"><a href="hera.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hera</li> <li class="col1i" style="clear: left;"><a href="hermes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hermes</li> <li class="col1j" style="clear: left;"><a href="poseidon.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Poseidon</li> <li class="col1k" style="clear: left;"><a href="zeus.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Zeus</li> <li class="col1l" style="padding-top: 30px;"><u>Tales of Love and Woe</u></li> <li class="col1m" style="padding-top: 10px;"><a href="hermes.html#baucis"> <img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Baucis and Philemon</li> <li class="col1n" style="clear: left;"><a href="cupid.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Cupid and Psyche</li> <li class="col1o" style="clear: left;"><a href="pan.html#echo"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Echo and Narcissus</li> <li class="col1p" style="clear: left;"><a href="pan.html#endymion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Endymion</li> <li class="col1q" style="clear: left;"><a href="artemis.html#orion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orion</li> <li class="col1r" style="clear: left;"><a href="orpheus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orpheus and Eurydice</li> <li class="col1s" style="padding: 30px;"><u>Giants and Beasts</u></li> <li class="col1t"><a href="artemis.html#otus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Otus and Ephialtes</li> <li class="col1u" style="clear: left;"><a href="minotaur.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"alt="grapes"></a>The Minotaur</li> <li class="col1v" style="clear: left;"><a href="cyclopes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Cyclopes</li> <li class="col2a coltopper"><u>Men and Heroes</u></li> <li class="col2b" style="padding-top: 10px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Agamemnon</li> <li class="col2c" style="clear: left;"><a href="atreus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"></a>Atreus</li> <li class="col2d" style="clear: left;"><a href="daedalus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Daedalus and Icarus</li> <li class="col2e" style="clear: left;"><a href="athena.html#erichthonius"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erichthonius</li> <li class="col2f" style="clear: left;"><a href="heracles.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Heracles</li> <li class="col2g" style="clear: left;"><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hyacinthus</li> <li class="col2h" style="clear: left;"><a href="hera.html#ixion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Ixion</li> <li class="col2i" style="clear: left;"><a href="atreus.html#orestes"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orestes</li> <li class="col2j" style="clear: left;"><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pentheus</li> <li class="col2k" style="clear: left;"><a href="perseus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Perseus</li> <li class="col2l" style="clear: left;"><a href="phrixus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Phrixus <li class="col2m" style="clear: left;"><a href="pandora.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Prometheus</li> <li class="col2n" style="clear: left;"><a href="hades.html#sisyphus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sisyphus</li> <li class="col2o" style="clear: left;"><a href="atreus.html#tantalus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Tantalus</li> <li class="col2p" style="padding-top: 30px;"><u>Tales of the Sea</u></li> <li class="col2q" style="padding-top: 10px;"><a href="sea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sea Myths</li> <li class="col2r" style="clear: left;"><a href="circe.html#glaucus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Glaucus and Scylla</li> <li class="col2s" style="clear: left;"><a href="sea.html#nereus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nereus</li> <li class="col2t" style="clear: left;"><a href="sea.html#sirens"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Sirens</li> <li class="col2u" style="clear: left;"><a href="sea.html#triton"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Triton</li> <li class="col2v" style="padding-top: 30px;"><u>Tales of Interest</u></li> <li class="col2w" style="padding-top: 10px;"><a href="garden.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: 4px;" alt="grapes"></a>Mythic Garden</li> <li class="col2x" style="clear: left;"><a href="samhain.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Blessed Samhain</li> <li class="col2y" style="clear: left;"><a href="thor.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Thor</li> <li class="col2z" style="clear: left;"><a href="links.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Links and Credits</li> <li class="col3a coltopper"><u>Women and Witches</u></li> <li class="col3b" style="padding-top: 10px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Alcmene</li> <li class="col3c" style="clear: left;"><a href="athena.html#arachne"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Arachne</li> <li class="col3d" style="clear: left;"><a href="circe.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Circe</li> <li class="col3e" style="clear: left;"><a href="dionysus.html#erigone"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erigone</li> <li class="col3f" style="clear: left;"><a href="zeus.html#europa"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Europa</li> <li class="col3g" style="clear: left;"><a href="zeus.html#io"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Io</li> <li class="col3h" style="clear: left;"><a href="zeus.html#leda"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Leda</li> <li class="col3h" style="clear: left;"><a href="leto.html"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>Leto</li> <li class="col3h" style="clear: left;"><a href="medea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Medea</li> <li class="col3i" style="clear: left;"><a href="leto.html#niobe"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Niobe <li class="col3j" style="clear: left;"><a href="pandora.html#pandora"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pandora</li> <li class="col3k" style="clear: left;"><a href="persephone.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Persephone</li> <li class="col3l" style="clear: left;"><a href="dionysus.html#semele"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Semele</li> <li class="col3m" style="clear: left;"><a href="pan.html#syrinx"><img src="images/grape.gif" style="float: left; text-alogn: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Syrinx</li> <li class="col3n" style="padding-top: 30px;"><u>Satyrs and Centaurs</u></li> <li class="col3o" style="padding-top: 10px;"><a href="chiron.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Chiron</li> <li class="col3p" style="clear: left;"><a href="dionysus.html#midas"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>King Midas</li> <li class="col3q" style="clear: left;"><a href="apollo.html#marsyas"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Marsyas</li> <li class="col3r" style="clear: left;"><a href="chiron.html#nessus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nessus</li> <li class="col3s" style="clear: left;"><a href="pan.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pan <li class="col3t" style="clear: left;"><a href="chiron.html#peirithous"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Peirithous</li> </ul> </div> <!-- end of container div --> </body> </html> |
|||||||