I'm having a minor problem with Chrome and IE.
On Firefox, my buttons are perfectly centered inside my navigation bar but on Chrome & IE, my buttons are 1pixel to high and a couple pixels to the left.
Could anyone help me figure this one out?
Here's the url and code : http://nonlocalhost.uphero.com/petshopindex.html
<!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>Pet Shop</title>
<style type="text/css">
/* Background */
body {background-color:black;}
/* Wrapper */
#wrapper {margin:0 auto;width:700px;}
/* Navigation Bar */
#nav_bar {height:95px;}
#nav_bar ul {position:relative;left:47px;list-style-type:none;border:1px solid red;width:565px;}
#nav_bar li {position:relative;left:4px;display:inline-block;height:40px;padding-top:19px;}
#nav_bar a:hover {background-color:#F116BA;}
#nav_bar a {padding:20px;color:white;text-decoration:none;background-color:#790D9E;}
/* Content Box */
#cont_box {background-color:#450768;width:700px;height:500px;border:1px solid white;}
#cont_box ul {border:1px solid white;position:relative;top:10px;left:220px;width:420px;height:450px;list-style-type:none;}
#cont_box li {width:200px;position:relative;top:42px;right:13px;display:inline-block;border:1px solid white;height:180px;}
#cont_box a {color:white;text-decoration:none;position:relative;top:2px;}
#cont_box a:hover{color:red;}
/* Side Menu */
#side_menu {}
/* Product Name Position */
#prod01_namepos {left:70px;}
#prod02_namepos {left:30px;}
#prod03_namepos {left:50px;}
#prod04_namepos {left:70px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
<div id="cont_box">
<ul>
<li> <img src="1.png" height="120" width="200" /> <a id ="prod01_namepos" href="#">Whiskas</a> </li>
<li> <img src="2.png" height="120" width="200" /> <a id ="prod02_namepos" href="#">Whiskas Temptation</a> </li>
<li> <img src="3.png" height="120" width="200" /> <a id ="prod03_namepos" href="#">Pedigree Adult</a> </li>
<li> <img src="4.png" height="120" width="200" /> <a id ="prod04_namepos" href="#">Dog Toy</a> </li>
</ul>
</div>
</div>
</body>
</html>
I fiddled around with your CSS and I think I managed to obtain the behaviour that you are after. Give this CSS a shot:
Live demo: jsfiddle
/* Navigation Bar */
#nav_bar {
height:95px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline-block;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color:#F116BA;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 95px;
padding: 0 1em 0 1em;
background-color:#790D9E;
}
Related
How can I access the ul and the li menu inside the div in CSS?
<section id="main">
<div id="=cont">
<ul>
<li> Our Hitory
<ul>
<li> The Foundation </li>
<li> Our Founders </li>
</ul>
</li>
<li>
Our Company
<ul>
<li> Our Business Practices </li>
<li> Our Brokers </li>
</ul>
</li>
</ul>
</div>
I've tried so many combinations in css but can't seem to be able to access that menu and style it.
Thanks very much in advance!
You have mistake in <div id="=cont"> change it to <div id="cont"> like this
#cont > ul{
list-style-type: none;
}
#cont > ul li{
padding: 10px;
background: green;
}
#cont >ul li ul{
list-style-type: none;
}
#cont >ul li ul li{
padding: 10px;
background: black;
}
<section id="main">
<div id="cont">
<ul>
<li> Our Hitory
<ul>
<li> The Foundation </li>
<li> Our Founders </li>
</ul>
</li>
<li>
Our Company
<ul>
<li> Our Business Practices </li>
<li> Our Brokers </li>
</ul>
</li>
</ul>
</div>
</section>
this is an example of stylization
Taken from: http://www.java2s.com/Code/HTMLCSS/Tags/SettingstyleforULinsideaDIV.htm
#footer ul {
width: 1000px;
text-align: center;
}
#footer li {
display: inline;
list-style-type: none;
line-height: 44px;
}
#footer li a {
color: #574621;
text-decoration: none;
margin: 0 10px;
}
#footer li a:visited {
text-decoration: none
}
#footer li a:hover {
text-decoration: underline
}
?<!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" dir="ltr" lang="en-US"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<div id="footer">
<ul>
<li>Home|</li>
<li>About our Hotel|</li>
<li>Services|</li>
<li>Photogallery|</li>
<li>Testimonials|</li>
<li>Locations|</li>
<li>Contacts</li>
</ul>
</div>
</body>
</html>
To speak to a Tag you can use in the CSS Sheet things like
Example 1:
.id ul li {
your Css Code
}
/* in your case */
.cont {
position: ...;
}
/* Or for deeper Tags
* for example:
*/
.cont ul li a {
position: ...;
}
or but that is a bad Programmingstyle
Example 2:
<li style="color:green"> Our Hitory
there is also a third option to put css Code like in example 1 in a styletag in the head tag
Example 3:
<head>
<style>
<!-- Code from Example 1 -->
</style>
</head>
Hope i can help you!
If you have any Questions left just ask.
Good Luck
<!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>Untitled Document</title>
<style>
.abc {
width:600px;
height:120px;
background-color:yellow;
display:inline-block;
}
ul{
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
</style>
</head>
<body>
<div class="abc">
<img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" />
<ul >
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</body>
</html>
I want to take this navigation bar up( on alignment of middle of the logo). How to do this?
I am new to html/css as well new to stack overflow.
You can use the HTML5 <nav> tag, and FlexBox box model to achieve this.
Here is the a live DEMO.
HTML:
<nav>
<img src="path/to/my/logo" width="180" height="100%">
home
gallery
about us
contact
</nav>
CSS:
body{
margin: 0 !important;
}
nav{
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(21, 138, 194);
}
nav > a{
margin: 0 1em;
display: flex;
color: #036088;
text-transform: capitalize;
text-decoration: none;
}
nav > a:hover{
color: white;
}
What I usually do is capture page elements within div tags and play with margins...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.bar{
margin-left: 150px;
margin-top: -95px;
}
.abc {
width:600px;
height:120px;
background-color:yellow;
position:absolute;
display:inline-block;
}
ul{
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
</style>
</head>
<body>
<div class="abc">
<div class="Image"><img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /></div>
<div class="bar">
<ul >
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
want something like this right? :)
In your CSS, you can set the margin of your page to 0, making the elements on the very border of the page.
Add like below :
*{
margin:0px;
}
This will set all the content of your page with a 0 margin. The * selector matches every element in your html page.
Set the 'vertical-align' property on the image in the navbar to 'middle'.
This will align any other inline elements next to that image relative to the image's vertical center.
This link describes how the vertical-align property works https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
.abc {
width:600px;
height:120px;
background-color:yellow;
display:inline-block;
}
ul {
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
/* THIS IS THE ONLY NEW CODE */
.abc img {
vertical-align: middle;
}
<body>
<div class="abc">
<img src="http://lorempixel.com/400/200/" width="180" height="120" />
<ul>
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</body>
I need to use an image for my navigation buttons inside of my navigation bar. Right now, I have it set as a color, and when hovered over, it changes color.
However, instead of a color, I need an image. I have sized the button image to the exact height and width as I have set it inside of my css.
For each of the ul's: About Me, Photo Edits, Video Edits, Writing, I must have a button. I have the image and it is correct on its width and height.
Here is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!--Start Container for Whole Site-->
<div id="container">
<!--Start Header Content-->
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
Logo" border="0" /></a></div>
</div><!--End Header Content-->
<!--Start Navigation ontainer-->
<div id="wrapper">
<div id="navMenu">
<ul>
<li>About Me
</li>
</ul>
<ul>
<li>Photo Edits
</li>
</ul>
<ul>
<li>Video Edits
</li>
</ul>
<ul>
<li>Writing
<ul>
<li>Samples</li>
<li>Recognition</li>
</ul> <!--end inner UL-->
</ul><!--End main ul-->
<br class="clearFloat" />
</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->
<!--Start Media Area-->
<div id="media">
<h1>Images/Rich Media</h1>
<p>(470 x 550)</div>
<div id="text">
<h1>Main Body Text</h1>
<p>(470 x 400)</p>
</div><!--End Text Area Here-->
<!--Start Footer Here-->
<div id="footer">
<h1>Footer (50 x 1024)</h1>
<p>
Voo2Do Public Task List
Sitemap Public Image
Wireframe Public Image
</p>
</div> <!--End Footer Here-->
</div><!--End Container for whole site-->
<div id="w3"><!--Start HTML 5 Validation Button Here-->
<p>
<img src="images/valid_html5.gif" alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></p></div><!--End HTML 5 Validation Button Here-->
</body>
</html>
And here is my CSS Code for the Navigation Bar:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin: 0;
padding:0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #C0C0C0;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 35px;
width: 254px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility: hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background: #09f;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navmenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
I have tried to put url(images/navbutton.jpg) inside #navMenu and that didnt work. No matter what selection I put the image under, nothing happens. And then on top of all that, I also have to have a rollover image for my buttons that is different from my background image. So i'm having two images. One image will be the button, and the second image will appear when hovered over. I'm going cross-eyed, ugh. Can someone please help me?
note I am not using JS or JQ.
Just add the images in HTML instead of CSS, and then style them.
Assuming you don't want the labels "About Me, Photo Edits, Video Edits, Writing"...Just add add this inside your <a> tags:
<img src="/images/about-me.jpg" alt="About Me">
Then in your CSS just target the image:
#navMenu ul li a img { width: 254px; height: 35px; }
You then just need to add any styles for positioning.
For the hover effect, just add another image right next to the first one, add a class to it and then in CSS apply display: none; to that image. On hover of the <a> tag, just display: none; the first image and display: block; the second image.
You will also need to add relative positioning to the containing <a> tag and absolute positioning to the images so that they can sit on top of each other for when you hover on and off of them.
If you would like more specific info please create a codepen or jsfiddle with your current state of things.
How do I control vertical spacing between 2 items stacked, centered and vertically within an unordered list item? This is a glyphicon on top of the text link within an unordered list item in my navigation menu.
What would be the CSS rules for such a thing to happen.
<!Doctype html>
<html lang="en-us">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" title="style">
<head>
<style type="text/css">
/*
Adding display: inline-block; as a style attribute will display the content horizontally. Add that to the Nav's
<li> elements in css. I'm guessing every <li> may have a glyph. Add text-align:center on the <li>'s within the
nav in css to align the <li>'s content in the middle.
*/
*{
margin:0;
padding:0;
}
/* To target only one icon, */
.glyphicon.glyphicon-globe {
padding:3px 0 0 0;
margin: 0 0 -15px 0;
font-size: 17px;
}
nav {
width: 100%;
height:50px;
line-height:50px;
text-align:center;
background:#87e0fd;
color:#f00;
}
nav ul {
margin:0;
padding:0;
width:100%;
line-height:50px;
height:auto;
list-style:none;
}
nav li {
display: inline-block;
width:110px;
height:50px;
text-align:center;
text-decoration: none;
padding:auto;
margin:0;
border-left: solid 1px #999;
}
/* Puts border on right side of menu */
nav li:last-child {
border-right: solid 1px #999;
}
/* To target the Hover Action or Active you could write the css like below. */
nav li:hover {
text-decoration: none;
background:#3f4c6b;
color:#fff;
cursor:pointer;
}
nav li:active {
text-decoration: none;
margin: -15px 0 0 0;
}
</style>
<title>My Glyphicon Navigation Menu </title>
</head>
<body>
<nav>
<ul>
<li>
<link href="#" title="HOME">
<span class="glyphicon glyphicon-globe"></span><br>
<span class="glyphicon-class">Home</span>
</link>
</li>
<li>
<link href="#" title="ABOUT">
<span class="glyphicon glyphicon-globe"></span><br>
<span class="glyphicon-class">about</span>
</link>
</li>
<li>
<link href="#" title="CONTACT">
<span class="glyphicon glyphicon-globe"></span><br>
<span class="glyphicon-class">Contact</span>
</link>
</li>
</ul>
</nav>
<p>Hello World</p>
</body>
</html>
This is an example on how you can do it, by adding this to your css :
/* Adding margin between glyphicon and text */
.glyphicon-class {
display:block;
margin-top:50px;
}
Here is a fiddle : http://jsfiddle.net/b6tabykq/1/
If you wanted to remove the spaces, I don`t know what you wanted to, you should remove your < br > tag in html..
Fiddle : http://jsfiddle.net/b6tabykq/2/
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.