Link to home
Start Free TrialLog in
Avatar of Moti Mashiah
Moti MashiahFlag for Canada

asked on

Css\html

Hi guys,
I'm trying to design something like this (please see image below) and I can't make it work:

User generated image
Here is my code:

<style>


   .DHDWDG10005--total-flagged-gripes_firstsq {
  width: 214px;
  height: 219px;
  
}

.Rectangle-secondSq {
  width: 139px;
  height: 139px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.31);
  padding-left: 15px;
}

.layerFornumber {
  width: 30px;
  height: 62px;
  font-family: PTSans;
  font-size: 48px;
  letter-spacing: 3.7px;
  text-align: left;
  color: #ff4d4d;
}

.Total-Flagged-Gripes_message {
  width: 95px;
  height: 32px;
  font-family: PTSans;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 1.1px;
  text-align: center;
  color: #4a4a44;
}

.RectangleButtomsq{
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;
}

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
}

.Shapedropdown {
  width: 24px;
  height: 24px;
}

</style>

<html>
    <header>
    </header>
<body>
    <div class="DHDWDG10005--total-flagged-gripes_firstsq">
        <div class="Rectangle-secondSq">
            <div class="layerFornumber">
                4
            </div>
            <div class="Total-Flagged-Gripes_message">
                Total Flagged Gripes
            </div>
            <div class="RectangleButtomsq">
                <select class="Shapedropdown">
                    <option class="Today">Today</option>
                </select>

            </div>
        </div>
    </div>
</body>
</html>

Open in new window



Please, help.
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

CSS
.DHDWDG10005--total-flagged-gripes_firstsq {
  width: 214px;
  height: 219px;
  
}

.Rectangle-secondSq {
  width: 139px;
  height: 139px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.31);
  padding-left: 15px;
}

.layerFornumber {
  width: 30px;
  height: 62px;
  font-family: PTSans;
  font-size: 48px;
  letter-spacing: 3.7px;
  margin: auto;
  color: #ff4d4d;
}

.Total-Flagged-Gripes_message {
  width: 115px;
  height: 32px;
  font-family: PTSans;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 1.1px;
  margin: auto;
  color: #4a4a44; 
  text-align: center;

}

.RectangleButtomsq{
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;
}

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
}

.Shapedropdown { 
 margin-left: 25px;
}

Open in new window

Also ad in the option element the selected attr to have a default option value
Avatar of Moti Mashiah

ASKER

Thank you for your answer:
I would like to have the html side as well.
I copied the css from zeplin and I don't want to change them as it is the designer work:

Actually I have problem just with the dropdown so,
I will send you the dropdown design css and if you can send me the html side I will appreciate it.

.Rectangle {
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;
}

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
}
.Shape {
  width: 24px;
  height: 24px;
}

.Shape {
  width: 10px;
  height: 5px;
  background-color: #000000;
}

Open in new window


Here is how it suppose to look like:
User generated image
greetings Moti Mashiah , , Your request for this block with a select that has a particular look, is not easy, , at all. I looked at your code and ran it in firefox, and it did not look like the image you show at all.
Below is my attempt to to have something that looks a little like your image .
But I did not use your structure of <div> or any of the class names -
<style>
.flagged-outer {
width: 214px;
height: 219px;
background-color: white;
border: 1px solid black;
font-family: PTSans;
font-size: 14px;
color: #4a4a44;
line-height: 1.14;
letter-spacing: 1.1px;
}

.inner-center {
box-sizing: border-box;
margin: 41px auto 1px auto;
padding: 0 8px;
width: 139px;
height: 139px;
text-align: center;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.31);
}

.inner-center p{
margin: 0;
padding-top: 3px;
font-size: 48px;
color: #ff4d4d;
}

.inner-center select{
width: 94%;
height: 2.5em;
padding:2px;
margin: 4px 0 1px 0;
border-radius:4px;
box-shadow: 1px 2px 4px 0 #ccc;
border:none;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

.inner-center label {
position:relative
}

.inner-center label:after {
position: absolute;
right: 7px;
bottom: 1px;
height: 0;
width: 0;
border: 5px solid transparent;
border-top-color: black;
content: "";
}

.inner-center label:before {
content:'';
right:3px;
top:-2px;
width:20px;
height:20px;
background:#fff;
position:absolute;
display:block;
}

</style>

<div class="flagged-outer">
  <div class="inner-center">
  <p>4</p>
  Total Flagged Gripes<br />
  <label><select>
    <option>Today</option>
    <option>toMorrow</option>
    <option>yeSTerday</option>
  </select></label>
  </div>
</div>

Open in new window

The <select> is a browser system display, and will have some various CSS differences for CSS allowed in display for different browsers. My code above was used in firefox, and not tested in any other browser.

There were several things you had in your HTML and CSS which I did not follow why they were there?
And I do not see why you used the <div> and it's CSS for the "Message" of ->  Total Flagged Gripes    ? This seems to be a message placed by the server side code, which my have many different TEXT for the display there?
It looks close to the image to me?
Thank you for your solution. I will take this as a reference as I can't use any other style:

Please, see below the steps I follow from Zaplin designer.

User generated imageUser generated imageUser generated imageUser generated image
 Please, let me know if you have any idea.
I just joined to this company and the designer use this tools and send css's to the developers.
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you for your time You help me a lot to understand that there is no way to do it with this design tools as they basically bring a wrong design.

I have opened support ticket with zeplin.

You can visit their site and see this tools really interesting. https://Zeplin.io.
Btw, also being successful to do it with my design and yours, but its not what the designer I work with wants.

THank you.