For my webpages I have a container DIV, within that a menu DIV and a content DIV. I am arranging several 'settings' DIVs within the content DIV and I wan them to float left within the content DIV but lower ones end up under the menu DIV.
Check this jsfiddle to see clearly: http://jsfiddle.net/4KUTy/5/
The settings divs have the properties of float:right; but that leaves the last one in the wrong position and if I float:left;, then it goes under the menu.
Please help.
jsfiddle html code here:
<html>
<head/>
<body>
<div id="container">
<div class="menu">
<ul>
<li>menu option 1</li>
<li>menu option 2</li>
<li>menu option 3</li>
<li>menu option A</li>
<li>menu option B</li>
<li>menu option C</li>
</ul>
</div>
<div id="content">
<div class="settings_div">Project Settings<br/>
<ul style="display:inline-block">
<li>language</li>
<li>currency</li>
<li>mark up</li>
</ul>
</div>
<div class="settings_div">Your Company Settings<br/>
<ul style="display:inline-block">
<li>company details</li>
<li>bank details</li>
<li>contact details</li>
</ul>
</div>
<div class="settings_div">Output Settings <br/>
<ul style="display:inline-block">
<li>company logo</li>
<li>date format</li>
<li>fonts etc</li>
</ul>
</div>
<div class="settings_div">Graphical Settings<br/>
<ul style="display:inline-block">
<li>colors</li>
<li>text size</li>
<li>more</li>
</ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
<ul style="display:inline-block">
<li>But NOT under the menu</li>
<li>float:left puts it under the menu</li>
<li>should be under graphical settings</li>
</ul>
</div>
</div>
</div>
</body>
</html>
jsfiddle css here:
.settings_div {
text-align:left;
display:inline;
width:300px;
height:80px;
padding:20px;
padding-top:10px;
margin:20px;
margin-top:0px;
margin-bottom:20px;
border-color:#33CCCC;
border-style:solid;
border-width:thick;
float:right;
}
#content {
width:600;
min-height:620px;
vertical-align:top;
display: inline;
}
.menu {
padding:5px;
background-color:#33CCCC;
float:left;
text-align:left;
width:auto;
}
#container {
margin-bottom:10px;
background-color:#eee;
width:950px;
min-height:620px;
border-radius:0px;
position:relative;
margin-top:-10;
margin-right:auto;
margin-left:auto;
overflow: visible;
}
The container of the floated divs should have:
overflow: hidden; /* Makes the container actually "contain" the floated divs */
display: block;
The floated divs should be
float:left
fiddle: http://jsfiddle.net/4KUTy/5/
I found a nice post that attempts to explain why overflow:hidden works the way it does: http://colinaarts.com/articles/the-magic-of-overflow-hidden/
In case the link dies: Setting overflow to anything other than visible will cause it to establish a new block formatting context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting).
Two things are wrong here:
The wrapper div.content is set to display: inline.
The wrapper div.content does not scale correctly since all child elements are out of the flow.
In order to make the setting divs behave correctly use:
.content { display: block; overflow: hidden; }
and then float left all setting div's.
See updated fiddle:
http://jsfiddle.net/4KUTy/7/
Just add a placeholder div before the last div
<div class="settins_div placeholder">placeholder</div>
and add css-rule
.placeholder{
visibility: hidden;
}
have a jsfiddle to check: here
There are only small changes to your css rules:
You should add a fixed width to your menu.
.menu {
padding:5px;
background-color:#33CCCC;
float:left;
text-align:left;
width:150px;
}
And your container needs to be "moved" by that value + margin to the right. So add a margin-left to it:
#content {
width:600;
min-height:620px;
vertical-align:top;
margin-left: 160px;
}
Set your #container to overflow: hidden.
And now every settings div should be floated left.
An updated version of your jsfiddle:
http://jsfiddle.net/4KUTy/8/
Make all settings_div float:left;, but use another container that floats right and is wide enough:
<div id="setting-container" style="float:right;width:800px;">
<div class="settings_div">Your Company Settings<br/>
<ul style="display:inline-block">
<li>company details</li>
<li>bank details</li>
<li>contact details</li>
</ul>
</div>
<div class="settings_div">Output Settings <br/>
<ul style="display:inline-block">
<li>company logo</li>
<li>date format</li>
<li>fonts etc</li>
</ul>
</div>
<div class="settings_div">Graphical Settings<br/>
<ul style="display:inline-block">
<li>colors</li>
<li>text size</li>
<li>more</li>
</ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
<ul style="display:inline-block">
<li>But NOT under the menu</li>
<li>float:left puts it under the menu</li>
<li>should be under graphical settings</li>
</ul>
</div>
</div>
jsfiddle
Here is my result http://jsfiddle.net/burn123/4KUTy/10/
Major Changes
I changed a lot of the float properties to display:inline-block. The reason for this is so that all of the elements position themselves correctly.
I took off the width for container, so now it should be slightly more responsive
I removed the settings_div class and changed the CSS to #content div to save code
Added display:inline-block to the ul in the CSS and took it off of the inline styles
A rather large problem was you had a property of the content set as width:600, when it needed to be width:600px;. I ended up removing this style.
Because you had the #container set to a positioning of relative, then I changed margin-top:-10; to top:-10px;
Small Changes
Condensed a lot of properties such as margin and border
Removed the width, overflow, and min-height from container because they served no purpose
Update - http://jsfiddle.net/burn123/4KUTy/12/
Added border-box to every element so that it will display the exact width that you specify
Added a fluid width to container so that it will display inline with the menu when needed, but then will drop down when it is too full
Related
I want to place "Shop by category" beside the ebay logo using margin-left and margin-top.
margin-left is not working or pushes some elements with it index.html
.navclass >ul >li{
list-style-type:none;
display:inline;
padding:5px 25px;
//float:left;
margin-top:1px;
margin-left:20px;
border:1px solid black;}
in the html i made the image and search in a separate div
and added this down
</div>
<nav class="navclass">
<ul>
<li>Shop by <br> Category
<ul class="sub-menu">
<li>Collectibles&art</li>
<li>Electronics</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
</ul>
<span class="arrow">▼</span>
</li>
</ul>
</nav>
Why not to use float:left; in css for logo and nav? You will get what you want and i think that will work better. Because margins can not work with different size screens i think.
I'm trying to center nav-content using center option
So it will look like this.
However it doesn't work on the ul attribute.
Ends up looking like this instead.
My code:
...
<div class="nav-content center" style="background-color: black">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab">Test 2</li>
</ul>
</div>
</nav>
Solution:
mdubus' answer is correct but it needs to be in the ul element instead of the div for it to work using Materialize.
On your div nav-content center, just add a display:flex; justify-content:center;. That should do the trick ;)
I'm not familliar with materielize, you can do it with css, by stting the parent element to: flex and justifiy-content: center; or simply by setting .nav-content{ text-align: center; }
I have three <li>. Unfortunately I cannot give them each their own class name (otherwise this would be easier).
I need to have one aligned to the left, one to the centre and one to the right. Is there any way to do this in CSS that can account for a variably sized <ul>?
Looking at other questions there is an option to use li:last-child. It would still be a problem for anyone using most IE's as support only exists in IE9.
Fiddle Here http://jsfiddle.net/q4d9r/
Just use a width of 33% and a float:left on your li items.
Set your ul to whatever width you want.
EDIT:
If you absolutely need to align them perfectly, you could always use inline styles on top of the above method.
http://jsfiddle.net/q4d9r/1/
<ul class="test">
<li style="text-align:left">Item One</li>
<li style="text-align:center">Item Two</li>
<li style="text-align:right">Item Three</li>
</ul>
[edit] by the time I post, the basic float was good enough, il leave answer for curious people :) [/edit]
there's 2 options i think of without using float, nor display:table; (in fact 4 options are avalaible):
1) display:flex;
2) text-align:justify; and some tunning:
http://codepen.io/gc-nomade/pen/zcGmC
<ul class="flex">
<li>flex me</li>
<li>flex me</li>
<li>flex me</li>
</ul>
<ul class="justify">
<li>Justify me</li>
<li>Justify me</li>
<li>Justify me</li>
</ul>
.flex {
display:flex;
justify-content:space-between;
}
.justify {
text-align:justify;
}
.justify:after {
content:'';
display:inline-block;
width:100%;
}
.justify li {
display:inline-block;
}
What the Header Should Look Like
This is how the header should look like.
What it currently looks like
As you can see, my header isn't looking too good... I seem to be having some floating issues.
Current Header Code
Here is the HMTL I used to generate my header.
I'm trying to center the h1, float the logo to the left completely and have the h2 display beside the logo. The publish date and publisher are fine.
<header>
<ul style="list-style-type:none;float:right;">
<li style="float:left;">
<img src="C:\Logo.jpg" alt="Logo"/>
</li>
<li style="float:left;">
<h2>Statuts de Production</h2>
</li>
<li style="float:right;">
<h1 style="margin-bottom:0px">Machines en cours d'assemblage</h1>
</li>
<ul style="list-style-type:none;float:right;">
<li>
Dernière mise à jour: <xsl:value-of select="Table/Publish/DateEntry"/>
</li>
<li>
Par: <xsl:value-of select="Table/Publish/Username"/>
</li>
</ul>
</ul>
</header>
Am I not using the right approach? Should I use a table instead of an unordered list?
If you want to vertical align the list items and indent the middle one, just remove the styles from the HTML and use this external CSS (using external CSS is the first thing to improve your approach):
ul { display: block; list-style-type:none; height: 50px; }
li { display: inline-block; vertical-align: middle; }
ul ul { display: inline-block; }
ul ul li { display: block; }
and set the padding to each list item as you want, the third item might be floated right.
Second: you can not use image path on your HDD C:\Logo.jpg to enable the access from clients, use the http://... protocol.
Third: you can not use ul as direct child of ul. Only lis are allowed inside ul
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
</ul>
Dose the following help you? it is designed such that the hight is constant.
<div style='position:relative; padding:0px 200px 0px 200px; background-color:gray;height:20px;box-sizing:border-box;'>
<div style='position:absolute;background-color:yellow; left:0px; top:0px; height:100%;width:200px;'>
left pannel
</div>
<div style='position:absolute;background-color:yellow; right:0px; top:0px; height:100%; width:200px;'>
right pannel.
</div>
<div style='box-sizing:border-box;width:100%;text-align:center;'>
Center
</div>
</div>
You can see it also here.
I have 6 links, all different character lengths on two lines. I need everything to align evenly. Like this:
Home About Us Location
Contact Visit Schedule
I imagine the way to do this is to make the li a specific width and then apply an appropriate margin to the right side, but for some reason I can't apply a width. If I have the following html skeleton, how would I edit the CSS to accomplish this? I've looked around the web for a solution, but I've haven't found any similar questions because my menu sits on two separate lines.
<div class="footer">
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<br>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
Fix the width of <ul> and <li>. And remove the <br /> it makes the markup invalid.
HTML
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
CSS
#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }
Demo
Demo(with white-space fix)
Give the li elements a display property of inline-block and a width. Here's a jsfiddle to demonstrate:
li { display: inline-block; width: 100px; }
Check this:
<pre>
test
test
test
</pre>
Source: How do I create tab indenting in html
First, a <br/> is not a valid child element of <ul/>.
To apply a width to an <li/>, you will need to make it a block-level element.
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
and
#footerlinks {
background:#ccc;
overflow:hidden;
padding:5px;
width:300px;
}
#footerlinks li {
float:left;
padding:5px 0;
width:33%;
}
Here is a working example - http://jsfiddle.net/jaredhoyt/xbvyP/