I have a range of buttons which I would like to space evenly across my nav bar. I could get the size of each button and work it out but I wonder is there a way of working this out automatically and setting these widths at as the page loads.
At the minute I have 5 buttons and an input field and would like to make these span a 800px div.
HTML:
<div class="nav">
<div class="nav_btn">HOME</div>
<div class="nav_btn">NEW IN</div>
<div class="nav_btn_drop_down">CLOTHING</div>
<div class="nav_btn_drop_down">ACCESSORIES</div>
<div class="nav_btn_drop_down">SHOP BY BRAND</div>
<div class="nav_btn"><form action="" method="POST"><input type="text" placeholder="Search..." /></form></div>
</div>
CSS:
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
}
You can use this trick using display:table-cell instead of float:
.nav_btn, .nav_btn_drop_down{
display:table-cell;
width:1%;
white-space:nowrap;
text-align:center;
}
Check this demo http://jsfiddle.net/xveV4/10/
I think padding would solve your problem:
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
padding: 10px;
}
Fiddle
Yes it is possible. You could always use percentages for the width of each nav_btn/nav_btn_drop_down.
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
box-sizing:border-box;
width:16.667%
}
Each item in your nav is itemcount/100 in width ~= 16.667%
See fiddle here:
http://jsfiddle.net/t9t2D/
Related
I have a page with 3 elements, the first and second one float next to each other, but the third one has no float and has a width of 80%. For some reason it goes up with them, even though i'm adding float:none;
Here's my code:
<div class="elem1">
</div>
<div class="elem2">
</div>
<div class="elem3">
</div>
CSS:
.elem1{
width:40%;
height:200px;
float:left;
background:#f00;
}
.elem2{
width:40%;
height:200px;
float:right;
background:#ff0;
}
.elem3{
width:80%;
height:200px;
background:#f0f;
margin:auto;
float:none;
}
Here's a link: https://jsfiddle.net/woa0hvj9/
Try clearing the float. New fiddle here.
.elem3{
clear: both;
width:80%;
height:200px;
background:#f0f;
margin:auto;
}
Add a clear: both; to the .elem3 div. The third div is filling the space of the floated elements, so to avoid this use the clear property.
You need to clear floats.
A more commonly used (and better) technique by web professionals in such scenarios is called clearfix
Wrap the .elem1 and .elem2 in another div and give it a class say , .clearfix.
Use the after pseudo-element to the clearfix class. Add the following class to your css code:
.clearfix::after {
content: "";
clear: both;
display: table;
}
You can Self-clear the floating elements using:
overflow: hidden;
I have a fixed size div in which dynamically div will come using ng-repeat. The insider div in such a way like if only one div come then it should take size(height and width) 100%. If 2 then 25%.Here is a screenshot I pest.Please have a look. Thanks in advance.
CSS
.big{
height: 300px;
width: 300px;
overflow: auto;
background: #DAE8ED;
}
.small{
float:left;
background: #EDDFDA;
}
Controller,
app.controller('Ctrl', function($scope){
$scope.numbers = [1,2,3,4,5,6,7];
var width = 300/Math.ceil(Math.sqrt($scope.numbers.length)) + 'px';
$scope.customStyle={'height':width, 'width':width};
});
HTML,
<body ng-controller='Ctrl'>
<div class='big'>
<div class='small' ng-repeat="n in numbers" ng-style='customStyle'></div>
</div>
You can try to add a ng-class and change class depending of your number of div
First create your different css class with a container.
CSS
.container{
width:400px;
height:400px;
border:solid 1px black;
}
/* use for all child */
.child{
display:inline-table;
}
/*For 2x2 */
.deux{
background-color:red;
width:50%;
height:50%;
}
/* 3x3 */
.trois{
background-color:blue;
width:33.3%;
height:33.3%;
}
/* 4x4 */
.quatre{
background-color:yellow;
width:25%;
height:25%;
}
HTML
<div class="container">
<div ng-repeat="x in i" class="child" ng-class="{'deux':(i.length<=4),'trois':(i.length>4 && i.length<=9),'quatre':(i.length>9)}">
{{x}}
</div>
</div>
You can try to change the array in my example :
JSFiddle Example
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
I know that parent divs can't be expanded to the height of an absolutely-positioned child with pure CSS and I found one solution that addresses this with some js: http://jsfiddle.net/6csrV/7/
But what if you have multiple columns, each positioned absolutely, and you don't know which one will be tallest? For example:
<div class="parentWrapper">
<div class="column column1">This content may be 4 lines long</div>
<div class="column column2">This content may be 8 lines long</div>
<div class="column column3">This content may be 5 lines long</div>
</div>
To add yet another challenge, the number of columns may also differ, so it should be possible to target the generic "column" class rather than column1, column2, column3 etc...
And to make it even more of a challenge, is it possible to have this work only when the browser viewport is narrower than a specified number of pixels?
Use height:auto for the layer http://jsfiddle.net/saysiva/PuVvh/1/
#container {
width:500px;
position:absolute;
left:200px;
vertical-align:center;
}
#mainContainer {
border:0px solid red;
height:auto;
}
#menu {
background-color:#FFD700;
height:auto;
width:100px;
float:left;
}
#content {
background-color:#EEEEEE;
height:auto;
width:400px;
float:left;
}
I'm new in html and css and javascript I want to build my first onepage website and I'm using skrollr library but I don't know why I can not use it in true way I have 2 div in my index file and styles in css file, when I write something on second div it does not show and its hide behind the first div here is my code in jsfiddle
<div id="please-scroll" data-0="opacity: 1;" data-800="opacity: 0;">
please scroll to see Dinosaurs life story
</div>
<div id="next_generation" data-800="opacity:1;" data-1000="opacity: 0;">
please scroll moreeeeeeeeeeeeeeeeee
</div>
and here is my css
html, body {
margin:0;
padding:0;
height: 4500px;
width:100%;
}
#please-scroll{
position:absolute;
display:block;
height:100%;
width:100%;
background-color:red;
text-align: center;
z-index:100;
}
#next_generation{
height:100%;
width:100%;
background-color:yellow;
text-align: center;
}
for tag div should be:
div class="..."
not
div id="..."