I have a problem to align horizontaly DIV and UL, check the fiddle : HERE
You can see DIV and UL are not on the same line.
<div class="col-md-12">
<div class="box-header">
<h4 class="box-title">Title</h4>
</div>
<ul id="menuOnglet" class="nav nav-pills">
<li class="active">Elem1</li>
<li>Elem2</li>
<li>Elem3</li>
</ul>
</div>
#menuOnglet{width:300px; margin-left:auto; margin-right:0;}
I don't want to wrap my UL with another DIV. Thanks !
You can do that with a simple CSS declaration:
div, ul, li {
display: inline-block; /* this will align all div, ul, li elements on the webpage horizontally */
}
#menuOnglet{width:300px; margin-left:auto; margin-right:0;}
div, ul, li {
display: inline-block;
}
<div class="col-md-12">
<div class="box-header">
<h4 class="box-title">Fiche contact : Jean paul</h4>
</div>
<ul id="menuOnglet" class="nav nav-pills">
<li class="active">Elem1</li>
<li>Elem2</li>
<li>Elem3</li>
</ul>
</div>
Updated jsFiddle
Try this:
#menuOnglet{width:100px; margin: 0 auto;}
.box-header{text-align:center;}
Related
I'm trying to make my li elements stay on the same line but they won't (they are aligning horizontally but that's about it)
Code is as follows:
<footer>
<div class="container">
<div id="coisas"
class="col-6">
<div class="row">
<ul class="col-6">
<li class="col-1"><img src="icon-behance.png"></li>
<li class="col-1"><img src="icon-behance.png"></li>
<li class="col-1"><img src="icon-behance.png"></li>
</ul>
</div>
<div id="nothing"
class="col-6">
</div>
</div>
</footer>
And here is the CSS:
#coisas {
float: right;
bottom: 0;
position: absolute;
size: 50%;
left: 0;
padding-left: 5%;
padding-right: 5%;
}
#nothing {
size: 50%;
right: 0;
}
To achieve expected result, use below option
#coisas ul li{
display:inline;
}
Codepen- https://codepen.io/nagasai/pen/vmdYNg
I'm not sure what you're trying to do, but Bootstrap col's should always be inside row..
<footer>
<div class="container">
<div class="row">
<div id="coisas" class="col-6">
<ul class="row list-unstyled">
<li class="col-1"><img src="//placehold.it/40"></li>
<li class="col-1"><img src="//placehold.it/40"></li>
<li class="col-1"><img src="//placehold.it/40"></li>
</ul>
<div id="nothing" class="col-6">
</div>
</div>
</div>
</div>
</footer>
http://codeply.com/go/ArVyBK4VU5
Tried your problem, resolved it now you can check it here!
#coisas ul li{
display:inline;
}
Demo
The float property specifies whether or not a box (an element) should float.
If you float the li elements to the left, they will lineup in same line.So to put them on one line you can use this:
#coisas ul li{
list-style-type:none;
float:left;
}
The list-style-type:none; property is only for removing the bullet points of the list items.
You can learn more about the css float property here: https://www.w3schools.com/cssref/pr_class_float.asp
There is an extra left margin in this nav bar that I am unable to change fiddle is here
HTML
<body>
<div class="wrapper">
<div class="container">
<nav class="nav">
<ul>
<a class="navlic" href="index.html"><li>Home</li></a>
<a class="navli" href="portfolio.html"><li>Portfolio</li></a>
<a class="navli" href="blog.html"><li>Blog</li></a>
<a class="navli" href="about.html"><li>About</li></a>
</ul>
</nav>
</div>
<div class="content">
<span><h1></h1></span>
</div>
<footer>
<p></p>
</footer>
</div>
</body>
CSS is in the fiddle
The nav object has a fixed position...use left:0 instead
JS Fiddle Example
It's padding not margin
.nav ul {
padding-left: 0;
}
add this at the start of css. not sure u remove default padding & margin yet but this works fine in fiddle
*{
padding:0;
margin:0;
}
Try to add this code:
.nav ul li,a{
float:left;
}
Hope it'll work. for make it more beautiful add margin-right to make a space between your menu. Just like this
.nav ul li,a{
float:left;
margin-right:10px;
}
DEMO
I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out?
Here is an image to show what I am talking about:
HTML:
<body>
<div class="content-wrapper" id="container">
<header>logo
<nav>navigation</nav>
</header>
<div class="clear-fix"></div>
<div id="body">
<section class="main-content">
<section class="leftPane">
<h2>Categories</h2>
</section>
<section class="rightPane">
<div class="checkout">
<h1>Checkout</h1>
<ul class="steps">
<li><a href="http://localhost:59213/Cart">
<div id="step0" class="arrow_box_grey">
Shopping Cart</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Student">
<div id="step1" class="arrow_box_grey">
Student</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Delivery">
<div id="step2" class="arrow_box_grey">
Delivery</div>
</a>
</li>
<li>
<div id="step3" class="arrow_box_green">Payment</div>
</li>
<li>
<div id="step4" class="arrow_box_blue">Finish</div>
</li>
</ul>
</div>
</section>
<div class="clear-fix"></div>
</section>
</div>
</div>
And here if my fiddle with the code: http://jsfiddle.net/M74Em/
You need to change this style:
.main-content .checkout ul.steps li div {
display: inline;
width: 1000px;
}
You can't set widths for inline elements so try this:
.main-content .checkout ul.steps li div {
display: inline-block;
width: 100px;
}
Example
From twBootstrap, applied to <ul>'s (demo):
.ul-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.ul-justified > li {
display: table-cell;
float: none;
width: 1%;
}
and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.
I have (jsfiddle):
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
</ul>
</div>
</body>
And I have:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
width:100%;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
text-align:center;
}
ul.nav {
margin:0;
padding:0;
list-style-type:none;
}
li.nav_left, li.nav_right, li.nav {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {}
I would like to be able to align li.nav to the center without using text-align or margin as I have both float:left and float:right in use, so the float:right would be pushed out of line if they are used.
Hope you can help, thanks.
Use absolute positioning:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
position:relative;
width:100%;
height:50px;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
}
ul.nav {padding:0;list-style-type:none;}
li.nav_left, li.nav_right {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {
background-color:green;
width:200px;
height:30px;
position:absolute;
margin:-15px 0 0 -100px;
top:50%;
left:50%;
text-align:center;
}
You need to rearrange your html code:
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
</ul>
</div>
</body>
The above code is positioning the LEFT side of li.nav in the middle of #navbar. By using half of the width of li.nav as negative margin, the entire element is positioned in the exact center.
Just a quick example how it could work. You could also make container elements around nav_left and and nav_right and use position:absolute there as well. Inside the container element you can use float for the nav_left and nav_right elements.
http://jsfiddle.net/jCCL7/5/
In your CSS, it is a best to practice to use a "wrapper/container div".
Place all your div inside this wrapper div
.wrapper {
width: 500px;
margin: 0 auto;
}
So your HTML structure should look (not necessary exact) like this.
<body>
<div class="wrapper">
<div class="header">
<div class="content">
<p>"HelloWorld"</p>
</div>
</div>
</div>
</body>
The code above will display all your HTML content on the center of your page.
I have a HTML page like below:
<div id="header-wrapper">
<header class="header" id="header" role="banner">
<div class="logo-slogan-wrapper">
<a href="/d7/" title="Home" rel="home" class="header__logo" id="logo">
<img src="http://localhost/d7/sites/all/themes/zensub/logo.png" alt="Home" class="header__logo-image" />
</a>
<div class="header__name-and-slogan" id="name-and-slogan">
<h1 class="header__site-name" id="site-name">
<span>D7</span>
</h1>
</div>
</div>
<div class="header__region region region-header">
<div id="block-menu-block-1" class="block block-menu-block first last odd" role="navigation">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="menu__item is-active is-leaf first leaf active menu-mlid-218">Home</li>
<li class="menu__item is-leaf leaf menu-mlid-315">About</li>
<li class="menu__item is-leaf leaf menu-mlid-316">Contact</li>
<li class="menu__item is-leaf last leaf menu-mlid-317">Prestashop News</li>
</ul>
</div>
</div>
</div>
</header>
</div>
And my CSS is :
#header-wrapper{
background:#F7F7F7;
width:100%;
}
#header{
width:1150px;
margin:0 auto;
}
.logo-slogan-wrapper
{
display:inline;
background:#555;
}
.header__region
{
display:inline;
background:#99CC33;
}
#logo,#name-and-slogan,#site-name,#site-slogan
{
display:inline;
}
.menu-block-wrapper{
float:left;
padding:10px 0;
}
.menu li{
display:inline;
list-style:none;
margin-left:10px;
I was expecting the name,slogan and the menu to be inline. But instead , the menu is not coming inline and the background:#99CC33; for div header__region is not changing to the desired background color ! How can I overcome these problems ?
Depending on what you're going for:
.header__region {
float:left;
// or right
}
or
.header__region {
display: inline-block;
}