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/
Related
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; }
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
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.
I have a <table> and I put more than 6 <div>s in one td then I change the display:inline to show these <div>s inside together.
But it just show at most 5 <div>s in first line and show others in in another line below of first line!
where is wrong?
This is my code:
<tr>
<td>
<div id="navigation"> Home </div>
<div id="navigation"> Item1</div>
<div id="navigation"> Item2 </div>
<div id="navigation"> Item3</div>
<div id="navigation"> Item4 </div>
<div id="navigation"> Item5 </div>
<div id="navigation"> Item 6 </div>
<div id="navigation"> Item 7</div>
</td >
</tr>
CSS Code:
#navigation{
display:inline;
padding:0px 10px 0px 10px;
}
this is design view:
You are using table for layout, use div's instead, ya, surely it won't throw you any error but what you are doing is semantically not correct...
The correct way and a better way to have this is as an unordered list, with display: inline-block; CSS property
<ul>
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
<li>Demo 4</li>
<li>Demo 5</li>
</ul>
ul li {
display: inline-block;
}
You can also wrap the ul inside an nav which is HTML5 element to provide it a meaning that yes, this is a navigation, you'll be probably nesting a element inside the holder so using display: block; for a element will make sense
First off you can't have multiple elements with the same ID. Change id="navigation" to class="navigation" on the elements.
Secondly you can then use this CSS:
.navigation
{
display: inline-block;
}
This will make those elements all appear in a row.
Because there is no fixed table width, the tables maximum width is the window width.
See this fiddle:
http://jsfiddle.net/7QLPW/1/
One Table with specified width and one without
<table width="500px">
...
<table>
The first one does not break as soon as the window width gets too small, the second one does.
What is the width of your table, full layout or how many column you have.
you can see what I try for your issue
http://fiddle.jshell.net/yNF4n/