• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 60
  • Last Modified:

Css\html

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

Capture.PNG
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.
0
Moti Mashiah
Asked:
Moti Mashiah
  • 4
  • 2
  • 2
1 Solution
 
Leonidas DosasCommented:
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

0
 
Leonidas DosasCommented:
Also ad in the option element the selected attr to have a default option value
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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:
Capture.PNG
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Slick812Commented:
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?
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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.

1.PNG2.PNG4.PNG3.PNG
 Please, let me know if you have any idea.
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
I just joined to this company and the designer use this tools and send css's to the developers.
0
 
Slick812Commented:
? ? ?
? ? ?
I looked at your Images, and I do not really see what they have to do with how I develop in CSS with a TEXT EDITOR?
The image of the select looks like what you seem to want? ? And I really do not see that the CSS code portions are what you need to have, because there will be several different ways with CSS to get a display to look like what you may need.
You mention a "Zaplin designer", which I have never heard of, and never used. But as I said before, trying to change a browser system "widget" display like a <select> is not an easy thing for me to do, because browsers do not allow full CSS changes on many <form> inputs and selects.

You say - " designer use this tools and send css's to the developers", , so I take it from that , you have problems with getting the "not ordinary" CSS in my presentation, into Zaplin? ?

Just to offer alternatives, In my CSS code I thought it would be more compact code in HTML write, if I used the label before and after CSS, BUT , it did not seem to help much for less  write. You can maybe can remove the before and after, and place "layered" elements inside the <label> with the select. And then use CSS to get the cover white background, and the small triangle from two added elements, maybe <div>

<label><select>
    <option>Today</option>
    <option>toMorrow</option>
    <option>yeSTerday</option>
  </select>
<div class="selBack"></div>
<div class="selTriangle"></div>
</label>

Open in new window

where the selBack would be the label before  , and the selTriangle would be the label after, Not sure If that would work or help?

But I'm not sure what I can do to be helpful? ?
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now