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.
Related
I am trying to make a website based off what I learned in High School and google.
I wanted to move some borders to the right and left of the page (which I can do) but the text inside it isn't (or looks) centered with the border outline. I fixed it by making a div with id for the text or links and moving them to the middle of the box, but then something in the back of my mind told me: "if someone isn't using google chrome it might not be centered or in a random place also if we need to move it we have to do this all over".
So my question is: What is a easier way to move my text to make sure it is center with the box?
When I just moved it or added padding it made the text in the a link push together and look ugly.
Here is my code:
html {
background-color: #070738;
text-align: center;
}
h1,
h2,
h3,
p,
li,
ul,
ol {
color: #ffffff;
text-decoration: none;
list-style: none;
}
a {
color: #ffffff;
}
#page-container {
position: relative;
min-height: 70vh;
}
#content-wrap {
padding-bottom: 2.5rem;
/* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
/* Footer height */
}
.border {
border: 1px solid green;
width: auto;
position: fixed;
top: 80px;
left: 43%;
right: 40%;
height: 200px;
width: 200px;
}
#list {
position: fixed;
top: 90px;
left: 44%;
}
<div id="content-wrap">
<h1>Aries Tarot</h1>
<div class="border">
<div id="list">
<ul>
<li>Who Am I</li>
<br><br>
<li>What Is Tarot</li>
<br><br>
<li>Information</li>
</ul>
</div>
</div>
If anyone could help me clean this up Id be so greatfull
There you go
body {
background-color: #070738;
}
#content-wrap {
width: 50%;
margin: auto;
text-align: center;
}
li {
list-style-type: none;
}
<div id="content-wrap">
<h1>Aries Tarot</h1>
<ul>
<li>Who Am I</li><br>
<li>What Is Tarot</li><br>
<li>Information</li>
</ul>
</div>
I am trying to recreate the google site, for practice with CSS and HTML. I have a pretty good grasp on floats, and have my div elements where I want them to be. However, I've run into a few problems. (Note, the colors are just to help me track the div while I'm practising, I will end up changing that)
This is what I'm getting.
My questions are 1, where are the margins coming from, as i have not set any, and 2, where is the extra padding on the left side of the ul coming from, I want to get rid of the empty space.
#google-logo {
height: 100px;
width: 100px;
float: left;
background-color: gray;
}
div {
box-sizing: border-box;
}
header {
height: 100px;
}
#searchbar, #navbar {
height: 50px;
float: left;
background-color: blue;
width: 600px;
}
#navbar {
clear: left;
background-color: red;
padding: 0 11px;
}
#encompass {
box-sizing: border-box;
height: 100px;
float: left;
}
li {
display: inline-block;
padding: 5px;
}
ul, li {
height: 50px;
box-sizing: border-box;
margin: none;
}
<header>
<div id="google-logo"></div>
<div id="encompass">
<div id="searchbar"></div>
<div id="navbar">
<ul style="float: left;">oof
<li>Home</li>
<li>Images</li>
<li>Idk</li>
</ul>
<ul style="float: right;">
<li>Settings</li>
<li>Account</li>
</ul>
</div>
</div>
</header>
You need to remove browsers default style by setting margin:0 and padding:0 to ul it is default user agent stylesheet that you need to override as shown below.
ul{
margin:0;
padding:0;
}
I want to center a div between the left side of the screen and a right floated div. I want to achieve exactly what margin:auto; usually does, unfortunately margin:auto; does not work when floated elements are involved somehow.
left element (that should be centered):
.wcard{
float: left;
/* margin:auto; */
background-color: white;
border-collapse: separate;
padding: 35px;
padding-bottom: 5px;
box-shadow: 0 0 6px #b2b2b2;
}
right element:
.slidein ul {
float: right;
padding: 4px 0;
overflow: hidden;
list-style: none;
}
html:
<body>
<header>
<img id = "menu" src="static/images/menunav.png">
</header>
<div class="wcard">
</div>
<div class="slidein">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
<li></li>
</ul>
</div>
</body>
Visual representation of what i want to achieve:
Here's exactly what you want to achieve
the idea of creating a big container then divide it into two ones and then margin:auto the div inside the one you need
html,body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 70px;
background: tomato;
}
.container {
width: 100%;
height: calc(100% - 70px)
}
.left{
float: left;
background: red;
width: 80%;
height: 100%;
}
.right{
float: left;
background: yellow;
width: 20%;
height: 100%;
}
.centered {
width: 100px;
height: 100px;
background: black;
margin: 0 auto;
}
<header></header>
<div class="container">
<div class="left">
<div class="centered"></div>
</div>
<div class="right">
</div>
</div>
I think that this is what you are trying to achieve. I started answering your question before you posted the html code so I created everything from scratch. I would advice you to use Bootstrap so you can mage your web page a bit more responsive.
This is for the floating left image:
#left{
width:50%;
margin-left:20%;
margin-top:10%;
}
The entire thing can be seen in this JS Fiddle: Solution #1
.wcard{
/* margin:auto; */
display: inline-block;
background-color: white;
border-collapse: separate;
padding: 35px;
padding-bottom: 5px;
box-shadow: 0 0 6px #b2b2b2;
margin: auto;
}
.slidein ul {
padding: 4px 0;
overflow: hidden;
list-style: none;
text-align: right;
}
main {
float: left;
width: 80%;
text-align: center;
}
nav {
float: right;
width: 20%;
}
<body>
<header>
<img id = "menu" src="static/images/menunav.png">
</header>
<main>
<div class="wcard">
this should be centered
</div>
</main>
<nav class="slidein">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
<li></li>
</ul>
</nav>
</body>
In order to "center" .wcard add:
margin-top: calc(25vh - 40px);
margin-left: calc(50vw - 70px);
If it's not in the position you want you can easily position .wcard by adjusting the margins. Note that vw and vh are used to make it responsive. Details are commented in Snippet
SNIPPET
/* This is just for help us visualize where each element is */
* {
outline: 1px solid black;
}
/* border-collapse is a table property */
.wcard {
float: left;
/* margin:auto; */
background-color: white;
/*border-collapse: separate;*/
padding: 35px;
padding-bottom: 5px;
box-shadow: 0 0 6px #b2b2b2;
/* Using margins and calc to determine offset */
margin-top: calc(25vh - 40px);
margin-left: calc(50vw - 70px);
}
.slidein {
float: right;
padding: 4px 0;
overflow: hidden;
list-style: none;
}
<body>
<header>
<img id="menu" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width='50'>
</header>
<div class="wcard">wCard
</div>
<!-- Removed the outer div as it seems unnecessary -->
<ul class="slidein">
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
<li></li>
</ul>
</body>
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;
}
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example