i created a style called "topbar" using css.
The code are as follows:
.topbar:hover ul{ display: inline;}
.topbar {
float: left;
margin-left: 20px;
margin-right: 20px;
font-family:"Georgia";
}
.topbar ul {
display: none;
top:30px;
position: absolute; border-style:solid;
border-width:1px; background-color:white;}
}
.clear {
clear: both;
}
then i went to create a ul "grid" and allows mouse hover enlarge of images
ul.grid, ul.grid > li {
margin: 0;
padding: 0;
}
ul.grid {
}
ul.grid > li {
float: left;
list-style-type: none;
text-align: center;
font-family:"Georgia", serif;
padding-top:50px;
padding-bottom:25px;
padding-right:25px;
padding-left:0px;
}
ul img:hover { width: 200px; height: 250px; }
my html code:
<body>
<div class="topbar">
<p>Title</p>
<ul>
<li>A-Z</li>
<li>Z-A</li>
</ul>
</div>
<div class="topbar">
<p>Genre</p>
<ul>
<li>Action</li>
<li>Comedy</li>
<li>Animation</li>
<li>Horror</li>
<li>Drama</li>
</ul>
</div>
<div class="clear"></div>
<br />
<div id="videos">
<ul class="grid">
<li>
<p class="image"><img src="http://3.bp.blogspot.com/-AGAaic1-yrM/TcWmj77lHzI/AAAAAAAAAkQ/K6zzSk1WgUY/s1600/thor-movie-poster-1.jpg" alt="Thor" width="175" height="200" /></p>
<p class="name">Thor</p>
<p class="genre">Action</p>
<p class="format">DVD</p>
<p class="year">2011</p>
</li>
<li>
<p class="image"><img src="http://www.galacool.com/wp-content/uploads/2010/02/hangover2.jpg" alt="Hangover" width="175" height="200" /></p>
<p class="name">Hangover</p>
<p class="genre">Comedy</p>
<p class="format">DVD</p>
<p class="year">2009</p>
</li>
</ul>
</div>
</body>
Why do i have a left unwanted space beside my "thor" movie image?
The left space must be the indentation of the List where you are putting them. Ideally, to remove this left-indentation, you should set both padding and margins to "0" for the "UL".
This small piece of code works perfectly in this context:
CSS
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
HTML
<div id="navcontainer">
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
</ul>
</div>
Related
I am trying to display h3 elements of parent div on hover horizontally,
as shown in screenshot below:
If I try position: absolute, all the h3 elements are collapsing, which results in another issue: I am not able to hover and get the list of h3, as they are collapsed.
codepen url :https://codepen.io/divyar34/pen/PpjrYO
HTML:
<ul>
<li>
aaa
<div>
<div>
<h3>111</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
<div>
<h3>1112</h3>
<ul>
<li>zz11</li>
<li>zz21</li>
</ul>
</div>
<div>
<h3>1113</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
</div>
</li>
<li>
bb
<div>
<div>
<h3>2220</h3>
<ul>
<li>yy</li>
<li>yyyy</li>
</ul>
</div>
<div>
<h3>2221</h3>
<ul>
<li>yy1</li>
<li>yyyy1</li>
</ul>
</div>
</div>
</li>
<li>
cc
<div>
<div>
<h3>3330</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3331</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3332</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3333</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
</div>
</li>
</ul>
CSS:
a{
text-decoration:none;
padding: 5px;
border-radius: 10px;
color:white;
background:rgb(0,176,240);
border:none;
}
ul li{
list-style-type:none;
display:inline;
cursor:pointer;
float: left;
width: auto;
padding-left: 6px;
}
ul li:hover a{
background:orange;
}
ul li:hover ul{
width: 100%;
visibility: visible;
}
ul li ul{
display:block;
padding-left:5px;
padding-top:5px;
visibility: hidden;
position: absolute;
left: 0;
line-height: 40px;
}
div ul{
width:100%
}
ul li div{
visibility: hidden;
position:absolute;
}
ul li div div ul{
display:none;
}
ul li:hover div{
visibility: visible;
}
ul li div div{
display:block;
}
ul li ul li div div h3{
display:inline;
text-decoration:none;
padding: 5px;
border-radius: 10px;
color:white;
background:rgb(0,176,240);
border:none;
}
MAJOR EDITS: to accommodate the OP's added info on the issue
First of all, you are using a lot of nested div and ul, so you should consider using classes to avoid unnecessary confusion. Alternatively, If using classes affects some functionalities, then make use of CSS Selectors, instead.
Run the working snippet below, or
Use this JSFiddle if you want to play around, further.
/* New plus Modified CSS */
/*General CSS*/
li{
list-style-type:none;
display:inline;
cursor:pointer;
float: left;
width: auto;
padding-left: 6px;
}
li a{
text-decoration:none;
padding: 5px;
border-radius: 10px;
color:white;
background:rgb(0,176,240);
border:none;
}
li a + div div,
h3 + ul li {
border: solid 1px grey;
display: inline-block;
margin: 10px 2px;
padding: 0 10px;
}
li a + div,
h3 + ul {
padding-left:5px;
padding-top:5px;
position: absolute;
left: 0;
line-height: 40px;
visibility: hidden;
}
/*END General CSS*/
/*Hover CSS*/
li:hover a{
background:orange;
}
li:hover a + div,
li a + div div:hover h3 + ul {
visibility: visible;
}
/*END Hover CSS*/
/* END New plus Modified CSS */
<ul>
<li>
aaa
<div>
<div>
<h3>111</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
<div>
<h3>1112</h3>
<ul>
<li>zz11</li>
<li>zz21</li>
</ul>
</div>
<div>
<h3>1113</h3>
<ul>
<li>zz1</li>
<li>zz2</li>
</ul>
</div>
</div>
</li>
<li>
bb
<div>
<div>
<h3>2220</h3>
<ul>
<li>yy</li>
<li>yyyy</li>
</ul>
</div>
<div>
<h3>2221</h3>
<ul>
<li>yy1</li>
<li>yyyy1</li>
</ul>
</div>
</div>
</li>
<li>
cc
<div>
<div>
<h3>3330</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3331</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3332</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
<div>
<h3>3333</h3>
<ul>
<li>ccccc</li>
<li>dddd</li>
</ul>
</div>
</div>
</li>
</ul>
I am designing a webpage. I have two levels of navigation, the social media buttons on the first level and later a navigation bar. I am having issues getting the background colour of the navigation bar to go the complete length of the webpage, at present it starts and stops with the navigation bar. I am guessing it is an issue related to the location or my coding of the clearfix? Anyways I would appreciate your advice. My coding is below, I have attached a photo of my site so you can see what it looks like.
My Html code:
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<a href="https://www.facebook.com/Save-NSW-Government-Disability-
Services-ADHC-709029659182219/" target="_blank"><img src="images/facebook.png" alt="Facebook" width="32" height="32"></a>
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div id="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</l>
</ul>
</div>
<div id="clearfix">
</div>
</div>
</nav>
</header>
</div>
My Css:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: sans-serif;
background-color: black;
}
#wrapper {
width: 1366px;
height: auto;
background-color: black;
margin: 0 auto;
padding: 10px;
}
#header {
width: 100%;
height: 140px;
background-color: black;
}
#logo {
float: left;
margin: 0px 0px 20px 50px;
padding-left: 100px;
}
#social {
float: right;
top: 0px;
margin: 0 auto;
}
#social ul li {
float: left;
list-style: none;
padding: 5px;
}
#clearfix:after {
display: block;
clear: both;
}
#page_nav {
background-color: #c50a13;
}
ul#navmenu {
list-style-type: none;
width: 800px;
margin: auto auto 5px auto;
}
ul.submenu {
list-style-type: none;
}
ul#navmenu li {
outline: 1px solid white;
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
color: #26b0f1;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #c50a13;
border: 1px solid white;
border-radius: 5px;
color: white;
}
ul#navmenu .submenu a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color: white;
color: #c50a13;
}
ul#navmenu ul.submenu {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .submenu {
display: block;
}
.darrow {
font-size: 14pts;
position: absolute;
top: 10px;
right: 1px;
color: dodgerblue;
}
Update:
You forgot something in your CSS clearfix.
#clearfix:after {
display: block;
clear: both;
content: ''; /* add me */
}
In addition, you have some errors in your HTML which can affect rendering in different ways in different browsers.
[1] Invalid close tag for an <li>
[2] Extra </div> before the close of your </nav>.
[3] Duplicate IDs: id="clearfix"
First, fix the duplicate IDs. In your CSS, change this:
#clearfix:after {
display: block;
clear: both;
}
To this:
.clearfix:after {
display: block;
clear: both;
}
Here is your HTML without errors.
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<img src="images/facebook.png" alt="Facebook" width="32" height="32">
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div class="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>
Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>
News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div class="clearfix">
</div>
</nav>
</header>
</div>
Hi in the below code right end of the logo text want to display and all the three option in a single line.
expected output:
Logo Welcome Guest Free Register Login
can anyone help me
.logo {
float: left;
}
.logo a {
display: block;
}
.header {
margin: 10px 0;
}
.header-right ul li {
width: 52%;
float: right;
}
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="images/logo.gif" alt="" />
</a>
</div>
<div class="header-right">
<ul>
<li>Welcome Guest</li>
<li>Free Register</li>
<li>Login</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
The problem is that you are giving float and width to every single li.
You want to do that to the ul and give display: inline-block to the li.
Something like this..
.logo {
float: left;
}
.logo a {
display: block;
}
.header {
margin: 10px 0;
}
.header-right ul {
float: right;
width: 52%;
}
.header-right ul li {
display: inline-block;
margin-right: 30px;
}
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="images/logo.gif" alt="" />
</a>
</div>
<div class="header-right">
<ul>
<li>Welcome Guest</li>
<li>Free Register</li>
<li>Login</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
Try like this: Demo
.header-right{
width: 52%;
float: right;
}
.header-right ul li {
margin:0 20px;
display:inline-block;
}
Update your styles like this:
.header-right ul {
width: 52%;
float: right;
}
.header-right ul li
{display:inline;
margin-right:15px;
}
^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)
^^Using 1.666666666666666%
Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.
I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.
body {
margin:0px;
font-family:avenir, sans-serif;
}
.nav {
margin: 0px 0px 0px 0px;
overflow:hidden;
width:100%;
<!--box-shadow: 0px 0px 10px 0px #000000;-->
}
.link-header {
background-color:rgb(242,242,235);
}
.school-header {
background-color:rgb(40,110,123);
}
.nav-left {
display: inline-block;
float:left;
}
.nav-right {
display: inline-block;
float:right;
}<!--
.nav-center {
text-align: center;
}-->
a {
text-decoration: none;
}
.school-header a {
color:white;
}
.link-header a {
color:rgb(40,40,40);
}
.nav-li-outer {
padding-left:calc(1/60*100%);
padding-right:calc(1/60*100%);
display: inline-block;
margin-top: 0px;
vertical-align: top;
}
.school-header li {
line-height:80px;
}
.link-header li {
line-height:30px;
}
.link-header li:hover {
box-shadow:inset 0 -3px 0 rgb(40, 40, 40);
}
ul {
margin: 0;
list-style-type: none;
padding-left: calc(1/60*100%);
padding-right:calc(1/60*100%);
}
html:
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/
I didn't completely recreate what you're trying to do, but you can probably fill in the details.
Here's the HTML I used:
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>KAMSC</li>
<li>Staff</li>
<li>Adminssions</li>
<li>Curriculum</li>
<li>Sizzling Summer</li>
<li>KAMSC Connection</li>
<li>Alumni</li>
</ul>
</nav>
And the CSS:
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}
The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.
You'll need to add media queries to have this break properly, but that should be pretty straight-forward.
Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
Hi new to CSS here could anyone help me get the text to move down so it's aligned with my logo image? Also as an extension on that question does anyone know how I can make the text move across so the margins on either side match?
This is what it looks like now:
Here is the html:
<div id="header">
<div class="wrap">
<nav id="topnav"> <!-- This is the top nav bar-->
<ul id="topnavlist">
<li> <!-- Home logo-->
<div class="logo">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
</div>
</li>
<div class="navItems"><!-- Nav items-->
<ul>
<li>UK News</li>
<li>Smartphones</li>
<li>Reviews</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
And the CSS:
#header, #footer {
background-color:#115279;
float:left;
padding:15px 0;
min-width:100%;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color:#D9330F;
list-style-type: none;
float: left;
display:inline;
padding: 10px;
}
.navItems {
height: 20%;
display: inline;
margin-top:30px;
padding-top: 50px;
padding: 50px;
}
Your HTML is invalid, you can't have div inside li. Replace div with li and wrap their children(lis) in a ul.
To vertically center the lis, give .navItems a height: 50px same as the height of your logo and give it a line-height: 50px(height)
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
float: left;
display: inline;
padding: 10px;
}
.navItems {
display: inline;
height: 50px;
line-height: 50px;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<div class="logo">
<a href="index.html">
<img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
</a>
</div>
</li>
<li class="navItems">
<!-- Nav items-->
<ul>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
You can't have a div element as a child to a ul element. As for aligning all of your elements. By default, the img and a elements are considered inline elements in css. You can use the vertical-align property on inline elements. So your markup could be a bit more simple like
<nav id="topnav">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
UK News
Smartphones
Reviews
</nav>
and then the css
#topnav a {
vertical-align: middle;
}
Since I don't have the exact size of your image, this won't get you exactly what you're looking for, but it should get you on the right track. The main thing is to make sure you have valid HTML markup. This can cause many headaches and issues with your css if it's not.
As mentioned your current HTML is invalid. limust be children (and the only direct children) of a ul.
In fact there is no need to use divs at all.
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.NavItem {
color: white;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<a href="index.html">
<img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
</a>
</li>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</nav>
</div>
</div>