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; }
Related
I'm trying to write my new webpage. On the top I want to have one center div called top-bar-container, with three other div's something like that :
<div id="top-bar-container">
<div id="top-main-menu-container">
<ul id="main-menu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
<div id="logo-placeholder">
<img src="images/logo.png" width="300" height="75">
</div>
<div id="mail-login-container">
</div>
</div>
When trying to get the effect of a div to the left was always on the extreme left, right, to the right and the logo was always in the middle. I like to use position: absolute but this reluctance. I have to deal differently. Is anyone able to help me get this effect?
Here's one way of doing it.
#top-bar-container > div {
float: left;
}
You can float the links left, then float the mail container right. Apply a text-align center to the parent div and everything should be fine.
#top-bar-container {
text-align: center;
}
#top-main-menu-container {
float:left;
}
#mail-login-container {
float:right;
}
Fiddle here:
http://jsfiddle.net/3eut86s6/
I'm using the Pure CSS framework and my code looks like
<div class="container pure-g">
<header class='pure-u-1'>
<h1 class='logo'>
TEST
</h1>
<nav class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li>Example Link 1</li>
<li>Example Link 2</li>
</ul>
</nav>
</header>
</div>
Here's a JSfiddle: http://jsfiddle.net/ME4jv/
What I'm trying to do is line up the logo (to be floated left) with the navigation links (floated right), but both floating and the grid system aren't working.
Unfortunately you need to override the framework width declaration that has been assigned to the nav. Currently it is set to 100%;. This is why it is not floating up.
DEMO http://jsfiddle.net/ME4jv/2/
.pure-menu.pure-menu-open {
float:right;
display: block;
width: auto;
}
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.
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
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>