I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.
Related
html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}
.nav li {
display: inline-block;
}
.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}
.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}
.nav li.active a{
border: 1px solid white;
}
.banner-image {
width: 100%;
}
<DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul class="nav">
<li class="active">Home</li>
<li>World Cup</li>
<li>Sports</li>
<li>Schedule</li>
<li>About</li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
I want to fix up my navigation bar but do not know how to do it.
Improvement I want to make are:
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
How do I make the link spaced out?
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
How do I make the title "Grass World Sport News" bigger?
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
The problem is your selector, should be ul.nav li a and not .nav ul li a
How do I make the link spaced out?
Just add to link element a left margin (since you want it to float right):
ul.nav li {
margin-left: 1rem // for example
}
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
The float is working correctly but you have a max width on parent container so it gets only to the far right of the container. If you want it to the right of the window remove max-width.
div.container{
margin: 0;
padding: 0 30px;
}
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
Same problem as number 1. Just set the selector to be ul.nav li a
How do I make the title "Grass World Sport News" bigger?
If you mean a bigger font just set a higher font-size.
header h1 {
// for example
font-size: 30px;
}
This is very broad, and looking at the code it appears much was either copy/pasted from another site expecting the same results which is not how coding works.
Here's a pen: https://codepen.io/codespent/pen/BVXyWO
To answer your questions:
To change font color, you use color: #fff in the parent rule.
Spacing can be done in multiple ways, but just learn box model before you start playing with anything so you know why you're using paddings or margin.
Moving the links to the right is also contextual, there's many ways you can do so, but you need to understand why you're doing it this way. text-align:right; may work, but Flexbox is recommended.
font is an outdated property. You may use font-size:20px; to change the font size.
This is also a broad question as there are many ways that are contextual to how you feel is best.
To understand these fundamentals, I highly recommend taking freeCodeCamp's Basic CSS courses and as well, you should see StackOverflow's "How to Ask" knowledge object to grasp how you should be presenting your questions when coming here for help.
I have a Logo at the top of my page that is designed that it has letters that hang down over the menu bar(a 'y').
With no real special coding (just setting the heights of the containers I have gotten this to look fine.
My problem is that the img blocks the links in the menu from being clickable as the links are sitting behind the transparent background of the logo.
I hope that made sense.
I will include my code, but as I said its pretty simple.
<header>
<asp:Image ID="Image1" CssClass="logo" runat="server" ImageUrl="/media/1001/logo.png" />
</header>
<menu>
<ul>
<li>Home</li>
<li>How To Order</li>
<li>Products</li>
<li class="noBorder">Blog</li>
</ul>
</menu>
CSS:
header { background-color: #3a8c86; border-bottom: solid 4px #20716b; height: 52px; }
header img.logo {margin-left:5px;}
menu { background-color: #e78898; height: 21px; }
menu ul li { float: left; list-style: none; margin: 3px 0 0 14px; padding-right: 14px; border-right: solid 1px white; }
menu ul li a { color: white; text-decoration: none; }
Thanks in advance.
Position the image and then give it a lower z-index value
header img.logo {
position:relative;
z-index:-1;
}
http://jsfiddle.net/8ydvmedr/
Ok so obviously I'm doing something wrong. Basically I'm trying to create a vertical navigation bar at the top of my page, to the right of a picture.
It should look like this:
Home Resume Contact Me
Somehow it keeps ending up like this:
Home Resume
Contact Me
Can you guys take a look and help me out? This is my first website. Thanks!
Here's my code:
HTML
html {
background-color: #ffffff;
}
img {
width: 20%;
float: left;
}
#menu {
width: 550px;
height: 35px;
font-size: 55px;
font-family: Courier, Serif;
text-align: center;
float: right;
margin-right: 300px;
margin-top: 50px;
}
#menu ul {
height: auto;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color: #000000;
}
#menu a:hover {
color: #224466;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Tyler Tilton</title>
</head>
<body>
<div id="menu">
<ul>
<li>Home
</li>
<li>Bio
</li>
<li>Contact Me
</li>
</ul>
</div>
<img src="C:\Users\Tyler\Desktop\Personal Website\Images\Profile Pic.png" />
</body>
</html>
Your code is a bit messy. The issue lies mostly in your #menu class. Your width is too small, you're text is too big, you have unnecessary margins and floats added. Remove all of that or adjust it and your list will align horizontally:
#menu {
/*width: 550px;*/ //too small for text size
height: 35px;
/*font-size: 55px;*/ //to big for width size
font-family: Courier, Serif;
text-align: center;
/*float: right;*/ //not necessary, at least in your demo, pushing text off screen
/*margin-right: 300px;*/ //not necessary, at least in your demo
}
FIDDLE
I think it is the font-size in #menu. Try reducing the font-size to 40px in #menu. It should bring them in one line.
Hope it helps!
(HTML / CSS newbie here) It seems I cannot find the right specifier to prevent a menu bar
from wrapping around to the next line if the user narrows the browser window under a certain threshold. My working sample is this:
http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
Below is the unmodified code from that site:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
I found some references to "white-space: nowrap;" but I couldn't get it to work (maybe because none of these other samples related to such a simple example as above). Any clues appreciated !
Best,
Chris
just add some css width to the <ul> with the fixed width of your navbar, like in this JSFIDDLE
or if the width of your navbar is fluid, use css min-width rather than width
I'm fairly new to HTML/CSS coding, but I'm currently learning and developing a website. However, I'm sort of stuck on the process of my navigation bar. I managed to get a navigation bar to work, a horizontal one, with a working background image. The one thing I do have trouble with is having my navigation bar have drop down menus, like this: http://maxcdn.webappers.com/img/2008/10/free-css-drop-down-menu.png. Except without the extra sub-menus. Here's what I have so far:
HTML:
<div id="menu">
<ul>
<li>home</li>
<li>blank</li>
<li>about</li>
<li>site</li>
<li>contact</li>
</ul>
</div>
<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="unknown.jpg" style='width:100%;height:100%'/>
</div>
CSS:
#menu {
width: auto;
height: auto;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
display: inline;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
Sorry if the question is relatively easy to answer, but I'm having trouble. I'm not sure how to change my HTML code into a code where visitors can hover their mouse over, for example, contact and they'll have the option to pick either Administrator or Other. Thank you.
You'll need to define the onmouseover event of the relevant elements and then, using some Javascript, append new elements somewhere in your menu div (or trigger their visibility). Not the easiest thing to start with for a beginner !