I don't mind the border appearing, its just the strange bit at the top that I dislike. I know I can work around of this, getting rid of the border altogether by using outline: 0, but I also know that's bad.
The HTML setup is
<li>
<a href='..'><img alt='..' src='..'/></a>
<a href='..'>...</a>
</li>
An extract of the CSS:
li{
display: block;
width: 9em;
margin-right: 1em;
height: 12em;
text-align: center;
}
li img{
height: 8em;
display: block;
margin: 0 auto;
}
(The effect is similar if the two are combined in a single <a>.)
I think this is related to using display: block on the image. I've reproduced the issue here: http://jsfiddle.net/pvd69wce/
If you don't want to remove the outline, one solution is to give display:inline-block to the <a>.
li {
display: block;
width: 9em;
margin-right: 1em;
height: 12em;
text-align: center;
}
li a {
display: inline-block;
}
li img {
height: 8em;
display: block;
margin: 0 auto;
}
<ul>
<li>
<a href='#'>
<img alt='' src='https://upload.wikimedia.org/wikipedia/commons/e/e2/Merton_College_Oxford_Coat_Of_Arms.svg' />
</a>
<a href='##'>Merton</a>
</li>
</ul>
To be honest though, I'm not entirely sure why this works exacty. Nor indeed, where the extra lines do come from when the <a> is not an inline-block.
Another alternative way you could think about assuming if the links are going to the same position is adding outline:none to the link but also adding a hover/focus effect on the image to highlight the link below it as to help for accessibility
Codepen http://codepen.io/noobskie/pen/ojXYgo
Related
<figure>
<img src="eternity-ring.png" width="10%" alt="Trulli" style="width:100%">
<figcaption>eternity ring</figcaption>
</figure>
I put an "a" attribute that should make the picture clickable so that it'll lead me to another page.
the thing is that its not fully clickable, and only the left side can be clicked but I want that all of the image'll be clickable. can somebody help me please?
(BTW here is the CSS of it)
figure {
padding: none;
margin: auto;
margin-left: 11px;
width: 10%;
float: left;
text-align: none;
direction: rtl;
}
It works only when I delete the float: left; but I need it.
If you want the figcaption to be clickable then you should put it inside <a></a> tag. Or, wrap whole figure with <a></a> tag.
Instead of float, you can use display: inline-block, which will also allow you to place several elements on one line / horizontally next to each other. (also use the vertical-align parameter in this case, best probably set to top)
If you also apply float: left; to the anchor inside the figure, it works.
I added a red border and a pointer to it just to make it obvious. And I removed the invalid text-align: none;, which is useless anyway.
figure {
padding: 0;
margin: auto;
margin-left: 11px;
width: 10%;
float: left;
/* text-align: none; */
direction: rtl;
}
figure a{
border: 1px solid red;
float: left;
cursor: pointer;
}
<figure>
<img src="https://via.placeholder.com/400" width="10%" alt="Trulli" style="width:100%"/>
<figcaption>eternity ring</figcaption>
</figure>
I've made a class in CSS:
.nav{
display: block;
background-color: #5271ff;
position: fixed;
height: 160px;
width: 100%;
padding:0;
.nav li{
float: left;
padding-top: 130px;
padding-left: 10px;
}
My HTML code is
<div class="nav">
<ul>
<li>
<img src="logo.png" alt = "logo" width="160" height="160">
</li>
<li>Home</li>
<li><li>News</li>
</ul>
</div>
Is it possible NOT to apply the property to the image which is part of the list?
The outcome is always pushing the image out of the block that I've made, my idea is that the block is gonna have the color of the logo and they will mix together and I want the "Home" and "News" on the bottom of the block, not on top of it. I'm fairly new to HTML and css.
Have you tried nav li:not(:first-child)
instead of nav li
It will leave the first li and apply the style to the others. You can actually use a class but I think the not function is handy in this case that how I would have done it myself #cheers
Give a common class to the elements of the list you want to have common properties. You can then specify an ID for the items you want to give different properties to.
There are several ways you could achieve this.
If the image is always going to be in the first li you could apply the below css:
.nav li:first-child ~ li {
float: left;
padding-top: 130px;
padding-left: 10px;
}
or you could apply a class to all the elements you want the styles to effect:
.nav .item {
float: left;
padding-top: 130px;
padding-left: 10px;
}
or you could apply a class to the image li and use :not
.nav li:not(.image) {
float: left;
padding-top: 130px;
padding-left: 10px;
}
The above are all viable solutions, and CSS usually has several ways to achieve the same result. It all depends on the approach you want, if you have direct access to the HTML and how scalable you want the CSS and markup to be.
I've spent hours going through a lot of code online trying to center this dropdown menu, but no luck. I feel like I've changed everything in my code twice and I'm at the end of this particular rope.
As you can see, there's space between the right side of the dropdown list and the unordered list that contains it.
I also can't get any transitions to work with the dropdown, so if you feel like sharing some information about that as well it would be appreciated.
Here's the trouble-maker.
<li class="nav">PORTFOLIO
<ul id="portfolio_menu">
<li>PAINTINGS</li>
<li>DRAWINGS</li>
<li>CARTOONS</li>
</ul>
</li><!--portfolio-->
JSFiddle
There is margin right in your list because you have it in your css. Remove the margin-right:4px;. As I can see the text was center. Please explain it more.
ul#navbar_ul li{ width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px; /*REMOVE THIS*/
position: relative;
}
In your code the following code will target all the li elemnts. If you want to apply only first level of child then use >. This will resolve your space issue.
ul#navbar_ul li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
Change it to like below.
ul#navbar_ul > li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
DEMO
I did take a look at loot of similar questions here, but no one helped me solve my problem. I have a problem with vertically align the img on the left side in the li cell (this is working), but i can't align the text next to img. The line-height from ul li div is messing my things.
Here is a Jsfiddle.
What i wan't to achive is this:
Vertically and horizontally align img in 1/3 of the li cell on the left side.
Vertically and horizontally align text in 2/3 of the li cell, text align should be left. Text can be multiline and with bolded heading in first line.
You can also edit html code, if it is necessary.
HTML
<div class="product_banner_right">
<div class="product_banner_right title">
<h3>LOOK DOWN</h3>
</div>
<ul>
<li>
<img src="http://dummyimage.com/26x23/000/fff.png" alt="" />
<p><span>HEADING1</span>first line text
<br>second line text</p>
</li>
<li>
<img src="http://dummyimage.com/48x9/000/fff.png" alt="" />
<p><span>HEADING2</span>first line text</p>
</li>
<li>
<img src="http://dummyimage.com/40x24/000/fff.png" alt="" />
<p><span>HEADING3</span>first line</p>
</li>
<li>
<img src="http://dummyimage.com/46x17/000/fff.png" alt="" />
<p><span>HEADING4</span>first line text
<br>second line text
<br>third line text</p>
</li>
</ul>
</div>
CSS
.product_banner_right {
font-size: 1.2em;
position: relative;
width: 250px;
}
.product_banner_right .title {
height: 40px;
background: #1b3a6f;
}
.product_banner_right .title h3 {
text-align: center;
line-height: 40px;
}
.product_banner_right ul {
margin: 0;
padding: 0;
}
.product_banner_right ul li {
display: block;
height: 70px;
border: 1px solid black;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
}
.product_banner_right ul li p span {
font-weight: bold;
}
change the following styles to :
.product_banner_right {
font-size: 100%;
position: relative;
width: 250px;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 4%;
width: 11%;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
width: 80%;
}
the result:
I have rewrote your html to accomodate the changes.
I have applied two options:
variable height list items.
fixed height list items with overflow.
Fixed height list items
CLICK FOR DEMO
This option is fully browser compatible but would require manually adjustment of the top margin for each list item.
Alternatively this option could still be used with the box flex model described below.
Fix height of list item and add scroll on overflow:
height:70px;
overflow:auto;
Variable height list items
CLICK FOR DEMO
This option relies on css3 flex box model:
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
-webkit-justify-content:center;
Please note flex box requires browser support. It is now highly compatible with modern browsers however old versions of the useless outdated browser ie will not support it.
Users of these browsers will still have a nice viewing experience however the images will be aligned at the top of each list box and not the center.
i don't know if this is the best approach but it looks allready a bit better than yours.
i just changed the following:
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
/* CHANGED*/
width: 33%;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
/* CHANGED*/
width: 66%;
position:absolute;
}
but you still have to get the text to fit into the table.
hope it helped, cheers!
You can make the texts in separate classes and then arrange the as you wish using margin
I need to align my banner with the buttons, banner size is w:967 h:106, tried to directly add the image but it pushes all the buttons to the right.
This is what my code looks like so far:
HTML
<nav>
<img src="png"/>
<ul class="fancyNav">
<li id="home">Home</li>
<li id="s">Social</li>
<li id="p">Political</li>
</ul>
</nav>
CSS
.fancyNav{
overflow: hidden;
display: inline-block;
position: absolute;
text-align: center;
top: 16%;
margin-left: 170px;
}
Site link: http://mops.pcriot.com/main.html
This is caused by display: inline-block; which behaves like this:
Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box.
Using display: block will solve this, but then you may need to do more to align the navigation. Anything with inline in it, will cause what you're seeing.
Here are your other options for the display: property:
http://www.w3schools.com/cssref/pr_class_display.asp
.fancNav {
top: 110px;
}
adjust 110 to whatever looks best
make some changes in your class
.fancyNav {
overflow: hidden;
display: inline-block;
text-align: center;
top: 16%;
margin-left: 170px;
width: 100%;
}
Left Aligned - Try removing:
.fancyNav {
margin-left: 170px;
}
Then add:
.fancyNav {
padding: 0;
}
Center Aligned - Do as above then add:
nav {
margin-left: 170px;
}
or instead (probably better):
nav {
width: 967px;
margin: 0 auto;
}