I have two links that are a part of my navigation bar that have drop downs. What I would like is a background image for each drop down;an image for fairies, a different image for craniums. I'm pretty close, I think, but I'm unsure as to how to set this up. After reading several posts, the post from Ryan Rahif on May 19 at 18:58 is pretty darned close to what I want. Do I need to create another hover div? Do I need to create a hover for each drop down?
thank u
<!Doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fairies - Tabbed Dropdown</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>World of Fairies</li>
<li>Fairihabitants
<ul>
<li>Fairies</li>
<li class="cranlink">Craniums</li>
</ul>
</li>
<li>Fairi-bitats
<ul>
<li>Dreams</li>
<li>Tinkling Bells</li>
<li>Rain Drops</li>
</ul>
</li>
<li>Fairy Dust</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* CSS Document - Stylesheet.css */
/* BODY AND CONTAINER
-------------------------------------- */
body {
font-size: 76%;
padding: 0px;
margin: 0px;
}
#container {
width: 650px;
padding: 0px;
margin: 0 auto 0 auto;
}
/* MAIN NAVIGATION
-------------------------------------- */
#nav {
float: left;
width: 650px;
height: 50px;
border-bottom: 2px solid #000;
padding: 0px;
margin: 100px 0 0 0;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
padding: 0px;
margin: 0px;
}
#nav ul li a {
float: left;
width: 150px;
height: 50px;
background-image: url(../images/fairy-gate.jpeg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 50px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 0px;
margin: 0 0 0 10px;
}
#nav ul li a:hover {
background-image: url(../images/bg-nav-hover.png);
background-repeat: repeat-x;
}
/* DROPDOWN MENU - MAIN NAVIGATION
-------------------------------------- */
#nav li ul {
display: none;
}
#nav li:hover ul {
width: 150px;
display: block;
visibility: visible;
position: relative;
top: 0px;
clear: both;
z-index: 1;
}
.cranlink {
background-image:url(../images/craniums.jpg);
Related
I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?
Here is my HTML + CSS:
* {
margin: 0;
padding: 0;
}
body {
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover img {
height: 50%;
width: 100%;
position: relative;
display: inline-block;
}
.newest-review-cover .newest-review-title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-title">
<p> The 5AM Club </p>
</div>
</section>
</body>
</html>
Thanks in advance for your help!
For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:
.newest-review-cover {
position: relative;
}
.newest-review-cover img {
display: block;
width:100%;
}
.newest-review-title {
position: absolute;
display:block;
z-index: 999;
margin:0 auto;
text-align: center;
top: 50%;
width: 60%;
left:20%
}
This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.
* {
margin: 0;
padding: 0;
}
body {}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
/* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px;
/* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li {
width: 130px;
/* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover {
position: relative;
height: 383px;
width: 100%;
}
.newest-review-cover_bg {
background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.newest-review-cover .newest-review.title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%;
/* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 60%;
/* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel="stylesheet" type="text/css" />
<link href="Homepage.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<div class="newest-review-cover_bg">
<p class="newest-review-cover_title">
The 5AM Club
</p>
</div>
</section>
</body>
</html>
I am just getting back to working with websites, and cannot for the life of me center this navigation bar. I have floated the header over to the left, and feel like I have tried every possibly property, but it just will not center. Any help would be very appreciated.
Not centered NavBar:
.container {
margin: 0 auto;
background-color: #fff;
}
.header-heading {
float: left;
padding-top: 8px;
padding-left: 5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
background: #000;
padding: 0;
width: 100%;
}
.nav {
margin: auto;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Report Demo</title>
<styles></styles>
<link rel="stylesheet" href="ed.css">
</head>
<body>
<div class="container">
<h1 class="header-heading">Web Reporting Demo</h1>
<div class="nav-bar">
<ul class="nav">
<li>Daily Master</li>
<li>Route Progress</li>
<li>UL Move Query</li>
<li>Stock Query</li>
</ul>
</div>
</div>
</body>
This should work
.container {
margin: 0 auto;
background-color: #000;
position:relative;
width: 100%;
height: 40px;
}
.header-heading {
position: absolute;
top:-20px;
left:5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
padding-top: 5px;
}
.nav {
margin: auto;
padding: 5px;
list-style: none;
text-align: center;
width: 100%;
}
.nav li {
display: inline;
padding: 5px;
}
.nav li a {
text-decoration: none;
color: #fff;
}
You will need to do some changes as you work in your responsive design.
Try giving the .container text-align: center.
So I am new in this HTML thing and I am experimenting with a navigation bar. With when I hover over a li/a element I get another color for the full height of the navigation bar.
This is what I get first
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
overflow: hidden;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
And then I changed a few things in the code and came up with this (Here is the second experiment result) (erasing overflow:hidden; and changed it with line-height:55px;)
I got the full height hover but there's a white gap between the browser window and my navigation bar.
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
I know there's a bunch of similar questions like mine and I've read them before asking here, but I still don't get the result that I want.
Here you go, your navbar needs margin removed, so check the code ..
EDIT: I also modified a a little bit, so it doesn't overflow navbar and fills full height of it.
body {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul {
margin: 0; /* <--- THIS IS WHAT REMOVES BLANK SPACE ABOVE/BELOW NAVBAR */
}
.navbar ul li {
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a {
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 0 50px; /* more proper use of padding */
line-height: 55px; /* line-height to allow full clickable area */
display: block; /* so the line-height can be applied */
}
.navbar ul li:hover {
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</div>
</div>
</body>
</html>
In your CSS , add
html,body {
margin: 0;
padding:0;
}
How to align the logo to my navigation bar?
My HTML code is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
<nav>
<ul>
<li>Monitoring</li>
<li>Process</li>
<li>Post and Create Email/Excel</li>
<li>Reports</li>
<li>Tools</li>
<li>Sales</li>
</ul>
</nav>
</div>
</body>
</html>
and heres my style.css code:
body{
margin: 0;
padding: 0;
font-size: 15px;
}
/* Navigation */
nav{
margin: 0;
overflow:hidden;
text-align: center;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
display: inline-block;
list-style-type: none;
}
nav > ul > li > a{
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 1em;
text-decoration: none;
}
-----------
.logo-img{
position: relative;
margin: 10px 15px 15px 10px;
}
.bg-div{
background:#333;
}
I want to display the logo at the left side and the navigation bar to the right side.
Made a pen far more simpler:
https://codepen.io/DevAlokes/pen/yLEJEYY
* {
text-decoration: none;
list-style-type:none;
color: white
}
.bg-div {
background-color: #333;
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
}
nav ul li{
margin: 0 12px;
}
The simplest and most basic answer is, use floats.
.logo-img {
float: left;
}
nav {
float: right;
}
Normally, it's better to use "position: fixed;" for navigation bars on top. So, your css can do like this:
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
I'm designing a horizontal menu where I use a simple one-colored image of the full menu bar, and a second image for the hover state, which is a bit darker. Actually I made just one image containing both, but that's not the point.
My problems are :
Hover image displays over the correct full width of each list item,
but it's only a link (showing hand) when hovering the text.
My attempt of double-class attributes to adjust position of hover image on first/last list item does not work. It seems this code is never reached..? Hence as image shows, I do not get adjusted the x-position of hover image.
Please note I started with CSS a few days ago, so there are likely some basic concepts I've not yet understood..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<meta name="author" content="SS" />
<!-- Date: 2011-11-26 -->
<link href="site2.css" rel="stylesheet"type="text/css" />
</head>
<body>
<div class="header-wrap">
header
</div>
<div class="main-wrap">
<div class="main-content">
<div class="inner-header">
inner header
</div>
<div class="navbox">
<div class="navmenu">
<ul class="ul_nav">
<li class="nav-item nav-item-first">
Home
</li>
<li class="nav-item">
Page1
</li>
<li class="nav-item">
Page2
</li>
<li class="nav-item nav-item-last">
Page3
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="lower-content">
lower-content
</div>
<div class="footer">
footer
</div>
</body>
</html>
CSS:
/* Basics */
body {
background: #888 url() center 30px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
margin: 0 auto;
}
/* Main divs */
.header-wrap {
background: #ddd;
height: 35px;
color: #00f;
}
.main-wrap {
background: #000 url(07h600a.png) no-repeat center 0;
margin: 0 auto;
}
.main-content {
overflow: hidden;
position: relative;
z-index: 10;
background: transparent; /* to be transparent*/
height: 600px;
margin: 0 auto;
width: 980px;
}
.lower-content {
background: #000;
color: #888;
height: 100px;
}
.footer {
background: #777;
height: 100px;
margin: 0 auto;
}
/* Content */
/* Menu */
.navbox {
background: #660;
position: relative;
padding: 0px 0 0 0;
margin: 0 auto 0px;
font-weight: bold;
font-size: 12px;
line-height: 40px;
height: 50px;
width: 980px;
margin: 0 auto;
}
.navmenu {
margin: 0 auto 0px;
padding: 0 0 0 0;
width: 980px;
}
.ul_nav {
margin: 0;
padding: 0;
list-style: none outside none;
text-transform: uppercase;
}
.navmenu .ul_nav {
width: 980px;
position: relative;
display: table;
}
.ul_nav li {
display: table-cell;
}
.ul_nav a, .ul_nav a:visited {
padding: 0 0;
text-decoration: none;
color: #fff;
}
.navmenu .nav-item {
background: transparent url(MenuGray.png) no-repeat scroll;
background-position: 50% -10px;
}
.navmenu .nav-item-first {
background-position: 0px -10px;
}
.navmenu .nav-item-last {
background-position: 100% -10px;
}
/* Menu hover */
.ul_nav .nav-item-first li:hover {
background: transparent url(MenuGray.png) no-repeat scroll;
background-position: 0px -50px;
}
.ul_nav .nav-item-last li:hover {
background-position: 100% -50px;
}
.ul_nav li:hover {
background-position: 50% -60px;
}
/* Menu font */
.ul_nav_color a, .ul_nav_color a:visited {
color: #FFF;
}
For
You need to make sure the a tag fills the li parent by setting it to display block or inline-block and adjust padding, margin, etc., to have its edge match up to the li edge. This will get you a link over the whole space, not just the text.
You have the li listed after the class for the li, so you need this:
.ul_nav .nav-item-first:hover
Not
.ul_nav .nav-item-first li:hover
I'd suggest you go through http://css.maxdesign.com.au/listutorial/index.htm for some good examples of doing horizontal lists. Probably avoid setting your list to table.
Here is a simple horizontal list that sets the width/height of the anchor which you could change to an image if needed.
css
.newnav ul {margin:0; padding:0; list-style-type: none;}
.newnav ul li { display:inline-block;margin:0; padding:0; }
.newnav ul li a { text-decoration: none; background-color: #aaa; display:inline-block; width: 150px; height: 50px; line-height: 50px; }
.newnav ul li a:hover{background-color: #ddd;}
html
<div class="newnav">
<ul>
<li class="nav-item nav-item-first">Home</li>
<li class="nav-item">Page1</li>
<li class="nav-item">Page2</li>
<li class="nav-item nav-item-last">Page3</li>
</ul>
</div>