I have an ASP.NET application with contains a list of hyperlinks. After each hyperlink, there is a br tag that puts each hyperlink on their own line. I want to increase the spacing between each line. I don't want to add another br trag since that does not provide the control I am looking for. I have tried different CSS styling without any change. What CSS styling do I use to accomplish this?
For the hyperlinks you could use display:block; and margin-bottom:[some value] style/CSS properties, you wouldn't need to have your BR elements, and you would gain much more control.
You could add margin or padding to top of your BR tags eg.
br { margin:10px 0; }
If that isn't feasible, then make your hyperlinks block level and add margin or padding to top of them eg.
a { display:block; margin:10px 0; }
Using the latter method you don't require the BR tags anymore.
Remove the <br /> elements and instead give those anchor elements a display:block property.
Then use padding-top or padding-bottom or margin-top or margin-bottom to increase the space between.
i think what you are looking for is line-height:
http://www.w3.org/TR/WCAG20-TECHS/C21.html
even though this might be the better/'nicer' solution:
<ul id="mylinklist">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
and this style:
ul#mylinklist{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#mylinklist li{
margin-bottom: 10px;
}
use margin-top or margin-bottom
a{
margin-bottom: 1em;
}
Related
I've go an html from frontend developers. Part of the menu looks like the following:
<ul id="subNav">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
I had to add some programming tags, and to make code easier to read I've changed it to:
<ul id="subNav">
<li>
Menu item 1
</li>
<li>
Menu item 2
</li>
</ul>
After my change, the menu is broken. Space between elements are smaller. I have compared computed css and they look the same. Why is that? Why 'enter' between <li> and <a> break the layout?
Tested on Chrome.
EDIT:
Fiddle: http://jsfiddle.net/bqyjL6rf/
When you ran the tags together, you eliminate the white space inserted in inline elements. Breaking them apart, as in your second example, puts that white space back in and that is why your layout has changed.
Just as words you type into a paragraph, inline elements also have their white space between elements.
The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.
To adjust that
set display:inline-block instead of using display:inline
li {
font-family: SlateProBk;
font-size: .6rem;
line-height: .6rem;
text-transform: uppercase;
opacity: 0.75;
-webkit-opacity: 0.75;
margin: 0;
padding: 0;
display: inline-block;
list-style-type: none;
-webkit-font-smoothing: subpixel-antialiased;
}
Check this fiddle
http://jsfiddle.net/bqyjL6rf/1/
I have written a piece of code:
<p>
Example:
</p>
<ol>
<li>Text 1</li>
<li>Text 2</li>
</ol>
This need to set my text vertical under each other
But it gives me the output that my text is written over each other so not vertical under each other but just on one line.
I need it like this:
<p>
Example:
</p>
<ol>
<li>Text 1</li>
<li>Text 2</li>
</ol>
And now it is like this:
This could have been a comment. But I thought I could guide you and explain more.
The question contains only the HTML Markup, where the issue doesn't occur. It is perfectly fine. The issue lies with the CSS, which is the presentational style. So, it is something to do with the CSS.
What I feel from your screenshot is, there might be a CSS with a rule:
* {line-height: 0;}
This might have been given as a mistake, or because of something, it is getting over-ridden. You need to reset these values by either:
Using a CSS Reset - Eric Meyer, Simple Reset, or YUI Reset.
If it is a Simple Reset, you can just give this rule:
* {margin: 0; padding: 0; line-height: 1.2em;}
The line-height is for your particular case.
And make sure, you put your custom CSS at the end, so that it is effective and over-rides all the other styles.
Hope you get it done.
try using:
li {
float: none;
dispaly: block;
clear: both;
}
So I have a menu, 4 menu points and I want to put them in a square 2x2. Is there a way to do that WITHOUT having a class for the first two and one for the other ones?
Thanks for any help :)
UPDATE:
I did mess around a little more and I'm using the flex box structure, I'm sorry for not posting this information:
ul {
-webkit-box-orient: horizontal;
}
ul li {
-webkit-box-flex: 1;
height: 44%;
margin: 3%;
}
Sure. For one, you can use floating and set the widths accordingly. See the example below, or http://jsfiddle.net/BUPX7/ for a live example.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
ul {
width: 200px;
}
ul li {
width: 100px;
margin: 0;
padding: 0;
float: left;
}
There is a line break between div elements by default. You are apparently using some CSS to override that. You need to modify the CSS code accordingly, or select a different approach.
The simplest way, assuming ”menu points” are links, is to use
<div><a ...>link1</a> <a ...>link2</a></div>
<div><a ...>link3</a> <a ...>link4</a></div>
But if you are using some elaborated markup and wish to create the break in CSS alone, then you may need some elaborated selectors like :nth-child(3).
I have set the list-style-type in CSS, but for some reason it's not showing it.
body {
margin: 0;
}
ol {
list-style-type: decimal;
padding-left: 0;
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Because of your padding reset, the numbers are actually off to the left of the page. Try adding:
list-style-position: inside;
display:list-item;
list-style-position:outside;
It may give problem if list display: attribute is set to some thing else than display:list-item;
Decimal is default for an "ol". No need to declare it. Also the numbers are there just falling off the side of the page i.e. invisible. Adjust your padding and get rid of the redundant declaration. See here
If nothing of this work, make sure you don't have elements explicitly marked as display block inside the LI. It just happened to me with a H4 A set as block inside the LI. I was about to resign 😳
In my case it wasn't working with <ul>.
I suspected it was possibly because of a CSS reset file I was using.
I set the ul { display:list-item; } as suggested above, and it just worked fine.
Check if you are using any reset files. They could be tricky at times.
just remove "display : block;" from your li element
Changing properties of <li> instead of <ol> worked for me.
ol > li {
padding: 0;
display:list-item;
list-style-type: 'disc';
}
I have a list of names that I'm displaying in one cell of a table with a space between each. For formatting reasons I want to avoid putting each in its own table cell. I now want to put a small avatar or photo above each name. I can obviously do one person as <img src="photo.gif"><br>name... but using or obviously creates a vertical not horizontal list. I can no longer use spaces obviously.
Is there any horizontal version of a <br> tag that I could use to space out the people?
Alternatively, is there a way to do this with css? I found some references to placing images side by side using float left, however, the text is not in a tag. Using multiple span tags does not seem so appealing. Here is img code I found.
.left{
float:left;
margin:0;
padding:0;
}
Using the following CSS:
.horizontalList li {
display: inline;
margin-left: 10px;
margin-right: 10px;
}
You can make an element which usually displays as a block i.e. <LI> , <DIV> , etc to display inline. The margins are just added to give a little space between each element.
So for example,
<UL class="horizontalList">
<LI><img src="img1.png"/>Person 1</LI>
<LI><img src="img2.png"/>Person 2</LI>
<LI><img src="img3.png"/>Person 3</LI>
<LI><img src="img4.png"/>Person 4</LI>
</UL>
Just as well, you can alter the style of the images to display as a block rather than inline, so you can add this CSS to do that:
.horizontalList img {
display: block;
margin-bottom: 10px;
}