|
CSS - Unordered Lists - Need Some With Graphic And Some With Disc
Hello,
I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is: Code:
ul {list-style-image: url(../img/redarrow.gif)}
But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc. Please let me know if it is possible to code it so that I can have both in a page. Thanks! Similar TutorialsI'm trying to change the list style from 'disc' to 'none' for some sections of my site, and I'm running into problems. The page in question is found at luv . deepwaterchurch . com then click on "Global Partners" I'm trying to hide the discs for the lists in the twitter feed (left column) and the news feeds (inline in the main content) I've tried adding list-style:none to what I think are the appropriate elements in my stylesheet, but nothing is working. I'm sure it's a simple fix, but I can't find it. Take a look at my code... http://www.trinitysql.co.uk/jubilee2005/ Those links at the top are a <ul> with fixed height and width... What I want to do is push the text down to the bottom and make the whole area of the <li> link... Any help you couyld give me would be very much appreciated! Thanks! Hi, Trying to create a menu using <ul> tags and to have a nice spacing between <li> items. I have tried the line-height property but it seems like IE ignores them. Firefox formats the line-height properly. Can anyone help me? Should the line-height be applied to ul or li tags? /Hubba Bubba I can't seem to find any issues of this on the web, or maybe I'm not doing a correct search. here's my problem. I'm creating a horizontal menu with an unordered list <ul> with each <li> tag using a background image. My problem is, in IE (both ie6 & 7), the menu seems to display having a staggered cascading effect. Firefox works great as usual... see screenshot at http://clubsix1.com/images/cascade_effect.png Here's my CSS code: Code:
#masthead ul#mystuffnav {
padding:0;
margin:0;
width:334px;
}
#masthead ul#mystuffnav li {
float:left;
margin-bottom:1px;
clear: both;
}
/* Fancy Buttons, My Stuff Nav */
#masthead ul#mystuffnav a.button,
#masthead ul#mystuffnav a.button:link,
#masthead ul#mystuffnav a.button:visited {
padding:3px 7px 5px;
text-decoration:none;
outline:none;
/*display:block; OQO */
font-size:10px;
float:left;
text-align:center;
margin:0 1px 0 0;
line-height:1em;
}
Help is GREATLY appreciated! =) Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems: *trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down. *getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes). Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project. Thanks in advance, -b Quick question... I am trying to make an unordered list and have the first level have no indent/margin. But I want the second level to be indented 15 pixels. I'm having problems getting this done. Any suggestions? Thanks I am having a problem with a menu generated by a CMS. Basically it generates a series of nested unordered lists for the navigation. It only shows a parents children menu items if you are within that section. The problem is that it still outputs the unordered list and list item elements for the other child menus, but just leaves them blank. Leaving something like this: Code: <ul><li></li> <li></li> <li></li> <li></li> <li></li> </ul> This works fine in Firefox... but of course when you get to IE, it leaves big vertical spaces in the navigation. Unfortunately, I can't attach any IDs or classes to the child UL or LI elements. There is only one ID on the main UL, <ul id="subnav">. So my question is, can anyone think of a way that I can modify my CSS to take out those blank spaces created by empty <ul>s in IE? You can see the page he http://www.holidaytravelincentives.com/index.php/products/air-accommodations/ Here is a menu I am trying to build. I used different background colors to see what sections are doing what. Essentially what I am trying to achieve is that the menu items defined by the <li> (green) tag have text vertically centered in them and be the same height as the ul section (yellow). Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
body { background: black; }
#level0 {
background: red;
clear: both; } /* end #level0 */
#level1 {
background: orange;
width: 957px;
margin: auto; } /* end #level1 */
#level1 ul {
background: yellow;
clear: both;
text-align: right;
border-right: thin solid #cfcfcf;
margin: 0;
padding: 0;
height: 40px; } /* end #level1 ul */
#level1 ul li {
background: green;
line-height: 40px;
font-size: 12px;
padding-top: 13px;
padding-bottom: 13px;
vertical-align: middle;
border-left: thin solid #cfcfcf;
text-align: right;
margin: 0;
color: #9f9f9f;
padding-left: 1em;
padding-right: 1em;
display: inline; } /* end #level1 ul li */
#level1 ul li.active { background: blue; } /* end #level1 ul li.active */
#level1 ul li a {
background: purple;
color: #9f9f9f; } /* end #level1 ul li a */
#level1 ul li a:hover {
background: inherit;
text-decoration: none; } /* end #level1 ul li a:hover */
#level1 ul li.active a:hover {
text-decoration: none;
background: none; } /* end #level1 ul li.active a:hover */
</style>
</head>
<body>
<div id="level0">
<div id="level1">
<ul>
<li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li class="active"><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li><li><a href="#">Careers</a></li><li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
</body>
</html>
What happens is that this version renders as I want it in Safari, one pixel too high in Opera and Firefox, and several pixels too short in IE. What are some things I can try to fix this behavior so that it is consistent (-ly correct ) across browsers? Again for those that have helped me on other threads I greatly appreciate it. I have used CSS before but this is my first time using it for layout and am struggling with it a bit. How do I go about making my unordered list use a image file or the bullet? Code: <ul> <li><a href="#onesweetcoma">One Sweet Coma </a></li> <li><a href="#untitled">Untitled</a></li> <li><a href="#freedomfound">Freedom Found </a></li> <li><a href="#yourwords">Your Words</a></li> <li><a href="#reprise">Reprise</a></li> <li><a href="#cantpullaway">Can't Pull Away </a></li> <li><a href="#sleepingawake">Sleeping Awake</a></li> <li><a href="#wherewestand">Where We Stand</a></li> <li><a href="#echooffthewalls">Echo Off the Walls </a></li> </ul> my image name is bullet.png www.l33tmonkey.com/sun/index.html completely ignoring the image issues, which are next on the list to sort out, I have a problem. I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire. the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS I've got an odd bug in IE7 that's got me completely stumped. I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it. My main page works just fine. Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container. The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on. I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated. eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something. Ok I have created an background image to what i want in a navaigation list, the problem is I need to set the height else the graphic fails to appear and the graphic won't scale to fit inside the area ( end part chops off). #n1 { /* all lists */ // height:50px; background-image:url('green1.gif'); } #n1 ul{ /* all lists */ height:50px; //will fail without? list-style-type:none; // background-image:url('green1.gif'); } #n1 li a{ /* all lists */ float:right; // background-color:yellow; padding-right:5px; text-decoration:none; } <div id="n1"> <ul> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> </ul> </div> Hi there, I have two questions actually. I purchased this web template and am putting in my own logo but running into two problems: 1) I don't know how to adjust the css file to get the logo to move towards the bottom of brown header area (more in line with the nav text) 2) The logo I created looks okay in Internet Explorer, but is showing up as really pixelated in Firefox and I cannot seem to find any reasons why this is occurring. I am including links to the website http://www.kohlrbaby.com/Communicating/index.html and CSS file http://www.kohlrbaby.com/Communicating/default.css , but have put in the exact associated code below: CSS code associated with the logo as far as I can tell: Code: /** LOGO */
#logo {
float: left;
width: 430px;
height: 96px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}
#logo h1 {
display: block;
top: 0px;
left: 0px;
width: 430px;
height: 96px;
}
#logo img {
top: 200px;
left: 0px;
}
#logo p {
margin: -50px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
HTML Code: Code: <div id="logo"> <a href="http://www.communicatingwell.com"><img src="images/CWlogo.gif" height="35" width="300"/></a> </div> I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere! Many thanks for any ideas or help! Can anyone take a minute or two and see if they can figure out why the header graphic on the following page is not aligning properly: Click Here It appears that way in FF, IE6, and IE7... I don;t have time to recode the entire page -- I just need to know what is causing the problem....Try as I might, I don;t see the cause...Maybe conflicting styles? I dont know... Thank you. Hi guys, I'm roughing out a template and wondered if you could please help me with something: In IE the background graphic body-stretch.jpg does not stretch as it does in Firefox, I read around and thought this may be something to do with the peekaboo hack but I couldn't get any of the fixes to work. Any ideas? Also, you will see I have a footer graphic that stretches all the way across the bottom of the page, right now it is outside my "container" div because when placed inside it is restricted to the width of the container and not to the edges of the page. If I change the width of the container to suit it everything gets left aligned. Placing the footer div outside the container means the textual content crosses over it (see page in firefox to see what I mean). Pulling my hair out! Any pointers would be greatly appreciated Code:
@charset "utf-8";
/* CSS Document */
html { background-image:url(images/body-stretch.jpg);
background-repeat:repeat;
}
body { background-image:url(images/header-stretch.jpg);
background-repeat:repeat-x;
/*width:100%;*/
padding:0px;
margin:0px;
text-align: center; /* to centre page pt 1 */
font-family:Arial, Helvetica, sans-serif;
}
a {
color:#b7b977;
text-decoration:none;
}
a:hover {
color:#8e52b6;
text-decoration:underline;
}
#nav {
background-image:url(images/navigation.jpg);
background-repeat:no-repeat;
width:899px;
height:108px;
padding:0px;
margin:0px;
}
#nav a {
font-size:24px;
color:#000;
background-color:#e2b550;
}
#nav a:hover {
font-size:24px;
color:#fff;
background-color:#9755c3;
}
p {
color:#fff;
}
#container {
margin: 0 auto; /* to centre page pt 2 */
width:899px; /* centres stuff but messes up footer if
it's contained within it (which it is */
}
#header {
}
h1 { background-image:url(images/banner.jpg);
background-repeat:no-repeat;
width:899px;
height:242px;
padding:0px 0px 0px 0px;
margin:0px;
text-indent: -9999px;
}
h2 {
font-size:34px;
color:#e1b650;
}
#content { background-image:url(images/body.jpg);
background-repeat:repeat-y;
height:100%;
/*width:899px;
margin: 0 auto;*/
}
#main-content {
float:left;
width:635px;
text-align:left;
padding-left:20px;
}
h2 {
display:inline;
}
#sidebar-content {
float:right;
width:244px;
}
#footer { background-image:url(images/footer-stretch.jpg);
background-repeat:repeat-x;
width:100%;
height:281px;
}
Code:
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Dwardus</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><a name="top">Dwardus Prime - Entertainment Blog</a></h1>
<div id="nav">
<a href="#">HOME</a>
<a href="#">FILM</a>
<a href="#">TELEVISION</a>
<a href="#">MUSIC</a>
<a href="#">VIDEO GAMES</a>
</div>
</div>
<div id="content">
<div id="main-content">
<h2>Welcome</h2>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a>
</div>
<div id="sidebar-content">
STUFF HERE!
</div>
</div>
</div>
<div id="footer">
<p>FOOTER INFO</p>
</div>
</body>
</html>
Hi people I have a graphic which has a specific Hue. I would like to allow users who have IE to change the Hue of that graphic by picking it from a combo-box Is there a way to change the Hue of a graphic in runtime by changing CSS filters or by some other technique? regards Basically I am creating a webpage using the free webhost weebly. I have modified the CSS, and the webpage is getting there, however, I have a problem with the graphics in the background, this is what I mean... [IMG](URL address blocked: See forum rules)[/IMG] Why am I getting this? Why isnt the graphic going all the way up? I also get this at the bottom of the page but only on the right hand side. Anyway heres the html.. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"><html xmlns="(URL address blocked: See forum rules)"><head> <title>%%TITLE%%</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if lt IE 7.]><script defer type="text/javascript" src="/files/theme/pngfix.js"></script><![endif]--></head><body><div id="wrapper-menu-top"><div id="menu-top"> <ul> %%MENUITEMSTART%%<li><a href="%%MENUITEMLINK%%"><span>%%MENUITEMTITLE%%</span></a></li>%%MENUITEMEND%% %%MENUITEMACTIVESTART%%<li class="active"><a href="%%MENUITEMACTIVELINK%%"><span>%%MENUITEMACTIVETITLE%%</span></a></li>%%MENUITEMACTIVEEND%% </ul></div><!--menu-top--></div><!--wrapper-menu-top--><div id="wrapper-header"><div id="header" class="weebly_header"><div id="wrapper-header2"><div id="wrapper-header3"> <h1>%%TITLE%%</h1></div></div></div></div><div id="wrapper-content"><div id="content"> %%CONTENT%% </div><div id="wrapper-footer"><div id="footer"> <p><span id='weeblyFooter'>%%WEEBLYFOOTER%%</span></p></div></div> </body></html> and the css Code: body { font-family: trebuchet ms, verdana, arial, tahoma; font-size: 90%; color: #888; background-color: #CDBA96; line-height: 160%; margin: 0; padding: 0; text-align: center;}/* Set the page width */#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer { width: 768px; margin: 0 auto; text-align: left;}#wrapper-menu-top { background: white url('fff.jpg') no-repeat left top;}#menu-top { background: transparent url('fff.jpg') no-repeat right top;} #menu-top ul { margin: 0 20px; padding: 1em 0 0 0; list-style: none; font-size: 85%; float: left;}#menu-top li { display: inline; float: left;}#menu-top a { float: left; background:url(menuleft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; line-height: 1.5em;}#menu-top a span { background: transparent url(menuright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#5b8fbe; display: block; float: left; cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */} #menu-top a:hover { background-position:0% -42px; } #menu-top a:hover span { background-position:100% -42px; } #menu-top li.active a { background-position:0% -42px; } #menu-top li.active a span { background-position:100% -42px; }#header { background: #eee url('banner_mountains.jpg') no-repeat center top;}#wrapper-header2 { background: transparent url('ds.jpg') top left no-repeat;}#wrapper-header3 { background: transparent url('right1.jpg') top right no-repeat;}#header h1 { margin: 0 25px; padding: 0; height: 192px; line-height: 3em; color: #636363; font-size: 130%;}#wrapper-content { background: white url('left1.jpg') no-repeat left top;}* html #wrapper-content { height: 1%; }#content { background: transparent url('right1.jpg') no-repeat right top; padding: 15px 40px; min-height: 600px; height:auto !important; height:400px;}/*#wrapper-menu-page { float: right; width:10px; margin: 20px 0px 3em 0px; text-align: center; line-height: 140%; font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}* html #wrapper-menu-page { margin-right: 15px; }*/#menu-page { padding-top: 5px; }#menu-page ul { margin: 0; padding: 0; list-style: none; font-size: 90%;}#menu-page h3 { font-size: 75%; text-transform: uppercase; margin: 1em 0 0.3em 0; color: #5b8fbe; font-weight: normal; letter-spacing: 0.15em;}#menu-page a:link, #menu-page a:visited { color: #888; }#menu-page a:hover { color: #5b8fbe; }#wrapper-footer { margin-top: 1em; text-align: center;}#footer { margin: 0 20px; background-color: #e5f0fc; border: 1px solid #ccc; border-bottom: 0; clear: both;}h2 { font-size: 110%; }h3 { font-size: 100%; }a:link, a:visited { color: #5b8fbe; text-decoration: none; }a:hover{ color: #666; text-decoration: none; }
Thanks Hi, This is my first post, and I am grateful for any help. I am new to CSS and I have read and absorbed Simon Collison's very good book "CSS Web Development." My question is quite simple. I have a background-image associated with an ID (shown below) which successfully lays down the image but it does not push text. #mainmenu{ background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position: top center; text-align:left; } ie, my html or php file might read: <div id="mainmenu> <p>Some text blah blah </div> and the text goes right over the image. Is there a "best way" to ensure that the text appears below the image? I can apply a height variable to the id, and then place the text below the /div, which works, but it is not flexible, ie, if I change the size of the image, I need to adjust the height value, and I am trying to avoid this. Any help would be greatly appreciated. Thanks, Pradhan Hello there, I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified. So far I have been able to make the CSS compatible with both firefox and IE. So far I've got Code: <table width="100%" bgcolor="#666666"> <tr> <td> <img src="images/logo.gif"> </td> <td> <div class="menu" style="text-align:center"> <div class="outerFirst"><a href="index.php"><span>Home</span></a></div> <div class="outerFirst"><a href="index.php"><span>Services</span></a></div> <div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div> <div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div> <div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div> <div class="outerFirst"><a href="index.php"><span>About</span></a></div> </div> </td> </tr> </table> and for the CSS Code:
#menu {
height: 54px;
margin: 3em 0; padding:0 1em;
border-bottom: 0px solid black;
}
div.outerFirst {
float: left;
width: 100px; height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
div.outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:100px; height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
div.outerFirst span {
height: 54px;
display: block;
margin:0; padding: 25px 0px 0px 0px;
}
I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it. Any help with the CSS and html (if I've missed something) would be awesome. Thanks! - K I created our site's home page using strictly presentational mark-up and am now trying to lay it out strictly using css. Here is my attempt: jalc.org/index_css.html The graphic on the right-hand side with the word Jazz and the musicians should align with the large center image (just under the drop-down nav). Here is how the page is supposed to look: jalc.org I can't get that image to float right and align with the top of the large image. If anyone has any suggestions I would be most appreciative if you could share. I have spent too much time on this already. I'm going mad. Thanks, Andy |
|||||||