I'm trying to create an unordered list beside a paragraph being used as a subtitle, however the list is squashed into the size of one item and items are then stacked on top of each other.
I would also like them to both be side by side on the same level, but both aligned to the left and right sides of the header element, respectively.
Here's what I've got so far. You can see the stacked list as well as an attempt to have them side by side, however I'm sure there's a better way to do this.
This is what I've tried to have the subtitle and list on the same level (also look at the jsfiddle):
.subtitle {
..
margin-top: -40px;
..
}
Thanks.
You should not be floating just the li. You have to inline your p and float nav to the right http://jsfiddle.net/Zz6Xs/12/
nav {
float: right;
}
.subtitle {
display: inline;
...
nav ul {
margin-top: 0;
}
There are default padding and margin settings that are applied to most HTML elements and they differ from browser to browser. Many people use a CSS reset system to get a consistent look and feel across browsers. See this example, just like what you had, but with having to reset margins yourself
What's even better than using floats is the flex box model if you can use HTML 5. In the following example, we tell the nav to take up all remaining space while p is only wide as it needs to be
CSS
section {
display: box;
box-orient: horizontal;
}
nav {
box-flex: 1;
text-align: end;
}
HTML
<section>
<p class="subtitle">Subtitle </p>
<nav><ul>
<li class="menu">Item 1</li>
<li class="menu">Item 2</li>
<li class="menu">Itemmm</li>
</ul></nav>
</section>
Also try dropping the negative margins and zero out the padding and margins on the elements.
header {
width: 50% ;
margin:0 auto;
}
h1 {
font-size: 50px;
color: #33B5E5;
}
h1,p,nav,ul{
padding:0;
margin:0;
}
.subtitle {
color: #33B5E5;
float:left;
width:20px
}
ul{
float:right;
}
.menu {
display: inline;
width: 20%;
}
Related
I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
test.html:
div, li {
display: inline-block;
margin-left: 30px;
}
<div>тест1</div>
<ul>
<li>тест</li>
</ul>
Opening test.html gives such a result that although div and li tags share the same style rules, div tag content is nevertheless closer to the left screen border than li tag's (at least at Google Chrome 44, desktop). Why is it so and how is it "healed"?
<ul> have some margin from left in default css. You can reset your css, or just put to your <ul> margin: 0; and padding: 0;.
HTML elements have styling rules beyond simple left margin & display type (such as padding for example). Also elements are positioned relative to other elements (unless explicitly set otherwise).
There's no reason for your <div> & <li> to look identical.
Posting the full code in accordance with #Alesha Oleg's answer-
<!DOCTYPE html>
<style>
div, li
{
display: inline-block;
margin-left: 30px;
}
ul
{
margin: 0;
padding: 0;
}
</style>
<div>ABCD</div>
<ul>
<li>ABCD</li>
</ul>
Now you get same effect on both:
div, li{
display: inline-block;
margin-left: 30px;
}
ul {
margin:0;
padding:0;
}
Here is fiddle: http://jsfiddle.net/nphzbfwd/1/
I have many varied cases where I would like a DIV containing an inline-block menu element - typically an anchor - to act as if vertically justifying the elements, when an element overflows on to multiple lines.
I will use one example case to explain what I would like to achieve:
See my codepen:
http://codepen.io/anon/pen/wBRpqJ?editors=110
Output:
What happens is that if the browser resizes to a smaller size, then the final inline-block Anchor element falls down onto a new line, see screenshot (at width ~725px):
Output:
That's fine, in itself, but what I would like it to do is to split the elements within the DIV equally, as it's on two lines, to then be equally dispersed over two lines and therefore be roughly justified, If you resize the codepen to approximately 500px wide you will see how I'd like it to look if the elements can not all stay on one line. So the image below would be would I would like to see if any line breaking occurs within the parent DIV element.
Output:
I realise that the term equally is an exact term for an inexact situation but to justify the elements in a block so that each row in the block has the same number of elements +/- 1 (for odd counts).
Is this something that can be done with CSS?
P.S> The contents of these elements are dynamic and varied and the situations any solution would be useful for would also be dynamic and varied so solutions specifically for this case will probably not help.
Edit:
Flexbox has been suggested as a solution, how would I use Flexbox to achieve the desired result?
Edit 2:
Criteria -- The elements in the menu are centre aligned and are each separate inline-blocks . Justifying them all it does is screw up the centre alignment and add extra spacer lines around the Anchor elements in the NAV container.
Edit 3:
I will put my code here, used on the codepen example:
CSS:
.mainbox {
width:90%;
max-width:1200px;
min-width:400px;
margin:0.4em auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
border: 1px solid #006;
}
nav {
background-color: rgba(204,204,204,0.4);
padding:5px 5px 0px 5px;
text-align:center;
position: absolute;
/* bottom increased from zero to make example clearer on codepen */
bottom:1em;
margin:auto;
width:90%;
/* width adjusted from 100% for codepen layout */
}
nav a {
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
padding:2px 4px;
color: #000;
border: 1px solid #000;
line-height: 1.1em;
background-color: #DDDDDD;
margin:0 3px 3px 3px;
display:inline-block;
}
nav a:hover, nav a:focus {
background-color: #FFFFFF;
color:#000000;
text-decoration: none;
}
HTML:
<div class="mainbox">
<header>
<nav>
Availability
Tariff
Make A Booking
Access Statement
T&Cs
Contact
<a href="http://www.elsewhere.co.uk" title="Visit the website">
Parent Site</a>
</nav>
</header>
</div>
You have to use the :after pseudo element hack. Basically it works like you're justifying text. In order to get the last line to justify, you have to force a fake line using :after to get the browser to justify the last line. Just think about how justify works, it never justifies the last line.
.menu {
margin: 0;
padding: 0;
text-align: justify;
font-size: 0;
}
li {
display: inline-block;
font-size: 24px;
width: auto;
background-color: #ccc;
text-align: center;
padding: 0 10px;
border: 1px solid black;
margin:10px;
}
ul:after {
display: inline-block;
width: 100%;
content: '';
}
<ul class="menu">
<li>Item 12341231</li>
<li>Item 123462346</li>
<li>Item 234523</li>
<li>Item 34563457</li>
<li>Item 456756</li>
<li>Item 567856</li>
<li>Item 678969</li>
<li>Item 7453456</li>
<li>Item 8234523</li>
</ul>
One trick might be to use media queries:
#media (max-width: 725px) {
.parent-div {
width: 500px;
}
}
Not perfect, but setting these will wrap everything just the way you want it.
This workaround is also based on #media, but using a pseudo element to make line break.
#media screen and (max-width: 750px) {
nav span:nth-of-type(4)::after {
content: "";
display: table;
height: 10px;
}
}
Note: I added a <span> tag around each <a> in order to make it happen.
Demo: http://jsfiddle.net/s88381hb/1/
You can use CSS to do this but you can use javascript to enforce the CSS whichmight be more beneficial
I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE.
This is the only affecting css:
#header ul
{
display: inline;
}
#header ul li
{
list-style-type: none;
background: #000;
display: inline;
margin: 0;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
And this is the HTML:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
</div>
As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...
That's no moon...i mean...margin.
What you're seeing is the white space between your elements. Inline-block treats the elements as inline, except they have heights, widths, margins, paddings, etc. What happens is the newline + spacing you've given your html elements for nice indentation is being displayed as a space between the elements.
inline-block is also not cross-browser consistent. I'd suggest using display:block; with floats.
Edit to add suggestion:
If you want nice indents, but want to avoid extra white-space (as in all XML data ever), use what I call the "fishy notation"
Instead of:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
Use:
<div id="header"
><ul id="toplinks"
><li>Hello</li
><li>Herp</li
><li>Derp</li
></ul
></div>
White space contained by elements is preserved, but white space within elements is not.
Time to whip out that CSS Reset! I first include this, and then start designing. It makes it much easier, as most HTML will look identical cross-browser.
But to fix your problem, I would check if there is a stray border property somewhere. I've had rogue borders before, and they drove me mad. To kill it (for now), try this:
border-style: none;
If we had the complete CSS (don't worry, we don't steal it), I could actually fiddle with it and give you a fully functional answer.
change your CSS to
#header ul
{
display: inline;
}
#header ul li
{
float:left;
background: #000;
margin-left: 1px;;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>