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
Related
I am not a front-end developer so I suspect I might be missing something really basic. Nevertheless I cannot figure out a solution.
I have a div element and I simply want to apply some padding at the top so that it does't interfere with the heading. I have looked around and I have seen similar problems with margin collapsing but I don't think it's the case since here I am dealing with two separate div not enclosing each other (tot-header and content).This is what I have written so far.
<!DOCTYPE html>
<html>
<head>
<title>Blogologo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="css/head.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
and the css
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
However the padding seems not to work. Any ideas?
What browser are you using? From what I can see it seems to be working perfectly. There is a huge space between the two divs caused by the padding-top of the .content div. That is until your scroll, because your top header has a fixed position.
This is your code:
http://codepen.io/anon/pen/WweMPG?editors=1100
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
The code appears to me to be working perfectly. What did you expect it to look like?
remove
position:fixed;
and change your .content css
from padding-top:10cm; to padding-top:10px;
in your css you can try using pixels instead of cm e.g.
.content {
padding-top: 100px;
}
Also you may try using margin instead of padding e.g.
.content {
margin-top: 100px;
}
And give it more padding or margin untill your content appears
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;}
I am using an absolute div so I can overlap one div from another. The div that overlaps is the absolute one (.content). However, if the overlapped div (.left) doesn't fit the screen, a horizontal scroll bar doesn't appear of course. How can I make the horizontal scroll bar automatically appear if its contents doesn't fit the given width? Here is the css:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Please help me figure this out.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="#routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
With the following css for parent.
.parent {
width: 100%;
position: relative;
}
But still doesn't show a scrollbar.
In your html left is not child of content you can't make it scroll.
If you have parent > child then just use position: relative on parent block.
Here is example http://jsfiddle.net/4swN9/
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 the following default html 2-column scheme:
<div id="page">
<div id="header"></div>
<div id="left"> sidebar stuff</div>
<div id="right">
<div id="topbar">
<div id="menu">
<ul>
<li><a href="#">A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="iconmenu">
<button>a</button>
<button>b</button>
<button>c</button>
<button>d</button>
</div>
</div>
<div id="content">
<div style="border: 1px solid black; height:400px">content</div>
</div>
</div>
</div>
</div>
see: http://jsfiddle.net/K9K8b/1/
I want to let the iconbar stay at the position on the right (when decreasing window size) without using JavaScript. Is there a way to do this, probably by using a kind of placeholder and the min/max-width attribute?
Thanks a lot.
Use position absolute like in this fiddle:
http://jsfiddle.net/K9K8b/2/
#iconmenu {
padding-right: 3px;
position: absolute;
right: 0;
height: 50px;
background-color: grey;
}
It should get you in the right direction at least...