So I'm looking to create an effect where a header font is underlined. I want the underline to stretch the width of the div that the header is in. BUT I want the area of that underline that is directly underneath the text to be in a separate color. So under the text it should be blue, but the moment that underline is no longer underneath the text, it should be grey. I was figuring a double border system would work, but I'm not sure if it's even possible anymore to do this with just CSS...is it?
Here's another quick solution. Change the 500px to anything you want, could be a percentage.
HTML
<div class="blue">
Header
</div>
<div class="grey">
</div>
<div class="clear">
</div>
CSS
.blue {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid blue;
float: left;
overflow: hidden;
position: absolute;
z-index: 0;
}
.grey {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid grey;
float: left;
width: 500px;
overflow: hidden;
position: absolute;
z-index:-1;
}
.clear {
clear: both;
}
Example: http://jsfiddle.net/UuYvv/
Did this with fixed positioning here. If you try and do it with everything relative, it gets a little funkier but still sort of works. Hope that helps!
html:
<div class="outer">
<div class="word">My Word</div>
</div>
css:
.outer {
left: 0px;
top: 0px;
height: 20px;
width: 200px;
border-bottom: 2px solid grey;
overflow: visible;
position:fixed;
}
.word {
position: fixed;
top: 0px;
width: 80px;
margin-bottom: -1px;
border-bottom: 2px solid blue;
}
Related
In my project, I allow users to upload profile pictures. I want these pictures to have a circular border, like instagram profile pictures do. Does anybody know how to add this affect?
I have tried the border-radius property, however this makes some images with white/transparent backgrounds looking like they have been cropped, and doesn't have the expected outcome.
Does anybody know how to add a circular type border to any image that is upload by a user? Thank you.
HTML CODE:
.fixedImage {
position: relative;
left: 70px;
width: 25px;
top: 50px;
height: 25px;
border-radius: 50%;
}
Use a border and a box-shadow...
div {
text-align: center;
display: inline-block;
padding: 2em 3em;
border: 1px solid lightgrey;
background: lightgreen;
}
img {
display: block;
border-radius: 50%;
border: 5px solid transparent;
box-shadow: 0 0 0 5px red;
}
.white {
border-color: white;
}
<div>
Transparent border
<img src="http://www.fillmurray.com/g/150/150" alt="">
</div>
<div>
White border
<img src="http://www.fillmurray.com/g/150/150" alt="" class="white">
</div>
Instead of img, you can use div and have your image in background. This will allow you to add a background color of your choice to avoid the transparency.
Example:
<div class="fixedImage" style="background-image: url(img.png)"></div>
CSS:
.fixedImage {
position: relative;
top: 50px;
left: 70px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
background-size: 100px 100px;
}
I think https://medium.com/#biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd3 is what you are looking for.
A div around the image gets the border-radius: 50%
HTML:
<div class="image-cropper">
<img src="https://www4.lunapic.com/editor/premade/transparent.gif">
</div>
CSS:
img {
height: 200px;
width: 200px;
padding: 20px;
}
.image-cropper {
width: 240px; // it seems you need to add the padding twice here
border-radius: 50%;
border: 1px solid red;
position: relative;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/bdL8zmu1/
Without background color:
https://jsfiddle.net/94z27bdL/
Having some problems getting the correct css to align the text the way I would like.
.html file
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b'>444444 4444</div>
<div class='b'>55555</div>
</section>
.css file
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
text-align: center;
vertical-align: middle;
line-height: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
}
Things display fine except for div 4 which has longer text which stretches outside.
I added a class to change the line height so the text wraps:
<div class='b c'>444444 4444</div>
.c {
line-height: 28px;
}
I would like to reduce the spacing between the lines so the text has a better fit inside the circle:
.c {
line-height: 18px;
}
I like the spacing, but would like to shift the text down into the center so I added some padding inside the border:
.c {
line-height: 18px;
padding-top: 6px;
padding-bottom: 0px;
}
The circle is expanded into more of an ellipse-type shape.
The height is explicitly stated as 56px.
The margin is 5px (x2 for top and bottom): 10px
The border is 2px (x2 for top and bottom): 4px
The content is two lines of wrapped text with a line height of 18px (x2): 36px
Adding padding of 6px results in 56px which is the specified height, so I am unclear why the padding would expand the height.
Looked into line-height a bit and clearly I don't really understand how that works. I have tried many other settings and values, but nothing that gives me my desired result.
Same behavior in Chrome, Firefox, Opera, and Safari.
Any thoughts, direction, or clarification on what I am doing wrong?
Size of the divs are 56x56 pixels. Once you add any padding (padding-top: 6px), it will add up to 56px, which will result in 62px. Your div (circle) will become an egg. What you need to do is set box-sizing: border-box on the div.
Initial value of box-sizing is content-box. The height you enter is the content's height. Any padding and border isn't included in that value and will expand the div. box-sizing: border-box on the other hand, will keep the div 56px even after you enter a padding. It'll decrease the height of the content and keep the box at the same height.
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
text-align: center;
vertical-align: middle;
line-height: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
}
.c {
line-height: 28px;
line-height: 18px;
box-sizing: border-box;
padding-top: 9px;
}
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b c'>444444 4444</div>
<div class='b'>55555</div>
</section>
display: table; and display: table-cell; is a good solution for vertical alignment, regardless of the properties of the child element.
.container {
display: table;
border: 1px solid red;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
}
.one {
width: 100px;
height: 100px;
}
.two {
width: 200px;
height: 200px;
}
.three {
width: 75px;
height: 75px;
}
<div class="container one">
<span>some text</span>
</div>
<div class="container two">
<span>some other text</span>
</div>
<div class="container three">
<span>some text that stretches longer</span>
</div>
padding counts toward element size. So height: 56px and padding-top: 6px will make the element 62px high. Just adjust the height of that element to 50px (desired height minus vertical padding, 56 - 6).
Another option is to change box-sizing to border-box (default value is content-box). Which will make padding and border-width to be considered by width and height - https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
You could do something like this:
.b {
position: relative;
top: 50%;
transform: translateY(-50%);
}
and add a wrapper with
transform-style: preserve-3d;
You can use flexbox, where there is no need to calc lines and match padding against size, this does it all dynamically.
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b'>444444 4444</div>
<div class='b'>55555</div>
</section>
I am trying to design a landing page to link to 2 web apps. I am trying to make the design as visually attractive as possible. I think it would look good if the Divs containing the links were side-by-side at the centre of the screen, with their edges overflowing the left and right of the screen. I can then put a border-radius on them and some nice blocky colour:
Goal:
I have tried numerous options, including inline-block and overflow:hidden:
HTML
<div id="centre-pane">
<div class="app-btn">
<img src="icon.png">link text
</div>
<div class="app-btn">
<img src="icon2.png">link text
</div>
</div>
CSS
.app-btn
{
width:1000px;
height:320px;
display:inline-block;
border:10px solid black;
border-radius: 50px;
}
#centre-pane {
width:2000px;
margin:0 auto;
text-align:center;
overflow-x: hidden;
}
Is this possible? I have found several ways of getting them side-by-side (eg here) but nothing that also lets them overflow the screen.
Just using position absolute would do the trick.
I've added a wrapper but it may not be required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html,
.wrapper {
height: 100%;
}
.wrapper {
position: relative;
}
.btn {
width: 45%;
height: 30%;
background: lightblue;
border: 2px solid blue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left {
left: 0;
border-radius: 0 25% 25% 0;
border-left: none;
}
.right {
right: 0;
border-radius: 25% 0 0 25%;
border-right: none;
}
<div class="wrapper">
<div class="btn left"></div>
<div class="btn right"></div>
</div>
You can achieve this with absolute positioning and negative margins (for the right item). You'll have to fix the size of the body though in order to achieve the effect. I've also added individual classes to the first and second item respectively (.app-btn-1 and .app-btn-2):
body {
width: 2000px;
overflow-x: hidden;
}
.app-btn {
width:1000px;
height:320px;
position: absolute;
border:10px solid black;
border-radius: 50px;
overflow-x: hidden;
}
.app-btn-1 {
left: -500px;
text-align: right;
}
.app-btn-2 {
left: 100%;
margin-left: -500px;
}
DEMO
NOTE: For my demo to look right in jsfiddle, I've quartered the sizes so you can see the effect in the small window
Here is the code you need:
.menu {
display: inline-block;
height: 200px;
width: 40%;
margin-top: calc(50% - 100px);
border: 2px solid red;
background-color: brown;
color: black;
text-decoration: none;
transition: all 0.5s;
}
#left {
float: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -10px;
}
#right {
float: right;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: -10px;
}
.menu:hover {
background-color: gray;
border-color: brown;
color: red;
}
<div class="menu" id="left">Left</div>
<div class="menu" id="right">Right</div>
I made a
JS Fiddle for you.
Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
I have certain boxes which I want them to be side by side. I used float:left;margin-left:10px; and successfully achieve my aim.
But I want to lock their positions on screen i.e. fixed w.r.t to screen and no movements according to mouse. For that I tried to use `position:fixed', it too worked, but now it created a problem.
The problem is that the two boxes are now overlapping with each other and displaced with their location.
Her is the fiddle
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
float: left;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
You can set the fixed property to parent div. Try this fiddle.
CSS
.chatWindow-parent{
position: fixed;
}
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
HTML
<div class="chatWindow-parent">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
http://jsfiddle.net/2csBx/
You have to have 2 different classes. Otherwise by fixing the position you are telling them to be fixed in the same location.
Need to add a parent class
HTML
<div class="chatContainer">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
CSS
body{
height: 2000px;
}
.chatContainer {
position: fixed;
bottom: 10px;
}
.chatWindow {
display: inline-block;
position: relative;
float: left;
width: 250px;
height: 280px;
bottom: 10px;
margin-left: 10px;
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
Try this fiddle: http://jsfiddle.net/ETwEF/2/