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..
Related
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>
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 needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have to implement this content separator in my web page using html/css but I cannot find the implementation.
I have the .svg and .png pictures of this flower. Can you show me the steps of doing this, or give me links to some well-explained tutorials. I appreciate any help!
Flexbox and a couple of pseudo-elements make this simple.
span {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
span::before,
span::after {
content: '';
flex: 1;
height: 2px;
background: teal;
margin: .5em;
}
<span><img src="http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg" alt="" /></span>
Related Question
Here's a solution with pseudo element :after
.separator { border-bottom: 1px solid #333; position: relative; margin-top: 30px; }
.separator:after {
content: "";
position: absolute;
left: 50%;
margin-left: -25px; /* half of the image width */
top: -20px;
background: url('http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg') no-repeat #fff;
width: 50px;
height: 50px;
}
<div class="separator"></div>
A typical HR revisited.
You can use a pseudo to introduce an image on top of it:
hr {
position:relative;
margin:2em 1em;
color:lighgray;
}
hr:before {
content:url(http://i1253.photobucket.com/albums/hh600/fleur-de-lis-xxx/favicon-bright.png);
position:absolute ;
text-align:center;
left:50%;
background:white;
z-index:1;
height:2em;
width:30px;
margin:-15px;
}
<hr/>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to create a jumbotron (maybe use another component) with left arrow attached that's pointing to the text in the left another column.
The image bellow shows exactly what i'm trying to do.
How exactly does this work and how is it accomplished?
left-arrow-box
This can be done by using another component with customized border attribute.
For example,
CSS:
.jumbo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.jumbo .arrow {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.arrow::after {
content: "";
position: absolute;
top: 20%;
right: 100%;
margin-top: -8px;
border-width: 20px;
border-style: solid;
border-color: transparent black transparent transparent;
}
HTML:
<div class="jumbo">
<span class="arrow">Jumbotron</span>
</div>
P.S. You may need to adjust the attributes to fit your needs.
Here is the jsfiddle
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am using Bootstrap and I am trying to create a similar layout to one used by twitter as seen in the screenshot below.
The Part I am trying to do is where the profile picture is. I am trying to add a div that is positioned over another div and I really have no idea where to start.
I have the nav and the blue container but not sure how to create the div on top like shown.
http://www.bootply.com/v7fKXw63nh
Any ideas?
Try using the relative or absolute CSS positions.
For example, put the following code at the bottom of your example.
<div style="position: absolute;
left: 150px;
top: 120px;
width: 75px;
height: 75px;
background-color: #666"></div>
#profileWrapper {
width: 100%;
height: 150px;
background: lightgray;
position: relative;
}
#topHeader {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: lightblue;
border-radius: 10px;
}
#profiler {
width: 100px;
height: 100px;
background: lightblue;
border: 5px solid lightgray;
border-radius: 5px;
position: absolute;
bottom: -50px;
left: 50px;
text-align: center;
}
.fa {
color: lightgray;
display: table-cell;
height: 200px;
vertical-align: middle;
}
.fa:hover {
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div id="profileWrapper">
<div id="topHeader">
<div id="profiler"><span class="fa fa-camera fa-3x"></span>
</div>
</div>
</div>
Fiddle link (Don't forget to resize the demo section in fiddle)
HTML:
<div class="col-sm-12">
<div class="col-sm-2 col-xs-offset-1"></div>
</div>
CSS(used in the demo):
.col-sm-12{
height:100px;
background:#33CCFF ;
}
.col-sm-2{
height:150px;
background:#33CCFF;
margin-top:50px;
border: 4px solid white;
border-radius:5px;
}