I have this html and CSS code on which I have spent the last 3 hrs and I am still not able to figure out how to center align the top menu bar in my code. The code is as follows:
#container ul {
list-style: none;
margin: auto;
padding: 0;
}
#container ul li a {
color: #FFFFFF;
}
#container ul li {
background-color: #6068FF;
width: 180px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
align-items: center;
color: #FFFFFF;
font-size: 18;
}
#container ul li:hover {
background-color: #0BF5F5;
}
<div id="container">
<ul>
<li><a style="text-decoration:none;" href="default.asp">Student Attendance</a></li>
<li><a style="text-decoration:none;" href="news.asp">Edit Students</a></li>
<li><a style="text-decoration:none;" href="contact.asp">Profile</a></li>
<li><a style="text-decoration:none;" href="about.asp">Logout</a></li>
</ul>
</div>
Here's your updated CSS:
Added text-align: center on the <ul> tag.
#container ul {
...
text-align: center;
}
Removed float: left, and added display: inline-block on <li> tags.
#container ul li {
display: inline-block;
...
/* float: left; */
}
Use flexbox for this:
#container {
display: flex; /* new */
}
#container ul {
list-style: none;
margin: auto;
padding: 0;
}
#container ul li a {
color: #FFFFFF;
}
#container ul li {
background-color: #6068FF;
width: 180px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
align-items: center;
color: #FFFFFF;
font-size: 18;
}
#container ul li:hover {
background-color: #0BF5F5;
}
<div id="container">
<ul>
<li><a style="text-decoration:none;" href="default.asp">Student Attendance</a></li>
<li><a style="text-decoration:none;" href="news.asp">Edit Students</a></li>
<li><a style="text-decoration:none;" href="contact.asp">Profile</a></li>
<li><a style="text-decoration:none;" href="about.asp">Logout</a></li>
</ul>
</div>
You either need to display the list as an inline element or give it a fixed with, otherwise it always will take full available horizontal space.
#container ul {
display: inline-block;
list-style:none;
margin:auto;
padding: 0;
}
/* or */
#container ul {
width: 50%; /* whatever */
list-style:none;
margin:auto;
padding: 0;
}
Here's your code without the float:left;
#container ul {
list-style:none;
margin:auto;
padding: 0;
}
#container ul li a{
color:#FFFFFF;
}
#container ul li{
background-color:#6068FF;
width:180px;
border:1px solid white;
height:50px;
line-height:50px;
text-align:center;
#float:left;
align-items:center;
color:#FFFFFF;
font-size:18;
}
#container ul li:hover{
background-color:#0BF5F5;
}
<div id="container">
<ul>
<li><a style="text-decoration:none;"href="default.asp">Student Attendance</a></li>
<li><a style="text-decoration:none;"href="news.asp">Edit Students</a></li>
<li><a style="text-decoration:none;"href="contact.asp">Profile</a></li>
<li><a style="text-decoration:none;"href="about.asp">Logout</a></li>
</ul>
</div>
Add inline-block to the list and use text-align:center; on the #container
#container {
text-align: center;
}
#container ul {
list-style: none;
margin: auto;
padding: 0;
display: inline-block;
}
#container ul li a {
color: #FFFFFF;
}
#container ul li {
background-color: #6068FF;
width: 180px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
align-items: center;
color: #FFFFFF;
font-size: 18;
}
#container ul li:hover {
background-color: #0BF5F5;
}
<div id="container">
<ul>
<li><a style="text-decoration:none;" href="default.asp">Student Attendance</a></li>
<li><a style="text-decoration:none;" href="news.asp">Edit Students</a></li>
<li><a style="text-decoration:none;" href="contact.asp">Profile</a></li>
<li><a style="text-decoration:none;" href="about.asp">Logout</a></li>
</ul>
</div>
Related
I want to show the name of a subcategory in one line. Problem is when the name of subcategory consists of 2 words, always show it in 2 lines.
Code:
.Footer {
width: 100%;
display: inline-block;
background-color: #d0d0d0;
border-top: 20px solid #0092c2;
}
ul {
width: 100%;
list-style: none;
}
ul li {
margin: 0 auto;
float: left;
width: 25%;
font-weight: bold;
text-align: center;
}
ul li ul {
padding: 0;
}
ul li ul li {
float: none;
padding: 5px 0;
font-weight: normal;
}
<div class="Footer">
<ul>
<li>Heading1
<ul>
<li>adfghjklhfds asasasasa</li>
<li>sasasfdfdfdr asasasasfdfddsds</li>
</ul>
</li>
<li>Heading2
<ul>
</ul>
</li>
<li>Heading3
<ul>
<li>wqwqwqwqww qwqwqwqwqwqwq</li>
<li>dsdsdsdsd dsdsdsdsdswqw</li>
</ul>
</li>
<li>Heading4
<ul>
<li>asasasasqwwq wqwqwqwqwqw</li>
</ul>
</li>
</ul>
</div>
Use display:inline for ul li ul li css
.Footer {
width: 100%;
display: inline-block;
background-color: #d0d0d0;
border-top: 20px solid #0092c2;
}
ul {
width: 100%;
list-style: none;
}
ul li {
margin: 0 auto;
float: left;
width: 25%;
font-weight: bold;
text-align: center;
}
ul li ul {
padding: 0;
}
ul li ul li {
float: none;
padding: 5px 0;
font-weight: normal;
display:inline;
}
<div class="Footer">
<ul>
<li>Heading1
<ul>
<li>adfghjklhfds asasasasa</li>
<li>sasasfdfdfdr asasasasfdfddsds</li>
</ul>
</li>
<li>Heading2
<ul>
</ul>
</li>
<li>Heading3
<ul>
<li>wqwqwqwqww qwqwqwqwqwqwq</li>
<li>dsdsdsdsd dsdsdsdsdswqw</li>
</ul>
</li>
<li>Heading4
<ul>
<li>asasasasqwwq wqwqwqwqwqw</li>
</ul>
</li>
</ul>
</div>
Use flexbox and optionally assign min-width to each child to prevent text from wrapping in new line
footer {
width: 100%;
display: flex;
flex-direction: row wrap;
justify-content: space-between;
background-color: #d0d0d0;
border-top: 20px solid #0092c2;
}
footer>div {
display: flex;
flex-direction: column;
}
footer>div>span {
text-align: center;
}
footer>div>span:first-child {
font-weight: bold;
}
<footer>
<div>
<span>Heading1</span>
<span>adfghjklhfds asasasasa</span>
<span>sasasfdfdfdr asasasasfdfddsds</span>
</div>
<div>
<span>Heading2</span>
</div>
<div>
<span>Heading3</span>
<span>wqwqwqwqww qwqwqwqwqwqwq</span>
<span>dsdsdsdsd dsdsdsdsdswqw</span>
</div>
<div>
<span>Heading4</span>
<span>asasasasqwwq wqwqwqwqwqw</span>
</div>
</footer>
You need to reset width on sub lis .they are also at 25% which makes them really small. add a box-shadow or backgrounds to see where they stand before updating your width reset to nderstand why text is wrapping so fast .
.Footer {
width: 100%;
display: inline-block;
background-color: #d0d0d0;
border-top: 20px solid #0092c2;
}
ul {
width: 100%;
list-style: none;
}
ul li {
margin: 0 auto;
float: left;
width: 25%;
font-weight: bold;
text-align: center;
}
ul li ul {
padding: 0;
}
ul li ul li {
float: none;
width:auto;/* ====== reset width here */
padding: 5px 0;
font-weight: normal;
}
<div class="Footer">
<ul>
<li>Heading1
<ul>
<li>adfghjklhfds asasasasa</li>
<li>sasasfdfdfdr asasasasfdfddsds</li>
</ul>
</li>
<li>Heading2
<ul>
</ul>
</li>
<li>Heading3
<ul>
<li>wqwqwqwqww qwqwqwqwqwqwq</li>
<li>dsdsdsdsd dsdsdsdsdswqw</li>
</ul>
</li>
<li>Heading4
<ul>
<li>asasasasqwwq wqwqwqwqwqw</li>
</ul>
</li>
</ul>
</div>
This can probably be fixed insanely easy but I'm just having such a hard time at doing it.
So, I want to make both my name and the navigation bar in the header appear at the center vertically. My current code only makes my name be centered, since it is bold and the font-size is bigger.
This is the code:
HTML:
<div id="header">
<ul>
<div id="header-wrapper">
<div class="header-name">
<li>
<a href="/index.html">
<span class="first"><strong>First</strong></span>
<span class="last"><strong> Last</strong></span>
</a>
</li>
</div>
<div class="header-nav">
<li>
Contact</li>
<li>
Portfolio</li>
<li>
About
</li>
<li>
Home
</li>
</div>
</div>
</ul>
CSS:
#header-wrapper {
width: 960px;
margin: 0 auto;
position: relative;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: orange;
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
}
#header .header-name li {
float: left;
}
#header .header-nav li {
float: right;
vertical-align: middle;
}
#header li a {
font-size: 15px;
display: block;
color: #FFF;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
#header .header-name li a {
font-size: 22px;
}
#header ul li a .first {
color: #ccc;
}
#header a {
vertical-align: middle;
}
Your HTML is invalid. A ul needs to have an li as direct children. Instead, you have divs as direct children with nested li's
That said, add display: flex; align-items: center; justify-content: space-between; to #header-wrapper to center those elements vertically.
#header-wrapper {
width: 960px;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: orange;
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
}
#header .header-name li {
float: left;
}
#header .header-nav li {
float: right;
vertical-align: middle;
}
#header li a {
font-size: 15px;
display: block;
color: #FFF;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
#header .header-name li a {
font-size: 22px;
}
#header ul li a .first {
color: #ccc;
}
#header a {
vertical-align: middle;
}
<div id="header">
<ul> <div id="header-wrapper">
<div class="header-name">
<li>
<a href="/index.html">
<span class="first"><strong>First</strong></span>
<span class="last"><strong> Last</strong></span>
</a>
</li>
</div>
<div class="header-nav">
<li>
Contact</li>
<li>
Portfolio</li>
<li>
About
</li>
<li>
Home
</li>
</div>
</div>
</ul>
I've added a transparent mask on my background image. The 1st layer will be my navigation bars, contents. Second layer will be the transparent mask, and last layer will be the background image. I manage to make my navigation bar to stay in front of the transparent mask, but now I'm unable to click on the navigation.
HTML:
<body>
<div id="top">
<div id="mask"></div>
<ul>
<li>RACHEL LIM</li>
<li style="float:right">CONTACT</li>
<li style="float:right">GALLERY</li>
<li style="float:right">ABOUT ME</li>
<li style="float:right"><a class="active" href="index.html">HOME</a></li>
</ul>
<h1>I'M A CAT LOVER.</h1>
</div>
</body>
CSS:
body {
font-family:Calibri;
font-size:18px;
margin:0px;
}
#top{
background-image:url(https://static1.squarespace.com/static/5376a044e4b0cf50765bdde1/t/5377554ae4b0aefc671d7dcc/1400329549490/typewriter.jpg);
background-size: 100%;
position:relative;
height:100vh;
z-index:-10;
}
#mask{
position:absolute;
background-color:rgba(0,0,0,0.4);
height:100%;
width:100%;
z-index:-5;
}
ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
padding:20px;
}
li a {
display:block;
color:#EDECEA;
text-align:center;
padding:14px 16px;
text-decoration: none;
}
li a:hover {
color: white;
}
.active{
color: white;
}
h1{
font-size:100px;
color:white;
text-align:center;
}
I suggest to not use negative z-index in this scenario, as it will make things a lot more complicated. Instead remove all the z-indexes and set the position of your list and headline to relative.
body {
font-family: Calibri;
font-size: 18px;
margin: 0px;
}
#top {
background-image: url(https://static1.squarespace.com/static/5376a044e4b0cf50765bdde1/t/5377554ae4b0aefc671d7dcc/1400329549490/typewriter.jpg);
background-size: 100%;
position: relative;
height: 100vh;
/*z-index: -10;*/
}
#top > * {
position: relative;
}
#mask {
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
width: 100%;
/*z-index: -5;*/
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
padding: 20px;
}
li a {
display: block;
color: #EDECEA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: white;
}
.active {
color: white;
}
h1 {
font-size: 100px;
color: white;
text-align: center;
}
<div id="top">
<div id="mask"></div>
<ul>
<li>RACHEL LIM
</li>
<li style="float:right">CONTACT
</li>
<li style="float:right">GALLERY
</li>
<li style="float:right">ABOUT ME
</li>
<li style="float:right"><a class="active" href="index.html">HOME</a>
</li>
</ul>
<h1>I'M A CAT LOVER.</h1>
</div>
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
So I want to center a h1 without an image at the center of my navigation which has 2 more elements and it has to be responsive. I tried almost everything I can find but...works mostly with background images, and with inline-block I can't center it perfectly.
Below I have the best I could do, but hover doesn't work, probably cause of h1 width which 100%;
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
text-shadow: 1px 1px 1px black;
}
li {
list-style: none;
}
header {
margin: 0 auto;
text-align: center;
}
ul li {
float: left;
display: block;
background-color: #232323;
width: 50%;
padding: 10px 0 10px 0;
}
ul li:hover {
background-color: black;
}
.logo {
position: relative;
top: -38px;
}
<header>
<nav>
<ul>
<li><a href='#blog'>Blog</a>
</li>
<li><a href='#portofolio'>Portofolio</a>
</li>
</ul>
</nav>
<a href='#/' class='logo'><h1>Tao SandBox</h1></a>
</header>
It has to be a better way!!!
http://codepen.io/taosx/pen/vNWojo?editors=110
http://codepen.io/anon/pen/OyOKrN
Make the h1 use the .logo class. Then set absolute position and center it.
.logo {
position:absolute;
top:0;
left:0;
right:0;
text-align:center;
}
I'd also recommend adding the h1 markup prior to the nav, to maintain a better semantic flow.
<header>
<nav>
<h1 class='logo'><a href='#/' >Tao SandBox</a></h1>
<ul>
<li><a href='#blog'>Blog</a></li>
<li><a href='#portofolio'>Portofolio</a></li>
</ul>
</nav>
</header>
The simplest method is just to make the logo` part of the menu like so:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
text-shadow: 1px 1px 1px black;
}
ul {
overflow: hidden;
}
li {
list-style: none;
}
header {
margin: 0 auto;
text-align: center;
background-color: #232323;
}
ul li {
float: left;
width: 33%;
vertical-align: middle;
}
ul li:hover {
background-color: black;
}
<header>
<nav>
<ul>
<li><a href='#blog'>Blog</a>
</li>
<li><a href='#/' class='logo'><h1>Tao SandBox</h1></a>
</li>
<li><a href='#portofolio'>Portofolio</a>
</li>
</ul>
</nav>
</header>