I'm working on a practice project and I'm facing a problem. There is a border box with the border cut off near the text and the button. I shall appreciate it if you people can tell me how to make a box like that. I tried several methods but they were not good at different viewports.
Take a look. Workinglink
HTML:
<div>
<h1>Title</h1>
</div>
CSS:
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Here is one way you can do it.
Using "margin" in CSS you can do it.
<div class="back-box">
<div class="second-box">
<div class="text-box">
<h2>
My Text here
</h2>
</div>
</div>
</div>
CSS
.back-box{ background-color: black; width: 500px; height: 200px; padding: 50px }
.second-box { border: 1px solid white; width: 500px; height: 200px }
.text-box{ background-color: black; margin-top:-30px; width:200px; margin-left:auto; margin-right:auto; text-align: center }
h2 { color: white; }
Related
I want to achieve a layout like below using fix width. The width should be 600px and then I want to have some sections in the main div. And I want that the main div is aligned at the center of the page.
Im a CSS beginner and Im not achieving this result, I have a fiddle with the issues: fiddle
Its not aligned at the center of the page and also only the div .post-title is appearing properly.
Do you know what is necessary to achieve the image layout?
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div>
<div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
I updated your fiddle.
Here is the CSS in case it didn't work. Using flexbox.
.wrapper{
width: 600px;
display:block;
margin: auto;
border:1px solid gray;
text-align:center;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:left;
}
.post-info{
width:100%;
display: flex;
height: 100px;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
flex: 1;
box-sizing:border-box;
text-align: left;
}
.post-admin{
padding:20px;
box-sizing:border-box;
text-align: left;
flex: 1;
}
.post-category{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
.post-tags{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
You don't need to float everything, in fact it makes it very difficult to handle elements under your box because the floats get ripped from the document flow. Also the parent container no longer recognizes the size of the elements. You could instead use flexbox for the two elements next to each other, but for better compatibility you can also just make them inline-block.
I would wrap everything in another block (possibly just the body body if that works for you) with width: 100%; (or at least something larger than 600px) and then use margin: 0 auto; (0 top and bottom, auto left and right). I used inline-block for the date and admin blocks. Also not that you must remove the whitespace between them (I used an html comment) so they don't break.
body {
width: 100%;
}
.wrapper{
width: 600px;
display:block;
border:1px solid gray;
text-align:center;
margin: 0 auto;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:center;
}
.post-info{
width:100%;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-admin{
padding:20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-category{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
.post-tags{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
<body>
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div><!--
--><div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
</body>
Good morning guys. I just want to know how to do this in html and css. :)
I've done this so far in my website.
I've been working for this for days but I can't find an exact way to do it that way.
This is my html code:
<div class="container">
<div class="col-md-2 col-md-offset-1"><img class="img-circle img-left" style="border: 5px solid #0766dc;" src="1.png"></div>
<div class="col-md-2" id="gradient1"></div>
<div class="col-md-2"><img class="img-circle img-center" style="border: 5px solid #00afdc;" src="2.png"></div>
<div class="col-md-2" id="gradient2"></div>
<div class="col-md-2"><img class="img-circle img-right" style="border: 5px solid #28ddb3;" src="3.png"></div>
</div>
and this is my css:
#gradient1 {
display: block;
background: linear-gradient(to right, #0766dc, #00afdc);
height: 5px;
margin-top: 100px;
}
#gradient2 {
display: block;
background: linear-gradient(to right, #00afdc, #28ddb3);
height: 5px;
margin-top: 100px;
}
.img-center {
margin: auto;
}
.img-right {
margin-right: auto;
}
.img-left {
margin-left: auto;
}
.img-circle {
display: block;
padding: 10px;
border-radius: 50%;
width: 200px;
height: 200px;
}
This is a simple code that works. You will have to resize the elements to your desired size, recolor, etc.
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 2</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 3</p></div>
When resizing, make sure that you make the border radius the same as your height and width size. Note that the line div height is half the circle div height.
Your code when I run it does not look like the picture provided. The lines are almost halfway inside the circle to their left.
You can try something like this:
<div class="circle"></div><div class="line"></div><div class="circle"></div>
.circle {
height: 100px;
width: 100px;
border: 4px solid black;
border-radius: 50%;
display: inline-block;
box-sizing: content-box;
}
.line {
display: inline-block;
border-top: 4px solid black;
width: 100px;
height: 50px;
box-sizing: content-box;
}
Make sure you have no spaces between html inline or inline-block elements.
Add circles and change the sizes, colors, etc. at will. You'll probably want to wrap it all in a div with a minimum width so that the elements don't wrap when the screen gets small.
You were so close! :) But for custom things like this bootstrap is very unflexible, so sometimes you have to overwrite some properties.
So, problem is that bootstrap sets a padding on it's elements, that is the reason of the space between your circles:
To solve this issue just make a new class:
<div class="col-md-2 outer">
And apply the style like this:
.outer {
padding:0;
}
Another problem I see in your code is that you set the image width and height manually. But the divs with the class col-md-2 adjust their size depending on the screen size. So resizing can result in overlapping.
So you have to think about, if you set also the width / height of .outer to static values. To prevent this you can at least set the min-height and min-width of the div that have the circle inside.
Check out the solution on jsfiddle:
https://jsfiddle.net/w58L7ojL/ (zoom out to see it working)
i want to achieve the border and header like this -
[![][1]][1]
Does css have anything for it?
What i tried and works is-
.header{
margin-top:-10px;
background:#fff;
}
Are there any other options to achieve this.?
[1]: https://i.stack.imgur.com/iHCVG.jpg
You can use :before or :after
Fiddle
HTML:
<header></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header:before{
content:'Header';
position:absolute;
top:-10px;
left:50px;
background:#fff;
padding:0 20px;
}
You can also use two elements:
header and h1
JSFiddle
html:
<header><h1>Header</h1></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header > h1{
position:absolute;
top:-35px;
left:50px;
background:#fff;
padding:0 20px;
}
Or keep it really simple and use fieldset.
JSFiddle
<fieldset>
<legend>Header</legend>
</fieldset>
As already commented, you could use fieldset. Which will work, but isn't the cleanest solution if it isn't used for a form.
The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
Source.
As alternativ you could try this code:
HTML:
<div class="box">
<h3>title</h3>
</div>
CSS:
.box
width: 400px;
height: 200px;
border: 1px solid black;
}
.box > h3 {
position: absolute;
background: white;
height: 20px;
margin-top: -12px;
margin-left: 10px;
padding: 0 10px;
}
DEMO
I am having some trouble with div positioning. I'm working on a comment system in wich comments can get upvotes and downvotes. For every comment the up/down vote-buttons needs to be left of my comment text, and vertically aligned in the middle of my comment-container div. (regardless of how big the comment is)
At the moment it wont work properly, because the buttons wont get to the middle of the div. (see: http://jsfiddle.net/mcSfe/1838/)
In the testcase i want the leftside to be stretched all the way down, and the red box vertically centered in the middle of the leftside. vertical-align, and display:table-cell, did not brought the right result..
Here is my test html code:
<div class="commentContainer">
<div class="leftside">
<div class="innerleft">
test
</div>
</div>
<div class ="CommentBox">
<p>hello</p>
<p>this is my comment</p>
<p>another line of comment</p>
</div>
and here is my test css code:
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
float:left;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
float:right;
width:200px;
background-color:green;
}
Remove float from .commentbox and .leftside and add display:table-cell with vertical-align:middle
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
width: 50px;
background: gray;
text-align: center;
display: table-cell;
vertical-align: middle
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
width:200px;
background-color:green;
display: table-cell
}
DEMO
LIke this
demo
css
div.commentContainer{
float:left;
border:1px solid blue;
display:table;
}
div.leftside {
display:table-cell;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
width: 25px;
height: 25px;
margin-left:13px;
background: red;
vertical-align:middle;
}
div.CommentBox {
display:table-cell;
width:200px;
background-color:green;
}
Inside of using floats, use inline-block.
JSFiddle
CSS
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
display:inline-block;
vertical-align:middle;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
display:inline-block;
vertical-align:middle;
width:200px;
background-color:green;
}
Issues regarding inline-block whitespace can be addressed separately.
I have a design where I need to align a header to some content in another column.
The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.
(The below is just some demo code to highlight my issue)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
Please see
http://jsfiddle.net/bmxSY/
So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.
EDIT*
The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}
The easiest method is with display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/
.container {
text-align: right;
}
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
Actually it is not possible, but by tricking, we can do it.
.outer {
position:relative;
display:table;
height: 200px;
width: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #CCCCCC;
background:red;
float:left
}
.inner {
width:100%;
display:table-cell;
vertical-align:bottom;
position:relative;
}
p{background:blue;border:1px solid #000}
Demo: http://www.pmob.co.uk/temp/vertical-align9.htm
Use table-cell to align the div o the bottom of the parent.
unfortunately dispaly:table-cell doesn't support margin option so you need to manipulate it through border.
CSS
.container{display:table-row; float:right}
.header-container
{
width: 200px;
font-size: 1.4em;
border-right:20px solid white; border-left:20px solid white;
border-top:10px solid white; border-bottom:10px solid white;
border-bottom: 1px solid #bbb;
display:table-cell; vertical-align:bottom
}
DEMO