I have some struggle getting all button same size when there is placed different content inside the button. looking for some tips and trick that can help me understand this better.
here is a picture of the situasjon:
Here is the css code i have used for the button part:
.but {
background-color: white;
color: black;
border: 2px solid #C8C8C8;
height: 1.5em;
text-decoration: none;
display: inline-block;
font-size: 1.2em;
cursor: pointer;
margin: -2px;
}
.symbox {
width: 20em;
height: 5.2em;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
margin: 1px 0px;
}
.but is all buttons and .symbox is the border around the buttons
You can use flexbox, something like this:
.container {
width: 4em;
display:flex;
flex-wrap:wrap;
}
.but {
border: 2px solid #ccc;
padding: 2px;
text-align: center;
flex-grow: 1;
}
<div class="container">
<div class="but">a</div>
<div class="but">b</div>
<div class="but">c</div>
<div class="but">de</div>
<div class="but">f</div>
<div class="but">ghi</div>
<div class="but">j</div>
<div class="but">k</div>
<div class="but">l</div>
<div class="but">m</div>
</div>
Here's a really nice guide on how to use flexbox effectively: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
A big beginner here, but I am trying to align my divs in rows so that the border design doesn't get overly thick where they touch.
For some reason I can't use the pre to write the html so I will write it in plain text.
.site {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
align-items: stretch;
}
.box1 {
background: #000000;
background: #000000;
background: #000000;
margin: 0px;
padding: 0px;
width: 55px;
height: 100%;
border: 3px solid black;
background-color: white;
}
.box2 {
background: #000000;
background: #000000;
background: #000000;
margin: -3px;
padding: 0px;
width: 730px;
height: 100%;
border: 3px solid black;
background-color: white;
}
<div class="site">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
I haven't gotten to that point yet, but I also want the entire .site to have a 3 px black border around it. I basically want a .site with a 3 px black border, and 3 px dividers between the different components.
I have prepared a small code for you. You can choose any one out of the two snippets.
Case 1: 3px border for your .site class, as well as neat and clean div to differentiate between the .site class and the two divs within.
.site, .box1, .box2{
display: flex;
padding:7px;
border:3px solid black;
}
<div class="site">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
Case 2: Slightly border change, but as per your need, 3px border for your .site class will remain same in this case as well.
.site{
display:flex;
border:3px solid black;
padding: 5px;
}
.box1, .box2{
border: 3px solid black;
}
<div class="site">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
Hope this helps.
Try below CSS for box2:
.box2{
background: #000000;
background: #000000;
background: #000000;
padding: 0px;
width: 730px;
height: 100%;
border: 3px solid black;
border-left: 0;
background-color: white;
}
For the entire site to have a border, you can give your <body> a border.
For your elements, have you tried giving the relevant sides a border of just 1.5px?
I would like to know, if it is possible to give to a border-bottom something like a padding-left and padding-right. I have two divs, which have some borders. I would like to make the border-bottom of the top div to have some padding on left and right. I have no idea if this is possible. I know the structure is strange (I could easy use the border around the whole box wrapper and than work on the span with a border-bottom to achieve this). The problem is, I'm using a plugin which has a structure like this and I have to customize it like this, because there is exactly this strucure and styling. Hope it's clear enough. Here a picture how it should look and an example snippet:
.box {
display: flex;
flex-direction: column;
width: 200px;
}
.box__top {
border: 1px solid black;
border-bottom: 1px solid red;
height: 20px;
padding: 10px;
text-align: center;
}
.box__bottom {
border: 1px solid black;
border-top: none;
height: 150px;
padding: 10px;
text-align: center;
}
<div class="box">
<div class="box__top">
<span>I'm the top section</span>
</div>
<div class="box__bottom">
<span>I'm the top section</span>
</div>
</div>
Use a pseudo-element instead:
.box {
display: flex;
flex-direction: column;
width: 200px;
}
.box__top {
border: 1px solid black;
border-bottom: none;
position: relative;
height: 20px;
padding: 10px;
text-align: center;
}
.box__top::after {
content: " ";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 90%;
height: 1px;
background-color: red;
}
.box__bottom {
border: 1px solid black;
border-top: none;
height: 150px;
padding: 10px;
text-align: center;
}
<div class="box">
<div class="box__top">
<span>I'm the top section</span>
</div>
<div class="box__bottom">
<span>I'm the top section</span>
</div>
</div>
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I am trying to make a product summary box for the following page:
I was playing around to set the border on the following divs:
<div style="border:1px solid black;" class="inner">
<div style="padding-bottom: 14px;border:1px solid black;" class="title">
The result looks like the following:
I would like to let it look like that:
Any suggestions how to set the divs properly? Or would it be better to design a backgroud image to fit the box?
I appreciate your replies!
You could use a tableinstead of DIVs whose cell borders you make visible.
Or use display: table , display: table-row and display: table-cell for the DIVs, again defining a border for the cell elements.
This is a 5-minute CSS solution:
* {
box-sizing: border-box;
font-family: sans-serif;
}
.product {
border: 2px solid #999;
border-radius: 2px;
width: 20em;
}
.product--header,
.product--image,
.product--rating {
width: 100%;
border-bottom: 2px solid #999;
}
.product--header h2, .product--header h3 {
text-align: center;
padding: 0.25em 0 0.5em;
margin: 0;
}
.product--image img {
width: 100%;
padding: 0.25em;
z-index: 1;
}
.product--image {
position: relative;
}
.product--pricetag {
position: absolute;
z-index: 2;
left: 0;
top: 1em;
color: white;
background: rgba(0, 0, 0, 0.75);
text-align: center;
width: 40%;
padding: 0.5em;
}
.product--rating p {
text-align: center;
}
.product--links {
width: 100%;
margin: 0.5em;
}
.product--links a.btn {
display: block;
color: white;
background: blue;
text-align: center;
width: 90%;
margin-left: 2.5%;
padding: 0.5em;
margin-bottom: 0.25em;
}
<div class="product">
<div class="product--header">
<h2>Test Product</h2>
<h3>Price Class: $$ | P3 | 14</h3>
</div>
<div class="product--image">
<img src="http://placekitten.com/200/200" alt="cat">
<p class="product--pricetag">
999 $
</p>
</div>
<div class="product--rating">
<p>Rating: 4/5</p>
</div>
<p class="product--links">
<a class="btn">Buy on Amazon</a>
<a class="btn">Other Sizes</a>
</p>
</div>
I wouldn't recommend a background frame image, because it's a pain to work with and loading it is a waste of bandwidth.
Put four borders on the container, then just add border-bottom in each child, except on the last.
.container-bordered {
border: 2px solid red;
}
.container-bordered > div:not(:last-of-type) {
border-bottom: 2px solid red;
}
https://jsfiddle.net/cqjxuype/
This is my code
table#projectTable > tbody , table#productTable > tbody{
height: 300px;
overflow: auto;
}
The scroll bar is working if you click the upper part but not the lower part.
Very strange.
I used firefox inspect element and I think its something to do with the TR element overlapping because the scrollbar is working fine just above the (imaginary extended line from ) second row (Edit product info)
as i say at comments
.innerDiv{position:absolute;top:80px;left:185px;z-index:10;}
will solve your problem.
maby you already know but if you dont may i kindly suggest you that give a chance to tableless design when you design a layout.
for example - also this sample could be better -
preview
HTML
<div id="container">
<div id="left">
Edit branchInfo
Edit branchInfo
Edit projectList
</div>
<div id="right">
<div id="table1"> ...1... </div>
<!--#table1-->
<div id="table2"> ...2... </div>
<!--#table2-->
<div id="table3"> ...3... </div>
<!--#table3-->
</div>
<!--#right-->
<div class="clear"></div>
</div>
<!--#container-->
CSS
.clear {
clear: left;
}
#container {
border: 1px solid #666;
padding: 5px 5px 0 5px;
}
#left, #right {
float: left;
}
#left a {
display: block;
width: 100px;
height: 200px;
font: 12px/200px arial;
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#left a:hover {
background: #efefef;
}
#left a:active {
background: #c0c0c0;
}
#right {
border: 1px solid #999;
margin-left: 5px;
padding: 10px;
height: 654px;
width: 900px;
}