How do I arrange the text on the navigation bar? - html

I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.

I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!

Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}

Related

Centering My Navbar Links

So I've been desperately trying out every method I can find online for centering my nav bar links.
However whatever I do, they seem to either line horizontally (like I want) but to the left of the page (not what I want), or they line vertically (not what I want) but to the center of the page (what I want).
It seems no matter what margin, float, display settings I use in the CSS it never renders the navbar links in a horizontal line, in the center of the page.
My code is:
HTML:
<body>
<div class="maincontent">
<div class="navbar">
<div>
<h1>Tom Love</h1>
<ul>
<li> Home </li>
<li> About </li>
<li> Portfolio </li>
<li> Contact </li>
</ul>
</div>
</div>
</div>
</body>
CSS:
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
h1 span {font-size:60%;
font-family:'Roboto Slab',sans-serif;
}
.navbar {
clear:both;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:center;
width:100%;
}
.navbar div {
float:center;
position:relative;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
margin:auto;
}
.navbar ul li {
padding:10px;
float:center;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
display:inline;
width:80px;
height:30px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}
Apologies for any glaring mistakes in the code, it's my first attempt at building something outside of codeacademy and YouTube tuts.
Thanks in advance :)
Just add
display: inline;
to your .navbar ul li
Remove float:center (it does not exist)
Add display: inline or display: inline-block to .navbar ul li
If you want everything centered then place margin: 0 auto; on .maincontent and give it a width.
The differences between display values are listed here on the MDN.
It could be worth considering a CSS Reset or Normalise. (Do some research on the two options)
Have an example!
CSS
.maincontent {
margin: 0 auto;
width: 800px;
}
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
}
.navbar ul li {
padding:10px;
display: inline;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}

issue with first element in nav bar having extra spacing

My issue is that the first element in my nav bar which is "home" has more spacing than the rest of the elements. I can't seem for the life of me to figure out what it is. All I wanted was to have a centered evenly spaced out navigation bar but it's seeming harder than I thought.
CSS
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
list-style:none;
width:100%;
margin:0 auto;
padding:0;
text-align:center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding: 0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; overflow:visible; }
.content-outer .content-inner { width:100%; margin:0 auto; overflow:visible; position:relative; }
HTML
<div class="content-outer" id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
That is because you are not properly closing the first li in your list.
<li>Home<li>
should be
<li>Home</li>
Consider running your code through a mark up validator like W3C mark up validator when you are having formatting problems. Many times its something small like a mismatched tag or not properly closing a tag such as in this case.

Centering horizontal navigation bar

How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}

is it possible to recreate this menu in CSS?

Roll over the text and the blue block below moves along the blue line. If I do it via position relative and set the blue block to top 20px, it also moves the text down.
Is there a way I can do this purely in CSS, or should I use a background image with the top half set as a transparent gif and the bottom blue?
The code I've tried so far is:
#menu ul {
list-style:none;
margin:0;
padding:10px;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin-right: 40px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
height: 39px;
}
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background-color: #0488C5;
font-weight:bold;
}
I am still learning so excuse any mistakes!
Click here for a demo.
​<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
</ul>
ul {
width: 100%;
border-bottom: 3px solid blue;
overflow: hidden;
}
li {
float: left;
margin: 0 20px 0 20px;
}
li a {
border-bottom: 20px solid #fff;
display: block;
}
li a:hover, .active {
border-bottom: 20px solid blue;
}
​You can then use the hover state for another class called something like "active" that you can apply when on that page.
You should be able to tweak this example to suit your needs.
You don't need any images. CSS is more than capable of doing this for you.
....................................
Live demo
Hi now this is possible used to after in css
as a simple example is this
HTML
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Css
ul{
list-style:none;
border-bottom:solid 10px blue;
}
li{
display:inline-block;
vertical-align:top;
background:red;
}
li a{
text-decoration:none;
display:inline-block;
vertical-align:top;
position:relative;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
li:hover a:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:10px;
background:blue;
}
LIve demo
Place three anchors in an unordered list and have them displayed in-line by setting the list display to none an floating the list items. Further add an empty span to each anchor which you can style with the :hover pseudo selector.
Learn CSS, its fun!

Making a bar be at the absolute top of the window, all the way across

For some reason, my topnav is not the full width of my browser window (it goes almost the full length of the window, but not entirely, on both ends) and also there is a bit of space between it and the top of the browser window.
How do I make it so this is not the case? Here's my code:
#topnav
{
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
}
#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}
Here's the HTML:
<div id="topnav">
<ul>
<li>Index</li>
<liInventory</li>
<li>Check-Up</li>
</ul>
</div>
EDIT: Now the bar extends all across the browser, however there is still a gap up at the top.
Also, the gap is only present in Firefox - it does not show up in Chrome. My whole thing is messed up in IE.
to the top problem try this:
#topnav {
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
position:absolute;
top:0;
}
the #topnav -> margin & padding should be deleted since it is 0. The same counts for #topnav ul.
You could incorporate your navigation pane in a div which has a width of 100%. Let me know if that works for you.
-- Edit: This should work in FF/Chrome/IE (just tested it)
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#topnav
{
background-color: #A9A9A9;
margin-bottom: 25;
width:100%;
top:0;
}
#topnav ul
{
list-style-type:none;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}
</style>
<head/>
<body>
<div id="topnav">
<ul>
<li>Index</li>
<liInventory</li>
<li>Check-Up</li>
</ul>
</div>
</body>
</html>