I need to move my top horizontal navbar all the way to the right beside my header that says "Best TV Ever" I've floated it to the right, now it has to move up to the top of the page.
How do I do this?
Here is the jsfiddle: https://jsfiddle.net/qkLgqmfh/
As well as the code.
h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 100px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;
height: 50px;
}
p{
border-bottom: 1px solid black;
padding-bottom: 3em;
display: block;
overflow: hidden;
height:130px;
}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
ul li {
display: inline-block;
float: right;
padding-top: 0;
}
.topnav ul li a:link{
text-decoration: none;
color: black;
background-color: white;
border-radius: 50%;
margin: 15px;}
<body>
<div class="wrapper">
<div id="masthead">
<h1>Best TV Ever</h1>
</div>
[insert menu toggle here]
[insert menu checkbox here]
<div class="topnav">
<ul>
<li>50s</li>
<li>60s</li>
<li>70s</li>
<li>80s</li>
<li>90s</li>
</ul>
</div>
I've been staring at this computer screen for 6 hours now and feel like my mind has just given up. I'm sure it's simple... but for the life of me I cant figure it out!
I see that you have your float: right; on the li instead of on the .topnav. That is your main issue.
I changed that and removed a lot of cluster and this is what I got: https://jsfiddle.net/qkLgqmfh/3/
I think that is what you wanted to achieve.
Edit: If you want the black background on the whole width, put the topnav and h1 together in a new div and set background-color: black;. And since the div only contains floated elements, it will render with 0 height and width, so you need to set overflow: hidden; as well (unless you want to give it a specific height).
Regarding the size of the links, you can just change the font-size.
Have a look: https://jsfiddle.net/qkLgqmfh/5/
Related
I'm trying to fix my website. Problem #1 I can't push the list on the header over by using margin-left or padding-left. Problem #2 the Main Header 1 and 3 are creating there own padding. My goal is to fix the padding and bring the headers closer together and get rid of this padding/margin issue.
#hlist {
top: 10px;
margin-right: 3px;
position: relative;
height: 30px;
padding-right: -12px;
}
ul#hlist {
float: right;
list-style-type: none;
margin: 0;
overflow: hidden;
}
ul#hlist li {
float: left;
}
ul#hlist li a {
font-family: 'Poppins';
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul#hlist li a:hover {
border-style: solid;
border-width: 1px;
border-color: gray;
color: gray;
}
.content-wrapper {
padding: 0;
}
.text-wrapper {
height: 300px;
width: 100%;
position: relative;
margin-top: -60%;
}
.text-wrapper h1 {
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 10vw;
}
.text-wrapper h3 {
margin-top: 10%;
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 30px;
}
<div id="header">
<ul id="hlist">
<li>WHERE TO WATCH</li>
<li>ABOUT</li>
</ul>
<div id="logo-box">
<img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
</div>
</div>
</header>
<div class="content-wrapper">
<image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
<div class="text-wrapper">
<h3> The Giant </h3>
<h1> Panda </h1>
</div>
<image id="ply" style="height: 32px; padding:5px;" src="images.svg">
</div>
Your body has margin: 8px set. That's why there's a gap around the edges. Set margin: 0 on the body tag. Check out this codepen I created. That solves the gap around the edges of the image.
I don't fully understand the second part of your question. Your page is spread out very wide due to the size of the image. Make the image smaller and so that it doesn't overflow and your site will look much better.
If you want to position the links in an easier way look into using Flexbox and doing something like this:
display: flex;
justify-content: flex-end;
Do that on your links and they should float right if that's what you're trying to do.
Also, look into using a CSS Reset. By default HTML elements come with certain CSS styles applied automatically. A reset will get rid of default styles so they don't interfere with what you're trying to do. Lots of HTML elements have default padding/margins that you may not realize.
I have a "current" class which highlights the current page. And it works as far as highlighting the current page. With the padding I've added the highlighted area covers the a-element and go towards the top of the page which is what I want it to do. But each highlighted area is the width of the a-element and since each a-element has a different number of characters within, the widths are inconsistent.
To correct this I gave the a-element a display: block. This correction did give a consistent width, but now the highlighted area goes down towards the page as opposed to towards the top of the page as I wanted it.
How can I get a consistent width of highlighted area to go up towards the top of the page?
nav {
margin: 100px auto;
}
.top-nav {
width: 785px;
color: dimgrey;
text-align: center;
margin: 0 auto;
}
.top-nav li {
width: 150px;
float: left;
margin: 0 3px;
}
.top-nav a {
color: dimgrey;
width: 150px;
}
.current {
padding: 150px 0px 5px 0px;
background-color: #fab938;
color: white;
}
span.fa-bath {
font-size: 50px;
margin-top: -45px;
margin-bottom: 10px;
border-radius: 100%;
padding: 20px;
background-color: #fab938;
}
<nav>
<ul class="top-nav">
<li>Quem Somos</li>
<li>O Que Fazemos?</li>
<li><span class="fa fa-bath"></span></li>
<li>Donations</li>
<li>Contact</li>
</ul>
</nav>
I would change the way you build you nav.
Instead of using a float use a inline-block on the LI.
Next to that you can use vertical-align: middle; to align the items from the middle or use top/bottom.
also your nav container is not fitting the size of the 5 Li you are using.
https://jsfiddle.net/wyrscn48/1/
nav {
margin: 100px auto; }
.top-nav {
width: 935px;
color: dimgrey;
text-align: center;
margin: 0 auto;
}
.top-nav li {
width: 150px;
margin: 0 3px;
display: inline-block;
vertical-align: top;
}
.top-nav a {
color: dimgrey;
width: 150px; }
.current {
background-color: #fab938;
color: white; }
span.fa-bath {
font-size: 50px;
margin-bottom: 10px;
border-radius: 100%;
padding: 20px;
background-color: #fab938;
}
My first question here. Hope this is OK.
I'm trying to redo a webpage I hacked together a long time ago. Right now it's barebones and I'm just trying to get some of the main stuff to work. I have a header, navbar (on the left), a content section (on the right), and a footer. The navbar and content are under and above the the header and footer, respectively. Within the navbar I have some "buttons" that I want to scroll down and up when the page scrolls. It's kinda working except for one thing:
When the buttons scroll to the bottom, they run out of the navbar and into the footer. When scrolling up, it's fine, they do not run into the header. Just when they scroll down. I want to keep these buttons contained within the navbar.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link type="text/css" rel="stylesheet" href="newpage.css"/>
<title>Daruma An Farms</title>
</head>
<body>
<div id="header"></div>
<div id="navBar">
<div class="inner" id="inner1">Home</div>
<div class="inner" id="inner2">About</div>
<div class="inner" id="inner3">Shop</div>
<div class="inner" id="inner4">Contact</div>
<div class="inner" id="inner5">日本語</div>
</div>
<div id="content"><p>Hello. This is the new page</p>
<p>Hopefully this stuff will work</p>
<p>And we can get it up soon!</p>
</div>
<div id="copyright">Copyright</div>
</body>
</html>
Here is the CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:259px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 700px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 5px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
I hope I have that all formatted right and you can see where my problem is. I think it should be something I'm missing within the .inner class s and the #navBar ID .
Thanks for your help.
You need to adjust the height of the header, see fiddle https://jsfiddle.net/sxh0n7d1/35/
If you want it to be more diverse you will need to use javscript.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:180px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 680px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 0px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
I have been working on a website the last couple of days, and today I just ran into a problem when I wanted to move the navigation bar down from the top of the page. This have never been a problem for me, but I have read my code so many times by now, that I'm not able to find the mistake.
What I did was to add a margin-top: 50px; to my navigation div, but it then proceeds to create a white border above the parent div.
CSS
#section1 {
background-image: url("images/section1bg.jpg");
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#topnav {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
HTML
<div id="section1">
<div id="topnav">
Languages
Contact
</div>
... other content
</div>
The image below should show the issue.
http://i.stack.imgur.com/8e1mW.png
If anyone has an idea about what to do, I would love to hear from you.
Thank you :)
Change margin-top: 50px; to padding-top: 50px;
#topnav {
padding-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
Now define your #section1 id css overflow:hidden;
#section1 {
overflow: hidden;
}
Demo Fiddle
What color do you want the 'white' space you could create a div on top
<div style="background-color:#black;width:100%;height:50px"><div>
I have two divisions next to each other with attribute display: inline-block;; if I increase the height of the second division, the position of the first goes down by the amount I increased the height by, for example - if I add a slogan under my name as seen in this fiddle http://jsfiddle.net/wyorLh6s/1/ the position of the icon/logo goes down.
It's probably really obvious, but it's been a long weekend and I could use a push in the right direction - cheers guys.
.top {
background: #2980b9;
padding: 20px;
padding-left: 200px;
padding-right: 200px;
}
.top .logo {
position: relative;
}
.top .logo .icon {
font-weight: bolder;
color: white;
}
.top .logo .icon {
display: inline-block;
width: 10px;
height: 10px;
padding: 25px;
padding-top: 5px;
padding-bottom: 45px;
border: 3px solid white;
text-align: center;
}
.top .logo .name {
display: inline-block;
color: white;
text-transform: uppercase;
}
<div class="top">
<div class="logo">
<div class="icon">JH</div>
<div class="name">
<div class="title">Jack Hardcastle</div>
<div class="slogan">Slogan Goes Here</div>
</div>
</div>
</div>
My aim is to have the name inline with the JH in the logo/bordered-text, with the slogan underneath that text, http://jsfiddle.net/wyorLh6s/1/ can be seen here if the slogan div is removed.
As elements are displayed inline, .icon is affecting .name's baseline (default vertical-align), so you can do the following to change this behaviour:
.name{ vertical-align: top; }
JSFiddle