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>
Related
I'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
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 adding some pictures to a website I am building for a client, and for some reason some of the pictures underlap other pictures when i change the resolution, and some don't. I am adding all the pictures the same way so I am a little confused as to why some are positioned staticly.
HTML PICTURES
<!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Jay Cousins</title>
<link rel="stylesheet" href="css/site.css" type="text/css">
</head>
<body>
<div id="header">
<img id="papa" src="newImages/papaPic.jpg">
<img id ="jaytext" src="newImages/jaycousins.png">
<img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">
<img id ="commercialtext" src="newImages/commercialtext.png">
<img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">
<ul>
<li class="selected">
home
</li>
<li>
Opportunities
</li>
<li>
Project Management
</li>
<li>
About Jay
</li>
<li>
Community
</li>
<li>
Contact
</li>
</ul>
</div>
CSS
body {
background: url(../newImages/headerBackground.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
//font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background: url(../images/bg-header.png) repeat-x bottom center;
margin: 0;
text-align: center;
display: block;
height:290px; //height for adjust picture
}
#papa {
display: block;
margin: 0 auto;
width: 430px;
margin-left:0px;
height:270px; //
}
#jaytext{
position: absolute;
top:5.5%;
left:31.7%;
}
#darkTextBackground{
width:550px;
height:73px;
position:absolute;
top:24.2%;
left:31.8%;
}
#commercialtext{
height:57px;
width:550px;
position:absolute;
top:23.5%;
left:29.0%;
}
#leftsidebackground{
width:300px;
height:523px;
position:absolute;
left:0%;
}
#text{
position:absolute;
top:0%;
}
#header ul {
background: url(../images/menu-border.gif) no-repeat bottom left;
margin: 0 auto;
overflow: hidden;
padding: 0 0 0px 1px;
width: 970px;
position:relative;
left:5%;
}
#header ul li {
background: url(../images/bg-menu.gif) repeat-x bottom center;
border-top: 2px solid #4f5342;
float: left;
list-style: none;
margin: 0;
}
#header ul li a {
background: url(../images/menu-border.gif) no-repeat bottom right;
color: #93958b;
display: block;
font-size: 14px;
height: 42px;
letter-spacing: 1px;
line-height: 42px;
margin: 0;
padding: 0 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header ul li.selected a {
color: #4c4d3d;
background: #e5e5e5;
}
#header ul li a:hover {
color: #c0c3b4;
}
If you have fixed number of images here then wrap them in a div and set the div following properties div {-webkit-column-count: 5; /* Chrome, Safari, Opera /-moz-column-count: 5; / Firefox */column-count: 5;}
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);
I have been in this problem for a while now, everytime I resize the navigation bar it keeps on adding 1 line at the bottome if the size ddint match. can anyone help me delete that little space after the contact me tab? thanks in advance.
this is the link of the outcome
my codes is this
obj.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>
<link rel="stylesheet" type="text/css" href="obj1.css">
<title>Objective 1</title>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navbutton">About Us</li>
<li class="navbutton">Our Team</li>
<li class="navbutton">Education</li>
<li class="navbutton">Health Care</li>
<li class="navbutton">Advertising</li>
<li class="navbutton">Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
obj1.css
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul {
display: inline-block;
list-style-type:none;
margin:0;
padding:0;
}
li {
float: left;
}
.header{
width: 900px;
height: 385px;
background-image: url(header.jpg);
}
.navbutton {
position: relative;
top: 310px;
width: 145px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-image: url(link.png);
}
.navbutton a {
text-decoration:none;
}
.navbutton:hover{
background-image: url(linkselected.png);
}
You can fix this by adding the following rules:
//Change the header width to 901px to fit all the tabs
.header{
width: 901px;
height: 385px;
background-color: #ccc;
}
//Change the navbutton to be 146px wide
.navbutton {
position: relative;
top: 310px;
width: 146px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-color: white;
}
//Remove the margin on the last child
.navbutton:last-child {
margin-right:0;
}
Here is the jsFiddle in case you need it - http://jsfiddle.net/XXczL/
place all the <li> tags in a <div>
set css for that <div id="customDiv">
#customDiv {
margin-left:auto;
margin-right:auto;
}
this will make the left and right margin equal and the extra space is distributed equally on both sides..
You have 2 problems going on here. First, you have margins being applied where you don't actually want them. Even when you correct this, your header's width still causes the appearance of the undesirable "space"
http://tinker.io/0191d/2
Include the following modifications:
.header {
width: 895px; /* or modify the width of the button elements */
}
ul {
margin: 0 0 0 -5px;
}
.navbutton {
margin-left: 5px;
margin-right: 0;
}
You could use the :last-child selector to remove the margin on the last element, but it doesn't work very well in instances where you actually want your elements to wrap (see: http://codepen.io/cimmanon/pen/dwbHi). Also, IE8 doesn't support it.
Check this jsfiddle for a fluid layout solution.
This solution uses the display: table, display: table-row, and display: table-cell property values.
Markup
<div class="header">
<div class="nav">
<ul>
<li class="navbutton">
About Us
</li>
<li class="navbutton">
Our Team
</li>
<li class="navbutton">
Education
</li>
<li class="navbutton">
Health Care
</li>
<li class="navbutton">
Advertising
</li>
<li class="navbutton">
Contact Us
</li>
</ul>
</div>
</div>
CSS
body{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.nav ul{
display: table-row;
list-style-type: none;
margin: 0;
padding: 0;
}
.header{
width: 900px;
height: 385px;
background: #f00 url(header.jpg);
overflow: hidden;
border: 1px solid #000
}
.nav{
display: table;
width: 100%;
margin-top: 310px;
}
.navbutton{
display: table-cell;
height: 75px;
background-image: url(link.png);
padding: 0 4px;
}
.navbutton a{
background: none repeat scroll 0 0 #FFFFCC;
color: #FF0000;
display: block;
height: 100%;
line-height: 75px;
text-decoration: none;
text-align: center;
}
.navbutton:hover{
background-image: url(linkselected.png);
}
li:last-child, li.the_last_child{ padding-right: 0; }
li:first-child, li.the_first_child{ padding-left: 0; }