how I can center this top menu in css:
I have this html structure:
<div class="wrapper_menu_hoz">
<div class="container_24 ">
<div class="grid_24 em-area05">
<div class="nav-container">
<ul id="nav">
</ul>
</div>
</div>
</div>
</div>
there are a number of ways to do this. it also depends on what code you have on the rest of the items, but basically this is the way to do it :
see snippet
ul {
text-align:center;
display: block;
margin: 0 auto;
padding:0;
width:100%;
}
ul > li {
display: inline-block;
padding:0 15px;
}
<div class="wrapper_menu_hoz">
<div class="container_24 ">
<div class="grid_24 em-area05">
<div class="nav-container">
<ul id="nav">
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
</div>
</div>
</div>
</div>
I suggest to add margin: 0 auto; to nav element, remember that his parent must be on 100% width of the body
Related
I am designing the footer of my website and have following Question:
How can I change my CSS so that it looks like this:
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
#Questions {
margin: auto;
text-align: center;
display: block;
padding: 0;
}
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt" >
<div id="Questions">
<h1>Do you have a question </h1>
<ul>
<li>Contact us</li>
</ul>
</div>
<div id="Menu">
<ul>
<li>Home</li>
<li>Who are we ?</li>
<li>Newest</li>
<li>The Best</li>
</ul>
</div>
<div id="languages">
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Français</li>
</ul>
</div>
</div>
<hr>
<div>
<h1>Connect with us</h1>
</div>
</footer>
you can achieve this using float property :
*{
font-size:15px;
}
ul {
list-style:none;
}
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
.secondpt {
width: 100%;
}
div#Menu {
float: left;
}
div#languages {
float: right;
}
.right{
float:right
}
.left{
float:left
}
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt" >
<div class="left">
<div id="Questions">
<h1>Do you have a question </h1>
<ul>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="right">
<div id="Menu">
<ul>
<li>Home</li>
<li>Who are we ?</li>
<li>Newest</li>
<li>The Best</li>
</ul>
</div>
<div id="languages">
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Français</li>
</ul>
</div>
</div>
</div>
<hr>
</footer>
You have to set the width of div tags inside the #Questions to 30% and display them as inline-flex
footer{
background-color: #e0ebeb;
list-style-type: none;
display: inline;
}
ul{
list-style: none;
}
div#Questions div{
width: 30%;
display: inline-flex;
}
#Questions {
margin: auto;
text-align: center;
display: block;
padding: 0;
}
This will set the div tags side-by-side. Changes in html are mentioned in the comments.
<footer>
<div class="Newsletter">
<h1>Get our Newsletter</h1>
<h2>Stay tuned and new gadgets everday!</h2>
</div>
<div class="secondpt">
<div id="Questions">
<h1>Do you have a question </h1>
<div id="contact"> <!-- Add a new div tag -->
<ul>
<li>Contact us</li>
</ul>
</div> <!-- Closing #contact -->
<div id="Menu">
<ul>
<li>Home</li>
<li>Who are we ?</li>
<li>Newest</li>
<li>The Best</li>
</ul>
</div>
<div id="languages">
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Français</li>
</ul>
</div>
</div> <!-- Close #Questions here -->
</div> <!-- Close .secondpt here -->
<hr>
<div>
<h1>Connect with us</h1>
</div>
</footer>
I having problems trying to centralize a bootstrap standard nav in a row.
<footer id="page_footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul id="page_footer_links" class="nav nav-pills nav-center">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
<div class="col-md-4">
<p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com WordPress!!!</p>
</div>
</div>
</div>
Here the complete fiddle: http://jsfiddle.net/vpontin/bkpnrLo0/
I tried putting text-center and center-block. None worked. Even putting margin 0 auto or text-align: center didn't work.
What i need to do?
The .nav-pills list items have default floating behavior to left. So change it to none and display them in one line using display: inline-block.
Updated JSfiddle
#page_footer {
background-color: #f5f5f5;
width: 100%;
}
#page_footer .container {
padding: 20px;
}
#page_footer_links {
margin: 0 auto;
text-align: center;
}
#page_footer_wordpress {
margin: 0px;
height: 40px;
line-height: 40px;
}
.nav-pills > li {
float: none !important;
display: inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<footer id="page_footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul id="page_footer_links" class="nav nav-pills nav-center">
<li role="presentation">Home
</li>
<li role="presentation">Profile
</li>
<li role="presentation">Messages
</li>
</ul>
</div>
<div class="col-md-4">
<p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com WordPress!!!</p>
</div>
</div>
</div>
I want to align the left column to the left and the right column to the right while keeping them vertically aligned. I've seen several questions about this and I can get this to work if I don't include the "col-sm-6" since those items are floated it's giving me issues, I am looking for a work around but sticking to the Bootstrap layout.
<header>
<div class="container">
<div style="display:table-row;" class="row">
<div style="display:table-cell; vertical-align:middle; text-align:left;" class="col-sm-6">
Left Column Text
</div>
<div style="display:table-cell; vertical-align:middle; text-align:right;" class="col-sm-6">
<div class="list">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
</div>
</div>
</div>
</header>
The questions is answered and the below methods do work but here is also another ready made solution: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
Here you go, you can achieve it with flex and align-items:center and keeping the bootstrap framework.
HTML
<div class="container">
<div class="row sm-flex-center">
<div class="col-sm-6">
Left Column Text
</div>
<div class="col-sm-6 pull-right">
<div class="list">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.flex-center {
display:flex;
align-items:center;
}
#media ( min-width:768px ) {
.sm-flex-center {
display:flex;
align-items:center;
}
}
#media ( min-width: 992px ) {
.md-flex-center {
display:flex;
align-items:center;
}
}
#media ( min-width: 1200px ) {
.lg-flex-center {
display:flex;
align-items:center;
}
}
Fiddle With Flex
If Not big fan of flex like me, use table
HTML
<div class="container">
<div class="row table-center">
<div class="col-md-6 col-sm-6 middle">
Left Column Text
</div>
<div class="col-md-6 col-sm-6 middle pull-right">
<div class="list">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.table-center {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
float:none;
}
Fiddle With Table
I'm trying to vertically center the menu links of my header, but does not work. I'm using Bootstrap.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 header">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-2" style="font-size: 40px;">
<p>Capelli</p>
</div>
<div class="col-xs-3"></div>
<div class="col-xs-6">
<ul class="list-group list-inline">
<li>Vestidos</li>
<li>Meus Pedidos</li>
<li></li>
<li></li>
<li>Login</li>
<li>Cadastro</li>
<li></li>
<li></li>
<li>Carrinho</li>
</ul>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #CFCFCF;
}
.header {
min-height: 3.7em;
color: #FFFFFF;
background-color: #002A43;
font-family: Arial, sans-serif;
font-size: 20px;
}
.vertical {
float: none;
display: inline-block;
vertical-align: middle;
}
When a run the code, nothing happens.
I've tried many things, like use the class directly in row or in col-, but nothing work. I also trie diferent methods to align vertically, but did not work.
P.S.: Sorry for my bad english.
You want to create a nav bar menu?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Capelli</a>
</div>
<div>
<ul class="nav navbar-nav push-right">
<li class="active">Vestidos</li>
<li> etc</li>
<li>etc</li>
<li>etc</li>
</ul>
</div>
</div>
</nav>
in css you shoud define the font-size of X pixels, because you are using relative font-size.
its 3.7em of 10px or 20px. depending the browser the value can change.
html{ font-size: 16px;}
.header{font-size: 1.25em; // 20/16 = 1.25 and you have sure the font size is relative to 16 because you have define html font size to 16px;.
I hope you can all help :)
I have a sidebar on my website but because I don't want it going under the fold I would like to split this ten li sidebar into two 5 li sidebars with a div inbetween them showing content using Jquery. I have coded up the website so it looks good but I need the sidebars to act as one menu instead of two so only one selection can be made at a time , one current class etc. Anyone know how to do this? My mark-up is as follows:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent">
</div>
<div id="sidebar">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
You just have to remove tags that commented in the following code:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
<!-- </div> -->
<div id="repcontent">
</div>
<!-- <div id="sidebar"> -->
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
Edited: To get three columns layout, I will use zurb-foundation CSS framework as follows:
<body>
<div id="header" class="row">
<div class="twelve columns">
Header
</div>
</div>
<div class="row">
<div id="left-sidebar" class="three columns">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent" class="six columns">
Middle contents
</div>
<div id="right-sidebar" class="three columns">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
</div>
</body>
take it easy.. use
-webkit-column-count: 2;
this will splits your contents into two columns..Or if you want to display the sidebars in two sides separately then use 2 separate divisions and float:left|right; property. Or you can query for this using JQuery.
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div class="content">
<!-- end .content --></div>
<div class="sidebar2">
<!-- end .sidebar2 --></div>
<!-- end .container --></div>
</body>
css
.sidebar1 {
float: left;
width: 20%;
background-color: #93A5C4;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
background-color: #93A5C4;
padding: 10px 0;
}
Try this code. this may clarifies your problem .