How do I align the following so that the image and the link are vertically aligned? Also how do I increase the spacing between consecutive lines?
<li><img src="c.png" alt="Centern | Karta"/> Centern </li>
<li><img src="fi.png" alt="Feministiskt initiativ | Karta"/>Feministiskt initiativ </li>
You can put the images as background.
HTML
<li><a class='centern' href="centern.php" title="Centern | Karta">Centern</a> </li>
CSS
a.centern {
background: url('c.png') no-repeat;
height:20px; //height of the link
width:100px; //width of the link
padding-left:40px //give some space for the background image
}
Not entirly sure what you mean by alignment. I set up a fiddle here: http://jsfiddle.net/GX5k6/
/* this takes care of the alignment of the text and images */
li a {
display: block;
line-height: 32px;
float: left;
padding-left: 5px; /* spacing between image and text */
}
li img {
display: block;
float: left;
}
li {
clear: both;
overflow: hidden;
}
/* spacing between lines */
li {
margin-bottom: 5px;
}
Depending on wether you consider the images styling or content and if you want them to show up when the page is printed, you should indeed consider making them background images as suggested by #petar
Related
You can go to my test page here: https://socialstamp.me.uk/new/testpage.php
The buttons to your left (under balance), only the top half of them can be clicked, bottom half doesn't work/click. I've checked the CSS styling file and can't find anything, I've tried many solutions but nothing works.
Button code:
<ul>
<li id="l2"></li>
<li id="l3"></li>
<li id="l4"></li>
<li id="l5"></li>
<li id="l6"></li>
<li id="l7"></li>
<li id="l8"></li>
</ul>
CSS:
#dashContainer .col-md-2 li {
display:block;
height: 40px;
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}
#l2 {
background-image: url('../img/menu/btn3.jpg');
}
#l2:hover {
background-image: url('../img/menu/btn3h.jpg');
}
#l2:active {
background-image: url('../img/menu/btn3h.jpg');
}
And so on for several buttons...
The issue is <li> tags have 41px height but <a> tags doesn't have any height except font-size. By default <a> tags displayed inline so your clickable area just taking up space as <a> tags font size. There are too many ways to fix it.
First option : ( original answer )
By giving height and width to <a> tags as container:
#dashContainer .col-md-2 li a {
display:block;
height:100%;
width:100%;
}
Second option :
By adjusting <a> padding. No need give height to li tags if it is not important for UI.
#dashContainer .col-md-2 li {
display:block;
/* height: 40px; */
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}
#dashContainer .col-md-2 li a {
padding:20px 0px;
}
Third option :
By giving height to <a> tags.
#dashContainer .col-md-2 li {
display:block;
/* height: 40px; */
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}
#dashContainer .col-md-2 li a {
display:block;
height:40px;
line-height:40px; // for text vertical align
width:100%;
}
I'm surprised the buttons work at all. While you define the size of the <li>, there is nothing defining the <a> and so in theory it should be of size 0, and therefore unclickable.
Make sure to apply your widths and heights to the link itself!
this issue can be resolved if you will add a css height 41px in links.
I'm trying to figure out how to make a multi-line dot leader when the background is textured or you don't know the background. The W3C site provides a good example when you know the background color, but that doesn't work for my needs. Here is a SO example of a textured background that works really well, but the leaders disappear when the line breaks to a 2nd line. Unfortunately the two use a different method to achieve this effect, so I'm not sure the best way to combine the best of both worlds here...
Here's sorta what I'm thinking. Is it possible?
Something from the top of my mind:
(Honestly I don't know for any other better and responsive solution):
jsBin demo (so you can resize and play with)
Place 2 span (as table-cell) inside a LI set as table
Trick the last span to width: 1%;
Add the desired dashes or dots or even a background-image to the first span's :after pseudo element
body{background:orange;} /* No other backgrounds are used */
ul.leaders {
padding: 0;
}
ul.leaders li {
display: table;
}
ul.leaders li span {
display: table-cell;
}
ul.leaders li span:first-child { /* TITLE */
position: relative;
overflow: hidden; /* Don't go underneath the price */
}
ul.leaders li span:first-child:after { /* DASHES */
content: "";
position: absolute;
bottom: 0.5em; /* Set as you want */
margin-left: 0.5em; /* Keep same for the next span's left padding */
width: 100%;
border-bottom: 1px dashed #000;
}
ul.leaders li span + span { /* PRICE */
text-align: right;
width: 1%; /* Trick it */
vertical-align: bottom; /* Keep Price text bottom-aligned */
padding-left: 0.5em;
/* white-space: nowrap; /* Uncomment if needed */
}
<ul class=leaders>
<li>
<span>Salmon Ravioli</span>
<span>7.95</span>
</li>
<li>
<span>Pan seared Ahi with avocado, soy, ginger and lime</span>
<span>8.95</span>
</li>
<li>
<span>Almond Prawn Cocktail</span>
<span>7.95</span>
</li>
<li>
<span>Bruschetta</span>
<span>45.25</span>
</li>
<li>
<span>Margherita Pizza</span>
<span>108.95</span>
</li>
</ul>
I'm trying to create a navigation menu for my website, with the links aligned horizontally near the top of the page, and I want each link to have a short description underneath. When a user clicks on either the main link text or the description underneath, it should take them to the right page. Additionally, each menu item should have a triangle-shaped icon as the bullet. This is a picture of what I'm trying to achieve.
I can make a list align horizontally when it's just one line. But it breaks down when I try to add more.
<nav id = "header-navigation">
<ul>
<li>
<a href="/">
Home
<span class = "subnavigation">Foo!</span>
</a>
</li>
<li>
<a href="/contact">
Contact
<span class = "subnavigation">Bar</span>
</li>
</ul>
</nav><!-- header-navigation -->
And in the CSS:
nav#header-navigation {
margin-top: 160px;
display: block;
}
nav#header-navigation ul li:before {
content: url("../images/main-navigation-bullet.png");
vertical-align: top;
}
nav#header-navigation ul li {
display: inline;
text-transform: uppercase;
min-height: 22px;
}
nav#header-navigation ul li span.subnavigation {
display: block;
color: #999;
font-size: 90%;
margin-top: -10px;
margin-left: 15px;
}
This is what I get.
I've also tried putting a float: left on nav#header-navigation ul li, but that causes the list items to float all over the place, like to the top of the screen, outside of the containing div where they belong.
Another problem I've found is that Chrome doesn't display the vertical-align: top; attribute correctly, so the subnavigation text displays in the wrong place on that browser.
Is there a way to get this to work across browsers, or is this still the sort of thing that's best done using images?
It appears the only changes you need are:
nav#header-navigation ul li{
display: inline-block;
}
nav#header-navigation ul li a{
display: inline-block;
vertical-align: top;
}
And get rid of
nav#header-navigation ul li span.subnavigation {
margin-top: -10px;
margin-left: 15px;
}
After making these changes, it appears correctly in Firefox and Chromium on Linux Mint 15.
I'm trying to vertically align text with an image (or vice-versa?). Here's some code:
<div class="row">
<div class="col-md-3">col-md-3
<ul>
<li><img src="http://placehold.it/60x60"><p>Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
</ul>
{# 3 more columns like this #}
</div>
also CSS:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
display: table-row;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
vertical-align: middle;
}
also, might be important all images are the same fixed size, let's say 60x60 like in example and I can not use it as a background.
How can I align it? Thanks.
Update: as were pointed out, I'm looking for text to be in the middle of the right edge of the picture, thanks.
My solution works with one line of text as well as multiple lines.
Working Fiddle Tested on: IE10, IE9, IE8, Chrome, FF, Safari
HTML: same as you posted
I'm assuming you meant middle alignment. if not: use top | bottom instead of middle
CSS
*
{
padding: 0;
margin: 0;
}
ul
{
list-style-type: none;
}
div ul li
{
margin: 5px;
}
img
{
vertical-align: middle; /* | top | bottom */
}
div ul li p
{
display: inline-block;
vertical-align: middle; /* | top | bottom */
}
Just remove the <p> tag and the float:left from img and you got it.
Demo at http://jsfiddle.net/BA2Lc/
I am not a big fan of using those table display options, had some bad cross-browser experiences with them.
Seems to me you could use line-height here. Something like this:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
line-height: 60px;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
}
and a fiddle: http://jsfiddle.net/qjSpj/1/
You can modify the <p> style from the default display to inline:
p {display: inline}
You can use the vertical-align: top; declaration on the li element. But you will need to use a clearfix since you're floating the image.
I just added vertical-align:middle/top/bottom; to the images and worked.
I have an image 78x26 px that i want to use as buttons for my navigation bar.
What would be the most suitable way of doing this?
I want the image to keep its original size at the moment it doesnt
#navbar li {
background-image:url("../images/btns.png");
}
Im aware that i can do something like this but then again how do i place the text over the images
<li><img src="images/btns.png"></li>
You must also specify your width and height of the <li>. Please try this:
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:26px;
}
<li> elements, I believe, are inline and therefore you must do something like this to make them appear side by side:
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:26px;
float: left;
}
background-image alone does not scale the image. If you feel like it's not rendering at the original size, it's probably because it's repeating.
use this instead:
background:url("../images/btns.png") no-repeat;
And then
<li>Your text here</li>
You might now need to resize the li to fit your design
It could be better if you load your code online, like on codepen.io
I believe this to be the standards ways:
<nav class="navbar" role="navigation">
<ul class="main-nav">
<li class="menu-1">Menu-Link-text</li>
<li class="menu-2">Menu-Link-text</li>
....
</li>
</ul>
</nav>
.navbar {
overflow:hidden /* trick to force the navbar to wrap the floated <li>s */
}
.main-nav li {
float: left;
display: inline; /* bug fix for older IE */
}
.main-nav a {
display:block; /* bigger click area */
width: 78px;
height:26px;
text-indent: 100%; /* Text in the link for search engines and assistive technologies */
whitespace: nowrap; /* see above */
background: #yourFallBackBackgroundColor url("../images/btns.png") no-repeat 0 0; /* use a sprite with all images in one file and move them within background as required */
}
.menu-1 {
background-position:0 0;
}
.menu-2 {
background-position:-78px 0;
}
.menu-3 {
background-position:-156px 0;
}