ALL COMPONENTS ARE DISPLAYED OK. BUT WHEN I PRESS F12 AND HOVER OVER NAVBAR-LEFT, it's height is that of 0px. I think I need to solve this by placing a small div with class clear somewhere, but I don't know where exactly!
<div class="core-container">
<div class="core-content">
<div class="navbar">
<div class="navbar-left">
<div class="navbar-logo">
LOGO
</div>
<div class="navbar-suggestions">
SUGGESTIONS
</div>
<div class="navbar-notifications">
NOTIFICATIONS
</div>
<div class="clear">
</div>
</div>
<div class="navbar-right">
<ul>
<li>Profiles & Schedules</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
css code:
/MASTER PAGE/
.core-container
{
margin-top: 100px;
border: 1px solid black;
}
.core-content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px 10px 20px;
}
.navbar
{
border: 1px solid red;
padding: 10px 5px 10px 5px;
}
.navbar-right div
{
float: right;
}
.navbar-left div
{
border-right: 1px solid red;
float: left;
padding-right: 10px;
margin-right: 10px;
}
.navbar-right ul li
{
list-style-type: none;
float: right;
padding-left: 10px;
margin-left: 10px;
border-left: 1px solid red;
}
.clear
{
clear: both;
}
Yes, everything in your navbar-left is floating, so its height remains 0. But is that a problem? It looks good on the screen!
Anyway, the quick answer is to append float:none to the style for the clear class. Make sure you make it specific enough to override the styles for .navbar-left div and navbar-right div though, like this:
.navbar-left .clear, .navbar-right .clear
{
clear: both;
float:none;
}
Reason is that your clear DIV also have float on it because you define class like this:
.navbar-right div
{
float: right;
}
write like this:
.navbar-right .clear
{
float: none;
}
Related
I'd found, that css "clearfix" example not work properly when there are nested float:left blocks.
Here is an example:
.left {
float: left;
width: 100px;
height: 200px;
background: green;
}
.right {
margin-left: 100px;
background: yellow;
}
.clearfix:after {
content: ' ';
display: table;
clear: both;
}
ul.clearfix {
padding: 10px;
}
.clearfix li {
float: left;
list-style: none;
border: 1px solid red;
}
<div class="left">
Image
</div>
<div class="right">
<ul class="clearfix">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<p>Some description</p>
</div>
It shows, that text "some text" appears quite under "left" block.
While there presents huge space after list of elements with "clearfix" css.
Any ideas to fix it?
In this particular case you can make the p inline-block and you will not need clearfix (at least inside the right element). You may need to clear after the right element if you will have more content.
.left {
float: left;
width: 100px;
height: 200px;
background: green;
}
.right {
margin-left: 100px;
background: yellow;
}
ul.clearfix {
padding: 10px;
}
.clearfix li {
float: left;
list-style: none;
border: 1px solid red;
}
p {
display:inline-block;
width:100%;
}
<div class="left">
Image
</div>
<div class="right">
<ul class="clearfix">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<p>Some description</p>
</div>
You can use CSS clear: both; for your paragraph
.left {
float: left;
width: 100px;
height: 200px;
background: green;
}
.right {
margin-left: 100px;
background: yellow;
}
.list:after {
content: ' ';
display: table;
clear: both;
}
.footer{ clear: both;}
.list li {
float: left;
padding: 10px;
list-style: none;
border: 1px solid red;
}
<div class="left">
Image
</div>
<div class="right">
<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div class="footer"><p>Some description</p></div>
So, my estimations about float:left in different containers are mistake. Float property puts all blocks in one flow, regardless their containers. So, meaning "nested" blocks towards this float blocks is useless.
The other problem is - that container has no size without clearfix. The solution is - to set ul.overflow:hidden
I have a list with images in. The list is a centered column in foundation.
Fiddle
I need it so that the list elements images are all aligned in the same 'row' rather than going down the page.
How can I do this? I've tried:
li{
display: inline;
}
But no luck.
Add display: inline-flex to your ul
ul {
list-style: none;
display: inline-flex;
}
img {
border: 1px solid black;
}
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
</ul>
</div>
You can give the ul and li a fixed size or % based width and use for lists a display:inline-block
#myUL{
list-style: none;
width: 100%;
position: relative;
display:block;
float:none;
padding: 0;
margin: 0;
}
li{
width: 32.5%;
position: relative;
margin: 0px;
line-height: 14px;
display: inline-block;
}
}
img{
border: 1px solid black;
position:relative;
width:100%;
}
Jsfiddle
Firstly - you need to remove "li" css being nested inside ul.
Then, having li width set to some certain size, and adding display: inline-block; to li's css should do the job.
It has greater universal browser support in opposition to inline-flex (if you're about to have a support for IE9 and below):
HTML:
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
</ul>
</div>
CSS:
ul {
list-style: none;
}
li {
display: inline-block;
width:30%;
margin-right: -4px;
}
img {
border: 1px solid black;
}
JSFiddle
I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>
I know its the noobest question you had every seen but but really guys I am not able to find whats wrong in my css. I am trying to float two divs inside a footer div. But the problem is that the first div (#copyrights) is just stuck in the middle. It looks like there's something wrong with the main container (#footer). Because when I place the last container outside it then everything works great
Have a look at my code on jsfiddle.
Heres my HTML (The footer div is at the bottom):
<div id="footer">
<!-- Upper footer -->
<div id="upper-footer">
<!--Footer Navigation Links -->
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
The Mall
</li>
<li>
Media Center
</li>
<li>
Contact Us
</li>
</ul>
<!-- End od Footer nav links -->
<!--Start of newsletter div -->
<div id="newsletter">
<span>SignUp To Get The Latest News & Updates</span>
<form>
<input class="rounded" type="text" value="Your Email Here..." >
<input class="rounded-button" value="SUBSCRIBE" type="button" >
</form>
</div>
<!--End of Newsletter div-->
</div>
<!-- End of upper footer -->
<!-- Start of lower footer -->
<div id="lower-footer">
<div id="copyrights">
2013 Boulevar Mall. All rights reserved.
</div>
<div id="social">Follow us </div>
</div>
<!--End of lower footer -->
And here's my css:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#footer
{
height:100px;
font-family: 'Droid Sans', sans-serif;
text-transform:capitalize;
font-size:14px;
}
/*css for upper footer */
#upper-footer
{
height:70%;
background-color:#efe7e1;
}
#upper-footer #newsletter
{
float:right;
height: 100%;
display: table;
}
#upper-footer ul
{
list-style:none;
margin-top: 0px;
float:left;
width:480px;
}
#upper-footer ul li
{
display:inline-block;
height: 100%;
border-left: 1px solid d7cfca;
}
#upper-footer ul li:nth-child(1)
{
border-left:none;
}
#upper-footer ul li a
{
line-height:200%;
text-decoration:none;
color:#9b907c;
display:block;
line-height:70px;
padding-left:15px;
padding-right:15px;
width: 100%;
}
#upper-footer #newsletter span
{
color:#726753;
width:150px;
display: table-cell;
vertical-align: middle;
}
#upper-footer #newsletter form
{
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
/*for rounded text box */
input.rounded
{
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:26px;
width:163px;
text-align:center;
}
/*for rounded button */
input.rounded-button
{
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:29px;
width:80px;
background-color:#726753;
color: white;
font-weight: bold;
}
input.rounded-button:hover
{
background-color:white;
border:#726753 solid 1px;
color:#726753
}
/*css for lower footer */
#lower-footer
{
background-color:#726753;
height:30%;
color:white;
}
#lower-footer #copyrights
{
float:left;
}
#lower-footer #social
{
float:right;
}
Your're free to point out my mistakes as I am very new to this stuff :)
Thanks in advance!
It is the margin on #upper-footer ul that's not letting your #copyrights float to the extreme left. Try replacing #upper-footer ul rule with following
#upper-footer ul
{
list-style:none;
margin: 0;
float:left;
width:480px;
}
it sets all margins for #upper-footer ul to zero instead of only margin-top.
Update
As the margin of the #upper-footer ul element is overflowing out of its parent, #upper-footer, setting overflow: hidden for #upper-footer will also do the trick.
How do i put a border on a div in css that doesn't have a set height?
Want to achieve this without using any javascript. Code is below.
HTML
<div id="main_container">
<div id="header">
<div id="topMenu">
<ul id="topNav">
<li>Home</li><li>Contact</li><li>Links</li>
</ul>
</div>
<div id="mainMenu">
<ul id="mainNav">
<li >Home</li><li >About Us</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li>
</ul>
</div>
</div>
</div>
css
body{
text-align:center;
min-width:70%;
}
#main_container{
position:relative;
width:980px;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border-color: #999999;
border-style: solid ;
border-width: 1px ;
margin-bottom: 20px;
}
#header{
position: relative;
width: 980px;
}
#mainMenu{
float:left;
width: 980px;
top: 50px;
background-color: #0099FF;
height: 30px;
}
#mainNav{
text-align: left;
}
ul#mainNav li{
display: inline;
margin: 0px 20px 0px 0px;
}
#topMenu{
width: 150px;
top: 10px;
text-align: right;
float:right;
margin-bottom: 20px;
}
ul#topNav li{
display: inline;
margin: 0px 10px 0px 0px;
}
#footer{}
Thanks in advance.
Does it work?
<div style="border:1px solid #000">
Your content here
</div>
It doesn't matter if there is no height attribute. Just use the border property as you normally would.
Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you're still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:
<div style="clear:both"></div>
Just give the div some padding or content inside.
div {
border: solid 1px #000;
padding: 10px;
}