I'm trying to position the main content to the left and the nav to the right. Currently the nav is sitting at the bottom. Anyone tell me where I went wrong?
The Code (http://codepen.io/kiddigit/pen/PNXRVE)
* {
font-family: garamond;
line-height: 1.9em;
color: #212121;
}
.wrapper {
width: 75%;
margin: 0 auto;
border: 1px solid blue;
padding: 10px;
overflow: hidden;
}
.wrapper2{
overflow: scroll;
}
.main_content {
float: left;
}
.main_text {
float: left;
}
.nav {
float: right;
padding-top: 10px;
width: 25%;
}
header {
border-bottom: 5px solid;
margin-bottom: 10px;
overflow: hidden;
}
header ul {
list-style-type: none;
margin-top: 20px;
display: inline;
}
header li {
float: right;
margin-right: 20px;
width: 110px;
}
header li:first-child {
margin-right: 0;
}
header li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
color: white;
}
header h1 {
float: left;
text-align: left;
margin: 0 170px .5em 0;
line-height: 0;
font-size: 2em;
}
h1 a {
text-decoration: none;
color: black;
}
/*drop-down menu styles begin*/
.dropbtn {
color: black;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
padding: 0 27.5px ;
text-decoration: none;
display: block;
background-color: #3f3f3f;
}
.dropdown-content a:hover {
color: #a9a9a9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
/*drop-down menu styles end*/
/*Right nav content starts here*/
.nav li {
list-style-type:none;
font-size: 1em;
}
.nav ul {
padding-left: 10%;
font-size: 1em;
}
.nav ul a:link {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:visited {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:hover {
text-decoration: none;
background-color: black;
color: white;
padding:3px;
font-size: 1em;
}
/*Right nav ends here*/
Add width: 75%; to .main_content. It's a div so it will, by default take up 100% of its parent container.
You have .main-text but your element doesnt have that class. It has an id of main-text. Also, it should have a width, and .main_content shouldn't be floated:
http://codepen.io/anon/pen/eZbrPd
Floats are messy. Consider using inline-block instead:
http://codepen.io/anon/pen/dMweQe
Related
I'm sorry to ask this question because it has been largely posted, but I checked a lot of links and didn't solve it yet. I have a navbar with 2 elements and I cannot center it in the middle of the nav.
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
Probably in the large number of css elements I'm not able to see where the code is not working.
I posted the code here:
codepen
You should remove the left padding from the main #menu element, set the ul's display to inline-block and the width to auto (just remove the width property).
This will work because the #menu element has text-align: center. the ul will be centered since its width is not 100% (because width is set to auto and the display to inline-block).
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 0; // remove this
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
display: inline-block; // and set this
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
You can use flex positions.
Use property justify-content : center to center all children div inside a parent div. It's useful to distribute the space between or around the elements.
This will also make your CSS code lighter. The more CSS, the more difficult it is.
It's also good for responsive design.
I have also removed some CSS property. This code can be further improved and reduced. Good luck !
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
// padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
// display:block;
// text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
// list-style: none;
// display: block;
text-align: center;
}
#menu ul {
width: 100%;
display: flex;
justify-content: center;
}
#menu li {
// float: left;
margin : 0px;
display: inline;
// position: relative;
}
#menu a {
display: block;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
I want to horizontally center the links and the button, but frankly I have no idea how to do it. I would really appreciate your help!
I already tried text-align: center; but that doesn't work.
<nav>
Home
<div>
<button>Products</button>
<div>
Link 1
Link 2
Link 3
</div>
</div>
About
</nav>
nav {
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
nav div {
float: left;
overflow: hidden;
}
nav div button {
line-height: inherit;
border: none;
outline: none;
color: white;
padding: 15px;
font-size: 1em;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav a:hover, nav div button:hover {
background-color: #222;
}
nav div div {
display: none;
position: absolute;
background-color: #eee;
min-width: 160px;
z-index: 1;
}
nav div div a {
float: none;
color: black;
padding: 12px;
text-decoration: none;
display: block;
text-align: left;
}
nav div div a:hover {
background-color: #ddd;
}
nav div:hover > div {
display: block;
}
Plz try this code..
css
nav {
display: flex;
display: -webkit-flex; *for cross browser*
justify-content: center;
-webkit-justify-content: center; *for cross browser*
}
You can try below code.
nav {
overflow: hidden;
background-color: #333;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
nav div {
float: left;
overflow: hidden;
}
nav div button {
line-height: inherit;
border: none;
outline: none;
color: white;
padding: 15px;
font-size: 1em;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav a:hover, nav div button:hover {
background-color: #222;
}
nav div div {
display: none;
position: absolute;
background-color: #eee;
min-width: 160px;
z-index: 1;
}
nav div div a {
float: none;
color: black;
padding: 12px;
text-decoration: none;
display: block;
text-align: left;
}
nav div div a:hover {
background-color: #ddd;
}
nav div:hover > div {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<nav class="text-center">
Home
<div>
<button>Products</button>
<div>
Link 1
Link 2
Link 3
</div>
</div>
About
</nav>
nav {
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
nav div {
float: left;
overflow: hidden;
}
nav div button {
line-height: inherit;
border: none;
outline: none;
color: white;
padding: 15px;
font-size: 1em;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav a:hover, nav div button:hover {
background-color: #222;
}
nav div div {
display: none;
position: absolute;
background-color: #eee;
min-width: 160px;
z-index: 1;
}
nav div div a {
float: none;
color: black;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
}
nav div div a:hover {
background-color: #ddd;
}
nav div:hover > div {
display: block;
}
<nav style="justify-content:center; display:flex; flex-flow:wrap row;">
Home
<div>
<button>Products</button>
<div>
Link 1
Link 2
Link 3
</div>
</div>
About
</nav>
I have changed the code and have applied flex property. Now the items will always be at the center.
In my site I'm setting the navagtion-bar and in Chrome its looking good,
but at Firefox, Opera and Explorer there's misplaced elements and its really messy,
some of the Elements are moving strange at the page
How can I solve it? Do I need to start over everything?
Edit: here's my CSS code that works at Chrome
.container { background-color: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
margin-top: 20px;
}
html {
font: 1em "Open Sans", sans-serif;
font-family: "Varela Round";
}
.nav-main {
background-color: white;
color: black;
font-size: 14px;
width: 100%;
}
.nav-main > ul > li{
text-align: center;
}
.nav-main .logo {
height: 59px!important;
font-size: 1.4em;
line-height: 20px;
padding-left: 97px;
}
.nav-main .search {
padding-right: 70px;
}
.nav-main .netnav{
padding-left: 50px;
}
.nav-main > ul {
margin: 0;
padding: 0;
float:right;
list-style-type: none;
}
.nav-main > ul > li {
display: inline-block;
line-height: 10px;
padding-top: 18px;
}
.nav-item {
display: inline-block;
color: black;
width: 90px;
text-decoration: none;
border-color: black;
line-height: 60px;
}
.nav-sub .nav-item{
line-height: 20px;
}
.nav-content{
position: absolute;
background-color: white;
border-color: black;
color: #000000;
font-family: "Varela Round";
font-size: 14px;
text-align: right;
list-style-type: none;
z-index: 99999;
display: none;
left: 1075px;
}
.nav-sub{
padding: 1px;
border: 1px solid #000000;
position: relative;
z-index: 10;
}
ul {
list-style-type: none;
}
.nav-sub ul{
padding: 0;
margin: 0;
}
.nav-sub ul li a {
display: inline-block;
padding: 1px 0;
list-style-type: none;
text-decoration:none;
}
.nav-sub ul li:hover {
background-color: black;
}
.nav-sub ul li:hover > .nav-item{
color: white;
}
.nav-item:focus{
background-color:whitesmoke;
}
.nav-item:hover ~ .nav-content{
display: block;
}
.nav-content:hover{
display: block;
}
.underline { box-sizing: border-box; height: auto; width: 173px; border: 1px solid #9B9B9B;}
I am trying to remove the white space in the dropdown menu. I have tried padding:0 and margin:0, but both do not seem to work. I am currently using Bootstrap 3.3.7.
My HTML:
HTML Navbar code
My CSS:
.topnav {
width: 100%;
height: 50px;
background-color: transparent;
opacity: 0.7;
margin: 0;
padding-left: 0;
padding-right: 0;
border: none;
}
.topnav ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.topnav li {
float: left;
list-style-type: none;
}
.topnav li a {
width: 150px;
color: #FFFFFF;
display: block;
text-decoration: none;
font-size: 20px;
text-align: center;
padding: 10px;
font-family: Montserrat;
font-weight: bold;
}
.topnav li ul li a {
background-color: #000000;
color: #FFFFFF;
padding: 8px;
}
White Space in Navbar
So here's what I should be getting
But this is what I'm getting
As you can see the yellow section is missing. Here's my working example http://jsfiddle.net/Qk543/ but for some weird reason I cannot replicate it. Here's my code for the defective page.
<div class="wrap">
<div class="foot">
<ul class="styl">
<a id="html" href="#">
<li style="background: #F16529">
WORD
</li>
</a>
<a id="css" href="#">
<li style="background: #2AA9E0">
WORD
</li>
</a>
<a id="php" href="#">
<li style="background: #8892BF">
WORD
</li>
</a>
<a id="js" href="#">
<li style="background: #F0DB4F">
WORD
</li>
</a>
</ul>
</div>
</div>
And the CSS to it...
h1 {
padding: 80px 0 40px;
font-size: 40px;
line-height: 48px;
color: #505762;
}
.search h1 {
padding: 60px 0;
}
.slidey {
overflow: hidden;
padding: 30px 0;
background: #f3f5f8;
border-bottom: 1px solid #e5e8ed;
}
.js-enabled .slidey {
-webkit-transition: margin-top .2s;
-moz-transition: margin-top .2s;
transition: margin-top .2s;
}
.slidey b, .slidey label {
display: block;
font-weight: 500;
padding-bottom: 15px;
font-size: 15px;
font-weight: 500;
}
.slidey form, .slidey aside {
float: left;
width: 50%;
}
.slidey form input {
padding: 20px;
width: 75%;
}
.slidey li {
list-style: none;
}
.slidey a {
display: block;
text-decoration: none;
color: #717985;
}
.slidey a:hover {
color: #414b59;
}
.slidey li span {
float: right;
opacity: .6;
}
#top {
overflow: hidden;
padding: 20px 35px;
background: #fff;
border-bottom: 1px solid rgba(22,36,54,.1);
}
#top a {
float: left;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: #8895a7;
}
#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li:first-child h2 a:hover, p a:hover {
color: #4171b1;
}
#top ul {
list-style: none;
float: right;
}
#top ul li {
float: left;
padding-left: 40px;
}
#top ul a {
display: inline-block;
color: #555f6d;
}
#top ul img {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
width: 16px;
height: 16px;
opacity: .4;
}
#top ul a:hover img {
opacity: .7;
}
#top ul a.active img {
opacity: 1;
}
/**
* Index page listing, category listing, search page results
*/
.items {
list-style: none;
}
.items > li {
padding: 70px 0 60px;
color: #97aec9;
background: #3c4552;
}
.posts .items > li:first-child {
background: #fff !important;
padding: 110px 0;
}
.items li h1 a, .posts .items > li:first-child h2 a {
color: #3d4551;
}
.items h1 {
padding: 0 0 8px;
}
.items h1 a {
text-decoration: none;
}
.items h2 {
font-size: 32px;
line-height: 41px;
}
.items h2 a {
display: block;
padding-bottom: 12px;
color: #fff;
color: rgba(176,200,236,.8);
text-decoration: none;
}
.items h2 a:hover {
color: #fff;
}
.items .content {
padding: 10px 0 0;
}
.items .content p {
padding-bottom: 15px;
}
/**
* Pagination
*/
.pagination {
overflow: hidden;
padding: 30px 0;
margin-bottom: 50px;
border-top: 1px solid rgba(22,36,54,.1);
border-bottom: 1px solid rgba(22,36,54,.1);
}
.pagination:empty {
display: none;
}
.pagination a {
float: left;
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: #6f7b8b;
}
.pagination a:hover {
color: #3c4857;
}
.pagination a.next {
float: right;
}
/**
* Give some extra space to single-page wrappers
*/
.content.wrap {
padding-bottom: 50px;
}
.content.wrap ul, .content.wrap ol, .items li ul {
padding: 20px 30px;
}
.content.wrap ul ul, .content.wrap ol ol, .items li ul ul {
padding: 0 20px;
}
/**
* Footnotes and straplines
*/
.footnote, .commentlist time, .items footer {
display: block;
padding: 5px 0 15px;
color: #98a2b1;
font-size: 14px;
font-style: italic;
white-space: nowrap;
}
.footnote {
padding: 20px 0 40px;
}
/**
* Comment form
*/
ul.commentlist {
margin-bottom: 40px;
list-style: none;
border-top: 1px solid rgba(22,36,54,.1);
}
ul.commentlist .wrap {
position: relative;
}
ul.commentlist li {
padding: 40px 0;
border-bottom: 1px solid rgba(22,36,54,.1);
}
ul.commentlist time {
font-size: 13px;
}
ul.commentlist h2 {
font-size: 25px;
line-height: 33px;
}
ul.commentlist .counter {
position: absolute;
right: 0;
top: 0;
font-size: 25px;
font-weight: 300;
color: #cdd2da;
}
#comment {
overflow: hidden;
}
#comment label[for] {
display: none;
}
#comment p {
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 10px;
text-indent: 0;
}
#comment p + p {
margin-right: 0;
}
#comment p.textarea {
float: none;
width: 100%;
}
#comment input, #comment textarea {
width: 100%;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
border: 1px solid rgba(22,36,54,.2);
border-radius: 4px;
}
#comment input:focus, #comment textarea:focus {
outline: none;
background: #f7f9fc;
}
#comment textarea {
min-height: 150px;
max-height: 800px;
resize: vertical;
}
#comment button {
display: inline-block;
padding: 9px 18px;
background: #4e82ce;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
#comment button:hover {
background: #3c6eb7;
}
*{padding:0;margin:0;}
body {
text-align: center;
padding-top: 50px;
font-family: "Helvetica Neue", sans-serif;
}
.foot{
bottom: 0px;
position: fixed;
width:100%;
margin: 0px;
font-weight: 400;
}
.foot li{
opacity: 0.95;
position: relative;
float: left;
list-style: none;
width: 25%;
height: 60px;
text-align: center;
}
.foot a{
font-size: 1.5em;
color: #fff;
height: 75px;
position: relative;
text-indent: 0;
text-decoration: none;
line-height: 60px;
}
.foot li:nth-child(1){
background: #B36C4E;
}
.foot li:nth-child(2){
background: #2AA9E0;
}
.foot li:nth-child(3){
background: #8892BF;
}
.foot li:nth-child(4){
background: #F0DB4F;
}
a:link{text-decoration: none}
a:hover{text-decoration: none}
a:visited{text-decoration: none}
a:active{text-decoration: none}
.content {
padding-right: 5%;
padding-left: 5%;
}
Any ideas?
You're using floats, so there's a good chance your last element is a pixel or so too wide for the container it's in and it's floating to the next line.
Try changing the width to 24% on each element and you'll probably see all four.
If you don't want to play with the width, try adding this to your css:
* {
box-sizing: border-box;
}
That includes any padding/margin in the width so that 25% width will be the true width instead of 25% plus padding/margin.