What options (if any) do I have to centre the image within the li tag? What I have is an oversized image deliberately placed into a smaller sized li. What I am trying to achieve is the image centred within the li tag ... ie so that the cropped overflow would be shared on both the left and right, not just the right. The code below is a reduced version of what I am working with.
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
width: 250px;
}
img {
border: 3px solid pink;
}
The codepen is here http://codepen.io/anon/pen/ebCEi. Note: I wont be able to use background images.
li {
overflow:hidden;
width: 250px;
position:relative;
height:106px;
}
img {
border: 3px solid pink;
position:absolute;
left:-75px;
}
jsFiddle example
You'll notice the left and right border on the image isn't visible because it extends beyond the viewport of the list item.
Use text-align:
li {
overflow:hidden;
text-align: center; /* <------- */
width: 250px;
}
If that doesn't work try this:
img {
border: 3px solid pink;
margin: 0 auto; /* <------- */
}
Try this:
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
text-align:center;
width: 250px;
}
img {
border: 3px solid pink;
margin:0 auto;
}
Related
http://jsfiddle.net/SyKnv/
I am trying to get rid of the additional space after each li item, to make the blocks the same size as their content. I tried to display them as inline, but that removes the bullets.
HTML
<div>
<ul>
<li>banana</li>
<li>orange</li>
<li>cherry</li>
</ul>
CSS
div {
width: 40%;
min-height: 50%;
border:1px solid black;
}
li {
border:1px solid black;
}
As mention in my comment you have to make ul display: inline-block; like this:
ul{
display: inline-block;
}
fiddle
try this code DEMO
div{
width: 40%;
min-height: 50%;
border:1px solid black;
}
ul {
margin:0;
padding:0;
}
li{
border:1px solid black;
list-style:inside;
}
CSS
ul{
display: inline-block;
}
Inline-Block
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.
More Info Regarding Inline-block
Updated Fiddle
I have the following code. It's essentially a simple grid view that uses <ul> and <li> tags. I wanted to make it responsive such that the <li> elements are always centered no matter what the width of the screen is. How can I do so? I've tried setting the padding-left and padding-right as percentages, however it doesn't work. Right now if I adjust the width of the screen it doesn't always stay centered.
Simply add text-align: center to the parent <ul>
Fiddle
I'll extend on the previous answer...
Also center the UL
#home-listing {
text-align: center;
width:80%; /*Pick Your Own Width*/
margin:16px auto;
}
http://jsfiddle.net/Zd9Gf/3/
It depends on what you mean by centered. In order to center the entire list you could do something like:
ul {
padding: 0px;
width:500px;
margin:auto;
}
See this jsFiddle.
add this class:
ul.search-results{
width:100%;
}
and update this class:
ul.search-results li {
border-right: 1px solid #cecdcb;
border-bottom: 1px solid #cecdcb;
border-top: 1px solid #fff;
list-style: none;
padding: 0;
display: inline-block;
vertical-align: top;
width:60%;
margin:0 20%;
text-align:center;
}
I have a <div> with the ID #left, which cotnains another <div> with the ID #container. Inside #container is a <ul>.
I thought the default would be that the <li> would vertically expand to contain any and all text inside it. But it doesn't. This is the CSS:
#left {
width:200px;
}
#container {
margin: 0 6px;
overflow:hidden;
}
#container li {
background:greenyellow;
position: relative;
border: #BF0000 thin solid;
margin: 0 0 12px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
clear:both;
}
#container li:hover {
background: #ffffff;
}
#container a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
By using jsFiddle, I've discovered that it's the <a> tag, and something about it's CSS properties that is breaking my <li> tag's height. However, if I change the <a>, I lose the other effect I want, which is to be able to click anywhere in the <li> and have it activate the link.
Can I get the <li> to expand vertically and also the <a> tag to fill the entire <li>? I don't see why the <a> should impact the <li> the way it's doing right now.
What i understand that you want to have your li to wrap your a tag properly while a tag can grow its height based on content. if this is the case please visit http://jsfiddle.net/jBvQ8/16/ for solution.
If you need some modification or other use case to handle i will update that jsfiddle of mine.
#left {
width:200px;
}
#container {
margin: 0 6px;
}
#container li {
background:greenyellow;
position: relative;
border: #BF0000 thin solid;
margin: 0 0 12px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
clear:both;
}
#container li:hover {
background: #ffffff;
}
#container a {
display:block;
width: 100%;
}
I am not sure what you want, but maybe you want entire <a> to be inside li with the applied CSS.
simply remove position:absolute from the css of anchor tag i.e.
#container a {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
see this fiddle
and if you want a pointer cursor, when you hover your li with anchor, simply specify href tag(even href='#') to the anchors
see this fiddle for clickable anchors
I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.
Trying to make navigation with Previous and Next button.
Want the Previous and Next to be on both ends of the screen. They need to be responsive and float closer to each other with the size of the screen. However, the previous and next buttons can't be one over the other.
My current CSS and HTML is as follows:
HTML
<div id="navigation_wrapper">
<div>previousnext</div></div>
Connected CSS
div#navigation_wrapper {
width: 100%;
padding: 5px 0px 30px 0px;
background-color: orange;
opacity:0.8;
}
You should float the elements like so
CSS
div#navigation_wrapper {
width: 100%;
background-color: orange;
opacity:0.8;
}
#prev-button {
float:left;
}
#next-button {
float:right;
}
HTML
<div id="navigation_wrapper">
<a id="prev-button" href="previous.html">previous</a>
<a id="next-button" href="next.html">next</a>
</div>
Float the buttons left / right accordingly and to avoid them colliding set min-width on the body tag
quick demo
body{
min-width:120px
}
div#navigation_wrapper {
width: 100%;
padding: 5px 0px;
background-color: orange;
opacity:0.8;
overflow:hidden;
}
a[href*="previous.html"]{
float: left;
}
a[href*="next.html"]{
float: right;
}