I have a menu like this
Home About Privacy Shopping Contact Us
I want to show this menu in the center of its container (whatever the width of the container is). I can apply 20% width to these list-item but then some list-item has more spacing in between and others have little due to different sizes of texts
<div id="container">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Privacy</a></li>
<li><a>Shopping</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
Try using Flex Box layout (Demo):
#container ul {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal
}
#container li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
border: solid 1px #000;
text-align: center
}
This method allows you to use your 20% width and center the items in your container, all while keeping the same width of each item.
ul {
list-style-type: none;
width: 700px;
margin: 0 auto;
}
#container {
width: 800px;
background: #CC9;
}
li { display: block;
float: left;
width: 20%;
margin-left: -5px;
background: #399;
text-align: center;
border: solid black 1px;
color: white;
}
which you can view here... http://jsfiddle.net/r6Wwf/15/
I added a negative margin-left to compensate for the border I added so you get a better visual of how it works. I also set the width of the ul to 700px. This could be any width.
To set the entire menu in the center of a container add this to your css:
ul { margin: 0 auto; }
And then add a width to your container. This is all in the fiddle. You can set the width of the container to whatever you want. I have it at 800px.
If you're okay adding a containing element (nav is probably the most suitable), here's a good solution for you:
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy</li>
<li>Shopping</li>
<li>Contact us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
float: left;
position: relative;
left: 50%;
padding: 0;
list-style: none; }
nav ul li {
float: left;
position: relative;
right: 50%;
margin: 0 10px; }
nav ul li a {
padding: 5px;
display: block; }
Preview: http://jsfiddle.net/Wexcode/bKH79/
If you want each li element to be 20% of the width of the container, just set the container to have width: 100% and set each li element to have width: 100% (you would also need to remove the margin from the li and add text-align: center).
See: http://jsfiddle.net/Wexcode/bKH79/2/
The best way to horizontally center elements in CSS is to give it a specific width, and then give it margin: auto;. Here is an example I made real quick. You can see the ul (blue border) has a width of 300px and it sits centered inside the 500px container (red border): http://jsfiddle.net/r6Wwf/4/. You can space the list elements however you would like.
What is the container width exactly..?
ok Let me assume its 960px now give width to your ul element so that the list item will not go in second line.Suppose it has taken 600px now in this case your CSS for making menu items in CENTER will be:
.container{width:960px;}
.container ul{width:600px;margin:auto}
Hope it'll solve your problem.
Pretty simple.
div#container {
width: 300px;
margin: auto 0;
}
div#container li {
display: inline-block;
padding: 15px;
}
You would definitely need to write some JavaScript to make this happen. This is how I would do it... http://jsfiddle.net/rb39A/1/
By using a little bit of jQuery you can get the dynamically sized containers you're looking for.
Related
I want all 100% height elements to expand when the size of the body expands.
In the example pressing the button will add a red div - the two columns adjacent should stretch to account for this. In the end all columns should reach the bottom completely, one with blue then red, the other two just blue.
I'm looking into flex, and it doesn't seem like this would work, but any suggestions are appreciated.
In any case best solution is CSS, but if this is impossible pure JS is also fine.
span = document.getElementsByTagName("span")[0];
function addelem() {
span.appendChild(document.createElement('div'));
};
html, body{
height: 100%;
}
span {
display: inline-block;
background-color: blue;
width: 30px;
height: 100%;
vertical-align: top;
}
div {
background-color: red;
width: 30px;
height: 30px;
}
<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>
This is what I expect the frame to look like at the bottom after button is pressed and scrolled down:
EDIT
I changed the snippet so the button appends the div to an existing child and causes overflow, as per the comments below suggest.
An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.
In a container with flex-direction: row, the cross axis is vertical, so items will expand to full height.
In your demo code, the divs (red) are being added as children of a span column (blue). These divs are being added to the end, forcing the column to grow.
In a row-direction flex container, with no heights specified that would override align-items: stretch, the other columns will follow suit.
span = document.getElementsByTagName("span")[0];
function addelem() {
span.appendChild(document.createElement('div'));
};
body {
display: flex;
min-height: 100vh;
}
body > span {
width: 30px;
margin-right: 5px;
background-color: blue;
display: flex;
flex-direction: column;
}
body > span:first-child span {
flex: 0 0 100vh;
}
div {
background-color: red;
width: 30px;
height: 30px;
}
button {
margin-bottom: auto;
}
<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>
You should use Flexbox twice, once in the outer container, and once in the container containing the appended child elements.
Here is your modified code:
span = document.getElementsByTagName("span")[0];
function addelem() {
span.appendChild(document.createElement('div'));
};
html, body{
height: 100%;
/* new */
display: flex;
}
/* new */
body > span{margin-right: 4px;}
span {
/*display: inline-block;*/
background-color: blue;
width: 30px;
height: 100%;
vertical-align: top;
/* new */
display: flex;
flex-flow: column;
align-items: flex-end;
}
div {
background-color: red;
width: 30px;
height: 30px;
/* new */
flex: 1 0 auto;
}
<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>
I have a header div that contains logo and a navigation menu
Lets say I have a logo on the left hand side 100x50 and a navigation menu that should float: right
How do I get the navigation menu to align just above the base of the header div?
What happens if the logo size changes, can it be done with respect to the logo size without having to adjust the margin-top for the nav element?
HTML
<div class="container">
<header class="site-header">
<div class="site-logo">
</div><!-- /site-logo -->
<nav class="site-nav">
</nav>
</header>
</div>
CSS
.site-header nav ul {
float: right;
border: 1px solid green;
}
div.site-logo {
float: left;
width: 100px;
height: 50px;
border: 1px solid #000;
}
P.S.: If it can be done without javascript, it would be nice
I will give you an example with flexbox. It's way much easier than with position absolute, and you don't need to worry about the logo size.
.site-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 500px;
height: 50px;
border: 1px solid #000;
}
div.site-logo {
width: 100px;
height: 50px;
background-color: #00f;
}
div.site-nav {
width: 300px;
height: 25px;
background-color: #f00;
z-index: 1;
}
<div class="container">
<header class="site-header">
<div class="site-logo"></div><!-- /site-logo -->
<div class="site-nav"></div>
</header>
</div>
If you use flex, you may need to add the property names for other browser.
To use absolute positioning for your nav, your header needs relative positioning:
header { position: relative; }
then something like:
.site-header nav ul {
position: absolute;
right: 5px; /* or whatever you choose */
bottom: 5px; /* or whatever you choose */
}
Here is a simple way how to implement it: JSFiddle example
.site-header {
width: 500px;
height: 50px;
border: 1px solid black
}
div.site-logo {
display: inline-block;
width: 100px;
height: 50px;
background-color: blue;
}
div.site-nav {
display: inline-block;
width: 300px;
height: 25px;
background-color: red;
float: right;
margin-top: 4.2vh;
}
If you do not want to use flex. The simplest approach is to add padding for the nav element.
padding top
+
nav height
+
padding top
the total height equal to the height of the header bar.
To align something to the bottom of an element, set the position of that thing to absolute and it's bottom coordinate to 0, so that there will be zero pixels between that thing and the bottom border of the containing element.
.site-header nav {
position: absolute;
bottom: 0; // Aligned to parent's bottom border...
right: 0; // ...and parent's right border.
}
Note that you can position something absolutely only in a positioned parent, either absolutely:
.site-header {
position: absolute;
}
...or relatively, where you have make sure to enforce a Block Formatting Context (BFC) to hold your contents (logo + menu), typically by specifying the overflow behavior of your relative parent to anything but visible:
.site-header {
position: relative;
overflow: hidden; // Enforce BFC
}
Here is a pure CSS demo that shows that it will fit any logo size.
I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).
I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.
In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.
How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.
The image:
CSS:
#parent {
text-align: center;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
#child1-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
display: inline-block;
}
#child2-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
position: relative;
margin: 0 25px 0 25px;
display: inline-block;
}
#child3-row2 {/* The one with the red border */
vertical-align: middle;
height: 452px;
width: 949px;
overflow: hidden;
position: relative;
display: inline-block;
}
You can use flexbox to do this by using the flex-grow property.
HTML :
<div id="main">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
CSS :
#main {
display: flex;
flex-flow: row;
width:100%;
min-height:50px;
}
#box1{
background-color:red;
width:100px;
}
#box2{
background-color:blue;
width:100px;
}
#box3{
background-color:green;
flex-grow: 1;
}
Here is a working JSFiddle
You can use css calc function for this. Support for calc seems to be quite good now.
As you have mentioned, the left side divs are of fixed width, say 120px each. Also suppose the margin between them is 30px. So, the total width left for your red div is 100% - (2*120 + 2*30)px i.e. (100% - 300px ).
#red-div
{
width: calc(100% - 300px);
}
Add % width or you can do following :
$(window).resize(function() {
var window_width = $(window).width();
var w1_width = $('.div1').width(); // The first element width
var w2_width = $('.div2').width(); // The second element width
var main_div_width = window_width - (w1_width+w2_width+gutter[i.e margin between all 3 elements]);
$('.main_div_width').css('width', main_div_width);
});
I've been going through problems in positioning navbar even after the fact that its responsive. Problem comes when zooming in and zooming out (except for Mozilla), and I got no choices than asking experts for a solution because I am a noob in coding.
Chrome zoom-out: https://s31.postimg.org/kjnbou0yj/zoom_out_chrome.png
Mozilla zoom-out (also perfect in zoom-in): https://s31.postimg.org/ud3lz1i3v/zoom_out_moz.png
Basically, I want to join my navbar with another div element so that it do not move from its position and I don't know how to use :target etc, and do not even know if target will solve my problem.
My need: I just need my navbar to stick to one size. With current settings, it is working PERFECTLY with MOZILLA ONLY. I don't know why it show blank space in chrome and other browsers when zoom-out and when zoom-in. Working fine with Chrome 100% zoom and working fine with Opera 100% zoom. The problem comes when zooming in or zooming out. Again, it is working perfectly for mozilla in zooming etc, no such problems with mozilla. And my navbar is responsive too.
My guess: I think that attaching this navbar with hidden div class could solve this problem. BUT I am a complete noob in coding and I can just guess.
Here is the code of my navbar:
ul.pnav {
position: relative;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: none;
list-style-type: none;
width: 900px;
height: 55px;
margin: auto;
top: 281px;
left: 0;
right: 0;
padding: 0;
overflow: hidden;
background-color: #767676;
z-index: 9999;
}
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
ul.pnav li {float: left;}
ul.pnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 3s;
font-size: 17px;
font-family: Arial;
font-weight: bold;
}
ul.pnav li a:hover {background-color: #111;}
ul.pnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.pnav li:not(:first-child) {display: none;}
ul.pnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.pnav.responsive {position: relative;}
ul.pnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.pnav.responsive li {
float: none;
display: inline;
}
ul.pnav.responsive li a {
display: block;
text-align: left;
}
}
I have this in html as a code:
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
This is div class to which I want to attach navbar.
<div class="fornavbar"></div>
I don't know how to proceed further, please help.
Look at this fiddle: https://jsfiddle.net/8qepe4gw/2/
In order for them to align together you just simply put them both inside of a common div like this (.container),
<div class="container">
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">☰</li>
</ul>
<div class="fornavbar"></div>
</div>
And then you assign a width to the .container, and then you can give both the .pnav and .fornavbar a width of 100% so they stretch all the way out inside of the container, as in they have the same width.
Now the reason why it only worked in firefox is probably because of this part of the code:
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
Because #-moz-document only targets firefox.
It's still gonna work in all browsers now though with the new code I added in the fiddle so you shouldn't have to worry about it, perhaps even delete that part of the CSS code(?).
I'm making this website:
http://frankkluytmans.nl/testsite/
And making a list view in which i'm using the wookmark jquery plugin to make the list items align proper vertically. Now the list items are collapsing vertically (see link). What can I do to solve this?
CSS:
#content ol {
position: relative;
display: block;
margin-left: -2%;
list-style-type: none;
}
#content ol li {
display: block;
width: 18%;
height: auto;
margin-left: 2%;
margin-bottom: 20px;
padding: 3px;
background: white;
float: left;
}
#content ol li img {
width: 100%;
border: none;
}
JS:
$('#content ol li').wookmark({
container: $('#content ol'),
offset: 20
});
I was able to work out a solution on my own. Turns out webkit browsers need the images to be loaded first to be able to calculate the correct height for the list elements.
I tweaked my JS to this:
$("img").load(function() {
$('#content ol li').wookmark({
container: $('#content ol'),
offset: 15
});
});