Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
this is the live server screenshot
I want my button to be 5*5px, but somehow the minimum width stays at 10px although I adjusted it in CSS.
Heres my CSS code for the following button :
#seat_small {
min-width: none;
width: 5px;
height: 5px;
border: 0px;
background-color: blueviolet;
border-radius: 2px;
}
How can I solve this? :/
add padding:0 to your css
#seat_small{
min-width: none;
width: 5px;
height: 5px;
border: 0px;
background-color: blueviolet;
border-radius: 2px;
padding:0;
}
<button id='seat_small'></button>
Remove the padding
#seat_small {
min-width: none;
width: 5px;
height: 5px;
border: 0px;
background-color: blueviolet;
border-radius: 2px;
padding: 0;
margin: 3em;
}
<button id="seat_small"></button>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
<pre>
<head>
<style>
body{
background-color: blue;
}
.a
{
background-color: white;
display: block;
margin: auto;
border-color: white;
border-style: solid;
border-radius: 10px;
text-align: center;
border-color: black;
border-radius: 2px;
width: 400px;
height: 600px;
}
</style>
</head>
<body>
<div class="a">
<h1>SignUp</h1>
</div>
</body>
</pre>
I don't understand why the border attribute does not work please explain to me.
(I removed the base tags because the website says there is too much code).
The problem is:
border-color: white;
border-color: black;
You are setting border-color twice.
Setting the same property twice is a very bad practice. Once you remove either one of them, the code works as expected.
you write 2 times same code
border-color: white;
border-radius: 10px;
border-color: black;
border-radius: 2px;
the client(web browser) will replace first code with last code, the client will run last code where
border-color: black;
border-radius: 2px;
you can remove each one of them or you can use
border: [size] [style] [color];
example :
border: 10px solid black;
to avoid repeat in your code.
Are you trying to do something like this??
body
{
background-color: blue;
}
div.border
{
background-color: white;
display: block;
margin: auto;
border: 5px solid black;
border-style: solid;
border-radius: 10px;
text-align: center;
width: 400px;
height: 600px;
}
<div class="border">SignUp</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to make a CSS shape with a rounded bottom corner with border-radius, but failing to understand how to:
.rounded-css {
border-radius: 5px;
display: block;
background: #669999;
width: 150px;
height: 200px;
}
<div class="rounded-css"></div>
Expected output:
You can use border-radius: 0 0 50% 50%; to make the whole bottom part round. With adding a white pseudo element ::after, you can "cut" the unwanted upper part to only show the curve:
.rounded {
border-radius: 0 0 50% 50%;
display: block;
background: #669999;
width: 100%;
height: 70px;
margin-top: -35px;
}
.rounded::after {
content: "";
display: block;
width: inherit;
height: 35px;
background: white;
}
<div class="rounded"></div>
I think you can adapt this to the container you want to put this in. I think it's pretty much what you are looking for.
.rounded-css {
border-radius: 100%;
display: block;
background: black;
border-bottom: 40px #669999 solid;
border-top: 40px transparent solid;
position: relative;
top: -60px;
overflow: hidden;
}
<div class="rounded-css"></div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am attempting to get my #image-square div to be 9px from the #inside-preview top. I am not sure why it isn't working. I have tried changing its position from absolute to relative as well as top margin-top, I added block. I don't see why it isn't working.
Help please.
#outside-preview, #inside-preview {
border: 1px solid black;
border-radius: 8px;
/*display: inline-block;*/
}
#outside-preview {
width: 500px;
height: 600px;
position: relative;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#inside-preview {
width: 440px;
height: 568px;
position: absolute;
z-index: 1;
left:5%;
bottom: 0;
}
#image-square {
top: 9x;
width: 400px;
height: 174px;
background: red;
position: relative;
display: block;
z-index: 2;
}
<div>
<div class="container" id="outside-preview">
<div class="container" id="inside-preview">
<div id="image-square"></div>
</div>
</div>
</div>
Does this accomplish what you are trying to do?
http://codepen.io/anon/pen/RRBprj
It looks like adding margin-top:9px; worked fine.
Try this:
#image-square {
margin-top: 9px;
width: 400px;
height: 174px;
background: red;
position: relative;
z-index: 2;
}
try putting
9px instead of 9x to start..
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm new in Html/CSS and now I'm trying to make a website (using only html and css) for a friend. In the footer I want to put a img like in this photo: How I want
But, All I could do, until now, was that:
What I could do until now
I could put the text and make the border the way I wanted, I could put a kind of blue color when the mouse hover and to be clickable in all the border space. But, I'm not beeing able to put this icon image righ inside. Can you help me?
Thanks a lot!
#footer {
height: 500px;
width: 100%;
bottom: 0;
background: #b6b6b6;
display: table;
color: white;
text-align: center;
background-repeat: no-repeat;
background-size: 100%;
}
#atua {
width: 30%;
display: inline-block;
text-align: initial;
}
.job {
border: 2px solid #ffffff;
width: 75%;
height: 35px;
margin: 0;
margin-bottom: 5px;
padding-top: 8px;
padding-left: 50px;
}
div #atua a {
text-decoration: none;
color: #ffffff;
}
div .job:hover {
background-color: #14aca9;
<div id="footer">
<div id="atua">
<h3>Área de Atuação</h3>
<p class="job">Trabalhista</p>
<p class="job">Empresarial</p>
<p class="job">Previdenciário</p>
<p class="job">Cívil</p>
</div>
</div>
This is an HTML/CSS version of what you want.
a {
display: inline-block;
background-image: url('http://static1.squarespace.com/static/51885970e4b0d20f07f4329d/t/519d043ae4b0f5d1146aa6ca/1369244735750/HD+TEXTURE+1.jpg');
background-size: cover;
padding: 3px;}
a span {
display: inline-block;
width: 200px;
padding: 10px 0 10px 50px;
border: 1px solid white;
color: white;
background-image: url('http://www.iconsdb.com/icons/preview/tropical-blue/square-xxl.png');
background-size: 39px 39px;
background-repeat: no-repeat;
}
a:hover span {
background-color: #14aca9;
}
<span>Trabalhista</span>
We need to see your code but if you want a simple answer this might help.
<footer style="height:100px;text-align:center;">
<a href="index.html"> <img src="click.jpg" height="100"/><a>
</footer>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm having some trouble getting Firefox and Chrome to display a small section of CSS properly.
I've broken it down as much as possible and created a Codepen to illustrate the problem.
When viewed in Firefox, everything displays as intended (vertically centered). With Chrome, the labels are slightly too high, by one or two pixels.
Everything I've tried so far (adjusting padding, changing floats, adding inline-block, adding margins) will always display incorrectly in one of the two browsers.
What I'd like to know then is what the root cause of the issue is. I use a CSS reset (normalise.css) which is added to the Pen.
Link: Codepen
<div class="editbox">
<div class="object objecthover edit">
<label class="t">Edit</label>
</div>
<div class="object objecthover lock">
<label class="text_label">Lock</label>
<label class="gems index-gems">50 </label>
</div>
</div>
.editbox {
position: absolute;
height: 60px;
width: 192px;
background-color: #516580;
padding-top: 12px;
left: 0px;
}
* {
box-sizing: border-box;
}
.edit, .save {
min-width: 50px;
padding: 7px;
}
.editbox label {
-moz-user-select: none;
color: #FFF;
height: 35px;
}
.editbox .object {
position: relative;
border: 2px solid #FFF;
display: inline-block;
padding: 4px;
margin-left: 4px;
height: 35px;
text-align: center;
}
div.lock {
width: 130px;
height: 35px;
padding: 5px 1px 5px 0px;
}
.lock .text_label {
display: inline-block;
}
.editbox label {
-moz-user-select: none;
color: #FFF;
height: 35px;
}
.lock label.index-gems {
padding: 0px;
}
label.index-gems {
color: #FFF;
height: 27px;
padding: 4px;
}
.editbox .lock::after, .editbox .make_bid::after {
content: "";
position: absolute;
top: 33px;
height: 0px;
width: 0px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #FFF;
}
Trying to vertically align text using padding is unreliable. Two better ways are
use display: table-cell and vertical-align: middle
set the line-height of your element to the same as the height.
The first option handles multi-line text where the second doesn't, but introducing table cells can lead to other layout issues. If you're only ever dealing with a single line of text, the second option is more straightforward.
Here's an example of using line-height to vertically align text:
div {
display:inline-block;
border:1px solid #abc;
}
.a {
line-height: 20px;
height: 20px;
}
.b {
line-height: 30px;
height: 30px;
}
.c {
line-height: 40px;
height: 40px;
}
.d {
line-height: 50px;
height: 50px;
}
.e {
line-height: 60px;
height: 60px;
}
<div class="a">text</div>
<div class="b">text</div>
<div class="c">text</div>
<div class="d">text</div>
<div class="e">text</div>