I'm having trouble making the below layout look the same across all browsers:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
}
<fieldset class="wrapper">
<legend>Legendary!</legend>
<div class="icon">icon</div>
</fieldset>
The problem is that when the legend element is present, the div.icon is pulled few pixels down on firefox, and a few pixels up on chrome. When I remove the legend element, it's working fine, but I can't do that. Any ideas on how to make it look the same everywhere?
here you have a working UPDATED :jsfiddle tested in chrome and firefox.
You don't need to work with position:absolute; you can just float:right; your div and give margin-top:-40px; or whatever value you want.
#wrapper{
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
#icon{
float:right;
background-color:#fff;
width:40px;
height:40px;
border:1px solid black;
margin-top:-20px;
margin-right:20px
}
legend#title {
margin-left: 20px;
float: left;
padding-left: 10px;
margin-top: -10px;
background: #f3f5f6;
width: 74px;
}
.icon {
float: right;
margin-top: -30px;
width: 40px;
height: 40px;
border: 1px solid black;
background-color: white;
}
tested on chrome as well as mozilla.
Try giving top value in percentage %.
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -2.5%;
right: 10px;
}
Fiddle here: https://jsfiddle.net/37y8023g/
Use line-height for .icon
CSS:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
line-height: 40px;
}
Working example: https://jsfiddle.net/qjqv43y4/1/
Related
I have a button that is supposed to show the tick icon on the top-right edge of the button, upon selected. Placing the tick icon partially over the button and partially out of the button seems to be a challenge. I was wondering if you can help me with this.
You can make top right circle with before element
button {
width: 100px;
height: 50px;
position: relative;
border-radius: 5px;
background-color: white;
border: 1px solid blue;
transform: translate(3rem, 3rem);
}
button:before {
content: attr(data);
width: 20px;
height: 20px;
border-radius: 50%;
background: skyblue;
border: 1px solid blue;
position: absolute;
top: -10px;
right:-10px;
display: flex;
justify-content: center;
align-items: center;
}
<button data="✓" class="badge-top-right">Button</button>
HTML
<button data="i" class="badge-top-right">Button</button>
CSS
button {
background-color: white;
width: 100px;
height: 40px;
border-radius: 5px;
border: 1px solid grey;
margin-top: 40px;
margin-left: 40px;
position: relative;
}
button:before {
content: attr(data);
width: 20px;
height: 20px;
line-height: 20px . ;
border-radius: 50%;
background: white;
border:1px solid grey;
color: black;
position: absolute;
top: -10px;
left: -10px;
right:-10px;
left:auto;
}
You can see the result here:
https://stackblitz.com/edit/angular-pjfn6t
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
I want to create a 2 column liquid layout with a nav bar on the left side that should have a height of 100%, a header that should have a width of 100% and a content section that should have a height and width of 100% as well, and there should be a margin on all sides of 10 or 20 pixels, and also in between the header, nav and content boxes. Here is my fiddle:
https://jsfiddle.net/d2Lnq6sd/1/
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
Now as you can see the nav bar is not 100% in height and the content section is too wide. My final result should look like this:
http://imageshack.com/a/img921/9425/UYp8Ah.png
Tried finding help on google on this issue but I still don't get what I should use, relative or absolute positions and which to use for which attribute. any pointers?
You're good to go: http://codepen.io/8odoros/pen/vKxVYv?editors=1100
nav bar is 100% in height
the content section is not too
wide
html, body {
height:calc(100% - 60px);
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
height:100%;
box-sizing:border-box;
}
header {
float:left;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
box-sizing:border-box;
}
nav {
float:left;
margin-top:20px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
box-sizing:border-box;
}
section {
float:right;
margin-top:20px;
height:100%;
padding: 10px;
width:calc(100% - 220px);
background-color: green;
border: 1px solid black;
box-sizing:border-box;
}
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Try this code and see demo:
CSS:
body {
color: #fff;
font-family: verdana;
}
header {
background-color: red;
border: 1px solid black;
height: 75px;
width: 100%;
}
nav {
background-color: blue;
border: 1px solid black;
float: left;
margin: 2% 0;
min-height: 300px;
padding: 10px;
width: 20%;
height: 100%;
}
section {
background-color: green;
border: 1px solid black;
float: right;
position: absolute;
right: 10px;
top: 100px;
width: 75%;
}
See Fiddle Demo
Alright so I changed a few things:
https://jsfiddle.net/d2Lnq6sd/9/
body,html {
height:100%;
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
width: 73%;
float: left;
height:auto;
}
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
aside {
float:left;
width:20%;
margin-top:15px;
margin-left:5px;
height: 100%;
background-color: blue;
border: 1px solid black;
}
section {
width: 100%;
background-color: green;
border: 1px solid black;
}
I have moved your navigation into an aside tag, this is just HTML 5 syntax Link
By using floats and keeping the positions as they were you are able to create the desired effect. To get the width to 100% I would recommend playing with the padding and margins to get it to a 20% + 80% ratio.
Hope this helps :)
Do you need like this ,
Html:
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Css:
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
}
header {
position: relative;
height: 75px;
width:675px;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 300px;
bottom:200px;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
you can see the link:https://jsfiddle.net/d2Lnq6sd/11/
You can position nav as fixed, use below to get an idea.
nav {
position: fixed;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
margin-top: 76px;
}
First: I really tried to find an answer but non of them worked for me.
Here's my problem:
I have a base layout where I have a forward and a backward button in the footer.
Theses buttons must be quadratic. So I've decided to make them simple images (to avoid all the problems with trying to scaling divs propotionally).
Theses images have CSS:
.galleryFooterController {
position: relative;
height: 100%;
float: left;
margin-left: 5px;
background-color: #A0A0A0;
}
And are nested in a container with CSS:
#galleryFooterControlle {
position: absolute;
display: inline-block;
right: 15%;
background: white;
height: 100%;
padding-right: 5px;
width: auto;
}
But the container is not taking the correct width so that the images are not fitting inside and are rendered under each other. If I take out the height: 100% from the images, they fit next to each other in the container.
It would be great if you could help me finding a JS-free version to solve this problem!
Thanks!
Here is a FIDDLE that will give you a start.
I haven't made all of the divs line-up, but you can change the CSS to make it look prettier.
For your buttons, I just used div in a div with CSS-Tricks triangle - You can use .click on the outer div to run your function.
Here's the relevant CSS
.header {
width: 100%;
height: 50px;
background-color: #A0A0A0;
border: 4px solid white;
}
.container {
width: 90%;
height: 400px;
background-color: #A0A0A0;
border: 4px solid white;
float: left;
}
.rightbar {
width: 9%;
height: 460px;
border: 1px solid white;
float: right;
background-color: #A0A0A0;
}
.bottomholder {
width: 90%;
height: 50px;
border: 1px solid black;
}
.bottomleft {
height: 100%;
width: 562px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottombutton {
height: 100%;
width: 130px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottomright {
height: 100%;
width: 200px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.arrowleft {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid black;
margin-left: 8px;
margin-top: 5px;
}
.arrowright {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid black;
margin-left: 15px;
margin-top: 5px;
}
Just i tried with liquid layout, removed the border 2px white and change the float property.
.header {
width: 98%;
height: 50px;
background-color: #A0A0A0;
margin:2px 2px;
}
.container{
width: 85%;
height: 400px;
background-color: #A0A0A0;
margin:2px 2px;
float: left;
}
.rightbar{
width: 12%;
height: 460px;
float: left;
background-color: #A0A0A0;
margin-top:2px;
margin-left: 2px;
padding-left: 3px;
}
Full Code http://jsfiddle.net/judearasu/5c5rq/
Thanks to everyone I figguered out how to solve the problem!
Because the images coudn't be rendered next to each other because its container would't pick the right width after scaling the images, i simply made the container width to the maximum available place which was in my project 85%. So now the images are fitting in!
Thanks again!
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}