I'm trying to make a horizontal navi menu.
I want to get the logo and then the parts of the menu but the inline doesn't work.
I wanted the images above the text so I used a table to get this, but this broke the inline effect.. I'd be greatful for any help
<html>
<head>
<meta charset="utf-8">
<title>TechSocket</title>
<style>
html, body {
width: 100%;
height: 90%;
}
body {
background-color: #000;
}
#nav {
display: inline;
background-color: #CF6;
position: fixed;
padding: 1%;
width: 97%;
}
ul {
diplay: inline;
list-style-type: none;
margin: 0;
padding: 0%;
}
#nav li {
display: inline;
}
#logo {
padding-left: 0%;
}
table {
border-spacing: 25px;
}
</style>
<script>
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a id="headIMG" href="#"><img id="logo" src="100-Beanie-Drive-Logo-250.jpg" width="250" height="100"/></a><li>
<li>
<table>
<tr>
<td><img id="text1"src="mouse.png" width="50" height="50"/></td>
<td><img id="text2" src="cam.png" width="50" height="50"/></td>
<td><img id="text3"src="cloud.png" width="50" height="50"/></td>
<td><img id="text4"src="clock.png" width="50" height="50"/></td>
</tr>
<tr>
<td>Mouse</td>
<td>Camera</td>
<td>Cloud</td>
<td>Clock</td>
</tr>
</li>
</ul>
</div>
<div id="main">
</div>
</body>
</html>
Try floating it to the left, like so:
#nav li {
float: left;
}
You probably don't need to have this line for your ul
diplay: inline;
Alternatively you can use display:inline-block, which might suit your needs better.
li elements are block elements so inline probably doesn't work with them, especially when they have other elements inside them. I'm just guessing though, never actually tested it.
As for floating, well personally I'd be against it. I've always found it to cause issues when not used properly. That said, it is a possible fix.
Related
I just started making a website, and I don't understand why I can't bring part of it to align at the right. The code is provided below.
Code:
<!DOCTYPE html>
<html style="background-color: black;">
<head>
<title>My Portfolio</title>
<style>
#navigation-bar {
background-color: black;
color: grey;
font-weight: bold;
font-family: Script;
font-size: 25px;
}
</style>
</head>
<body>
<div id="navigation-bar">
<table>
<tr>
<th><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></th>
<th>Home</th>
<th>About Me</th>
<th>Languages</th>
<th>Previous Work</th>
<th><a style="text-align: right;" href="https://puginarug.com" title="Beautiful Website">An Amazing Website</a></th>
</tr>
</table>
</div>
</body>
</html>
So obviously I just started coding this, but I am trying to get the last table header tag to be aligned to the right. But the output just shows it right next to the 5th table header tag. How can I make this specific table header tag go to the right?
Instead of using your navigation-bar items as <table> and <th>, better approach would be to use list items using <ul> and <li> tags.
Using li:last-child with float: right like below will solve your problem.
Please follow the below code snippets:
li {
display: inline;
float: left;
}
li:last-child{
float: right;
}
a {
display: block;
padding: 8px;
}
<ul>
<li><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></li>
<li>Home</li>
<li>Languages</li>
<li>Previous Work</li>
<li>An Amazing Website</li>
</ul>
Please refer to Horizontal navigation bar for more details.
Is it possible to make the image menu keep highlighted when hovering on its subitem? I have 5 navigation menu items but only has has a dropdown. Everytime I hover on subitems of About Us(which the one I'm taking about), the About Us image turns back to it's original image.
JFiddle:
Is there a workaround for this? My friend says it is not possibe, but I'm not fully convinced.
And this is my code (for reference)
<html>
<head>
<title>CTI | About us</title>
<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<script>
function over(me){
me2=me;
if(me=='about'){
$('#id_About').attr('src','images/hover-aboutus.jpg');}else{$('#id_About').attr('src','images/aboutus.jpg');}
if(me=='partners') {
$('#id_Partners').attr('src','images/hover-partners.jpg');}else{$('#id_Partners').attr('src','images/partners.jpg');}
if(me=='products'){
$('#id_Products').attr('src','images/hover-products.jpg');}else{$('#id_Products').attr('src','images/products.jpg');}
if(me=='contactus'){
$('#id_Contactus').attr('src','images/hover-contactus.jpg');}else{$('#id_Contactus').attr('src','images/contactus.jpg');}
}
$( document ).ready(function() {
me2='about';
$('#id_About').attr('src','images/hover-aboutus.jpg');
});
</script>
<style type="text/css">
img {
border: 0;
}
a { text-style:none; }
body {text-align: center; margin: 0; padding: 0;}
#wrapper { width:830px; margin:0 auto; }
</style>
</head>
<body>
<input id="data2" type="hidden" value="<?php if (isset($_POST['data2'])){echo $_POST['data2']; }else{} ?>">
<div id="wrapper">
<table width="830px" border=0 cellspacing=0 cellpadding=0 >
<tr>
<td valign="top" align="left"><img src="images/cti-logo.png" /></td>
<td valign="bottom" align="right">
<a href="welcome.php">
<img src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/>
<a href="aboutus1.php" class="menu" target="content">
<img id="id_About" onclick="over('about')" src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" />
</a>
<a target="content" href="partners.php">
<img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="if(me2=='partners'){}else{this.src='images/partners.jpg'}" />
</a>
<a href="products1_1.php" target="content">
<img onclick="over('products')" id="id_Products" src="images/products.jpg" onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" />
</a>
<a href="contactus.php" target="content">
<img id="id_Contactus" onclick="over('contactus')" src="images/contactus.jpg" onmouseover="this.src='images/hover-contactus.jpg'" onmouseout=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" />
</a>
</td>
</tr>
<tr>
<!--td colspan="2" class="bar"><img src="images/cti-upperbar.jpg" /></td-->
</tr>
</table>
</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>
UPDATED
I'd like to thank you all for all the efforts. :)
I did your suggestions and followed the Fiddle format but there's no image on menu showing :( Still stucked. :(
CODE:
<html>
<head>
<title>CTI | About us</title>
<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/css">
.btn1{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn1{
background: url("images/home.jpg") no-repeat;
}
.btn1:hover{
background: url("images/hover-home.jpg") no-repeat;
}
.btn2{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn2{
background: url("images/aboutus.jpg") no-repeat;
}
.btn2:hover{
background: url("images/hover-aboutus.jpg") no-repeat;
}
.btn3{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn3{
background: url("images/partners.jpg") no-repeat;
}
.btn3:hover{
background: url("images/hover-partners.jpg") no-repeat;
}
.btn4{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn4{
background: url("images/products.jpg") no-repeat;
}
.btn4:hover{
background: url("images/hover-products.jpg") no-repeat;
}
.btn5{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn5{
background: url("images/contactus.jpg") no-repeat;
}
.btn5:hover {
background: url("images/hover-contactus.jpg") no-repeat;
}
.menu ul li:hover .btn {
background-position: -5px -120px;
}
.menu ul li{
list-style:none;
}
.menu
{
display: inline;
float: left;
}
a {
text-decoration:none;
color:#fff;
font-family:verdana;
font-size:12px;
}
.menu ul li ul{
display:none;
background:#17c0fa;
width:100px;
color:#fff;
}
.menu ul li:hover ul{
display:block;
padding:15px;
line-height:20px;
}
.menu ul li a:hover{
color:#fff;
}
.menu ul li:hover .btn {
background-position: -5px -120px;
}
</script>
<script type="text/javascript">
$(function(){
$('li').hover(function(){
$(this).find('ul').fadeIn();
},function(){
$(this).find('ul').fadeOut();
});
});
</script>
</head>
<body>
<div id="wrapper"-->
<table width="830px" border=0 cellspacing=0 cellpadding=0 >
<tr>
<td valign="top" align="left"><div style="width:85px;height:58px;"></div></td>
<td valign="bottom" align="right">
<div class="menu">
<ul>
<li href="welcome.php" class="btn1"><img src="images/home.jpg" onmouseover="images/hover-home.jpg" onmouseout="images.home.jpg" /></li>
<li class="btn2">
<ul>
<li>About CTI</li>
<li>Our Clients</li>
<li>Mission / Vision</li>
</ul>
</li>
<li href="partners.php" class="btn3"></li>
<li href="products.php" class="btn4"></li>
<li href="contactus.php" class="btn5"></li>
</ul>
</div>
</td>
<div class="clear"></div>
</tr>
</tr>
</table-->
</table>
</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>
I also removed the JS since css is easier than my recent js.
Going off of your fiddle (please stick with that method, not JavaScript!)
Remove the button and just add the class to you li. When you hover over the li, you can move into it's child elements and still be over the li but when you hover over the <div> and move into the <ul> you are no longer within the <div>.
Remove position:absolute and margin-top:90px from you sub-menu. Everything should work now.
<div class="menu">
<ul>
<li class="btn">HOVER
<ul>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</div>
.menu ul li ul{
display:none;
background:#78a802;
width:200px;
color:#fff;
padding-top:90px;
}
Working example: http://jsfiddle.net/y2BtT/89/
Maybe you can do something in the submenu with hover function
You mean like this: http://jsfiddle.net/yuhua/jJK2n/ ?
to solve your problem the only thing you will need to do is add another CSS rule. When you hover over the menu items to keep the changed image.
.menu ul li:hover .btn {
background-position: -5px -120px;
}
EXAMPLE
You can tell you to your friend that he lost cause everything is possible in Web Development the thing is how much time and effort you are willing to spend for it :D
Easiest Answer:
In your CSS just replace...
.btn:hover{
with
.menu li:hover .btn {
Demo of your example:http://jsfiddle.net/y2BtT/94/
For Inspiration Check out the demo i made: http://jsfiddle.net/techsin/FtPvf/1/
A bit new to styling sheets. I have a div for my site's content. I've aligned my h1 to be in the middle of that div by using the margin-right property. When I use the margin-right property on the p tag within the same div, however, it also affects the h1 and moves that further left. I figure I shouldn't be using margin-right, but what is the best way to do this?
Please let me know if my question is unclear.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>
Putnam County Family Support Services - Resources
</title>
</head>
<body>
<div id="container">
<div id ="top">
<center><img src="images/logo1.jpg" alt="logo" /></center>
</div>
<div id="navigation">
<ul>
<li><a href="index.html" onMouseOver="document.MyImage4.src='images/home_nav1.jpg';" onMouseOut="document.MyImage4.src='images/home_nav.jpg';">
<img src="images/home_nav.jpg" name="MyImage4"></a> </li>
<li><a href="services.html" onMouseOver="document.MyImage3.src='images/services_nav1.jpg';" onMouseOut="document.MyImage3.src='images/services_nav.jpg';">
<img src="images/services_nav.jpg" name="MyImage3"></a> </li>
<li><a href="resources.html" onMouseOver="document.MyImage2.src='images/resources_nav1.jpg';" onMouseOut="document.MyImage2.src='images/resources_nav.jpg';">
<img src="images/resources_nav.jpg" name="MyImage2"></a> </li>
<li><a href="staff.html" onMouseOver="document.MyImage1.src='images/staff_nav1.jpg';" onMouseOut="document.MyImage1.src='images/staff_nav.jpg';">
<img src="images/staff_nav.jpg" name="MyImage1"></a> </li>
<li><a href="contact.html" onMouseOver="document.MyImage.src='images/contact_nav1.jpg';" onMouseOut="document.MyImage.src='images/contact_nav.jpg';">
<img src="images/contact_nav.jpg" name="MyImage"></a> </li>
</ul>
</div>
<di id="content">
<h1>Contact</h1>
<p>Address: 22 West Washington Street<br />Greencastle, IN 46135</p>
<p>Phone number:</p>
</div>
<div id ="footer">
</div>
</div>
</body>
</html>
CSS:
body {
background: #f3f6f3;
text-align: center;
}
#container {
color: #1e337a;
width: 650px;
margin: 0 auto;
}
#top {
padding-bottom: 25px;
}
#navigation {
float:left;
position: absolute;
}
#navigation ul {
list-style: none;
padding-top: 20px;
}
#navigation ul li {
padding-bottom: 20px;
margin-right: 40px;
}
#content {
float: right;
border: 1px;
}
#content h1 {
margin-right: 175px;
}
#content p {
margin-right: 170px;
}
#footer {
clear: both;
font-size: 12px;
}
Try using percentages rather than absolute values to place items, to center an inline block element (if the element width is set) you can use : margin-right : auto; margin-left: auto;
To center your H1, you should use the property :
#content h1 {
text-align: center;
}
#content p {
text-align: left;
}
this centers your text, have a look here
It would be quite handy if I could have a look at your HTML as well.
I have a couple un-ordered lists on my page. Both lists use list-style: disc inside;. Each list's list-items have a couple div's inside them. The problem is that the list-item's content takes up multiple lines and the disc is appearing vertically, at the bottom of the multi-line list-item.
Here is a screenshot kind of showing the problem I am experiencing. Note that I stole the image from a similar question, it is not my HTML or CSS.
Here is a striped down version of my HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="billing_form">
<div id="purchase_items">
<h2>Your purchase</h2>
<h4>Items:</h4>
<div class="items">
<ul>
<li>
<div class="item">First Product - one year license</div>
<div class="price">$99.00 USD</div>
</li>
<li>
<div class="item">Second product & 3 year Product Plan</div>
<div class="price">$125.00 USD</div>
</li>
</ul>
</div>
<div class="subtotal">SUBTOTAL: $224.00 USD</div>
<h4>Discounts:</h4>
<div class="discount">
<ul>
<li>
<div class="item">A really long discount item name - with extra info on three lines!</div>
<div class="price">- $20.00 USD</div>
</li>
</ul>
</div>
<div class="total">TOTAL: $204.00 USD</div>
</div>
</div>
</body>
</html>
And here is the CSS, as small as I thought was relevant:
html
{
font-family: sans-serif;
}
#billing_form
{
width: 350px;
margin: 0 auto;
font-size: 14px;
background-color: #EEEEEE;
}
#billing_form .items
{
position:relative;
}
#billing_form .discount
{
position:relative;
color:#3665B0;
}
#billing_form ul
{
margin: 0;
padding: 0;
list-style: disc inside;
}
#billing_form .items .item,
#billing_form .discount .item
{
display: inline-block;
width: 190px;
}
#billing_form .price
{
float: right;
padding-left: 20px;
}
#billing_form .items,
#billing_form .discount,
#billing_form .subtotal,
#billing_form .total
{
width: 100%;
}
#billing_form .subtotal,
#billing_form .total
{
text-align: right;
margin-top: 5px;
border-top: 1px solid;
font-weight: bold;
}
#billing_form #purchase_items
{
margin: 10px 10px 10px;
}
I found a similar SO question. Unfortunately, the accepted (and only) answer to it states to try position: relative; and vertical-align: top; but it didn't work for me. I tried it with both #billing_form ul and #billing_form ul li and neither worked. They also mention a IE7 hack fix, but I don't think that is relevant to me because I am experiencing the problem in Firefox 3 & 4 and Google Chrome.
Does anyone know how I can make the list-item bullets (discs) appear at the top of each line item?
It looks like vertical-align: text-top; will do what you want (see spec). I believe the reason is that you are creating tall inline blocks that are aligning to the top of the box which is being pushed up by the tall inline box so aligning to top doesn't do what you want. However, I believe that using text-top will align it with the top of where the text is (and the bullet point).
http://jsfiddle.net/Yayuj/ is a fiddle that does what you want (I believe) and has primarily this updated section from your CSS:
#billing_form .discount .item
{
display: inline-block;
width: 190px;
vertical-align: text-top;
}
Any other differences to what you have pasted above should be cosmetic.
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}