SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with css menu position.

    Hi,

    I have a menu bar and for some reason the hover images
    are not positioning correctly.

    You can see it here:
    My website url: Mobile Website Network

    Here is my css and html:


    HTML Code:
    In head: 
    
    <style>
    .menu{
    	float:left;
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	width:auto;
    	position:relative;
    	display:block;
    	height:36px;
    	text-transform:uppercase;
    	font-size:12px;
    	font-weight:bold;
    	background:transparent url("images/OFF.gif") repeat-x top left;
    	font-family:Helvetica,Arial,Verdana,sans-serif;
    	border-bottom:4px solid #004c99;
    	border-top:1px solid #74b0c6;
    }
    
    .menu li{
    	display:block;
    	float:left;
    	margin:0;
    	pading:0;
    }
    
    .menu li a{
    	display:block;
    	float:left;
    	color:#6d7078;
    	text-decoration:none;
    	font-weight:bold;
    	padding:12px 20px 0 20px;
    	height:36px;
    	background:transparent url("images/DIVIDER.gif") no-repeat top right;
    }
    
    .menu li a:hover{
    	background:transparent url("images/HOVER.gif") no-repeat top right;	
    }
    </style>
    
    
    and in body:
    
    <div class="menu">
      <ul>
       <li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Features</a></li>
    	<li><a href="#">Why Go Mobile ? - Video</a></li>
    	<li><a href="#">F.A.Q.</a></li>
    	<li><a href="#">Resellers</a></li>
    	<li><a href="#">Resources</a></li>
      </ul>
    </div>
    Hope someone can help we - I must have got
    something wrong somewhere


    Thanks.


    .

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the menu is too high and is pushing the <li>'s down. Remove the default margins/paddings on the <ul> and you will be fine

    It's better to have some sort of reset in your CSS file but this will fix the current issue
    Code:
    ul{margin:0;padding:0;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    You also have a big, fat 12 px of top padding on your A element.

    ~TehYoyo

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    You also have a big, fat 12 px of top padding on your A element.

    ~TehYoyo
    Not really the issue here, as all tha tdoes is allow the visual presence of vertical alignment .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Some observations:

    1) You're not turning off bullets

    2) You've got a DIV around the UL for no good reason.

    3) floats are inherently display:block, you don't need to say that.

    4) floating LI is often filled with problems... and should be avoided if you're not going to have dropdowns...

    5) declaring height and padding at the same time is ASKING for it to break. 12px top padding + 36 px height == 48 px, which doesn't fit the 32px container!

    6) You don't have a line-height, and line-heights don't default the same across browsers or inherit the same by default when you set font-size.

    7) Transitional? So it's in transition from 1997 to 1998? You've got attributes like bgcolor in there which have no business on a website that's being written with CSS.

    8) even when developing, I suggest putting your style in an external file. IF you are using an editor that's worth a damn, you can open up two separate windows to edit side-by-side markup and CSS, making life WAY easier.

    9) Got enough inlined presentation? What WYSIWYG saddled you with that, as no human being would write code like that.

    10) I'm not 100% sure your heading orders make any sense...

    11) Your form is gibberish lacking a hefty chunk of the elements forms are supposed to have...

    SO... basically you've got a lot of issues on that page. Much of it is just over-thinking things, failing to exploit CSS in a proper manner, and outdated coding techniques. You're knee deep in presentational HTML -- using paragraphs and strong for what should be headings, inlining the same values over and over again inside STYLE attributes you should be declaring just ONCE in your external sheet...

    When was this written? It smells of being written sometime between '98 and '03 -- specifically because it seems like it was build at the time where the only thing people cared about was "does it work in IE6" -- the padding same time as height is a giveaway for that, though that would only be if it lacked the proper doctype... It's an usual hodge-podge of the old and the new... and not really the best of either. There's HTML in your XHTML... endless spans and oddball font declarations... it's... very unusual.

    For what you have, the HTML should look something more like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Mobile Website Design
    </title>
    
    </head><body>
    
    	<ul class="menu">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About Us</a></li>
    		<li><a href="#">Features</a></li>
    		<li><a href="#">Why Go Mobile ? - Video</a></li>
    		<li><a href="#">F.A.Q.</a></li>
    		<li><a href="#">Resellers</a></li>
    		<li><a href="#">Resources</a></li>
    		<li><a href="#">Site Map</a></li>
    	</ul>
    
    	<h1>
    		Mobile Website Network : The Design &amp; Hosting Solution.<br />
    		<small>Our feature list continues to grow ...</small>
    	</h1>
    	
    	<div id="content">
    	
    		<h2>We Offer You the Most Useful and Flexible Options.</h2>
    		
    		<p>
    			Below is an explanation of <em>some</em> of the features we use. It gives you a good idea of what can be achieved. We constantly improve our mobile website design services by adding new features regularly. As a client, you will always be able to have our new features added to your mobile website and they will be professionally merged into your design.
    		</p>
    		
    		<img 
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_nav.png"
    			alt="Phone showing Affordable Storage Options"
    			width="265" height="475"
    			class="trailingPlate"
    		/>
    		<h3>Navigation</h3>
    		
    		<h4>Icon Format:</h4>
    		<p>
    			We can arrange your navigation to use either horizontal bars or icons. Here we have used icons.
    		</p><p>
    			Below is an example using the horizontal bars.
    		</p><p>
    			We have a selection of over 1000 icons in 5 four color versions so we should find something to suit your needs.
    		</p><p>
    			In this case we have used icons supplied by our client. They prepared the image using a basic image editor and we re-sized the image to the recommended size of 64px x 64px.
    		</p><p>
    			If you would like to have unique icons designed in harmony with your overall website design, we can do that as well.
    		</p>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_hor_nav.png"
    			alt="Phone Showing Design Website"
    			width="251" height="466"
    			class="trailingPlate"
    		/>
    		<h4>Horizontal Bar Format:</h4>
    		<p>
    			This is an example of the horizontal bar navigation.
    		</p><p>
    			With this method there are a range of possibilities including the use of small icons on the bars.
    		</p><p>
    			In this case the client requested straight forward red and black bars to harmonize with the header logo and overall theme of the website.
    		</p><p>
    			All of the examples on this page are taken from live websites which we have prepared for our clients.
    		</p>
    		
    		<h3>Page Content</h3>
    		<p>
    			When creating a mobile website you need a lot less data than your normal webpage holds.
    		</p>
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_txt.png"
    			alt="Phone Showing Language Choices"
    			width="260" height="465"
    			class="trailingPlate"
    		/>
    		<p>
    			Usually just one or two sentences on each page to give the meaning and a call to action.
    		</p><p>
    			Of course some sites or particular pages may have longer content, but it is usually much less than the desktop website.
    		</p><p>
    			In order to make the process of creating the website as streamlined as possible, we first select the text that we feel is the most important. This is part of the first draft.
    		</p><p>
    			In most cases we select what you want but if you desire to select more or less text or different text entirely, you just need to let us know.
    		</p><p>
    			Here you see we have summarized the service into three short lines which emphasize the translation company's most important attributes.
    		</p>
    		
    		<img 
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_tables.png"
    			alt="Phone Showing a Demo List"
    			width="259" height="472"
    			class="trailingPlate"
    		/>
    		<h3>Tabled Data</h3>
    		<p>
    			We will format your data to produce nicely aligned tables or lists.
    		</p><p>
    			This can be for price tables, opening times, event calendars, product lists and many other data types.
    		</p><p>
    			In this case you see a simple but effective list of translation services which our client offers.
    		</p>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_tap.png"
    			alt="Phone Showing Tap To Call"
    			width="253" height="470"
    			class="trailingPlate"
    		/>
    		<h3>Tap To Call</h3>
    		<p>
    			The "Tap-to-Call" feature can be adapted for different trades and professions. Different call to actions make your mobile website more specialized and more client oriented.
    		</p><p>
    			The "Tap-to-Call" feature is placed on many pages in order to encourage interaction and make the placing of orders as easy as possible.
    		</p><p>
    			The "Tap-to-Call" feature means that your customer does not need to read the phone number to contact you but simply taps on the icon to initiate the call.
    		</p><p>
    			In this website the feature is used to encourage visitors to phone in for a quotation.
    		</p>
    		
    		<h3>Tap To Text</h3>
    		<p>
    			A similar feature is used to to initiate a sms text message.
    		</p>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_slide2.png"
    			alt="Phone Showing Slideshow Feature"
    			width="258" height="466"
    			class="trailingPlate"
    		/>
    		
    		<h3>"Slideshow" Feature</h3>
    		<p>
    			We can add slideshows to any page of your mobile site.
    		</p><p>
    			This is a great feature as it lets us mix text and images to produce a dynamic show that draws interest.
    		</p><p>
    			This is one we did for the New Orleans "Rock 'n' Bowl" Club.
    		</p><p>
    			The slideshow displays ten artists together with a description of their performances. It gives prospective visitors to the club a taste of what is available.
    		</p><p>
    			The slideshow can be set to rotate every couple of seconds like this one or at a slower pace. Whatever the rate the client just needs to touch the screen to stop the show an read the text.
    		</p>
    
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_accord.png"
    			alt="Phone Showing Accordion Feature"
    			width="254" height="471"
    			class="trailingPlate"
    		/>		
    		<h3>"Accordion" Feature</h3>
    		<p>
    			With this feature we can place a lot of information on a page in a small space.
    		</p><p>
    			This is a another great feature letting us mix text, images, audio and video to create an interactive part of your mobile web site.
    		</p><p>
    			How does it work? When you touch one of the title bands, the section opens up like a concertina or accordion. Then when you touch another heading, the first one closes up and the one touched opens out.
    		</p><p>
    			Its a great feature and we used it here to display the newest, coolest sports footwear together with the release date.
    		</p>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_map1.png"
    			alt="Phone Showing Direction Finder"
    			width="259" height="480"
    			class="trailingPlate"
    		/>
    		<h3>"Direction Finder" Feature</h3>
    		<p>
    			This is a "must have" for all brick-n-mortar businesses as this plugin allows your customers to enter their current address and have their own cell phone tell them how to find you.
    		</p><p>
    			As you can see, on a location page we set out your address. This generates the map shown below.
    		</p><p>
    			If someone needs directions, they enter their current location, or press the button to take the gps location from their phone. 
    		</p><p>
    			Then and a list of directions is displayed together with a new map showing the route overlaid.
    		</p>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_social.png"
    			alt="Phone Showing Social Widget"
    			width="257" height="473"
    			class="trailingPlate"
    		/>
    		<h3>"Social Widget" Feature</h3>
    		<p>
    			We can add special icons which link to social media sites at Facebook, Twitter, Google+, YouTube, and LinkedIn.
    		</p><p>
    			This feature helps us place all your social icons in one place. This is usually at the bottom of your first page or on your contact page.
    		</p><p>
    			Nowadays it's important to let your own customers spread the word about your business.
    		</p><p>
    			Good news travels fast - especially when you help it flow!
    		</p>
    		
    		<h3>"Contact Forms" Feature</h3>
    		<p>
    			Contact forms allow anyone to send you an email via their cell phone. This is a huge advantage as it means that you can collect interested peoples email addresses who voluntarily give them. Enables you to build an e-mailing list.
    		</p>
    		
    		<h2>Marketing Features</h2>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_coupon1.png"
    			alt="Phone Showing Coupons"
    			width="260" height="466"
    			class="trailingPlate"
    		/>
    		<h3>"Coupons" Feature</h3>
    		<p>
    			Coupons allow you to boost sales in a controlled way. By selecting times that are otherwise low in sales you make fuller use of resources that you are already paying for.
    		</p><p>
    			A restaurant could offer a 20% discount on Wednesday evenings. A Gardening service provider could offer coupons in return for recommending a friend. There are many methods.
    		</p><p>
    			As you see here, you can group your coupons by month. This encourages more interaction with your mobile website.
    		</p><p>
    			Our coupons have controllable open and expire dates. This gives you peace of mind, knowing that coupons will expire on a certain date.
    		</p><p>
    			Expire dates also keep your customers coming back to your site to check what your latest offers are available. In addition it gives you a subject to discuss when you are marketing to them.
    		</p><p>
    			Notice how we use the coupon in conjunction with the "Tap-to-Call" feature.
    		</p>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_coupon2.png"
    			alt="Phone showing more coupons"
    			width="251" height="454"
    			class="trailingPlate"
    		/>
    		<p>
    			Coupons can be placed on a "hidden" page. This may seem strange at first, but it is a great way to build club membership.
    		</p><p>
    			You simply only give access to the coupon page to people who sign up to your elite members club. Members get emailed emailed or "sms" ed every couple of weeks with special discounts that appear on the private "hidden" pages.
    		</p><p>
    			A QRcode could be printed on your menus so that clients can easily open the membership join up page.
    		</p>
    		
    		<img
    			src="http://mobi6.net/images/hidden.jpg"
    			alt="Hidden Pages"
    			width="251" height="454"
    			class="trailingPlate"
    		/>
    		<h3>Hidden Pages</h3>
    		<p>
    			"Hidden Pages" allow you to have pages that are only available by direct-linking. These pages are hidden from both the navigation menus and the site search.
    		</p><p>
    			For example, a "Hidden Page" could be a coupon/discount page that can only be accessed by scanning a QR Code, or an access page after entering an email address - ideal for a building up a marketing list.
    		</p>
    		
    		<img
    			src="http://mobi6.net/images/qrcode.jpg"
    			alt="QR Codes"
    			width="251" height="454"
    			class="trailingPlate"
    		/>
    		<h3>"QR Codes" Feature</h3>
    		<p>
    			As part of the Marketing Package we will provide you with the QRCode for your website and also special QRCodes for any internal mobile website that you need.
    		</p><p>
    			We can specify any individual page as the landing page - this gives you the ability to target specific groups of people and direct them to a mobile web page containing an offer tailored to them.
    		</p><p>
    			Combining the QRcode system with the "hidden pages", the coupons and mobile auto responders creates a power set of mobile marketing tools.
    		</p><p>
    			Customers just need to point their cellphone camera at the image to be taken instantly to the specific website page your are promoting.
    		</p>
    		
    		<img
    			src="http://mobi6.net/wp-content/uploads/2012/02/feat_seo.png"
    			alt="Mobile SEO"
    			width="257" height="469"
    			class="trailingPlate"
    		/>
    		<h2>SEO Enhancement Package</h2>
    		<p>
    			Each page of your mobile site can be tuned up for the big Search Engines. It takes a little, but the results are worth the effort.
    		</p><p>
    			For each page we will add SEO enhancements that increase your website search engine rankings. These are all on-page improvements and enhancements with META tags, titles, headings and keywords which polish up your presentation for the search engines.
    			<img src="http://mobi6.net/images/seo.jpg" alt="SEO Enhancer" />
    		</p>
    		
    		<h3>Mobile Sitemaps</h3>
    		<p>
    			Most people don't even know that there are such things as "Mobile Sitemaps", let alone how to create them. Google are using them to locate your mobile site and add the pages of your mobile site to their mobile search listings. As part of the SEO enhancements we will create the mobile sitemap for your mobile website.
    			<img src="http://mobi6.net/images/sitemap.jpg" alt="Sitemaps" />
    		</p>
    		
    		<hr />
    		
    		<p>
    			<strong>We would like to prepare a draft mobile website for you, No commitment on your part.</strong> Simply complete the contact form below and we will provide you with a working mobile website for you to consider.
    		</p>
    
    		<form action="http://mobi6.net/contact.php" method="POST" name="main_fm">
    			<fieldset>
    				<label for="x_contact">Your Name:</label><br />
    				<input type="text" id="x_contact" name="x_contact" value="" size="25" /><br />
    				<label for="x_email">Your Email Address:</label><br />
    				<input type="text" id="x_email" name="x_email" value="" size="25" /><br />
    				<label for="x_website">Your Website url:</label><br />
    				<input type="text" id="x_website" name="x_website" value="" size="25" /><br />
    				<label for="x_mess">Message:</label><br />
    				<textarea id="x_mess" name="x_mess" rows="4" cols="30"></textarea>
    			</fieldset>
    			<div class="submitsAndHiddens">
    				<input class="button2" type="submit" value="Send Message." />
    				<input type="hidden" name="talk" value="yes" />
    				<input type="hidden" name="x_check" value = "5" />
    				<input type="hidden" name="x_agent" value = "mobi6" />
    			</div>
    		</form>
    	
    		<p class="specialOffer">
    			<em>Take advantage of this special <u>free</u> offer:<br />
    			We will prepare a draft mobile website for you.</em>
    			<strong>No commitment on your part.</strong><br />
    			Simply complete this contact form above and we will provide you with a working mobile website for you to consider.
    		</p>
    		
    	<!-- #content --></div>
    
    
    	<ul class="menu">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About Us</a></li>
    		<li><a href="#">Features</a></li>
    		<li><a href="#">Why Go Mobile ? - Video</a></li>
    		<li><a href="#">F.A.Q.</a></li>
    		<li><a href="#">Resellers</a></li>
    		<li><a href="#">Resources</a></li>
    	</ul>
    	
    	<div id="subContent">
    
    		<h2>Introducing Mobile Websites</h2>
    		<p>
    			The majority of websites are not at all mobile friendly. Its not surprising because they were built for the pc monitor environment which means that when viewed on a mobile device the site has tiny unreadable writing and meaningless slow loading graphics.
    		</p><p>
    			According to Google, 61% of website visitors will not return if they had issues viewing it on their phone and 40% will immediately leave if your site if is not properly formatted for mobile devices.
    		</p><p>
    			In March 2011, Compuware came up with similar results: 63% are unlikely to return to your mobile site if they had trouble or if your site was too hard to use. 42% said they would visit a competitor's site instead, and 19% said they would have a negative overall perception of your business if they had a bad mobile experience with your site.
    		</p>
    		
    		<h2>Compare These Websites</h2>
    		<img 
    			src="http://mobi6.net/images/mob_vs_norm2.jpg"
    			alt="Comparison Chart"
    			width="674" height="459"
    			class="plate"
    		/>
    		
    		<h2>
    			Our goal is to turn your mobile visitor's frustration into a satisfying and fulfilling experience.
    		</h2>
    		<p>
    			A good mobile site has less data to load and you no longer have to scroll back and forth while reading a line of text. It adjusts images so they fit your screen and simplifies the layout. Navigation is easy to understand and <strong>fast</strong> to execute.
    		</p>
    		
    		<h2>Our Custom Build Service</h2>
    		<p>
    			We take your existing website design with your individual brand and extend your brand, your marketing into the mobile arena. Your mobile site therefore harmonizes with and completes and your existing online investment.
    		</p><p>
    			We work in an affordable budget and provide you the best Mobile Friendly Website that can help your business. Below are the mobile website packages we offer which are fully compatible with all the latest smart phones as well as the non-smart phones.
    		</p><p>
    			Your new mobile website hosted on our servers and directly linked to your main website will ensure that you don't miss out on the huge increase in traffic and purchasing that is now taking place in the mobile arena. Our work is fast, depending on the features and packages you choose, your mobile site is usually ready with in 3-5 days.
    		</p>
    	<!-- #subContent --></div>
    	
    </body></html>
    Though I'm guessing wildly as to the proper heading orders and placements of the images. EVERYTHING else you are doing belongs in an external stylesheet.

    For just the menu, lose the div, move the class to the UL, and try this for the CSS:

    Code:
    .menu{
    	list-style:none;
    	height:36px;
    	text-transform:uppercase;
    	font:bold 12px/16px arial,helvetica,sans-serif;
    	background:url(images/mainMenu.png) 0 0 repeat-x;
    	border-bottom:4px solid #004c99;
    	border-top:1px solid #74b0c6;
    }
    
    .menu li {
    	display:inline;
    }
    
    .menu li a {
    	float:left;
    	color:#6d7078;
    	text-decoration:none;
    	font-weight:bold;
    	padding:12px 20px 8px; /* 12 top + 8 bottom + 16 line-height == 36 */
    	background:url(images/mainMenu.png) 0 -36px no-repeat;
    }
    
    .menu li a:active,
    .menu li a:focus,
    .menu li a:hover{
    	/* active and focus so keyboard navigators aren't left out in the cold */
    	background-position:0 -72px;	
    }
    Again, that assumes this for the markup:
    Code:
    	<ul class="menu">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About Us</a></li>
    		<li><a href="#">Features</a></li>
    		<li><a href="#">Why Go Mobile ? - Video</a></li>
    		<li><a href="#">F.A.Q.</a></li>
    		<li><a href="#">Resellers</a></li>
    		<li><a href="#">Resources</a></li>
    		<li><a href="#">Site Map</a></li>
    	</ul>
    Doesn't need a div.

    Oh, and the image would be a single file instead of three -- just make a 1x108 image, put 'off.gif' in the top third, 'divider.gif' in the middle and 'hover.gif' on the bottom. Two less handshakes, and probably a smaller overall filesize too.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the advice,

    I will do my best to apply it all.

    Actually - I would like to repeat this menu as a VERTICAL menu
    on the left hand side below the "fold".

    Obvously I would want all the bars to be same width - say 180px

    What would I need to do to this code in order to change it into a verticle menu ?


    In head:

    Code:
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .menu{
    	float:left;
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	width:auto;
    	position:relative;
    	display:block;
    	height:36px;
    	text-transform:uppercase;
    	font-size:12px;
    	font-weight:bold;
    	background:transparent url("images/OFF.gif") repeat-x top left;
    	font-family:Helvetica,Arial,Verdana,sans-serif;
    	border-bottom:4px solid #004c99;
    	border-top:1px solid #74b0c6;
    }
    
    .menu li{
    	display:block;
    	float:left;
    	margin:0;
    	pading:0;
    }
    
    .menu li a{
    	display:block;
    	float:left;
    	color:#6d7078;
    	text-decoration:none;
    	font-weight:bold;
    	padding:12px 20px 0 20px;
    	height:36px;
    	background:transparent url("images/DIVIDER.gif") no-repeat top right;
    }
    
    .menu li a:hover{
    	background:transparent url("images/HOVER.gif") no-repeat top right;	
    }
    </style>
    
    
    and in body:
    
    <div class="menu">
      <ul>
       <li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Features</a></li>
    	<li><a href="#">Why Go Mobile ? - Video</a></li>
    	<li><a href="#">F.A.Q.</a></li>
    	<li><a href="#">Resellers</a></li>
    	<li><a href="#">Resources</a></li>
      </ul>
    </div>

    Well - tht was the code I had working before -
    but ofcourse it would be better to use the code
    that deathshadow60 suggested as the base.

    Thanks.


    .

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your <li>'s are floated, and that's the cause of them being horziontal. Your anchors are also floated so taht needs to be dealt with.
    Code:
    .menu li{
    	display:block;
    	float:left;
    	margin:0;
    	pading:0;
    }
    I cleaned up your CSS for you. Although with the borders, I was unsure of what kind of effect you were goig for there so I threw it on hte <li>'s. Move it and do whatever you wish with it.
    Code:
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .menu{
    	float:left;
    	list-style-type:none;
    	position:relative;
    	height:36px;
    	text-transform:uppercase;
    	font-size:12px;
    	font-weight:bold;
    	background:transparent url("images/OFF.gif") repeat-x top left;
    	font-family:Helvetica,Arial,Verdana,sans-serif;
    
    }
    
    .menu li
    {
    	border-bottom:4px solid #004c99;
    	border-top:1px solid #74b0c6;
    }
    .menu li a{
    	display:block;
    	color:#6d7078;
    	text-decoration:none;
    	font-weight:bold;
    	padding:12px 20px 0x;
    	height:36px;
    	background:url("images/DIVIDER.gif") no-repeat top right;
    }
    
    .menu li a:hover{
    	background:url("images/HOVER.gif") no-repeat top right;	
    }
    </style>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks VERY much for your help.

    The vertical menu looks quite good but I need to
    change the padding or something ?

    Also there are some dots down the left hand side for some reason.

    The menu is right down the bottom of this page:

    My website

    Hopefully you can see what I need to adjust.
    I have tried a few things but it made it worse !

    Thanks again.


    .

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jekko View Post
    Thanks VERY much for your help.

    The vertical menu looks quite good but I need to
    change the padding or something ?
    I don't know what you envision the end result to be, so maybe ?
    Also there are some dots down the left hand side for some reason.

    The menu is right down the bottom of this page:

    My website

    Hopefully you can see what I need to adjust.
    I have tried a few things but it made it worse !

    Thanks again.


    .
    The dots are the list style bullet. They come default with all lists.

    If you add this it'll go away
    Code:
    ul{list-style:none;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan,

    I don't know what you envision the end result to be
    Well, just want it to look same as the horizontal version, but vertical


    I have this code just now:

    Code:
    .menu_bot{
    	float:left;
    	list-style-type:none;
    	position:relative;
    	height:36px;
    	text-transform:uppercase;
    	font-size:12px;
    	font-weight:bold;
    	background:transparent url("images/OFF.gif") repeat-x top left;
    	font-family:Helvetica,Arial,Verdana,sans-serif;
    
    }
    .menu_bot ul{
    	list-style:none;
    	}
    	
    .menu_bot li{
    	border-bottom:4px solid #004c99;
    	border-top:1px solid #74b0c6;
    	}
    	
    .menu_bot li a{
    	display:block;
    	color:#981b15;
    	text-decoration:none;
    	font-weight:bold;
    	padding:12px 20px 0x;
    	height:36px;
    	background:url("images/DIVIDER.gif") no-repeat top right;
    	}
    
    .menu_bot li a:hover{
    	background:url("images/HOVER.gif") no-repeat top right;	
    	}

    AND

    Code:
    	
    <div class="menu_bot" style="margin: 50px 0 20px 100px;" >
      <ul>
       <li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Features</a></li>
    	<li><a href="#">Why Go Mobile ? - Video</a></li>
    	<li><a href="#">Local search ? - Video</a></li>
    	<li><a href="#">F.A.Q.</a></li>
    	<li><a href="#">Resellers</a></li>
    	<li><a href="#">Resources</a></li>
      </ul>
    </div>
    What I don't understand is that I have padding:
    padding:12px 20px 0x;

    But on the website, the menu words are all top left as if there is no padding.

    My website

    The Hover image works but the "normal" image is only on the "Home" tab.

    If I want the DIVIDER.gif on both left and right side do I write:
    background:url("images/DIVIDER.gif") no-repeat top right left; ?

    Thanks again for helping.


    .

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The padding statement is EXACTLY what you had before, I only shortened it. You had 12px 20px 0 20px. I just shortened it .

    The issue is the "0x"

    .menu_bot li a{
    display:block;
    color:#981b15;
    text-decoration:none;
    font-weight:bold;
    padding:12px 20px 0x;
    height:36px;
    background:url("images/DIVIDER.gif") no-repeat top right;
    }

    Needs to be 0px and it'll be valid again. Right now the rule is invalidated because of that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The image IS showing up but it's such a horizontally small image and you have it set to no-repeat. Repeat-x the image if you want it to show .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your help.

    I made the changes and it nearly there

    But for some reason the bottom border is getting pushed down by about 20px.

    I put in an extra margin:0; but it didn't help.

    This is my code:

    Code:
    	
    .menu_bot{
    	float:left;
    	margin: 0;
    	list-style-type:none;
    	position:relative;
    	height:36px;
    	text-transform:uppercase;
    	font-size:12px;
    	font-weight:bold;
    	background:transparent url("images/OFF.gif") repeat-x top left;
    	font-family:Helvetica,Arial,Verdana,sans-serif;
    
    }
    .menu_bot ul{
    	list-style:none;
    	}
    	
    .menu_bot li{
    	margin: 0;
    	border-bottom:4px solid #004c99;
    	border-top:1px solid #74b0c6;
    	}
    	
    .menu_bot li a{
    	display:block;
    	color:#981b15;
    	text-decoration:none;
    	font-weight:bold;
    	padding:12px 20px 8px 20px; 
    	height:36px;
    	background:url("images/DIVIDER.gif") repeat-x  top right;
    	}
    
    .menu_bot li a:hover{
    	background:url("images/HOVER.gif") no-repeat top right;	
    	}
    The problem menu is at the bottom of this page:
    my website

    Thanks


    .

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The anchor is just too big and thus the image won't match up with the actual anchors and it looks bad. Just set the height of the menu anchors to 15px .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •