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;
}
Related
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
Currently I have my website with the logo in the middle and the navigation on the right as shown below. However I want it to have social icons on the left, logo in the middle, and navigation on the right, therefore how do I do this ? I keep trying and failing.
Any help is appreciated, thanks.
HTML
<div id="nav-div">
<ul>
<h1>JOSH TAYLOR</h1>
<li>Contact</li>
<li>CV</li>
<li>Portfolio</li>
<li>Home</li>
</ul>
</div>
CSS
#nav-div {
opacity: 1;
font-size: 15px;
}
#nav-div h1{
color: lightskyblue;
cursor: pointer;
margin-top: 0px;
margin-bottom: 0px;
font-size: 30px;
float: left;
margin-left: 460px;
width: 200px;
}
#nav-div h1:hover{
color: white;
transition:all 0.40s;
}
#nav-div ul{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background: ;
line-height: 80px;
border-bottom: px solid black;
}
#nav-div ul a{
text-decoration: none;
color: lightskyblue;
padding: 25px;
}
#nav-div ul a:hover{
color:white;
transition:all 0.40s;
font-style:italic;
}
#nav-div ul li {
list-style-type: none;
display: inline-block;
float: right;
font-style:normal;
font-size: 13px;
margin-top: 1px;
}
Using flexbox you can have a flex div or header and enclose the three elements within and give it a justify-content:space-around Fiddle the rest is for presentation purpose. Hope this helps.
.flex{
display:flex;
justify-content: space-around;
height: 100px;
align-items: center;
border: 1px solid black;
}
.flex .social{
list-style: none;
padding: 0;
}
.flex .social li{
display: inline-block;
}
.flex nav ul{
list-style: none;
align-items: center;
padding: 0;
}
.flex nav ul li{
display: inline-block;
}
.flex nav ul li a{
text-decoration: none;
}
<header class="flex">
<ul class="social">
<li>SOCIAL</li>
<li>SOCIAL</li>
<li>SOCIAL</li>
</ul>
<img src="http://placehold.it/100x100" alt="">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</header>
You could use Bootstrap and enclose all three in a div with class row and add the class col-md-4 to all sub-divs(if you want a better result for mobile users replace md with xs).
After searching extensively on Stack Overflow, I have not been able to answer what really should be a simple fix: How do I center my navigation bar?
Now, before you mark this as a duplicate, please regard my code and my question.
I am trying to make a navigation bar that looks something like this.
http://computersciencenow.weebly.com/
Where the links are the the middle of the overall bar.
Here is my Nav Bar HTML:
<div id = "navbar">
<header>
<div class="nav">
<ul>
<li id="img" width = "350"><img src="res/shahind.png" alt="Shah Industries" height = "150" width = "350" /></li>
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="tutorials">ABOUT</li>
<li class="about">MISSION</li>
<li class="news">CONTACT</li>
</ul>
</div>
</header>
</div>
And here is the CSS
#import url(http://fonts.googleapis.com/css?family=Maven+Pro:400);
body {
margin: 0;
padding: 0;
background: #ccc;
}
.img{
text-align: left;
}
.nav ul {
list-style: none;
background-color: #444;
padding: 0;
margin: 0;
vertical-align: middle;
overflow: hidden;
}
.nav li {
font-family: 'Maven Pro', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
text-align: center;
}
header{
vertical-align:center;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
vertical-align: middle;
margin: 0;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: pointer;
}
#img{
width:350px;
text-align: left;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
Full Code Is Here http://codepen.io/anon/pen/zGojxX
It can be as simple as it - vertical-align: middle;
Here is the simplified demo:
.nav {
list-style: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
}
<div class="nav">
<ul>
<li><img src="//dummyimage.com/100x100" /></li>
<li class="home">HOME</li>
<li class="tutorials">ABOUT</li>
<li class="about">MISSION</li>
<li class="news">CONTACT</li>
</ul>
</div>
If you ever like the way another website works you can always right click and select 'view source' on it. If you do that on the website you want to copy you will see that the rest of the images are not in the list.
Here is the code the other person used. You will see that they have the images in a separate div
<div id='header'>
<div class='header-wrap'>
<div class='logo'>
<span class='wsite-logo'><a href='/'><img src='/uploads/3/9/2/2/39229753/1410676966.png' style='margin-top:1px;max-height:118px;' /></a></span>
</div>
<div class='menu'
<ul class='wsite-menu-default'><li id="active">Home</li><li id='pg551601871401491579'><a href="/our-mission.html" data-membership-required="0" >Our Mission</a></li><li id='pg551272351721461114'><a href="/private-lessons.html" data-membership-required="0" >Private Lessons</a></li><li id='pg661448056549841030'><a href="https://www.youtube.com/user/learnprogrammingCS" data-membership-required="0" target='_blank'>Youtube</a></li><li id='pg927757866254746423'><a href="/become-a-teacher.html" data-membership-required="0" >Become A Teacher</a></li><li id='pg206710261896176825'><a href="/boot-camp-for-dummies.html" data-membership-required="0" >Boot Camp for Dummies</a></li></ul>
</div>
</div>
</div>
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>
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;
}