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;
}
Related
I'm still learning my way around CSS. I have a row of li blocks and they're not aligning at the top. I can deduce that somehow the p block somehow pushes the li up, but I don't know why. Can anyone explain?
http://codepen.io/mesu/pen/bVoOrg
li {
display:inline-block;
height: 200px;
width: 450px;
border: 2px solid black;
text-align: center;
}
inline-block elements by default align to baseline (I believe). You can change this with:
li {vertical-align: top;}
So the more information text of the first div is aligning with the h3 in the second div.
Try this :
li {
display:block;
float:left;
height: 200px;
width: 450px;
border: 2px solid black;
text-align: center;
}
Try adding display: table; width: 100%; to the p elements.
Example: http://codepen.io/anon/pen/BomLMp
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 want my blockquotes aligned, not overlapping. The issue can be seen here: http://ymirsgirlfriend.tumblr.com/post/86505956778/caramelcheese-carry-on-my-wayward-butt
Example Image of requirement.
Here is my CSS:
blockquote {
display: block;
width:200px;
margin-left:20px;
margin-right:10px;
border:1px solid #bbb4b4;
padding: 5px 5px 5px 5px;
border-radius:0px;
color:#aaaaaa;
background-color: #fafaf7;
width:180px;
margin-left:0px;
cursor:url(http://img69.imageshack.us/img69/7673/cursorw.png);
}
Thank you to anyone who looks at the question!
Avoid width and set a negative margin-right. Keep the padding and don't use overflow:hidden, otherwise the content will get cut or too close to the border.
blockquote {
/* width: 200px; no width!*/
margin-right: -6px; /*this is the code*/
}
A JSfiddle would be useful but
#stuff > blockquote {
overflow:hidden;
}
seems to do the trick.
I'll start by saying that my css skills are very weak.
Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?
Here is my HTML
<body>
<div id="container">
<nav id="navigation">
<ul>
<li>Homepage</li>
</ul>
</nav>
</div>
</body>
and here is my css
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...
I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html
I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is
equal to the height of its content(because you have not provided any height to the div containers).In short,
margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.
Use tools like Firebug to see your layout and see where you're going wrong.
All the best!!
Maybe you should try with background-position attribute:
http://www.w3.org/wiki/CSS/Properties/background-position
What do you want to do?
In case of moving the button, try
margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...
if you are trying to move the button down then you need to first put it in a wrapper
if not try this .
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#navigation {
position:relative;
display:block;
margin:40px 0px 0px 0px;
padding:0px;
width:auto;
height:auto;
}
#navigation ul {
display:block;
position:relative;
margin:auto;
padding:0px;
}
#navigation ul li {
list-style:none;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example
body {
background-image:url('images/loop.jpg);
background-repeat:repeat;
}
#backgroundimg {
background-image:url('images/prices.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
width:980px;
height:700px;
margin:auto;
padding:0px;
}
hope this helps :)
I'm trying to accomplish this sort of layout..
Notice how the text is always vertical centered. I want to achieve that using vertical-align with divs.
Note: Blocks don't have a specific height. Using properties like top:50% or positioning won't achieve exact centering.
http://jsfiddle.net/V8S8b/
The problem is the image. The work around is to separate the image and the text content into two separate 'cells' which will correctly determine the alignment. Here is an example - I've had to set some width's for the containers but since they are acting as table cells they will adjust according to content (as I have tried to demonstate)
.ul.entries li {
display:table-row;
padding:8px;
border-bottom:1px solid #000;
}
You have an error here. ul should not be preceded by dot since its not a class .Rest looks fine.
Try the following, I edited the jsfiddle link you gave above and managed to get a similar layout to the picture you included above.
h1 {
display: inline-block;
font-size:18px;
font-weight:bold;
color: #fff;
margin-top: 20px;
margin-bottom: 10px;
}
ul.entries {
width:500px;
}
ul.entries li {
margin: 10px;
border-bottom:1px solid #000;
}
.inner {
overflow: hidden;
padding: 10px;
}
ul.entries li img {
float:left;
margin-right:15px;
display: inline;
}