I have a menu in which some of the links are one line and some 2.
I can't find a way to vertically align the text,
it sticks to the top.
Any ideas how to fix my code will be great.
the css:
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 100px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
display: table-row;
}
ul.menu li {
list-style: none;
float:left;
height: 99px;
text-align: center;
display: table-cell;
vertical-align: middle;
background: rgba(191,232,108,1);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
height:99px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
background : rgb(168,168,168);
}
ul li a:hover {
background: transparent none;
color: #fff;
}
ul li.active a{
color: #0f0;
background:rgba(31,169,244,1);
}
span {
display: table-cell;
vertical-align: middle;
}
The html, here i tried few ways to break the line:
<div class="wrapper">
<div class="container">
<ul class="menu">
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
<li><span>bla bla<br/> blabla bla</span></li>
<li>Twitter bla<br/> blabla bla</li>
<li>Twitter bla blabla bla</li>
</ul>
</div>
</div>
Move:
display: table-cell;
vertical-align: middle;
..into to the A-tag CSS declaration, and out of the LI.
In general you'll find that if you put all of the styling (other than display: position: and float:) on the A-tag rather than the list you'll have fewer headaches overall.
See my tutorial, I Love Lists.
You can make the line-height of your a tags the same height of your li's
<div id="midalign">
<ul>
<li><a>Home</a></li>
<li><a>About Us a very long link </a></li>
<li><a>Forum</a></li>
</ul>
</div>
CSS code:
#midalign ul {
display:table-cell;
vertical-align:middle;
list-style:none;
height:100px;
}
#midalign li {
float:left;
margin-right:30px;
width:100px;
}
Related
I have made a list of links in html for a prototype of a website:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stuffy_stylesheets.css">
<title> INF </title>
</head>
<body>
<div id= "content">
<p>More Stuff</p>
<p>Even More Stuff</p>
</div>
<div id= "list">
<ul id = "menu">
<li> wad</li>
<li> wad</li>
<li> wad</li>
<li> wad</li>
</ul>
</div>
</body>
</html>
These pages so far mean absolutely nothing, however,I wanted to style and format the links so that they are towards the top left of the web page and inline with each other, to do this, I have experimented with display: inline-block, however, for some odd reason that doesn't seem to work. So I was wondering what code I would need to add to format it this way. My CSS is below:
body{
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content
{
color: #eaeaea;
text-align: center;
}
#list{
display:flex;
}
#menu
{
padding: 10px;
float:left;
margin: 0px;
width: 15%;
}
#menu li
{
list-style: none;
width:10em;
display: block;
border-width:1px;
border-style:outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a
{
color:#545456;
background: #babbc1;
text-decoration: none;
text-align:center;
display:block;
cursor:pointer;
}
#menu li:hover
{
border-style:inset;
}
The only thing you seem to be doing wrong here is the width: 15% that you've applied on the #menu.
Skipping that property and adding display: inline-block on your li elements should solve this.
Here's a fiddle for the same.
P.S. - While you're at it, change border colour to border-color.
Change your css code to something like this.
body {
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content {
color: #eaeaea;
text-align: center;
}
#list {
display: flex;
}
#menu {
padding: 10px;
margin: 0px;
}
#menu li {
list-style: none;
width: 10em;
display: inline-block;
border-width: 1px;
border-style: outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a {
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
display: block;
cursor: pointer;
}
#menu li:hover {
border-style: inset;
}
I'm wanting my ul to be in the center of my div however this will work. The code keeps going to the left of the webpage even though I have tried to center it. I have tried a couple of different solutions and to no avail. Here is my code:
HTML:
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<?php include "setMenu.php";?>
</ul>
</div>
CSS:
#nav {
border: 1px black solid;
}
#nav ul{
display: block-inline;
margin: 0px auto;
}
#nav li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
Try this:
#nav ul{
width: 40%;
margin: 0 auto;
}
or
#nav ul{
display: table;
margin: 0 auto;
}
http://jsfiddle.net/4tnwjrag/2/
Example:
#nav {
border: 1px black solid;
background:green;
}
#nav ul{
display: table;
margin: 0 auto;
margin: 0px auto;
background:blue;
margin:0 auto;
padding:0;
}
#nav li {
padding: 5px 5%;
display:table-cell;
width:120px;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
list-style:none;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<li>zz</li>
<li>zz</li>
<li>zz</li>
</ul>
</div>
display: block-inline; should be display: inline-block;.
There's no block-inline value for display. Here is a list of available values for that CSS property.
Use text-align center on your div and set padding to 0 on the ul like this:
#nav {
border: 1px black solid;
text-align:center;
}
#nav ul{
display: block-inline;
margin: 0px auto;
padding:0;
}
Here's a link to a similar question: How to horizontally align ul to center of div?
I chose to go with solution #2 and applied it to your elements, where
#nav {
text-align: center;
}
#nav ul {
display: inline-block;
}
and here is a jsfiddle of the solution applied to your particular case: http://jsfiddle.net/7qd5bkse/
I had to make a few tweeks to make it look like yours, but I hope this helps and should be a good start.
Here's another solution
#nav {
border: 1px black solid;
text-align: center
}
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li a {
text-decoration: none;
display: block;
color: white
}
#nav li {
float: left;
padding: 5px;
margin-right: 5px;
background-color: grey;
border-radius: 3px;
border: 1px black solid;
width: 100px;
text-align: center
}
#nav li:hover {
background-color: white;
}
#nav li a:hover {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<ul class="links">
<li>Menu One
</li>
<li>Menu Two
</li>
<li>Menu Three
</li>
</ul>
</div>
</body>
</html>
I have created an unsorted list/list that I would like the lines in between each word to show... so far I have this:`
#header {
position: absolute;
width: 100%;
}
#navbar {
position: relative;
padding-top: 0.8em;
padding-left: 31em;
}
ul {
list-style-type: ;
margin: 0;
padding: 0;
float: left;
}
li {
display: inline;
padding: 0.4em;
}
a {
text-decoration: none;
color: #FFFFFF;
font-family: "Century Gothic";
font-size: 100%;
<img id="header" src="images/headerfit.png" />
<div id="navbar">
<ul>
<li>HOME
</li>
<li>CUCINA
</li>
<li>ESPRESSO
</li>
<li>BAR
</li>
<li>FUNCTIONS
</li>
<li>CONTACT
</li>
</ul>
</div>
How do I make it so there is a line between each word (the space)... thankyou.
you need border for your list:
li {
display: inline;
padding: 0.4em;
border-right: 1px solid #000;
}
li:last-child {
border-right: none;
}
http://jsfiddle.net/4s2ho1kj/2/
If i have understood you right (not sure that i have) what you want is space between each word you could do this by saying
li{
margin-left:10px;
}
li:first-child{
margin-left:0px;
}
This way you will make the line that you want by adding a border to the right side of each menu item except the last.
li { border-right: 1px solid #000000; }
li:last-child { border-right: none }
here in this jsfiddle you can see what you need and try adjusting it a little till how you want it:
http://jsfiddle.net/9qdefux6/
Ok, so this is what my site currently looks like. (I can't post an actual pic here apparently) http://imgur.com/Cqb2rf2
Is there a way to align that picture with the Home | About Me | Contact nav bar?
Also, as you can see, the borders to the right of Home and About Me are too close to the text. Can I center that between them somehow? I'm slowly building my first site as I teach myself, so i really appreciate your help!
Here's my code:
#firstpic {
margin: 0px;
padding: 0px;
}
#propic {
width: 15%;
}
#navigation {
border-bottom: 2px dotted #000000;
}
.bh {
border-right: 2px solid black;
}
.navbar {
font-size: 50px;
text-align: center;
font-family: Courier;
}
.navbar li {
display: inline;
}
<html>
<head>
<title>NAV test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="navigation">
<div id="firstpic"><img src="D:\Testnavbar\Images\Profile Pic.png" id="propic"/></div>
<ul class="navbar">
<li class="bh">Home</li>
<li class="bh">About Me</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
You can set the image div and the ul to display inline...
See this demo
#firstpic {
margin: 0px;
padding: 0px;
display: inline;
}
.navbar {
font-size: 50px;
text-align: center;
font-family: Courier;
display: inline;
}
Or this demo for inline-block
Set the divs to be inline-block and vertical-align:middle
#firstpic {
margin: 0px;
padding: 0px;
display: inline-block;
width: 15%;
vertical-align: middle;
background: red;
height: 50px;
}
#navigation {
border-bottom: 2px dotted #000000;
}
ul {
display: inline-block;
vertical-align: middle;
}
li {
border-right: 2px solid black;
padding-right: 1rem;
}
li:last-child {
border-right: none;
}
.navbar {
font-size: 20px; /* for demo purposes only */
text-align: center;
font-family: Courier;
}
.navbar li {
display: inline-block;
}
<div id="navigation">
<div id="firstpic">
<img src="D:\Testnavbar\Images\Profile Pic.png" id="propic" />
</div>
<ul class="navbar">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
Add padding-right to push the list text away from the border.
To move the separator over, try adding "padding-right: 20px;" to .navbar li:
.navbar li {
display: inline;
padding-right: 20px;
}
https://jsfiddle.net/lemoncurry/2xat53n8/
Make the picture one of the list item elements so it displays in-line with the other navigation links.
Give .navbar a fixed height.
Set it to vertical-align middle.
Give it a line-height equal to the .navbar height.
#firstpic {
margin: 0px;
padding: 0px;
height: 150px;
}
#navigation {
border-bottom: 2px dotted #000000;
text-align: center;
height: 100px;
vertical-align: middle;
line-height: 100px;
}
.bh {
border-right: 2px solid black;
}
ul {
margin: 0;
padding: 0;
}
.navbar {
font-size: 50px;
font-family: Courier;
}
.navbar li {
display: inline;
}
<body>
<div id="navigation">
<ul class="navbar">
<li id="firstpic"><img src="D:\Testnavbar\Images\Profile Pic.png" id="propic"/></li>
<li class="bh">Home</li>
<li class="bh">About Me</li>
<li>Contact</li>
</ul>
</div></body>
solved - it was a group effort. thank you all so much, my first posting experience on here was wonderful and you all have given me things to learn :)
I am trying to make a site using html5/css(3). I want to have a nav bar to be at the far end of the header, and to be on the same line as the h1 element while sharing the h1 background. (if possible)
I will post the code I am using, plus a screenshot showing what it looks like vs what I want it to look like.
note I have been messing around with this for several hours so my code is pretty...all over the place right now. Sorry.
LINK TO THE IMAGE: http://i36.photobucket.com/albums/e50/Fallon_Vii/screencap.png
<body id="wrapper">
<div id="header">
<img src="images/logo2.png">
<h2>Broadcast Services</h2>
<ul id="nav">
<li class="border"> Home</li>
<li class="border"> PAGE 2</li>
<li class="border"> PAGE 3</li>
<li class="border"> PAGE 4</li>
<li class="border"> PAGE 5</li>
<li> Contact Us</li>
</ul>
</div>
#header {
width: 100%;
border-top: 1.5px solid black;
border-bottom: 1.5px solid black;
margin-bottom: 4%;
padding: .75%;
}
#header img {
width: 30%;
display: inline;
}
h2 {
color: #4F2F8F;
font-size: 125%;
font-weight: bold;
background-image: url(images/transpblack10.png);
text-shadow: 1px 1px 1px #000000;
line-height: 85%;
}
#nav {
font-size: 110%;
float: right;
}
#nav ul li {
display: inline;
float: left;
list-style-type: none;
}
#nav ul li a {
display: inline-block;
text-decoration: none;
}
Well first off you don't have the proper syntax for your <ul>'s... it should look like this:
ul#nav li {
display: inline;
float: left;
list-style-type: none;
}
ul#nav li a {
display: inline-block;
text-decoration: none;
}
And I believe this is what you are trying to achieve:
http://jsfiddle.net/NQVLy/5/
Hi Allison please check it the mentioned below code its working fine as per your requirement....
Actually you made some minor mistakes that's why it was coming so messy now i have sorted the errors and its working so you can check....
LIVE DEMO
HTML
<body id="wrapper">
<div id="header">
<div class="bg">
<img src="images/logo2.png">
<h2>Broadcast Services</h2>
<ul id="nav">
<li class="border"> Home</li>
<li class="border"> PAGE 2</li>
<li class="border"> PAGE 3</li>
<li class="border"> PAGE 4</li>
<li class="border"> PAGE 5</li>
<li> Contact Us</li>
</ul>
</div>
</div>
CSS
#header {
width: 100%;
border-top: 1.5px solid black;
border-bottom: 1.5px solid black;
margin-bottom: 4%;
padding: .75%;
}
#header img {
width: 30%;
display: inline;
}
.bg {
background:grey;
}
h2 {
color: #4F2F8F;
font-size: 125%;
font-weight: bold;
text-shadow: 1px 1px 1px #000000;
display:inline-block;
margin:0;
padding:0;
}
#nav {
font-size: 110%;
float: right;
margin:0;
padding:0;
}
#nav li {
display: inline;
float: left;
list-style-type: none;
}
#nav li a {
display: inline-block;
text-decoration: none;
color:#fff;
}