Here is my link http://jsfiddle.net/sanand29/7fh2em4f/
<div class="link1">
<div>
the css part corresponding to it
.link1
{
display: block;
margin-top: 15%;
width: 78%;
margin-left: 26%;
}
a.square1
{
width: 50%;
height: 50%;
border: 1px solid red;
padding: 9%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.5;
}
How will I put any text in the center of the square keeping it responsive.
Try this
<div class="link1">
<div class="square1">Text to be centred</div>
</div>
And the css
div.link1 {position: relative; width: 200px; height: 200px; border: 1px solid red;}
div.square1 {height: 20px; text-align: center; margin: auto; position: absolute; top: 0px; left:0px; bottom:0px; right:0px;}
This will keep the text in the middle of the box. In fact it keeps the div with class square1 centred - the text may overflow this div, depending on the size of font you choose. If you set the height of the div to the height of your font you can't go wrong.
Related
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
I want to make two divs overlap each other using css. I used the following code but when some text or content is added to the blue box it overflows the gray box while I want to keep it inside the the gray box and stretch it as the inner content is stretched.
.gray {
position: relative;
background-color: #818181;
}
.white {
background-color: #fff;
}
.blue {
position: absolute;
background-color: #0090ff;
top: 0;
right: 10px;
left: 100px;
}
<div class="gray">
<div class="white">
left text
</div>
<div class="blue">
<p>some text goes here</p>
<p>some text goes here</p>
<p>some text goes here</p>
</div>
</div>
here is my satisfactory result:
How can I correct the css to get the above result?
Change your CSS to this.
The gray will autosize in height when you add more content to the blue div.You may need to change some with and margin values to get the layout you want, but the mechanism is there.
.gray {
background-color: #818181;
z-index: -1;
height: auto;
width: 300px;
position: absolute;
overflow: hidden;
}
.white {
background-color: #fff;
z-index: 0;
height: 150px;
width: 280px;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
.blue {
background-color: #0090ff;
top: 0;
height: auto;
width: 180px;
z-index: 1;
position: relative;
float:left;
margin-left: 60px;
margin-top: 10px;
}
See it work: http://jsfiddle.net/djwave28/dj9wo8ak/4/
So you need to define blue box as position relative the overflow will be stopped and and when you add some content to blue div it will not overflow.
If you want to get white div under a blue div you need to set it to position:absolute and set it z-indx lesser than blue div has
try this
.gray {
position: relative;
background-color: #818181;
height: 200px;
width: 100%;
}
.white {
background-color: #fff;
float: left;
width: 97%;
position: relative;
z-index: 2;
height: 50%;
left: 1%
}
.blue {
position: relative;
background-color: #0090ff;
z-index:3;
width:40%;
height:100%;
top: -9%;
left: 8%;
}
Play with the height and width sizes to reach your desired dimensions.
Do the same with the position values to place the divs the way you want
see this fiddle http://jsfiddle.net/u50jj2e1/1/
.gray {
background-color: #818181;
z-index: -1;
height: 300px;
width: 300px;
position: absolute;
overflow: hidden;
/* Instead of hidden it could be "overflow: auto;"*/
}
.white {
background-color: #fff;
z-index: 0;
height: 150px;
width: 280px;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
.blue {
background-color: #0090ff;
top: 0;
height: 290px;
width: 180px;
z-index: 1;
position: absolute;
margin-left: 20px;
margin-top: 10px;
}
<div class="gray">
<div class="white">
</div>
<div class="blue">
</div>
</div>
I create exact shape for you: http://jsfiddle.net/dj9wo8ak/1/
I am trying to make a circle div act as a decorative part of a bar and I'm having a hard time positioning the circle. The idea is that the bar and circle act as a section divider. I want to have a bar and then a circle at the end of it (hopefully, the circle has text). I am also trying to make it a responsive circle. I tried setting the width to a certain % and then height as auto but that didn't work too well. Here is my jsfiddle.(http://jsfiddle.net/dbartolome/vzkbjh5h/1/)
The HTML and CSS code so far:
<div class="divider"><div class="circle"></div></div>
and CSS
div{
display: inline-block;
vertical-align: top;
}
.divider{
display: block;
width: 80%;
background-color: #20ffd0;
height: 20px;
text-align: center;
position: relative;
}
.circle{
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #BADA55;
text-align: right;
}
Here is a simplified version: http://jsfiddle.net/vzkbjh5h/4/
.divider{
display: block;
width: 80%;
background-color: #20ffd0;
height: 20px;
text-align: center;
position: relative;
}
.circle{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #BADA55;
float: right;
margin-right: -10px;
}
I like the to the <hr> answer but here's one option too:
http://jsfiddle.net/dianaavila/jr91mub8/1/
<div id="work">
<div class="divider"></div>
<div class="circle"></div>
....
</div>
.
.circle{
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #BADA55;
text-align: right;
float:right;
margin-top:-45px;
}
.divider{
display: block;
width: 80%;
background-color: #20ffd0;
height: 20px;
text-align: center;
position: relative;
float:left;
}
I took the .circle out of the .divider container.
Float them right and left respectively.
Added a negative margin to the circle.
Don't abuse all those classes. A horizontal divider is an hr element, and you can put the circle in just fine with an absolutely positioned :after pseudo-element.
All the CSS you need then for the <hr>:
hr {
width: 80%;
background-color: #20ffd0;
height: 20px;
border:0;
position: relative;
margin:50px auto;
}
hr:after {
content:'';
position: absolute;
right:0;
top:-40px;
width:100px;
height:100px;
border-radius: 50%;
background-color: #BADA55;
}
The top:-40px corrects for the combined heights of circle and bar to center vertically, and the margin on the hr itself gives it the 'breathing space' to other content.
You can of course also apply this to hr.big or something else if you don't want to style all horizontal rules like this.
Sample here.
You can position the .circle absolutely to the bar.
Here is an updated fiddle
I've changed .circle to
.circle{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #BADA55;
text-align: center;
left: 100%;
top: -80px;
line-height: 100px;
}
Adjust top parameter to change circle's vertical position. Line-height is equal to the circle's height to make the text centered vertically. Text-align: center; is for horizontal.
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I created two buttons on my site that I plan to turn them into images when you hover over them. The problem that I ran into is that after hovering, the image does not quite fit inside the box (it is too big). How do I resize it so that it properly fits inside the box upon hovering over them?
Here is the HTML:
<a href="link.html">
<div class="main-button">
<h2 class="main-text">Maintenance</h2>
</div></a>
<a href="link2.html">
<div class="docs-button">
<h4 class="docs-text">Other Documents</h4>
</div></a>
and the CSS:
.main-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #0099DF;
margin-left:100px;
float:left;
}
.main-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:40px;
margin-top:150px;
}
.docs-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #545454;
margin-right:100px;
position:fixed;
right:30%;
float:center;
}
.docs-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:60px;
margin-top:120px;
}
.main-button:hover {
background-image:url('../images/settings.png');
}
.docs-button:hover {
background-image:url('../images/documents.png');
}
Try background-size:cover - e.g.
.main-button:hover {
background-image:url('http://placekitten.com/200/300');
background-size:cover;
}
.docs-button:hover {
background-image:url('http://placekitten.com/g/200/300');
background-size:cover;
}
background-size:contain if you want to see all image, or 100% 100% to take 100% width and 100% height but in this case your image could be shell
Hello TheOrangeRemix,
I have a viable solution to you problem. My first step would be to look at the properties of you image and get the dimensions e.g. 100x100, 255x100, etc.
From here you will want to convert that ratio into a percentage. This is a tool I often use when calculating ratio percentages: Ratio to Percentage Calculator
Once you have your percentage (I'm going to use 1:2, which gives me the percentage of 50%). You want to create an anchor tag (<a>) and give it some styles:
(Note: this may be slightly overengineered but it does what you want it to.)
html, body {
width: 100%;
height: 100%;
background: #000;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
max-width: 400px;
margin: 0 auto;
background: #fff;
}
.mainButton {
display: inline-block;
padding-top: 50%;
width: 100%;
background: url('https://via.placeholder.com/100x50');
background-size: 100% 100%;
position: relative;
}
.mainButton .text {
font-size: 22px;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrapper">
<a href="/somewhere/something" class="mainButton">
<span class="text">
Hello, I am a button.
</span>
</a>
</div>