Bottom align menu on public site using CSS

I am working on the design of a public site and am attempting to get the navbar menu to bottom align so that it sits neatly
on top of the content zone below and is bottom aligned with my logo. I'd like to accomplish this using CSS. You can see the public site here to get an idea of what I'm trying to accomplish: www.threebearsrealty.com
I've already determined that I can use the css below to align the logo and text on top of the slider zone, but it then cuts off the top of the logo.
.navbar-header {margin-top: -60px !important;} //aligns logo and txt and menu, but cuts off top of the logo

Hi,
According to your description, you might want to bottom align the logo and the navigation menu without cutting off the top of the logo.
As a workaround, you can set the “margin-top” attribute of the navigation menu to lower it to align the logo.
You can apply a CSS rule(this highlighted part in yellow) like this and the page would look as below:
Best regards,
Patrick
Patrick Liang
TechNet Community Support

Similar Messages

CSS Menu in Wordpress site

I am attempting to update a menu in a Wordpress site using CSS. I would like to have a repeating background image for each list item that is currently active and on hover, as I have done below. The problem is the image, although 50px high, only shows as the font size (14x) and only shows for the length of the characters. I need to figure out how to force the image to display full height and give some left and right padding.
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
height: 50px;
#menu li {
display: inline;
#menu a {
color: #1f2320;
font-size: 14px;
margin-left: 20px;
font-weight: bold;
#menu a:link {
#menu a:hover {
color: #679800;
text-decoration: none;
#menu li a:hover {
color: #679800;
text-decoration: none;
background-image: url(menu_over.jpg);
background-repeat: repeat-x;

Hi Nancy; I fixed the borders issue, but cannot seem to get over the fact that everytime I add the full height (50px) for the line height, all that happens is the links are pushed down several pixels. There must be something in the Wordpress theme CSS that's making this happen. I rarely build CSS menus from scratch...
This works fine, but the borders, backgrounds, etc. only extend the height of the font:
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
margin-left: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFC315;
line-height: normal;
#menu li {
display: inline;
line-height: 100%;
#menu li a {
height: 50px;
border-right-width: 1px;
border-right-style: solid;
font-size: 14px;
font-weight: bold;
border-right-color: #ffc315;
color: #262927;
padding-right: 9px;
padding-left: 9px;
#menu a:link {
#menu a:hover {
color: #679800;
#menu li a:hover {
color: #679800;
The full CSS file looks like this, and contains some strange things I suppose are WP-oriented:
Theme Name: Subway
Theme URI: none
Description: site
Tags:
Author: me
Author URI:
Latest updated:
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
/* remember to define focus styles! */
:focus {
outline: 0;
body {
line-height: 1;
color: black;
ol, ul {
list-style: none;
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
caption, th, td {
text-align: left;
font-weight: normal;
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
blockquote, q {
quotes: "" "";
/* END CSS RESET */
html{ background-color:#262927; font-family:Tahoma, Arial, Helvetica, sans-serif}
#wrapper{margin:0px auto; margin-top:20px;background-color:#181B19; width:960px; border:1px solid #383C37;
font-family: 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;}
#header{
background-image:url('banner.jpg');
width:920px;
height:312px;
background-repeat:no-repeat;
padding-top:10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
margin-left: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFC315;
line-height: normal;
#menu li {
display: inline;
line-height: 100%;
#menu li a {
height: 50px;
border-right-width: 1px;
border-right-style: solid;
font-size: 14px;
font-weight: bold;
border-right-color: #ffc315;
color: #262927;
padding-right: 9px;
padding-left: 9px;
#menu a:link {
#menu a:hover {
color: #679800;
#menu li a:hover {
color: #679800;
#blog-title,#blog-description{margin-top:10px;margin-left:10px;}
#blog-title *{color:white; text-decoration:none}
#blog-description *,#blog-description{color:#DDDCD2;}
.sidebar{float:right; width:300px;margin-right:20px;margin-bottom:19px; color:#C1BCAC; background-color:#1f2320; border:1px solid #262927;padding:10px 0px 10px 0px;}
#container{float:left; width:580px; margin-left:20px; color:#C1BCAC; font-size:1.1em;margin-bottom:19px;}
#container blockquote{margin:0;padding:5px;background-color:#1f2320; border-top:1px solid #262927;border-bottom:1px solid #262927;}
#container blockquote blockquote{margin:0px 10px;padding:5px;background-color:#1f2320; border-top:1px solid #262927;border-bottom:1px solid #262927;}
.post {padding-bottom:30px;}
.clearboth{clear:both;}
.page-link{clear:both;width:100%;}
/* -----| Typography |--------------------------------------------------- */
a{color:white; text-decoration:none;}
a:hover{text-decoration:underline;}
h1, h2, h3, h4, h5, h6, #container blockquote, .entry-date,#wp-calendar caption {margin-bottom:0.8em; font-family: Georgia, 'Times New Roman', serif; font-weight: normal; margin-top:0px; padding-top:0px;line-height:1.3em;}
h1{
font-size:1.7em;
display: none;
h2{font-size:1.4em;}
h3, #wp-calendar caption{font-size:1.2em;}
p, #container li{margin-bottom:0.9em;margin-top:0.5em;line-height:1.7em;}
blockquote p{margin-bottom:0.5em;}
#container ul{ list-style-type:disc;padding-left:2em;}
#container ol{ list-style-type: decimal;padding-left:2em;}
.day{font-size:2em; color:white;}
#container h1{
color:#ffc315;
border-bottom:1px solid #262927;
margin-bottom:20px;
display:block;
#container h1 a,#container h2 a{
color:#ffce15;
padding-bottom:10px;
display:block;
text-decoration:none;
#container h1 a:hover,#container h2 a:hover{background-color:#262927;}
h2,h3,h4,h5,h6{
color:#ffce15;
.author{padding-bottom:5px;}
#container h2 a{border-bottom:1px solid #262927;}
#container .entry-meta{border-top:none;clear:both;line-height:1.4em;padding-bottom:10px;}
.entry-content{clear:both;}
/*DATE*/
.entry-date{float:right;border:1px solid #262927; background-color:#262927;padding:2px 5px 2px 5px;margin:0px 0px 10px 10px;}
.entry-date *{text-align:center;}
.sidebar ul, .sidebar ul li{list-style-type:none; padding:0;margin:0}
.sidebar ul{margin:0px 20px 0px 20px;}
.sidebar ul ul{margin:0px;}
.sidebar ul li{margin-bottom:15px;margin-top:15px;}
.sidebar ul li ul li{margin-bottom:5px;margin-top:5px;}
#wp-calendar, .calendar_wrap{width:100%; text-align:center;}
#wp-calendar caption{
color:#ffc315;
#wp-calendar td,#wp-calendar th{text-align:center;}
#wp-calendar th{font-weight:bold;}
#wp-calendar a{
color:#ffce15;
background-color:#181B19;
border:1px solid #262927;
display:block;
text-align:center
#wp-calendar a:hover{
color:#ffce15;
background-color:#262927;
display:block;
border:1px solid #262927;
text-decoration:none;
#footer{margin:10px auto; font-size:0.7em; padding:5px 0px 5px 0px; width:920px; color:#666666; text-align:right}
#footer a{color:#666666;}
.meta-sep{color:#333333;}
.nav-previous{float:left; width:45%;}
.nav-next{float:right; width:45%; text-align:right;}
.nav-previous a, .nav-next a{
display:block;
padding:3px;
color:#ffce15;
background-color:#1f2320;
border:1px solid #262927;
.nav-previous a:hover, .nav-next a:hover{ background-color:#262927; color:white; text-decoration:none;}
.navigation{margin-bottom:20px;margin-top:20px;}
.entry-meta{border-top:1px solid #262927;margin-top:20px;padding-top:10px;}
abbr{border:none;}
#s{border:1px solid #262927; background:#181B19; width:180px; color: #C1BCAC;padding:3px;}
#searchsubmit{border:1px solid #262927; width:50px;background:#262927; color:#C1BCAC;padding:3px;}
#searchsubmit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
#noresults-s,#comment{border:1px solid #383C37; background:#262927; width:180px; color: #C1BCAC;padding:3px;}
#comment{width:450px;}
#noresults-searchsubmit{border:1px solid #262927; width:50px;background:#262927; color:#C1BCAC;padding:3px;}
#submit{border:1px solid #262927; background:#262927; color:#C1BCAC;padding:3px;margin-top:5px;}
#noresults-searchsubmit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
#submit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
.alignright{float:right; margin:10px 0px 5px 10px;}
.alignleft{float:left; margin:10px 10px 5px 0px;}
.aligncenter{margin:10px auto;}
.avatar{float:right; padding:5px; border:1px solid #999999; background-color:#FFFFFF;}

Old non-CSS site. Problems using CSS now.

I have a site that was built with GoLive years ago. It has
TONS of e-commerce form/store stuff on most of the pages. I quit GL
a few years ago and moved all my sites over to DW CS3. It wasn't
super smooth, but I eventually got it setup as a DW site and went
on with it.
Then CSS came in, and I learned how to build sites with it.
My problem is that this old site (www.webriggingsupply.com) is a
mess of inconsistency with fonts, font sizes, etc. On a page,
within one table of store data, there might be 2 different fonts,
and 3 sizes, when all should be the same font/size.
Due to the sheer number of pages and tables, there is simply
no way I can start over with a new site.
I tried to use CSS to style the new site, but the old
attributes are still in place.
Any suggestions? I could copy/paste a page into a new site,
but how do I strip out all the old font formatting? I tried it, and
it comes in the new site just like the old site? I'm
stuck!!!

To remote deprecated code and other tags from legacy sites, I
use a handy
little extension called Tag Stripper 2.1 which runs from the
Command menu in
DW.
It quickly removes unwanted <tables>, <fonts> and
other tags in one pass...
You can download it here (scroll down; it's 3rd from the
bottom):
http://www.feedage.com/feeds/1633172/massimo-foti--dreamweaver-goodies
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"synterx" <[email protected]> wrote in
message
news:gdahng$lq5$[email protected]..
> I have a site that was built with GoLive years ago. It
has TONS of
e-commerce
> form/store stuff on most of the pages. I quit GL a few
years ago and moved
all
> my sites over to DW CS3. It wasn't super smooth, but I
eventually got it
setup
> as a DW site and went on with it.
>
> Then CSS came in, and I learned how to build sites with
it. My problem is
that
> this old site (www.webriggingsupply.com) is a mess of
inconsistency with
fonts,
> font sizes, etc. On a page, within one table of store
data, there might be
2
> different fonts, and 3 sizes, when all should be the
same font/size.
>
> Due to the sheer number of pages and tables, there is
simply no way I can
> start over with a new site.
>
> I tried to use CSS to style the new site, but the old
attributes are
still in
> place.
>
> Any suggestions? I could copy/paste a page into a new
site, but how do I
strip
> out all the old font formatting? I tried it, and it
comes in the new site
just
> like the old site? I'm stuck!!!
>

Metadata for podcast content files not loading when using Public Site Mgr.

Metadata entered via QickTime for video files does not stay with thge file when it is uploaded for our iTunes U site via the Public Site Manager.

Please note that Java and Javascript are not related. iWeb uses a lot
of Javascript, not Java. There may be some issues with the Javascript
generated by iWeb -- I don't know. If it seems to work for someone
and not for someone else then it is an issue at the browser end, not
the website end. Each browser may not be handling the Javascript in
exactly the same way. (You gotta love standards.)
Dave

Site examples of using css to design for smartphone, tablet, projection

Hi,
Can anyone recommend a site that uses css to design for different platform using css. Not a standalone mobile site, but one where the existing site uses jquery to show the sites differntly.
I saw a video of it using cs5.5 and it seems to be the way forward, but would love to see how others designed/structured their sites to use this technology.
Cheers
Dave

Hi
The best place to view demo's regarding the jQuery mobile framework is the official site at - http://jquerymobile.com/. But remember designing and building a site specifically for mobiles, (tablet/mobile/cell devices) is no longer a completely different process to a normal site and all smart-phones can now display a normal desktop web site as good as a desktop pc, (and when it comes to html5/css3 even better).
The use of redirects for mobile devices is now an old outdated recommendation, and is the equivalent of saying to any tablet/smart-phone user, "Use IE7 or go-away", so unless you are mainly targeting pre-2008 devices do not bother, (Google and similar do this because they are covering 'all' devices and present a very simple page design which convert to mobiles without much difficulty). It is now a more widely accepted method to use media-queries to display a link to a mobile specific site, that is hidden on larger displays.
Do not get hung-up as some do on this site with the iPhone, it is only one of the devices that must be targeted, and is not even the most popular having a smaller market share than Android powered devices, (I personally use the iTouch, (which has the same web capabilities as the iPhone) and the Samsung Galaxy S2 for my personal testing, then SDK's and 3rd party testing services for other devices) a popular blog with many links that is specific to mobile development is - http://www.visionmobile.com/blog/.
With regards to testing on mobiles, you do not require a iPhone specifically, and if you are on the mac you can download the SDK for accurate testing, (but then what does one do for all the other devices?) and the true mark of a professional, (which I do not claim to be, my clients may, but I do not, and anyone saying they are whilst 'insulting' others must be viewed with suspicion, as inter-personal skills are also part of any designers/developers necessary skills) is knowing that you must test on all popular OS's and devices, (similar to browsers, and just testing on the iPhone is like just testing your site in IE8 and ignoring everything else) so for setting up a local testing suite see - http://www.mikebrittain.com/blog/2010/01/31/browser-testing-for-mobile-web-applications/, and/or you can also use a 3rd party service such as - http://www.deviceanywhere.com/.
For a number of tutorials on using CS5/5.5 for developing mobile site see, - http://www.adobe.com/devnet/devices/mobile-web.html.
PZ

Institutions using the Public Site Manager?

I'm just getting into the Public Site Manager, and would love to see what other institutions are doing with it. If you are using the Public Site Manager, please post a link to your iTunes U store in this discussion thread.

I am with Grand Valley State University.
Here is our link: http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewiTunesUInstitution?id=3862 50983
Thanks
Jake

I can use GetDailyReportLogs API in my iTunes U Public site ?

I need reports daily, I can use GetDailyReportsLogs API in my iTunes U public site ?

Ditto, help needed =)

Can I register iTunes U Public Site Manager using US Virtual Office Address?

Can I register iTunes U Public Site Manager using US Virtual Office Address?
I am from Indonesia and really wants using iTunes U to distribute our course and materials to our student who using ipad/iphone.
We are an Education Organization that provides a free education material to k-12 in Indonesia.

Sorry but no. Your institution must be actually in one of the countries where iTunes U is available. You would need to enter into a service agreement with Apple and they would almost certainly reject your application once they learned that your institution is actually in Indonesia.
Regards.

I cannot Publish my site after using the Publish Public Site Manager. An error, with no explanation is returned.

The problem we’re having has to do with transitioning our existing Easter I Tunes U site over to an iTunes U Public site as the instructions below tell us to do.
-          I can access the itunes U Public Site Manager fine with my ID.
-          I was able to make some changes to our existing site to get it ready for publishing it to the iTunes U public site format.
-          I can preview our existing site as a new Public Site fine from within the Public Site Manager application.
-          However, when I try to Publish it I get an error that says :   An error has occurred during the publishing of your content. Try again
Looking for some support to tell me what we’re not doing correctly to migrate our existing site over.
Nick
From: Jay McSweeney [mailto:[email protected]]
Sent: Monday, October 10, 2011 9:07 PM
To: Messina, Nicholas A. (Media Services)
Subject: Re: iTunes U
Nick
Here are the answers
Eastern CT State University is no longer in the iTunes U directory .    r
The have not migrated their site to iTunes U Public Site Manager. Starting June 2010 we notified all iTunes U site administrators for any site in the iTunes store that they would need to migrate their existing site to iTunes U Public Site Manager in the future. In Feb. 2011 we notified them that the deadline for migration would be April 2011 and that if they had not migrated their site would no longer appear on the list.
For Eastern CT State University to return to the list, they just need to transition over to an iTunes U Public Site Manager based site. Information on how to do so can be found here -http://deimos.apple.com/rsrc/doc/UsingiTunesUPublicSiteManager/CommonQuestions/c hapter_14_section_2.html#//apple_ref/doc/uid/iTUPSM-CH5-SW2

Nick Good ?uestion!
I am the New Admin for The University of New Orleans, and after reading the response to your initial question I think we fall into the category of needing to migrate to Public site manager. But looking at the tutorial which is mainly text, I cannot follow the instructions. Do you have a screen shot of what step two because I cannot find the " iTunes U Public Site Manager in the Tools area."
Thank you!
Message was edited by: LimonNoire

How to use Cross-Site Publishing to publish content on Internet public site?

Hi All,
I have already build a site designed for anonymous access from Internet. Because the requirements were to enable SEO friendly URLs I have to enable Managed Navigation. This feature is not compatible with Content Deployment. So, I cannot deploy content from
staging server to production anymore. I am looking at Cross-Site Publishing option but I could not find a way how I can publish Master Pages an Layouts to Publishing site. Also all pages were created in Pages document library. I do not want to rebuild a site
from scratch.
Is there any way to publish exist site build in classical SharePoint way Master Page-Layout Page-Publishing Page to Publishing site using Cross-Site Publishing feature?
Oleg

Hi Oleg,
What do you want to do with the master pages and publishing pages after publishing them to the publishing site?
Cross-site publishing is used to show the content from authoring site collection to publishing site collections.
If you want to show the master pages or publishing pages in publishing site collections, you can use cross-site publishing feature to achieve this goal.
http://blogs.technet.com/b/tothesharepoint/archive/2013/02/19/an-introduction-to-cross-site-publishing.aspx
https://technet.microsoft.com/en-us/library/jj635883.aspx
If that is the case, you can follow the link below for doing cross-site publishing:
http://blogs.technet.com/b/tothesharepoint/archive/2013/02/14/how-to-set-up-a-product-centric-web-site-in-sharepoint-2013.aspx
Thanks,
Victoria
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

Displaying linked pages in an area of the screen, using CSS?

Imagine that I have a column on the left of the page that has a list of links to other pages. When you click on any of those links, then to the right the linked page is shown.
I know how to do this with frames, but I'm trying to figure this one out using CSS.
Can anyone point me in the right direction?
Below is a code sample that if your save and then view in a browser will show you (hopefully) what I am trying to achieve.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Test site</title>
<style type="text/css">

div.header {
height:4em;
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF;
div.sidebar {
width: 15em;
float:left;
text-align: left;
border-bottom:0px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
    background-color:#390
div.footer {
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF
-->
</style>
</head>
<body>
<div class="header">
   header goes here
</div>
<div class="sidebar">

   Link to page 1<br />
   Link to page 2<br />
   Link to page 3<br />
   etc...<br />
</div>

This is the area where the pages linked to should be displayed.<br />
So, if you click on the "Link to page 1" link, to the left, the contents of page 1 will be shown here.<br />
If you click on the link to the left that says "Link to page 2" then the contents of page 2 will be shown here, etc.<br clear="left" />
<div class="footer">
footer goes here
</div>
</body>
</html>

Thank you Nancy! Your solution is (I believe) 99% of the way to being exactly what I want.
The code fragment below:
<div class="sidebar">

   <a href="../Test/About.html" target="Frame1"> About</a><p>
   <a href="../Test/FAQ.html" target="Frame1"> FAQ</a><p>
   <a href="../Test/Contact.html" target="Frame1"> Contact us</a><p>
</div>
<iframe name="Frame1" id="Frame1" src="../Test/About.html" height="auto" width="auto" allowtransparency="true" border="0" margin="0" scrolling="auto" > </iframe>
but I want the window that contains the 'imported' code to expand to be the same height as the sidebar and wide enough to stretch to the rightmost side of the visible screen.
I was guessing that
height="auto" width="auto"
would have done the trick, but it would seem not. Any ideas?

Make a menu tab active when using templates

Could anyone tell me how de we achieve making a menu tab active when using a template and a combination of html & php. I am putting the code I am using for my menu and do not see how to do this and how to relate inner pages to the right menu tab ... The site has hundreds of pages so i hope there is an easy way to do this without having to create duplicated templates. Many thanks.
      <li><span class="divider divider-vert" ></span></li>
      <li><a href="Hostels.html">Hostels Brasil</a></li>
      <li><a href="Historico.html">Historico e Filosofia</a></li>
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="Brasil-Carteira.html">Carteira HI Brasil</a>
         </li>
      <li><span class="divider divider-vert" ></span></li>
       <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="hostels-mondo/index.html">Hostels do Mundo</a>
</li><li><a class="item-primary" href="Contato.html">Contato</a>
        </li></ul>

Humm .. really not sure what I'm doing wrong here .... I've been redesigning the whole menu but cannot get that to work , if you dont mind I am sending you the code here first so you can already have a look and see if there is some obvious mistake , I am still testing all this on my local machineand as I completly re made the menu for the purpose I cannot upload the files and let the client see a menu like this (now I was also wondering if maybe this would only work on a live server ?)
So my menu is like this
<div id="nav-container"><div id="nav">
    <ul>
      <li><a href="../index.html">Home</a></li>
      <li><a href="../viagem-brasil/destinos.html">Destinos</a></li>
      <li><a href="#">menu</a></li>
    </ul>
</div>
</div>
Then just befor the </body> tag I have the following :
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryDOMUtils .js"></script>
<script>
       function InitPage(){
        Spry.$$('nav li').forEach(function(node){
        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
        if(a.href == window.location){
            Spry.Utils.addClassName(node,"activeMenuItem");
    Spry.Utils.addLoadListener(InitPage);
    </script>
And my css is, you will notice I am trying to get an image as background but this is only a detail .....
#nav{
    margin: auto;
    color: #FFF;
    height: 65px;
    width: 1060px;
    text-align: left;
    background-image: url(../images/menubg.gif);
#nav-container
    height:65px;
    background-image:url(../images/menubg.gif);
    width: 100%;
#nav-container ul {
padding:0;
margin:0;
list-style-type:none;
#nav-container li {
    margin-left:2px;
    float:left;
    height: 55px;
    /* [disabled]padding-top: 25px; */
#nav-container ul li a {
    display:block;
    float:left;
    width:100px;
    /* [disabled]background-color:#6495ED; */
    color:#FFF;
    text-decoration:none;
    text-align:center;
    padding:5px;
    /* [disabled]margin-top: 20px; */
    height: 25px;
    padding-top: 30px;
#nav-container ul li a:hover {
    background-image: url(../images/menuHome.png);
    display:block;
    float:left;
    width:100px;
    /* [disabled]background-color:#6495ED; */
    color:#FFF;
    text-decoration:none;
    text-align:center;
    padding:5px;
    /* [disabled]margin-top: 20px; */
    height: 25px;
    padding-top: 30px;
.activeMenuItem a {
        background:#a59a84;
        color:#000;
.activeMenuItem a {
    background:#a59a84;
    color:#ffffff;
    background-image: url(../images/menuHome.png);
I really thank you for your time and hope you'll spot the mistake, if not I will do upload something so we can see it live !
Many thanks

Using CSS with Contribute

I just stumbled upon a small hitch in my get-along.
While trying to assign an alignment class in Contribute (that
I had originally created in Dreamweaver) I discovered that I
couldn't figure out how to accomplish this. I have already created
a class and it's in the external style sheet, but I can't figure
out how to associate the picture with the class so that text will
flow around the image.
help!
thanks,
Ron

Thanks for the input. I'm well aware of how to use CSS. The focus of this discussion was really how to get images out of <p> tags, not how to write a bunch of extra CSS to undo what Contribute really shouldn't be doing to images.
I am committed to use CSS on my site, but I am also committed to making that CSS easy to use, which mean working at tag and block levels as much as I can, rather than becoming "class happy". I know I have to use classes to do the left and right alignment, but let me share a specific scenario where CSS shouldn't be used.
I have an <h2> element that is the full width of my container. Below that, I have a <p> element for my paragraph. For my design, I want the paragraph to have 1em of padding. Now, I want an image banner that is the full width of the container, so it can nest under the <h2> and be the same width. If I insert the image in Contribute above the <p>, it puts that in a <p> tag. Now, the image is too wide because it's trying to add padding around something that is already the full width of the page. I can't add a rule to remove the padding from all images, because that would remove padding from images that need it also.
I could write a custom CSS class to resolve this issue, but that takes time, adds to my CSS file size and gums up my dropdown menu with an unnecessary class that's only used to solve this one scenario. Instead, it makes more sense to just break the image out of the paragraph tag and treat it as a block.
This is an example of what I was trying to get Contribute to do. I just needed the image tag as such, an image, not an image inside my paragraph padding rules.
In this case "remove paragraph breaks" is the most logical choice, rather than writing a bunch of CSS to undo Contribute's quirks.

Aligning AP Div-based site

Hello
I built this site using AP Divs - haven't learned beyond this yet but I'm working on it. In the interim I want to have this site http://sc-autos.com/ centered horizontally with the browser window. Can anyone help with a simple solution?
Thanks in advance for the assistance
J

Lines 1 - 16 you have this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>stefan chmara automobiles</title>
<style type="text/css">
#body {
position:relative;
width: 800px; /**value in pixels, percentages or ems**/
margin:0 auto; /**centers on screen in modern browsers**/
text-align:center; /**centers older browsers**/
<!--
#top {
position: absolute;
Change it to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>stefan chmara automobiles</title>
<style type="text/css">
<!--
body {
position:relative;
width: 800px;
margin:0 auto;
text-align:center;
#top {position: absolute;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Organising text into columns using CSS?

Hello again guys,
Another day another problem.
This community has been really friendly and helpful so far with what I'm sure must appear to many of you to be really simply problems, so I'm hoping that you can bear with me and help me out again!
Basically, I'm designing my page using CSS, and I've come to a part where I would like to have 3 columns of text, of a fixed width, with a fixed gap in between. Using my very limited knowledge and experience, I inputted the code that I thought would work, but whenever I go to enter more text, it doesn't jump to a new line when it reaches the maximum width of the column, it carries on on the same line and pushes the rest of the text across.
How do I sort this out?
I can't actually upload my site until Monday, but I've included some screen below which I hope will help.
Thanks again guys.
Text in columns:
http://i51.tinypic.com/2s9vyhg.png
When I type some more, it doesn't stay in the column width:
http://i55.tinypic.com/dlno7b.png
The code that I thought would work:
http://i54.tinypic.com/yjoed.png
http://i56.tinypic.com/2dax46c.png

Hi Murray,
Apologies. I had made a mistake. I've got it working now. Thank you.
Another tiny thing, if you check out this screen:
http://i54.tinypic.com/elcep.png
you can see that the line starts right near the top, and goes all the way down to the bottom.
Is there some way to amend the code that you gave me to adjust the height of the line? I tried adjusting the size of the image but that didn't seem to have an effect?
Ideally, I would like to line at the top of the 'T' of 'This is a news story', and finish at the bottom of the 'M' of 'More'. That height.
Something else which has confused me. I have that 'More' link aligned to the right, and in my design view in DW it is so aligned, but then when I preview the page, it jumps to the left hand side of each column. The alignment seems to disappear when the page is 'live'?
Thanks again for all of your help. You really are a star!

Bottom align menu on public site using CSS

Similar Messages

Maybe you are looking for