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.
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 last year.
Improve this question
I have two divs placed up and down as mentioned in the image. I want to draw a vertical connecting line between these two divs. I used pipe (|) font to do this. But, it is not looking elegant. Can someone help me to draw an elegant vertical line between the divs?
Use border-left:4px dashed blue; property to create a dashed line for connecting the two divs.
.box {
width:80%;
margin-left:10%;
height:70px;
background: grey;
}
.vl {
border-left: 4px dashed blue;
height: 40px;
margin-left:50%
}
<div class="box"></div>
<div class="vl"></div>
<div class="box"></div>
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 4 years ago.
Improve this question
I'm trying to make a website based similar to this design I found on Dribbble. I decided to incorporate the curved background, however I'm not sure how to implement this. I've tried to make a div with the full background with background-color: #04060F but I'm not entirely sure of how to do this nor get it to fill until a specific padding and border radius.
EDIT: I'm getting this result
Any help would be appreciated
Thanks
Do you mean :
div{
border-radius: 5px;//or any length
}
this will give you the rounded corners you're looking for.
Source
Here is a very simple example :
div{
height: 100px;
background-color: blue;
color: white;
border-radius:5px;
}
<div class="rounded">
Some text
</div>
This is the main skeleton I was thinking of looking at the pic you posted.
.main {
background-color: red;
}
.badge{
background-color: #efefef;
border-radius: 20px;
padding: 10px;
}
<body class="main">
<div class="badge">
lorem<br>
ipsum<br>
dolor<br>
sit<br>
amen<br>
</div>
</body>
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
Can someone help me getting my divs to stack like on this image? It has to be done in CSS, since I can't split in 2 separate columns. My code should look like this :
<div class="container">
<div class="div1">
Div #1
</div>
<div class="div2">
Div #2
</div>
<div class="div3">
Div #3
</div>
</div>
The only way I can think of doing this is setting some static widths and heights. You can try the below.
I personally don't recommend this, I would suggest using a table or divs and making some columns/rows. It will keep the layout more fluid and dynamic. If you need to add more elements it will auto adjust for you.
If you avoid columns and rows, you have to calculate everything before you write it out
<div class='out'>
<div class='in big'>one</div>
<div class='in sm'>two</div>
<div class='in sm'>three</div>
</div>
.in {
float: left;
background: tomato;
border-right: 1px solid white;
border-top: 1px solid white;
}
.out {
width: 200px;
height: 400px;
}
.big {
width: 99px;
height: 399px;
}
.sm {
width: 99px;
height: 199px;
}
and a fiddle: http://jsfiddle.net/u03rs3mb/3/
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.
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;
}