I've created this CSS code to give me 3 responsive columns, but.. in mobile are sick and Ipad too.
Anyway, my real question is:
1 How to put the 3 rows with auto fit. Because they are all with the same AUTO SIZE.
When none of the boxes contain any content I would like the grid to look small and not BIG.
.pagewrap {
*background: #6B949F;
display: grid;
grid-template-columns:210px 850px 210px;
grid-template-rows: auto auto auto;
grid-gap: 10px;
justify-content: center;
}
.content {
text-align: left;
background: #1C1C1C;
box-shadow:0 6px 6px -6px #000;
border-radius: 3px;
}
.content ul li {
width: 190px;
padding:5px 10px;
background:none;
text-transform: none;
}
.content ul li a {
display: block;
padding:0 15px 0;
color:#BDBDBD;
background:transparent;
font-size: 15px;
transition: all 0.35s ease;
}
.content ul li a:hover {
background:#424242;
border-radius: 1px;
color:#fff;
}
.middle {
margin: 0;
padding: 8px;
text-align: center;
background: #E6E6E6;
box-shadow:0 6px 6px -6px #000;
border-radius: 3px;
}
.sidebar {
padding: 8px;
text-align: center;
background: #1C1C1C;
box-shadow:0 6px 6px -6px #000;
border-radius: 3px;
color:#BDBDBD;
}
I want boxes like this.
https://i.stack.imgur.com/iLhJE.png
try d-flex and justify-content-between.
d-flex will align them into one row and justify-content-between will align them like this: |right center left|
Related
I'm having issues with getting this code player in progress to look proper:
http://invigorateme.net/viperbox.html
When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.
The Question: How can I make it so when you hover over a list item, the background changes and fits the background?
If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.
Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
border: 2px solid #B7B7B7;
border-radius: 10px;
margin: 0px auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0px auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0px;
padding: 7px 5px 0px 5px;
border-right: 2px solid #B7B7B7;
}
#codetabs li:hover{
background-color: grey;
}
If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.
Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.
This is the working CSS:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
margin: 0 auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0 auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0;
padding: 7px 5px 0px 5px;
border-width: 2px 2px 2px 0;
border-color: #B7B7B7;
border-style: solid;
}
#codetabs ul :first-child {
border-radius: 10px 0 0 10px;
border-left-width: 2px;
}
#codetabs ul :last-child {
border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
background-color: grey;
}
http://jsfiddle.net/d09xgfzc/1/
I am working on a simple redesign for a project I did awhile back, just for practice. I have a left column that remains a certain size no matter what I seem to do. When the content in the main area becomes too great, the left column looks cut off. How do I get this column to extend with the content of the page? Here is the css I have for my containers and the column:
#outerWrapper {
background-color: #fff;
margin: 0 auto 0 auto;
min-width: 760px;
text-align: left;
width: 80%;
}
#outerWrapper #header {
background-color: #8ab573;
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #eef6ed;
border-right: solid 1px #8ab573;
float: left;
padding: 10px 10px 10px 10px;
width: 24%;
height: auto;
}
#outerWrapper #contentWrapper #content {
margin: 0 0 0 26%;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper .clearFloat {
clear: left;
display: block;
}
#outerWrapper #footer {
background-color: #eef6ed;
border-top: solid 1px #8ab573;
padding: 10px 10px 10px 10px;
Thanks for any suggestions, I know it's really simple I'm just having code block I guess :/
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
Maybe this is simple, but is making me nuts.
To understand the problem, the easy way is to look at the image.
Div width is truncating either word or the rounded border(also in case there is a space or dash between words). How can I force each "a" element to go into a new line if width is not enough to contain the element?
Here's the code
<div id="post-tags">
<span class="tag-title">Tagged:</span>
tag2
tag3
tag4
longtag5
<a href="#"li>longtag6</a>
longtag7
longtag8
longtag9
longtag10
longtag11
longtag12
</div>
And the CSS
#post-tags{
width: 560px;
float: left;
padding: 15px;
font-size: 11px;
}
#post-tags .tag-title{
color: #6b6b6b;
padding: 5px 0 0 5px;
}
#post-tags a{
line-height: 24px;
padding: 3px;
background: #a7d1e3;
padding: 4px 10px 4px 10px;
margin: 0 0 10px 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#post-tags a:hover{
color: #a7d1e3;
background: #205F82;
}
I found that it doesn't work corerctly in chrome. A solution could be to float the elements. so you add float:left; for the selectors #post-tags .tag-title and #post-tags a. Of course now you will see that there is need to modify and padding and margins. A solution close to yours is applying margin: 0 2px 10px; and padding: 0 10px; for #post-tags a so your new css will seems like the following:
#post-tags {
width: 560px;
padding: 15px;
font-size: 11px;
overflow:hidden;
}
#post-tags .tag-title {
color: #6b6b6b;
padding: 5px 0 0 5px;
float:left;
}
#post-tags a {
line-height: 24px;
padding: 3px;
background: #a7d1e3;
margin: 0 2px 10px;
padding: 0 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left
}
#post-tags a:hover {
color: #a7d1e3;
background: #205F82;
}
here a live example: http://jsbin.com/adika4
I did this before but I can't remember how to do it again.
Image of what i'm trying to get:
and what I have so far
In between each link,, theres two borders. yes I know how to make the effect, put two borders together. But the problem is I can't do it!
At first I tried Jefferey ways Technic.
nav ul li:before { border-left: 1px solid red; content: ''; margin: 0 -30px; position: absolute; height: 20px; }
nav ul li:after { border-right: 1px solid white; content: ''; margin: 0 39px; position: absolute; height: 20px; }
It worked, except the borders from the left and right end of the nav is sticking out. I tried :first-of-type and :last-of-type to try to remove the borders at the end, but they didn't go away.
Then, I tried just using both :first-of-type and :last-of-type to create the borders,but again. it didn't work. So I don't really know what to do to create the effect! I wish there was a way to remove the front and end borders with Jefferey Ways code but I can't. Can anybody help?
Heres the whole css of the nav.
nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; padding: 11px 29px; width: 670px; }
nav ul {}
nav ul li { display: inline; padding: 32px; margin: 0 auto; }
nav ul li:before { border-right: 1px solid red; }
nav ul li:odd { border-right: 1px solid white; }
nav ul li a { color: #626262; height: 20px; }
#nav {
background: #282828 url(../images/nav-bg.png) repeat-x;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
margin: 24px auto;
padding: 11px 29px;
width: 670px; }
#nav ul { list-style: none; padding: 0; margin: 0;}
#nav ul li {
display: inline;
padding: 32px;
margin: 0 auto;
border-left: 1px solid #LIGHTERCOLOR;
border-right: 1px solid #DARKERCOLOR;
}
#nav ul li:first-child { border-left: 0; }
#nav ul li a { color: #626262; height: 20px; }
But I would suggest you cut out the separator as an image and put it on li as
background: transparent url(border-image.png) left center no-repeat;
and on the li:first-child have
background: none;