Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have seen a navigation like this, and I absolutely love it.
How would I go about by having this navigation, I currently have a template of a horizontal navigation which I use now, however no matter how much tweaking I do, it isn't coming close this design.
I also like where the logo is placed, Can you help me tweak my code?
body {
font-family: 'Catamaran', sans-serif;
margin: 0 !important;
padding: 0 !important;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding-right: 50px;
background-color: #f3f3f3;
}
li {
float: right;
}
li a {
display: block;
color: #666;
padding: 60px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #f3f3f3;
color: #cc293f;
}
li a.active {
color: #cc293f;
background-color: #f3f3f3;
}
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href='https://fonts.googleapis.com/css?family=Catamaran:600' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Sharpturn Network v2</title>
<header>
</header>
<ul>
<img src="imgur.com/S17TggX">
<li><a class="active" href="#home">Upload</a>
</li>
<li>Support
</li>
<li>FAQs
</li>
<li>Home
</li>
</ul>
</body>
</html>
This involves using float. The solution would look something like this:
nav {
background: black;
height: 60px;
width: 100%;
}
#left-nav {
float: left;
color: white;
}
#right-nav {
float: right;
}
#faqs {
color: green;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding-right: 20px;
line-height: 20px;
top: -10px;
text-transform: uppercase;
}
a {
color: white;
text-decoration: none;
}
<nav>
<div id='left-nav'>
<img src='http://lorempixel.com/image_output/technics-q-g-60-40-3.jpg' alt='my image' />HYIP Templates
</div>
<div id='right-nav'>
<ul>
<li><a href='uploads.html'>Upload</a>
</li>
<li><a href='support.html'>Support</a>
</li>
<li id='faqs'><a href='faqs.html'>FAQs</a>
</li>
<li><a href='contact.html'>Contact</a>
</li>
</ul>
</div>
</nav>
As you can see above, instead of using divs for navigation, we can use the HTML5 semantic nav tag. We break it down into sections, one which will be the left side and the other the right. We assign each of these divs a float property.
In order to provide a background color to the nav element, we have to specify a height and width property.
By default li elements are block elements. To display them on the same line and remove line breaks, we set the display property to inline. In order to vertically center these list elements, we will use both the line-height and top properties.
An easier solution would be to use bootstrap's navbar classes.
We can replicate the black navbar with the .navbar-inverse class. We can replicate the left nav and right nav respectively with the .nav-pull-left and .nav-pull-right classes as well.
Related
I am learning web dev and it's my first project working on a "to-do" app.
The li element inside of div classed "tasks" with brown background color seems to be off on the left side. Even in a default setting, the li element takes the whole right hand side but left-hand side starts oddly after few spaces.
What is causing it to act this way and how do I fix it?
I have linked the file as well for clarity.
codepen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do Lists</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>To Do Lists</h1>
<input type="text">
<button>Add</button>
<button>clear</button>
</div>
<div class="tasks">
<ul>
<li>
List 1
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 2
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 3
<button>Done</button>
<button>incomplete</button>
</li>
</ul>
</div>
</body>
</html>
.header {
background-color: aqua;
border-style: dashed;
margin: 2% 20%;
text-align: center;
box-sizing: border-box;
padding-bottom: 1rem;
}
.tasks {
background-color: beige;
border-style: solid;
border-width: 10px;
text-align: center;
margin: auto 10%;
}
li {
list-style: none;
margin: .4rem;
background-color: rgb(95, 162, 102);
}
This is because ul has default padding which is causing this behaviour. Every browser has its own default value, though recommended from W3C is 40px. To remove the space you can simply set padding of ul to 0.
ul {
padding: 0;
}
Also for future references, you can use INSPECT ELEMENT to see what's causing this issue so you maybe able to better pin point the root cause and handle things.
Keep learning, keep coding!
ul has default padding to remove the spacing you can add CSS ul padding 0.
.header {
background-color: aqua;
border-style: dashed;
margin: 2% 20%;
text-align: center;
box-sizing: border-box;
padding-bottom: 1rem;
}
.tasks {
background-color: beige;
border-style: solid;
border-width: 10px;
text-align: center;
margin: auto 10%;
}
ul {
padding: 0;
}
li {
list-style: none;
margin: 0.4rem;
background-color: rgb(95, 162, 102);
}
<div class="header">
<h1>To Do Lists</h1>
<input type="text" />
<button>Add</button>
<button>clear</button>
</div>
<div class="tasks">
<ul>
<li>
List 1
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 2
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 3
<button>Done</button>
<button>incomplete</button>
</li>
</ul>
</div>
I'm attempting to create a rudimentary sidebar, and this is my first attempt at it:
body {
font-family: courier;
font-size: 18px;
}
h1, h2, h3, h4 {
text-decoration: underline;
}
.content {
margin-left: 200px;
}
.side {
position: fixed;
height: 100%;
border: 5px solid black;
top: 0;
left: 0;
background: grey;
width: 180px;
padding: 10px;
#nav {
list-style-type: square;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" />
<title>Test Page For Fixed Sidebar</title>
</head>
<body>
<div class="content">
<h1>Information</h1>
<p> To your left is a sidebar containing links </p>
<div class="side">
<ul id="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</body>
</html>
I seem to have a problem with styling the navigation sidebar, i.e. the element ul id=nav. I am trying to change the list's bullets to squares, and have even tried to remove them completely, but any changes to the corresponding stylesheet are not reflected on the page. I am able to style other elements it just seems to be this one which is causing me a problem.
Any help would be appreciated, thanks.
You can't target list items using class or id, you will have to target the li within the navigation bar. This is done by doing this
/* targeting the #nav and then looking for li tags withing it */
#nav > li
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm currently learning and practicing by coding my own website (so I'm a newbie), but I can't figure out why I have an extra link to the left of my first navigation links.
It only goes away if I delete my navigation links (HTML side) or if I taken away padding under the navigation in CSS, which I need to style.
This is an image of the page when rendered. The extra link is purple due to my mouse hovering: http://i.imgur.com/vEv32n5.png
<style>
body {
background-color: cadetblue;
font-size: 1em;
}
.siteheader {
display: inline;
}
.sitelogo {
float:left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sociallinks {
display: inline;
float: right;
margin-right: 10px;
margin-top: 53px;
margin-bottom: 53px;
}
.sitenav {
display: inline;
text-align: center;
}
.sitenav a {
background: red;
text-decoration: none;
padding: 5%;
}
li a:hover {
background-color:#5d77dd;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Name Homepage</title>
</head>
<body>
<nav role="navigation">
<div class="siteheader">
<img src="../Img/TestingLogo.png" alt="Site Logo">
<ul>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/facebook.jpg" alt="Facebook"></li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/twitter.jpg" alt="Twiiter"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/instagram.jpg" alt="Instagram"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/pinterest.jpg" alt="Pinterest"</li>
<li class="sociallinks"><img src="../Img/IconGrayToneByAlfredo/tumblr.jpg" alt="Tumblr"</li>
</ul>
<ul>
<li class="sitenav">Home</li>
<li class="sitenav">Work
<li class="sitenav">Blog</li>
<li class="sitenav">About</li>
<li class="sitenav">Store</li>
</ul>
</div>
</nav>
</body>
</html>
Please help me get rid of the extra link and thanks for any help!
It would be helpful if you could copy paste the code.
I did notice line 61 is missing a closing li tag, so maybe you can try that.
I've add ">" and it works, as suggested by Immortal Dude (it shows up as a comment instead of an answer so I don't know how to mark it as such).
Thanks everyone for your input!
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.
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!