I have a problem where my navigation bar seems to scale with the .container in CSS. Now, I'm quite a novice but I've tried messing with the values in CSS, but to no avail. Here's the code for both the HTML and CSS:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana;
background-image: url(images/bg2.jpg);
max-width: 100%;
max-height: auto;
background-position: 0px 100px;
background-repeat: repeat-x;
background-color: black;
background-size: 100%;
}
#header {
background-color: #000000;
height: 100px;
width: 100%;
}
.container {
background-color: grey;
width: 960px;
height: auto;
margin: 0 auto;
color: rgb(200, 200, 200);
}
#logoArea {
width: 300px;
height: 100px;
background-image: url(images/logo.png);
float: left;
display: block;
}
#navArea {
height: 50%;
float: right;
}
#nav {
list-style: none;
margin-top: 5%;
}
#nav a {
color: #C8C8C8;
text-decoration: none;
width: 75px;
height: 50px;
display: table-cell;
vertical-align: middle;
padding: 0;
}
#nav li {
width: 75px;
height: 50px;
float: left;
margin-left: 30px;
background-color: #252525;
border: 2px solid silver;
border-radius: 8px;
padding: 0px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#nav li:hover {
background-color: grey;
}
.page {
background-color: rgba(19, 19, 19, 0.9);
padding: 20px;
padding-bottom: 1px;
}
p {
margin-bottom: 20px;
}
.box1 {
position: relative;
width: 300px;
height: 100px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
float: left;
}
#imageLogo {
width: 960px;
height: 324px;
background-image: url(images/Triicell-logo.png);
background-repeat: no-repeat;
background-position: center;
}
<html>
<head>
<meta charset="UTF-8">
<title>Test site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body a link="#C8C8C8" vlink="#C8C8C8" alink="#C8C8C8">
<div id="Header">
<div class="container">
<div class="box1">
<a id="logoArea"></a>
</div>
<div id="navArea">
<ul id="nav">
<li>wp_1
</li>
<li>wp_2
</li>
<li>wp_3
</li>
<li>wp_4
</li>
<li>wp_5
</li>
</ul>
</div>
</div>
</div>
<div id="mainArea">
<div class="container page">
<div id="welcome">Test site</div>
</div>
</div>
</body>
</html>
As I said, I'm a novice, so if there's something painfully obvious that I've missed, I'd be appreciative if you could point me in the right direction. I've been racking my brains all morning, trying to think what it could be.
Here are a couple of screenshots to reference what I'm talking about:
Before scaling the .container:
After scaling the .container:
What I'm doing to scale it is I'm changing the width of the .container to 50%;. Don't worry about anything else - I know what I'm going to do about scaling the rest, i.e. images, etc. - but it's just that navigation bar that seems to jump out of place.
But yeah, I'd be very greatful if anyone can help me with this issue. Failing that, at least point me in the right direction.
Hey thanks for making your question a lot more understandable, the the thing is that if you make the container 50%, then there isn't any more room left for the nav because the #logoArea width is to big so it pushes the nav to the next line, if you want it to work you should decrease the width of the #logoArea and/or the #navArea. I hope this helps.
You need to clear floats
For this you can add the .clear class after #Header.
.clear{
clear:both;
}
Or add .clearfix class in Header
#clearfix:after {
clear: both;
content: "";
display: block;
}
Then you can manage easily you .container width 50% or whatever.
and here is some mistake in your html code like-
<li>wp_1</a>
</li>
It should be like this -
<li>
wp_1
</li>
I hope it will helps to achieve which you want.
Ah... I see what's wrong here. There wasn't enough real estate for the navigation bar for it to be positioned where I wanted it. You see, there is supposed to be a logo beside the navigation bar, but since removing it, the navigation bar is now where I want it to be, even after scaling.
The only thing now would be to find out how to scale the navigation bar itself (i.e. make it so the nav bar changes size in correspondence to what resolution it's being displayed on), but I think that's a fight for another day.
Thank you to everyone who contributed to the question. I knew my foolishness would somehow get the better of me. Thank you, nevertheless.
Since #navArea is nested inside #Header you would have to remove #navArea from the natural flow of the page to achieve what you're after.
This would look something like;
#navArea {
position: absolute;
top: 20px;
right: 20px;
}
Related
Hello I want to try get this title to be in the centre. as shown here it just does not go to the centre and its really annoying me.
screenshot of issue: https://i.imgur.com/tJhbKS1.jpg
If there is anyway in which you can also make this better that would be great. My goal is eventually to maker the centre box stretch 100% of the screen down
My main focus for this post is to make the text in the centre body box to basically have the title test to be in the centre and then the
test to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.
I also want it so the box is fixed to where it is and it doesn't ever move.
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/site.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right; ">Login</li>
</ul>
<div class="body-container">
<div class="menu">
<div class="title">
<h1>test</h1>
</div>
<div class="body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Remove padding-left:50%; in .body-container .menu .title to center your headline. Furthermore, you used display:flex, this will occur that the subline doesn't get centered.
Have a look into this Codepen.
https://codepen.io/dmnktoe/pen/wOyxor
(Update: I would recommend you, not to use an absolute position for your element, since it isn't very responsive.)
I tried this and worked:
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
.body-container .body-text {
text-align: center;
margin: auto;
display: block;
position: absolute;
top: 115px;
left: 315px;
I always use margin: 0 auto; and it works almost all the times
Using CodePen, I've been trying to style a fixed navigation bar with my username on the left side and a list of inline links on the right side. I haven't figured out how to properly format it because after putting the h1 or p element with my username, the list of links aren't even within the colored div that they're held in.
My question is: how do I format my navigation bar properly so everything is inline and neatly placed without covering up the next div while in the fixed position? Also any advice or tips is appreciated.
HTML:
<body>
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
#nav {
list-style: none;
text-align: right;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
I take it you're new to CSS? If you are, no worries, CSS can be a bit of a pain and takes a little getting used to.
I reproduced what you were trying to do and so here's what I'm going to do.
FIRST - I will provide a screenshot of what I managed to code.
SECOND - I will provide the code you need (which is only a few lines) to get the results I did.
THIRD - I will explain what is going on with the code.
Ok, first here is the screenshot of what my results were:
Ok, now for the code that got me this result...
HTML
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
#nav {
list-style: none;
text-align: right;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
ul#nav {
width: 500px;
margin: auto;
}
ul#nav li {
display: inline-block;
}
ul#nav li a {
text-decoration: none;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
And now for an explanation...
First of all, you will notice that I didn't change your HTML at all. What you needed all had to do with the CSS.
Basically I did 2 things. The first thing was I provided a little snippet of code to do a "soft browser reset", because I don't know what you're getting on your screen, what browser you are using, etc. The soft reset gives me some equal footing (and you) to be able to produce as nearly the same results from each other as possible.
The second thing I did was focus in on you "ul" element. I gave it the following:
same width as your other portfolio div elements
a margin of auto for the "ul" element so that it would be centered
I gave the "li" elements a display of in-line so that they would line up next to each other
I gave the "a" elements a text-decoration of none to get rid of the underlines
And there you have it. I hope that helps!
Lastly, I would recommend an exercise. What I did to learn CSS better/faster was, aside from youtube and online tutorials, I used "inspect element" from Google Chrome to look at simple websites and then I copied what I saw and found out WHY they did those things. I would also try to find templates and reverse engineer them. Like I said, it takes some time but it's worth it!
Good luck!
You're missing three things here:
Your header's <p> tag needs display: inline-block.
Your navigation <ul> needs to float: right.
Your navigation list item <li> tags need to have display: inline-block.
I've updated your code to include these three additions, and have created a new fiddle demonstrating what I believe you're looking for here.
Note that you also might want to add a bit of margin-right to #nav, and a bit of margin-left to #fixed p.
Hope this helps! :)
You could do a couple of things here.
Display the P and #nav as inline-block. And float the #nav right.
You can also remove the height: 60px so that the content controls the height.
body {
margin: 0;
}
#nav {
list-style: none;
text-align: right;
float: right;
margin: 0;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
p,
#nav {
display: inline-block;
}
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
You could do other things such as give the header a bit of padding and also display the #nav li inline-block if you want them next to each other rather than listed.
I've created a nice header for my site but when I try to add content after that such as a simple paragraph it's just getting placed in the same spot under my header container. I've attempted some clear fixes but that did not solve my issue. Thanks for your help in advance!
#back-container {
width: 1214px;
height: 809px;
background-image: url("coffee-beans 2.jpg");
}
#page-container {
width: 900px;
height: 100%;
background-color: rgba(214,214,214, .8);
margin-left: auto;
margin-right: auto;
}
header {
width: auto;
height: 130px;
background-color: D8A071;
border-bottom: 3px solid 864C1B;
position: fixed;
font-family: "Trattatello";
}
#logo {
margin-top: -75px;
}
nav {
float: right;
width: 550px;
padding-top: 40px;
}
nav a {
text-decoration: none;
color: black;
border-radius: 20px;
border: 2px solid black;;
background-color: 864C1B;
padding-top: 15px;
margin-right: 20px;
display: inline-block;
text-align: center;
width: 100px;
height: 45px;
}
<html>
<head>
<title>New Coffee Site</title>
<link rel="stylesheet" type="text/css" href="coffeestyles.css">
</head>
<body>
<div id = "back-container">
<div id = "page-container">
<header>
<img id = "logo" src = "coffelogo1.png">
<nav>
Home
Menu
About us
Something
</nav>
</header>
<article>
<p>
asdfasfasfasfasfasfasfasf
</p>
</article>
</div>
</div>
</body>
</html>
Your header is fixed and so anything after it in the HTML will flow beneath it. Move the <header> to be outside of the .page-container and add margin to the top of the .page-container that is equal to the height of your header. This will push the content down so that it starts at the same point as your header ends.
You also need to add where your header will be with top:0; and width:100%;.
Here is a fiddle showing the changes I mae: http://jsfiddle.net/87c9wduf/
It has to do with the position: fixed. Add margin-top to the element you are using as a container that will move everything down.
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>
Can someone take a look at my code please and tell me:
How can I get the image to go over the <header> and <nav> so that everything else centres properly. I have tried playing with z-index and nothing seems to work.
How do I get the <section> to start under the <nav> rather than right at the top of the page behind the other elements without using loads of <br>s?
#CHARSET "ISO-8859-1";
body {
font-family: "Comic Sans MS", cursive, sans-serif
}
header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}
.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}
header h2 {
min-width: 800px;
}
nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}
nav a:hover {
color: white;
}
section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}
section h3 {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li>home</li>
<li>projects</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>
</body>
</html>
Change these css properties and you should be able to get rid of all the breaks:
section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}
.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}
No need to float left on the logo if you are doing an absolute position. Also, you you want to add top padding (the first value in the padding property) of your section to shift it down below the nav.
http://jsbin.com/woyilesoka/2/edit?html,css,output
You need to break your logo away from your other stuff. Make your logo position: absolute; and create a z-index greater than the divs below it. This way it's above your other divs, and not included in the divs. This will keep the rest of your stuff centered.
Directions:
.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}
then move the logo left.
You can make your logo position absolute so that the float of other elements do not interfere with your logo:
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
This is how your make your section below the nav bar by changing margin on the top of the section:
section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}