Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Well I don't know how to explain it correctly. Here, check this screenshot which has what I want to make. My designer gave me this. If I don't find a solution i'll use images and no code. Is it possible to do this with CSS3?
Here is the image
See the triangle inside that box? I want to do this. Thank you!
Creative use of borders to achieve this effect, no images were harmed in the following sample and you can even set the position of the arrow on the element itself - becomes more straightforward if you can hardcode it for your design.
HTML
<div class="top">
<span class="arrow" style="left:40%"></span>
</div>
CSS
.top {
background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg);
background-size:cover;
width:300px;
height:300px;
border:1px solid #888;
position:relative;
overflow:hidden;
}
.arrow {
border:30px solid #aaa;
border-bottom:none;
border-color:transparent #aaa transparent #aaa;
position:absolute;
left:0;
bottom:0;
}
.arrow:before, .arrow:after {
content:'';
position:absolute;
width:5000px;
bottom:0;
height:30px;
background:#aaa;
}
.arrow:before {
right:30px;
}
.arrow:after {
left:30px;
}
Working JSfiddle sample.
Or the full integrated sample here.
Related
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 have the following code.
.circle
{
width:251px;
height:251px;
border-radius:50%;
font-size:16px;
color:#fff;
line-height:50px;
text-align:center;
background:#000;
}
<!DOCTYPE HTML>
<body>
<div class="circle">Hello Guys! Please help Me...</div>
</body>
jsFiddle Link
What I want to do is center the text but I don't know how to do that.
http://jsfiddle.net/b6335umv/1/
line-height is what you need.
.circle
{
width:251px;
height:251px;
border-radius:50%;
font-size:16px;
color:#fff;
text-align:center;
background:#000;
line-height: 251px;
}
Line height is a good solution for this. The key being (when the containing element has a defined height) that line-height and the containing elements height are the same. In your case
.circle {
width:251px;
height:251px;
border-radius:50%;
font-size:16px;
color:#fff;
line-height:251px;
text-align:center;
background:#000;
}
However in responsive cases where the elements are more fluid and the height isn't explicitly defined, it's usually better to use use line-height without units. This article has a pretty good explanation of the details about why.
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 7 years ago.
Improve this question
#maindiv
{
display:table;
text-align:center;
border:2px solid #94a2af;
width:100%;
}
#leftsidebar
{
display:table-cell;
width: 26%;
background-color: #af9495;
border:1px solid #94a2af;
}
#rightsidebar
{
display:table-cell;
width: 24%;
background-color: #94a2af;
border:1px solid #94a2af;
}
#center
{
text-align:center;
display:table-cell;
background-color: #f2ebca;
width:50%;
}
I am trying to line up three columns in a row that will be equal height, I found this table solution to get the height(and it worked great) but I can not get the table-cells to display in the correct order. The center one displays on the right and I can't seem to find a solution.
Go easy I'm brand new to this :)
The HTML to go with that CSS should look something like this:
<div id="maindiv">
<div id="leftsidebar">Col 1</div>
<div id="center">Col 2</div>
<div id="rightsidebar">Col 3</div>
</div>
Please post your HTML for a more specific response.
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 7 years ago.
Improve this question
How to make full width footer with <footer> tag.
I'm not able to use div with id and make it looks like footer (which is pretty simple).
body{
background: #333333;
}
footer{
float:left;
background: lime;
padding:15px 0;
width:100%;
}
<footer></footer>
https://jsfiddle.net/g4b3oakd/
When i use code like this it's not in full width of page.
Is possible to do something like this?
Add margin: 0; like this: https://jsfiddle.net/DIRTY_SMITH/g4b3oakd/1/
body{
margin: 0;
background: #333333;
}
footer{
float:left;
background: lime;
padding:15px 0;
width:100%;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Please have a look at my code, I've spent several hours finding a solution to no avail. I'm not a professional Web Developer, I'm just doing this for our project at school.
http://cssdesk.com/6L2sN
What I'm trying to do is, the Black div is at the most top, and then the red below it, then green below it, same goes to the blue one. But it's doing the opposite. I don't understand why, is z-index not working as it should?
Give the items an position: relative, that should work.
Edit: And don't use negative z-index. Just give the element which should lie on the top, the highest, the second one the second highest,...
So the code should looke like:
<style>
#head{
position:relative;
z-index:100;
height:150;
width:222;
background-color:black;
}
#item1{
margin-top:-110;
z-index:90;
transition:0.5s;
background-color:red;
width:222;
height:192;
position: relative
}
#item1:hover{
margin-top:0;
transition:0.5s;
}
#item2{
z-index:80;
transition:0.5s;
margin-top:-110;
background-color:green;
width:222;
height:192;
position: relative
}
#item2:hover{
margin-top:0;
transition:0.5s;
}
#item3{
z-index:70;
transition:0.5s;
margin-top:-110;
background-color:blue;
width:222;
height:192;
position: relative
}
#item3:hover{
margin-top:0;
transition:0.5s;
}
</style>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a website that needs a few css made banners and I'm having a bit of trouble creating them. I would show you what I had, but their too embarrassing to share...
My goal is to try and only use html and css to build these instead of images. This is kind of what I'm trying to build with the text inside of it...I think that is where I'm failing.
Any help would be much appreciated and would save my head the pain of hitting against the wall.
The only thing you need is a <div> element and manipulate the CSS.
Have a look here and here as they have everything that you will need to get started
I've also created a Fiddle for you that will give you the effect you want.
EXAMPLE
HTML
<div class="bookmarkRibbon"></div>
CSS
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
}
And here is your flag with text inside as you show it in the picture.
EXAMPLE
HTML
<div class="ribbon">BANNER</div>
CSS
.ribbon {
text-align:center;
display:block;
width:100px;
height:100px;
background:#d00202;
}
.ribbon:after {
content:"";
display:block;
position:relative;
top:80px;
width:0;
height:0;
border-width:30px 50px 50px 50px;
border-style:solid;
border-color:#d00202 #d00202 transparent #d00202;
}