I have a wrapper that contains an unordered list of banner images, these are going to be a jQuery slider. However, instead of hiding the inactive images using overflow:hidden I want to have the images display inline and overflow the containing <div>, how do I go about doing this?
#slide-wrapper{
width:760px;
float:left;
position:relative;
ul{
margin:0;
padding:0;
position:absolute;
li{
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
display:inline;
}
Hey now change your code according to this:
#slide-wrapper {
width:760px;
float:left;
position:relative;
}
ul {
margin:0;
left:0;
top:0;
overflow:hidden;
padding:0;
position:absolute;
}
li {
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
float:left;
}
Edit: Didn't see your message about using LESS CSS, amended.
#slide-wrapper {
width:760px;
float:left;
position:relative;
overflow:hidden;
ul {
margin:0;
padding:0;
position:absolute;
top: 0;
left: 0;
li{
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
float:left;
}
Related
I am unable to remove the underline in between the clickable buttons. It seems to continue as a block, but I can't remove display:block; as it makes only the text clickable.
#font-face {
font-family:"cfont";
src: url("font/Guerra_Santa.ttf");
}
body {
margin:0;
}
#menu {
background-color:black;
height:70px;
width:800px;
margin-right:auto;
margin-left:auto;
}
#menu ul {
list-style-type:none;
text-align:center;
}
#menu li {
font-family:cfont;
display:inline-block;
text-align:center;
line-height:70px;
height:70px;
width:200px;
background-color:#C28285;
}
#menu ul li a {
display:block;
text-decoration:none;
color:white;
}
Demo
Don't self close the anchor.
Change:
<li><a href="index.html"/>Home</li>
To:
<li>Home</li>
http://jsfiddle.net/wdwgmvtk/13/
I'm trying to center my sections within the 'content' div but can't seem to find a way to do so.
I also like to know why the 'content' div has no height even though there are elements within them.
Basically I want the three column section boxes to be in the center.
Any help will be much appreciated, thanks.
http://jsfiddle.net/VE72c/
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
}
section {
color:#24292E;
width:300px;
height:500px;
float:left;
margin-right:10px;
margin-bottom:10px;
background-color:#A8B1B1;
padding:4px;
}
You can use display:inline-block on the sections so that they expand the parents height (#content) an use text-align:center; to center them horizontaly.
See this
FIDDLE
CSS :
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
text-align:center;
}
section {
color:#24292E;
width:300px;
height:500px;
margin-bottom:10px;
margin-right:10px;
background-color:#A8B1B1;
padding:4px;
display:inline-block;
}
Add these, and remove float: left from your section CSS.
#content {
overflow: auto;
text-align: center;
margin: 0 auto;
}
section {
display: inline-block;
}
JSFIDDLE DEMO
I've searched the forum and tried a lot of the suggestions that were already made, but I can't seem to center my site navigation.
I'm using a website builder with access to the CSS, so my knowledge is somewhat limited. I would like to maintain the same width of the navigation across the page, but I would prefer for the actual navigation selections to be centered.
Does anyone have any suggestions (preferably simply suggestions since I don't really know what I'm doing). Here is my CSS:
.sf_navigation {
clear:both;
margin:0 auto;
width:auto;
min-height:38px;
height:auto!important;
height:38px;
font-family:Arial;
font-size:13px;
position:relative;
z-index:1000;
}
.sf_navigation ul {
margin:0;
padding:0;
list-style-type:none;
height:1%;
}
.sf_navigation ul li {
margin:0;
list-style-type:none;
display:inline;
float:left;
position:relative;
}
.sf_navigation ul li a {
display:block;
font-weight:700;
padding:12px 37px 0;
text-align:center;
text-decoration:none;
border-right:solid 0;
background-repeat:repeat-x;
height:25px;
width:auto!important;
white-space:nowrap;
width:1%;
}
.sf_navigation ul li a:hover {
text-decoration:underline;
background-repeat:repeat-x;
position:relative;
}
.sf_navigation:after,.sf_navigation ul:after {
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.sf_navigation .widget_header {
display:none;
}
Add this to sf_navigation CSS
.sf_navigation {
display: table;
}
I am creating a thumbnail gallery with floating list items that I would like centered in a fluid layout. I am able to do this without any issues when it is a single line but when it overflows they are no longer centered. Is this impossible purely with css? Here's an example:
<style>
#centeredmenu {
float:left;
width:100%;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
width: 200px;
background-color:black;
border:1px solid white;
}
</style>
<div id="centeredmenu">
<ul>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
<li>/</li>
</ul>
</div>
If it can't be done purely with css can anyone point me in the direction to how it can be done with js?
try this css, change the li from block to inline-block
#centeredmenu {
}
#centeredmenu ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#centeredmenu ul li {
display:inline-block;
margin:0;
padding:0;
width: 200px;
background-color:black;
border:1px solid white;
}
RRcom Rest y answer is good, but if you need this working with IE7, then display: inline-block will not work.
You can get the same effect for IE7 and modern browsers with this hack (see extra lines after "inline-block"):
#centeredmenu ul li {
display:inline-block;
*display: inline;
*zoom: 1;
margin:0;
padding:0;
width: 200px;
background-color:black;
border:1px solid white;
}
This hack will only be interpreted by IE7 (with the "*" hack), and only in this case will apply the display: inline and zoom: 1 rules. This forces inline element to has "layout". Thats is, inline elements that you can asign width or height properties (for example) but are in the same line.
Here is the full doc explaining this hack
How can I force all items in a horizontal list (menu) to be the same width?
This is my CSS code so far:
a { text-decoration:none; }
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { display:inline; }
#navlist li a {
padding:10px;
margin:2px;
background:grey;
color:white;
}
#navlist li a:hover {
color:white;
background:black;
}
EDIT:
It now works (thanks to #Gaby) by changing the first 3 lines into:
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { float:left; text-align:center; }
#navlist ul li a { text-decoration:none; display:block; width:120px; }
float the elements and make them block instead of inline
#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; }
#navlist ul li { display:block;width:100px;float:left; }
You might want to make the a to be block as well, to fill the li and make it all clickable..