I have a list with a few divs inside to style them. I want to align one of the divs along the bottom edge. If I make the div position: absolute (the parent li is also absolute, so it is relative to that) then it loses the width that the element should be. If I remove the position: absolute from the div then the width of the div is right. The width of the div is not set explicitly, but should take up as much space as it can.
In the example below, I have 2 items. the div with class="rules" is the item in question. In the item that is red, the <p> is wide enough that it expands the div to the full width that it can take up, but on the item that is blue there is not much text inside the <p> so the div is not very wide. I can remove the position: absolute but then the div is not aligned to the bottom.
My question is this: Can I somehow make the width the same for all items without explicitly declaring a width, or is there some other way of positioning the div at the bottom of the list item? The only solution I can think of is to
Here is a fiddle
And the code, just in case:
HTML
<ul class="cardlist">
<li class="blue">
<h4>Think Twice<div class="cost">1U</div></h4>
<div class="type">Instant</div>
<div class="rules">
<p>Draw a card.</p>
<p>Flashback {2}{U}</p>
</div>
</li>
<li class="red">
<h4>Lightning Bolt<div class="cost">R</div></h4>
<div class="type">Instant</div>
<div class="rules">
<p>Lightning Bolt deals 3 damage to target creature or player.</p>
</div>
</li>
</ul>
CSS
p, div, ul, li, body, h1, h2, h3, h4, h5, h6
{
margin: 0px;
padding: 0px;
border: 0px solid #000000;
}
.blue { background-color: rgba(15, 158, 219, 0.9);}
.red { background-color: rgba(227, 65, 16, 0.9); }
#BodyContainer
{
width: 100%;
height: 100%;
}
#BodyContainer > div, ul, li
{
display: inline-block;
}
ul
{
text-align: left;
list-style-type: none;
}
.cardlist li
{
vertical-align: top;
border: 10px solid #000000;
border-radius: 15px;
padding: 10px;
width: 250px;
height: 300px;
margin-bottom: 5px;
position: relative;
box-shadow: 5px 5px 5px #CCCCCC;
}
.cardlist li h4
{
padding: 3px;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
}
.cardlist .cost
{
float: right;
margin-right: 4px;
}
.cardlist .type
{
display: block;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
padding: 1px;
}
.cardlist li .rules
{
display: inline-block;
min-height: 100px;
background-color: #FFFFFF;
border: 2px solid #000000;
padding: 4px;
position: absolute;
bottom: 7px;
margin-right: 12px;
margin-left: 2px;
}
.cardlist li .rules p
{
width: 100%;
}
.cardlist li .pt
{
float: right;
position: absolute;
bottom: 2px;
right: 8px;
padding: 3px 8px;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
}
.cardlist li p
{
margin-bottom: 5px;
}
.cardlist li .rules doesn't have a width. It will have a max-width of parent, with width: auto.
You could give it a width: width: 100% (px: width: 123px) or stretch it with left: 0; right: 0;.
Related
I've created a nav menu that is unnecessarily adding extra space to the right side of it. When the page is made smaller it adds a scroll bar to the bottom of the page which makes the page uncentered. After some digging in Dreamweaver it looks like the UL element's surrounding box is not centered with the actual navigation menu. It juts off to the right and seems to be causing the problem. How to I get this centered with the nav menu?
I've also included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style: none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
}
.main-nav li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
<nav class="nav">
<ul class="main-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
<nav>
View on JSFiddle
Simply add in your nav the overflow property:
nav {
float: left;
width: 100%;
overflow-x: hidden;
}
It seems like there's too much padding in between the menu items. kick that down in the css block:
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px; //first parameter is top/bottom, the second parameter is left/right. kick it down to something like 5px 10px;
color: white;
line-height: 1.3em;
}
Take out the right:50%; and for margin, use "margin:0 auto;"
the auto will auto-center the nav
You shouldn't use floats or lefts to align your navbar. Instead try doing this: It makes the navbar centered and no scroll is appearing for small devices. Update your ul and li class to this:
ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
Furthermore, if you want your navbar to appear in a list form for small devices, simply add this media query for your preferred range:
#media (max-width: 480px) {
ul li {
display: block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
}
I just tried to create nested elements, but the inner element (subcategory) gets always bigger, then the parent element (category).
Please have a look at this JSFiddle:
JSFiddle: http://jsfiddle.net/d7vhpcmt/
HTML:
<div id="content" class="clearfix">
<section class="category boxed">
<section class="box_1"><header class="trigger trigger_aktiv"><h2>Category</h2></header>
<div class="content">
<section class="box_1 boxed"><header class="trigger"><h2>Subcategory</h2></header>
<div class="content"></div>
</section>
</div>
</section>
</section>
</div>
CSS:
.category {
background-color: #f8f8f8;
padding: 20px;
margin-bottom: 10px;
width: 100%;
max-width: 1600px;
float: left;
margin-right: 10px; }
.category a {
color: #262626;
text-decoration: none;
border-bottom: 0;
background-color: transparent;
display: block;
width: 100%; }
.category h1 {
font-size: 2.0em;
margin: 0 0 0.5em 0;
font-weight: 300;
line-height: 1em;
color: #262626;
letter-spacing: -1px; }
.box_1 {
background-color: #E9E9E9;
margin-top: 5px;
border: 1px solid #E2E2E2;
display: block;
width: 100%; }
.box_1:hover {
background-color: #eee; }
.box_1 header {
padding: 5px 0 0 50px; }
.box_1 .content {
background-color: #f2f2f2;
height:100%;
padding: 0.2em 0 0 0; }
.box_1 .content p { margin: 0.5em 0.8em; }
.box_1 .content h3 {
font-size: 1.2em !important;
margin-left: 0.3em; }
.box_1 .content .box_1 {
margin: 5px; }
It's because you have given .box_1 it a width of 100% and .content .box_1 and margin of 5px; this means your box is going to be 100% + 10px - instead of using margin try add padding to the parent container, this way you don't need to keep adding 5px margin to all it's children:
.box_1 .content {
background-color: #f2f2f2;
height:100%;
padding: 0.2em 5px 0 5px;
}
Example
If you are not worry about IE8 then use calc in your box_1 class.
.box_1 {
background-color: #E9E9E9;
margin-top: 5px;
border: 1px solid #E2E2E2;
display: block;
width: calc(100% - 10px);
}
DEMO
The problem is in this piece of code:
.box_1 .content .box_1 {
margin: 5px;
}
You are applying a margin around the entire section containing the Subcategori. Just edit in this way:
.box_1 .content .box_1 {
margin: 5px 0;
}
In order to remove the margin right and left.
Here is the JSFiddle.
I am currently trying to get a horizontal navigation menu to stretch from across the whole of my container.
The div that it is in stretches across fine, but the actual list items don't and I am unsure why.
The CSS for the right hand bar, the container holding the nav bar, and the nav items is:
#rhs{
position: relative;
float: right;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
nav{
display: block;
position: relative;
width: 1010px;
height: 50px;
margin-left: 7px;
background-color: #F0F0F0;
border-top: 1px solid #616161;
border-bottom: 1px solid #616161;
z-index: 99999;
}
nav li{
list-style: none;
display: inline;
margin-left: 10px;
z-index: 99999;
}
The full jsfiddle: http://jsfiddle.net/zDzLs/
Any ideas?
Change css of rhs div to:
#rhs{
position: absolute;
right:0px;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
your code was making my OCD go crazy.
I've revised it a bit for you here. Hope you like it.
http://jsfiddle.net/zDzLs/3/
<header>
<img class="logo" src="images/header.png"/>
<nav>
<ul>
<li class="active">Home</li>
<li>What is Counselling?</li>
<li>Personal Counselling</li>
<li>Relationship Counselling</li>
<li>Supervision of Counsellors</li>
<li>Life Coaching</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="container">
<div class="content-left"><div class="inner">LEFT</div></div>
<div class="content-right"><div class="inner">RIGHT</div></div>
</div>
* {
padding: 0;
margin: 0;
}
body{
background-color: #F0F0F0;
font: 14px Century Gothic;
}
header {
width: 960px;
margin: 30px auto;
}
header .logo {
width: 300px;
}
nav {
background: #F0F0F0;
margin-top: 30px;
overflow: hidden;
}
nav ul li {
list-style-type: none;
float: left;
margin-right: 2px;
font-size: 12px;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #333;
color: #fff;
text-align: center;
}
nav ul li a:hover,
nav ul li.active a {
background: #666;
}
.container {
margin: 30px auto 0;
width: 960px; /* 958px */
border:2px solid #616161;
overflow: hidden;
background: #fff;
}
.content-left {
float: left;
width:628px;
margin-right: 30px;
}
.content-right {
float:left;
width: 300px;
background: #f9f9f9
}
.inner {
padding: 20px;
}
I am trying to make a parent div fit it's width to an image displayed. I am having a lot of trouble in doing so, it seems to auto adjust to very large.
Image: http://puu.sh/1vsqA
content is the body part
image is the white box the image is contained in
image img is the actual image inside the box itself.
CSS:
html, body
{
margin:0;
padding:0;
border:0;
height:100%;
width:100%;
}
body
{
background-image: url('./page_bg.gif');
background-repeat: repeat;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
}
#navlinks
{
width: 100%;
height: 28px;
line-height: 28px;
background-color: #000;
color: #FFF;
}
#links
{
list-style-type: none;
float: left;
padding-left: 5px;
margin: auto;
}
#links li
{
float: left;
padding-left: 5px;
padding-right: 5px;
}
#content
{
display: block;
padding: 40px 40px 40px 40px;
}
#image
{
display: inline-block;
border: 1px solid #CCC;
border-color: #CCC #AAA #AAA #CCC;
padding: 3px;
margin-left: auto;
margin-right: auto;
background: #fff;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
max-width: 1107px;
}
#image img
{
}
You could try setting #image to display: inline-block. I could be wrong but I 'think' that's what you're looking for.
Here is a link example: http://jsfiddle.net/RBWYL/
Please try to float:left your parent div
Hello :) Is it possible to have bottom border in the center (without using pictures). Something like separator between list items which doesn't go from edge to edge?
Thanks
You can do that with two elements easily, here's a demo http://jsfiddle.net/slash197/JbFrN/6/
Not directly. But if it's OK to insert additional elements just for the sake of the border then you can make these elements less wide than your "proper" list items to achieve the desired effect.
See an example.
Old post, but I was wondering how to do this effect on a day of 2017
I did it with pseudo element ::after and display: inherit
li::after {
content: '';
display: inherit;
width: 50%;
margin: 10px auto;
border-top: 1px solid #DFDFDF;
}
I know it's an old question but I found this thread using google.
It can also be accomplished with :after
div:after {
content: '.';
display: block;
height: 1px;
width: 200px;
margin: 0px auto;
text-indent: -9999px;
border-top: 1px solid #585858;
}
Demo
<div class="dropDown">
<ul class="ddMenu">
<li>ONe</li>
<li>Two</li>
<li class="last">Three</li>
</ul>
</div>
.dropDown {
background-color: #F6F6F2;
border: 1px solid #D6DAC4;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
margin-top: -1px;
padding: 10px;
width: 110px;
}
ul, ol {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.ddMenu li {
border-bottom: 1px solid #E9EADE;
box-shadow: 0 1px #FFFFFF;
display: list-item;
line-height: 2.3;
}
ul.ddMenu li a {
display: block;
padding: 4px 10px;
}
<h1 class="center underlined">
<span>My title</span>
<h1>
h1 {
&.center.underlined {
display: flex;
align-items: center;
justify-content: center;
span {
border-bottom: 3px solid;
}
}
}