When the text in a table cell is larger than the width, it overflows the cell. See this picture
i remove white-space: nowrap; Pic
I need when text in a cell larger than the width, put on cell txt Break.
/***************************************************************************/
This is my table code:
<div class="main-container-list-news-tabel-container-header">
<div class="main-container-list-news-tabel-container-header-title">
<label>title</label>
</div>
<div class="main-container-list-news-tabel-container-header-time">
<label>date</label>
</div>
<div class="main-container-list-news-tabel-container-header-type">
<label>type</label>
</div>
<div class="main-container-list-news-tabel-container-header-operation">
<label>operation</label>
</div>
</div>
<div class="main-container-list-news-tabel-container-element">
<div class="main-container-list-news-tabel-container-element-title">
<label>txttitle</label>
</div>
<div class="main-container-list-news-tabel-container-element-time">
<label>date</label>
</div>
<div class="main-container-list-news-tabel-container-element-type">
<label>type</label>
</div>
<div class="main-container-list-news-tabel-container-element-operation">
<label>operation</label>
</div>
</div>
And this is my CSS:
.main-container-list-news-tabel-container-header {
width: 100%;
height: 50px;
background-color:#EDEDED;
border-bottom:2px solid #000000;
border-top:2px solid #000000;
border-right:2px solid #000000;
border-left:2px solid #000000;
}
.main-container-list-news-tabel-container-header-title {
width: 376px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
float: right;
text-align:center;
border-left: 2px solid #000000;
}
.main-container-list-news-tabel-container-header-title label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-header-time {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
float: right;
text-align:center;
border-left: 2px solid #000000;
}
.main-container-list-news-tabel-container-header-time label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-header-type {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
float: right;
text-align:center;
border-left: 2px solid #000000;
}
.main-container-list-news-tabel-container-header-type label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-header-operation {
width: 178px;
direction: rtl;
font-family: 'Iranian Sans';
height: 46px;
text-align:center;
float: right;
}
.main-container-list-news-tabel-container-header-operation label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element{
margin-right:2px;
}
/************************************************/
.main-container-list-news-tabel-container-element-title {
width: 376px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-left: 2px solid #000000;
border-bottom:2px solid #000000;
word-break:break-all;
}
.main-container-list-news-tabel-container-element-title label {
margin-top: 10px;
margin-right: 15px;
white-space: nowrap;
}
.main-container-list-news-tabel-container-element-time {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-left: 2px solid #000000;
border-bottom:2px solid #000000;
}
.main-container-list-news-tabel-container-element-time label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element-type {
width: 140px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-left: 2px solid #000000;
border-bottom:2px solid #000000;
}
.main-container-list-news-tabel-container-element-type label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element-operation {
width: 178px;
direction: rtl;
font-family: 'Iranian Sans';
float: right;
border-bottom:2px solid #000000;
}
.main-container-list-news-tabel-container-element-operation label {
margin-top: 10px;
margin-right: 15px;
}
.main-container-list-news-tabel-container-element{
margin-right:2px;
}
Add this to your css
.main-container-list-news-tabel-container-header>div,.main-container-list-news-tabel-container-element>div{
word-wrap: break-word;
word-break: break-all;
}
Related
I'm having a small issue with a couple divs. I have it set up with 5 divs all different colors, when the window size is shrunk the divs drop down under each other one by one. Is there a way I can make the space between them shrinks with it so they but up closer?
Thanks again guys
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg02Off {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg03Off {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg04Off {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg05Off {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.center {
text-align: center;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bg01Off">
</div>
<div id="bg02" class="bg02Off">
</div>
<div id="bg03" class="bg03Off">
</div>
<div id="bg04" class="bg04Off">
</div>
<div id="bg05" class="bg05Off">
</div>
</div>
Change the container center to a flexbox with the following properties:
.center {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 4%
}
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bgOff {
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg01Off {
background-color: #80b3ff;
}
.bg02Off {
background-color: #afe9af;
}
.bg03Off {
background-color: #ffb380;
}
.bg04Off {
background-color: #ffaaaa;
}
.bg05Off {
background-color: #eeaaff;
}
.center {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 4%
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bgOff bg01Off">
</div>
<div id="bg02" class="bgOff bg02Off">
</div>
<div id="bg03" class="bgOff bg03Off">
</div>
<div id="bg04" class="bgOff bg04Off">
</div>
<div id="bg05" class="bgOff bg05Off">
</div>
</div>
Add a media query, so that after a certain width of screen the elements will get a margin-bottom that is a percentage instead of px.
Use media queries to make elements respond as the width of the viewport changes for example:
body {
background-color: lightgreen;
}
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
This would make the background color change when the width of the viewport goes below 500 px. You can use this same concept with the width of your divs.
** Also, check out Bootstrap. Bootstrap makes it easy to define widths of elements using a grid system. You are trying to make your site "RESPONSIVE" which is a well-known concept in web dev. Bootstrap has an already created library for this problem. It use media queries to do it. It is worth understanding media queries deeply, but for a quick fix, research bootstrap.
You could put a rule in a media query that reduces the margins like in my example (last rule):
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg02Off {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg03Off {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg04Off {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg05Off {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.center {
text-align: center;
}
#media screen and (max-width: 760px) {
.bg01Off,
.bg02Off,
.bg03Off,
.bg04Off,
.bg05Off {
margin-left: 1%;
margin-right: 1%;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bg01Off">
</div>
<div id="bg02" class="bg02Off">
</div>
<div id="bg03" class="bg03Off">
</div>
<div id="bg04" class="bg04Off">
</div>
<div id="bg05" class="bg05Off">
</div>
</div>
You can use a table instead of the .center div, and give it the following styles:
table {
width: 100%;
text-align: center;
}
td {
width: 20%; /* This is 100/the number of <td>'s you have in the table. */
}
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg02Off {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg03Off {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg04Off {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg05Off {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
table {
width: 100%;
text-align: center;
}
td {
width: 20%;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<table>
<tr>
<td>
<div id="bg01" class="bg01Off">
</div>
</td>
<td>
<div id="bg02" class="bg02Off">
</div>
</td>
<td>
<div id="bg03" class="bg03Off">
</div>
</td>
<td>
<div id="bg04" class="bg04Off">
</div>
</td>
<td>
<div id="bg05" class="bg05Off">
</div>
</td>
</tr>
</table>
You can remove margin left & right and use flexbox on .center like this :
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
}
.bg02Off {
background-color: #afe9af;
}
.bg03Off {
background-color: #ffb380;
}
.bg04Off {
background-color: #ffaaaa;
}
.bg05Off {
background-color: #eeaaff;
}
.bg05Off, .bg04Off, .bg03Off, .bg02Off, .bg01Off {
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.center {
display: flex;
justify-content: space-around;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bg01Off">
</div>
<div id="bg02" class="bg02Off">
</div>
<div id="bg03" class="bg03Off">
</div>
<div id="bg04" class="bg04Off">
</div>
<div id="bg05" class="bg05Off">
</div>
</div>
i'm having a small issue getting my divs to sit inline with each other and in the center of the parent div. So I have one parent "page" then 6 other divs inside of that the "pageName" which sits above "bg_01", "bg_02", "bg_03", "bg_04", "bg_05", "bg_06" which all sit inline with each other. However it works when the window is quite small however i'm trying to get it to work when the window is any size, can anyone see where I'm going wrong?
Thanks again guys.
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
<div id="page">
<div id="pageName" }>
<p>Colour</p>
</div>
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>
Just add text-align: center; to #page and replace float:left; width display: inline-block and it should work.
Something as follows:
<div id="page">
<div id="pageName" }>
<p>Colour</p>
</div>
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>
And the css:
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #f00;
width: 100%;
height: 100%;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
Here is the fiddle.
Take away Float: left from your objects and give them display: inline-block.
Also give text-align: center to your parent div
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
display: inline-block;
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_02 {
display: inline-block;
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_03 {
display: inline-block;
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_04 {
display: inline-block;
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_05 {
display: inline-block;
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
1) wrap Elments in DIV with class center
<div class="center"> <-------------------
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>
2) Remove float: left; and use display:inline block
#bg_01,#bg_02,#bg_03,#bg_04,#bg_05 {
display: inline-block;
float: left;<--------Remove
More code...
}
3) added css For .center :
.center {
text-align: center;
}
Full Code :
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
.center {
text-align: center;
}
<div id="page">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>
</div>
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: auto;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
#page:after {
content: '';
display: table;
clear: both;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.item {
display: inline-block;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
<div id="page">
<div id="pageName" }>
<p>Colour</p>
</div>
<div id="bg_01" class="item">
</div>
<div id="bg_02" class="item">
</div>
<div id="bg_03" class="item">
</div>
<div id="bg_04" class="item">
</div>
<div id="bg_05" class="item">
</div>
</div>
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.center_div{
text-align:center;
margin:20px auto;
display:flex;
justify-content:center;
align-items:center;
}
.common_div{
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 3%;
display:inline-block;
}
#bg_01 {
background-color: #80b3ff;
}
#bg_02 {
background-color: #afe9af;
}
#bg_03 {
background-color: #ffb380;
}
#bg_04 {
background-color: #ffaaaa;
}
#bg_05 {
background-color: #eeaaff;
}
<div id="page">
<div id="pageName" >
<p>Colour</p>
</div>
<div class="center_div">
<div id="bg_01" class="common_div">
</div>
<div id="bg_02" class="common_div">
</div>
<div id="bg_03" class="common_div">
</div>
<div id="bg_04" class="common_div">
</div>
<div id="bg_05" class="common_div">
</div>
</div>
</div>
Is this the same that you are looking for?
Hope this helps.
I'm trying to position my button so it sticks next to the input field.
Like here:
In the example i just showed there, the button had a position relative and a float right. I did the exact same thing but it didn't work.
Here is my fiddlesticks:
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
}
.subscribe button {
height: 40px;
width: 53px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>
Does this works for you?
.subscribe{ display:inline-block;}
Please check this code.
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
float: left;
}
.subscribe button {
height: 46px;
width: 80px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: left;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>
added display:inline-block to .textboxwhite-left and adjusted height and width of button according to input.
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
}
.subscribe button {
height: 46px;
width: 58px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
display : inline-block;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>
Try this:
<div class="search">
<form>
<input type="text" placeholder="serach here">
<input class="submit" value="Seach">
</form>
</div>
Css:
.search{
position:relative;
padding:0px 100px 10px 10px;
}
.search input[type="text"]{
border:2px solid black;
border-radius:3px;
width:100%;
height:30px;
line-height:30px;
display:block;
}
.search input[type="text"]:focus{
-webkit-appearance: none;
appearance: none;
outline:none;
}
.search .submit{
position:absolute;
width:100px;
height:30px;
text-align:center;
right:0;
border:2px solid black;
top:0;
cursor: pointer;
}
.search .submit:hover{
background:black;color:#fff;
}
Here is jsfiddle link : https://jsfiddle.net/jmc548vc/1/
Please do have a look at this Fiddle.
.subscribe button {
height: 46px;
width: 53px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: absolute; \\this is changed to absolute
border: 2px solid black;
}
Im just staring with #media css3, and my trouble here is to set responsive, and i dont really get it how to divide this in 2 when the screen goes to 900px
i know its # media screen (max-width: 900px) {}
but i cant made the code inside work to divide in 2
.row {
width: 100%;
height: auto;
clear: both;
float: left;
}
.contenido{
width: 985px;
margin: 0 auto;
text-align: left;
clear: both;
}
.lenovoDescripcion .contenido {
width: 978px;
margin: 0 auto;
text-align: left;
clear: both;
padding-left: 3px;
padding-right: 4px;
}
.lenovoDescripcion .producto {
padding-top: 25px;
float: left;
padding-bottom: 25px;
}
.lenovoDescripcion .producto img {
width: auto;
height: auto;
float: left;
margin-right: 30px;
margin-top: 110px;
}
.lenovoDescripcion .descripcion {
float: right;
text-align: left;
}
.lenovoDescripcion .descripcion h2 {
color: #0084b0;
font-size: 37px;
font-weight: normal;
height: 43px;
overflow: hidden;
margin-left: 50%;
}
.lenovoDescripcion .descripcion h3 {
color: #cc7000;
font-size: 29px;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 35%;
margin-top: -10px;
}
.lenovoDescripcion .descripcion p {
color: #373737;
font-size: 16px;
font-style: bold;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 35%;
margin-top: 0;
}
.lenovoDescripcion .descripcion h4 {
color: #c6c6c6;
font-size: 16px;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 35%;
margin-bottom: 0;
}
.lenovoDescripcion .descripcion h5 {
color: #0084b0;
font-size: 16px;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 60%;
margin-top: -35px;
}
.lenovoDescripcion .descripcion li {
font-size: 14px;
line-height: auto;
color: #7d7c7c;
height: auto;
overflow: hidden;
margin-left: 30%;
width: 100%;
}
.lenovoDescripcion .descripcion a {
text-decoration: none;
color: #FFFFFF;
border: 1px solid #ff4500;
padding: 8px;
background-color: #ff4500;
margin-left: 60%;
transition: all linear .15s;
}
.lenovoDescripcion .descripcion a:hover {
background-color: #b33000;
border: 1px solid #FFFFFF;
}
strike {
font-size: 16px;
margin-left: 35%;
color: #c6c6c6;
}
hr {
display: block;
border: 1px dotted #000000;
width: 30%;
}
footer hr {
display: block;
border: 1px solid #000000;
width: 100%;
}
<div class="row lenovoDescripcion">
<div class="contenido">
<div class="producto">
<img src="images/Productos/pc2.png">
<div class="descripcion">
<h2>IDEAPAD S400</h2>
<h5>(59402530)</h5>
<h4>Precio de lista</h4 >
<strike>$1,399,000.00</strike>
<hr>
<p>Precio con descuento 10%</p>
<h3>$1,259,100.00</h3>
<ul>
<li>Fully optimized with recognizable touch gestures for the Windows 8.1 experience</li>
<li>Added dual-mode functionality to easily convert from a mouse to pointer</li>
<li>Winner of the Reddot Design Award</li>
</ul>
<span>DESCUBRE Y COMPRA</span>
</div>
</div>
</div><!-- Producto -->
</div><!-- row -->
You need to do so with the width attribute and floats. Here is 1 example: http://jsfiddle.net/cUCvY/1/
HTML:
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
CSS:
.wrapper {
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 200px;
padding: 10px;
}
#one {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
border-right:2px solid #000;
}
#two {
background-color: white;
overflow:hidden;
margin:10px;
min-height:170px;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}
Hi i have following css which give me the following results:
.pop-up .amount {
position: relative;
height: 100%;
width: 195px;
background-color: #e6c515;
background-size: 10px;
padding-left: 18px;
padding-right: 3.5px;
font-size: 29px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
}
.pop-up .amount p {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding-right: 47px;
width: 31px;
line-height: 15px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 4px;
}
my current html snippet as follow
<div class="amount">
<p>1 UNDI</p>RM0.50
</div>
Following are the screenshots:
But the result i expecting are like this:
It seems the 1 UNDI words is not align centre properly and also the border is not fully cross the box, how can i fix this issues? Thanks
Here is a working example that matches the example screenshot you posted above: http://jsfiddle.net/6DnPX/
I changed the HTML slightly to split things into divs. To achieve the formatting that you are after, it is typically easier to put extra containers in place for more fine grained control.
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
Accordingly, I altered the CSS to add the border around the interior as well as the divider. You'll likely need to adjust the dimensions slightly as you appear to be using a different font, but hopefully this gets you closer to where you want to be.
CSS:
.amount {
font-family: Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border: 5px solid #eee;
}
.amount .left {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding: 10px 25px 10px 15px;
width: 31px;
line-height: 20px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 5px;
text-align: center;
}
.amount .left span {
font-size: 30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding: 15px;
}
Just change the color's values in the below code and you are done. I just used yellow, red and white for illustration.
HTML:
<body class="pop-up">
<div class="amount">
<p>1 <span>UNDI</span></p>
<span class="s">RM0.50</span></div>
</body>
CSS:
.amount{
background:yellow;
float:left;
border:5px solid #c0c0c0;
padding-right:40px;
1padding-top:20px;
line-height:60px;
font-size:30px;
padding-left:5px;
color:#fff
}
.amount p {
margin:0;
border-right:5px solid red;
float:left;
width:80px;
padding-left:10px;
line-height:40px;
font-size:18px;
height:60px;
}
.amount p span {
display:block;
margin-top:-8px;
line-height:8px;
}
.s{
text-align:center;
display:inline-block;
padding-left:15px;
}
DEMO
<div class="amount">
<p>1<br /> UNDI</p>RM0.50
</div>
and use
.pop-up .amount p{text-align: center;}
instead of text-align: left;
demo :http://jsfiddle.net/parslook/6DnPX/1/
html :
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
css :
.amount {
font-family:Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border:5px solid #eee;
}
.amount .left{
float: left;
text-shadow: 1px 2px #A7A2A2;
padding:10px 10px;
line-height: 23px;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
margin:0 auto;
text-align:center;
}
.amount .left span {
display:block;
font-size:30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding:20px 95px;
text-shadow: 1px 2px #A7A2A2;
line-height: 23px;
color: white;
font-size: 30px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
height:100%
margin:0 auto;
text-align:center;
}