I'm stuck. I created an image and want it to be a background image accessed through CSS for the navigation menu with text placed over it in HTML.
Here is my CSS:
.menu_item {
background:url(../images/menu_normal.png) no-repeat;
}
Here is the HTML:
<!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>
<title>Quotation Form</title>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li class = "menu_item"><a href="#">About</li>
<li class = "menu_item">Services</li>
<li class = "menu_item">For Translators</li>
<li class = "menu_item">Free Quotation</li>
</ul>
<img src = "images/menu_normal.png">
</body>
</html>
Here is the result: http://eximi.dreamhosters.com/turbolingvo/menu.html
I want the image to be displayed behind the menu items just like it is displayed in the <img src...> below it.
What am I doing wrong?
Thank you!
You'll need something like:
.menu_item {
background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;
float: left;
height: 53px;
line-height: 53px;
list-style: none;
text-align: center;
width: 227px;
}
You have to style your li element to adjust look
for example
.menuitem{
background:url(../images/menu_normal.png) no-repeat;
display: block;
height: 33px;
padding: 10px;
width: 207px;
}
this is just example, you can style it however you like as per requirement
Change the background to be on ul element and give the ul element the class menu.
CSS
.menu {background:url(../images/menu_normal.png) no-repeat; }
HTML
<ul class='menu'>
<li><a href="#">About</li>
<li>Services</li>
<li>For Translators</li>
<li>Free Quotation</li>
</ul>
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
So here's my current HTML code, within the <head> section:
<ul class="nav">
<li>
<a href="http://www.greg-holmes.com/#/title" target="_blank">
<img src="img/home.png">
</a>
</li>
... <!-- Deleted some elements for readability -->
<li>
<a href="http://www.instagram.com/djspiffy" target="_blank">
<img src="img/instagram.png">
</a>
</li>
</ul>
Here's the CSS that goes along with it:
.nav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
The code is live at greg-holmes, but for some reason the links aren't working.
You need to put your HTML code inside <body> tag not <head> tag
HTML doesn't go in the page header, all HTML belongs in the body.. your code should be
<html>
<head>
...
</head>
<body>
<ul class="nav">
<li>...</li>
</ul>
</body>
</html>
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.
<div id="navigation>
<ul class="navlist">
<li><img src="images/btn1.gif"/></li>
<li><img src="images/btn2.gif"/></li>
<li><img src="images/btn3.gif"/></li>
</ul>
</div>
How would I be able to give these "buttons" within the list rollover states without using JS? I'm totally drawing a blank...
These links must be images.
If you're supporting newer browsers (browsers that support the :hover selector on all elements, which is basically everything except IE6, see here) you can do this with CSS provided you change your HTML. You will need to remove the img tags, and instead use background images.
CSS (this is the simple example with 2 images, you'll need to set the height + width. If you have many different images, you'll need a css class for each of them):
<style type="text/css">
.navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
.navlist li:hover { background-image: url('images/image2.gif'); }
</style>
HTML:
<div id="navigation">
<ul class="navlist">
<li></li>
<li></li>
<li></li>
</ul>
</div>
There's a lot of ways to do this. Basically, move one image off the screen when you hover. Or you could change the z-index of two images on top of each other when you hover, or you could do it with background images, or with the display option.
I prefer using the display option, since the CSS is quite simpple.
Since it's done with classes you can just add as many buttons as you want.
Here's the code for a page that contains the HTML and CSS together.
The DOCTYPE declaration is necessary to make it work in IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
a img {
border:none;
}
ul {
list-style-type: none;
}
img.defaultSt {
display: inline;
}
img.hoverSt {
display: none;
}
li:hover img.defaultSt {
display: none;
}
li:hover img.hoverSt {
display: inline;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="navlist">
<li>
<img class="defaultSt" src="http://mrg.bz/vh60HV" />
<img class="hoverSt" src="http://mrg.bz/CcDOmL" />
</li>
</ul>
</div>
</body>
</html>
You could try using a transparent image as the link primary and then use css to alter the background
<style type="text/css">
a.img1, a.img1:link { background-image: url(images/btn1.gif); }
a.img1:hover { background-image: url(images/btn1_over.gif); }
a.img2, a.img2:link { background-image: url(images/btn2.gif); }
a.img2:hover { background-image: url(images/btn2_over.gif); }
a.img3, a.img3:link { background-image: url(images/btn3.gif); }
a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>
<div id="navigation>
<ul class="navlist">
<li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
</ul>
</div>
You just have to keep in mind the size of the images in question.
I am trying to align an image and some text together. If you refer the below code there will be and image and some text( Name and Age) I want both of them to be next to each other. I did try float: left but still no luck.
Thanks
<!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' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style>
img {
height: 10px;
width: 20px;
}
ul li{
display:block;
}
ul {
margin: 0;
float: left;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<p>
<img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
</div>
</body>
</html>
Technically your HTML is invalid. A list is a block level element and you can't (or shouldn't) embed then in paragraphs since they should only take inline elements.
There is no Name and Age mentioned anywhere in your markup so I'm not sure what you're referring to there.
Edit: to put the image on the left and have the two labels on the right one above the other, use this markup:
<div id="container">
<img src="cat.jpg">
<ul>
<li>Source</li>
<li>Item Link Title</li>
</ul>
</div>
and either this CSS:
html, body, div, ul, li, img { padding: 0; margin: 0; border: 0 none; }
#container { background: yellow; overflow: hidden; float: left; }
#container img { float: left; }
#container ul { list-style-type: none; float: left; background: green; }
The float: left on the container is optional. It simply means that it isn't as wide as its container. The first line is a crude reset CSS. I'd suggest using a real CSS and a DOCTYPE always.
You can't put an unordered list inside of a paragraph (well you can but it's not valid). I don't know exactly what you're trying to do but see if this helps:
<!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' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style type="text/css">
img {
height: 10px;
width: 20px;
}
ul li{
display:inline;
}
ul {
display:inline;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<img src="la.jpg" alt=""/> <ul><li>Source</li><li>Item Link Title</li> </ul>
</div>
</body>
</html>
smallest change to your code:
<!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' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style>
img {
height: 10px;
width: 20px;
}
ul li{
display:block;
}
ul {
margin: 0;
padding-left:0;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<p>
<img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
</div>
</body>
</html>
Having said that, the other 2 are correct. lists really shouldn't be inside a paragraph if you want to be HTML strict.