I want the button stay where it is, but the logo to be centered in relation to the width of the screen. However the logo is a bit more to the right. I think it is due to the button on the left side. In addition, how would you center the logo vertically within the menu bar? Thanks for your help.
<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;">
<button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button>
<img src="https://nebulon.io/nebulon.png" style="max-height:70px;">
</div>
https://jsfiddle.net/bjLex5qm/1/
I set the image position to absolute and calculate the center using left:calc(50vw - 50px), or the left position is half of the viewport minus half of the image width.
.container {
position: fixed;
display: inline;
max-width: 100%;
background-color: white;
left: 0px;
top: 0px;
right: 0px;
border-bottom: 1px solid #6C7A89;
text-align: center;
}
button {
width: 80px;
height: 80px;
background: transparent;
border: none;
font-size: 27px;
outline: none;
float: left;
}
img {
max-height: 70px;
display:block;
position:absolute;
left:calc(50vw - 50px);
}
<div class="container">
<button onclick="w3_open()">☰</button>
<img src="https://nebulon.io/nebulon.png">
</div>
updated the fiddle. check it out.
jsfiddle link
Took the liberty to remove the inline styles
.header{
position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;
}
.menu{
width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none;
position:absolute;
left: 0;
}
.logo{
max-height:70px;
}
<div class = 'header'>
<button style="" onclick="w3_open()" class = 'menu'>☰</button>
<img src="https://nebulon.io/nebulon.png" class = 'logo'>
</div>
Use position absolute and transforms on the image. This would center vertically and horizontally.
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The simplest solution is to use tables you can easily specify "vertical-align:middle" property in table cells and make the content look completely centered.
Please refer to the following code and Fiddle.
<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;">
<table>
<tr>
<td>
<button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button>
</td>
<td style="width:100%;"><img src="https://nebulon.io/nebulon.png" style="max-height:70px;vertical-align:middle"></td>
</tr>
</table>
</div>
Related
When I absolute-position an element inside a relative element, the coordinates are calculated from the edges of the container without taking into account the borders (what would be equivalent to positioning from the interior side of the border.)
Is there any way of positioning the element but from the exterior side of the border?
For example: if I have a red square (like the first one) without a border, the text sticks to the top left of the container because it has top:0; left:0. But the text in the second square still has top:0;left:0, but the border pushes the text inside the square:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text">Text</div>
</div>
What I would like for it is for the text to keep sticking to the top left corner of the colored area. Is that possible? How could it be done?
Note: This is more of a theory question out of curiosity; I know there are alternatives that will work (at least visually) like using negative margins, negative positioning values or an inset box-shadow:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
but what I would like to know if it it's possible doing while keeping the borders.
No box shadow but not quite border either. How about this?
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box:before {
content:" ";
border:25px solid rgba(0,0,0,0.1);
height:100%;
z-index:1;
position:absolute;
box-sizing:border-box;
width:100%;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
z-index:2;
}
<div class="box">
<div class="text">Text</div>
</div>
or box-bordered:after if you want to keep the class on the div element
The only two solutions that come to my mind are:
setting a negative margin equal to the border width on .text
using negative values on the top and left property.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
margin: -25px;
}
.text2 {
position:absolute;
top: -25px;
left:-25px;
color:white;
}
<div class="box box-bordered">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text2">Text</div>
</div>
I don't know if you have considered it but box-shadow has a default margin. Set it to 0 and you achieve the desired result.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
margin: 0;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
As you can see in the center 100 x 100 area is the region, where text contents will be placed. Every content will be calculated based on margin, border and padding.
Therefore, I dont see a solution without using the negative margins or inset box as you mentioned, which is some kind of fix to the original question.
It's posibble.
.parent {
position: relative;
border: solid 1em;
}
.child {
--top: 0;
--left: 0;
position: absolute;
box-sizing: content-box;
width: 100%;
height: 100%;
border: solid 0 transparent;
border-width: inherit;
top: calc(50% + var(--top));
left: calc(50% + var(--left));
transform: translate(-50%, -50%);
background-origin: border-box;
}
If your parent have different border widths around it. This wouldn't work right. But most of the time this would do the job.
Is there anyway to create similar to the attached with HTML/CSS, that works responsive? without using am image?
Unable to get the oragne border & content added in
CSS
.left {
border-bottom: 70px solid #3488b1;
border-right: 1000px solid transparent;
height: 0;
position: absolute;
bottom:0;
width: 1px;
opacity:.5;
}
.right {
border-bottom: 70px solid #3488b1;
border-left: 1000px solid transparent;
height: 0;
width: 1px;
position: absolute;
bottom:0;
}
.footer {height:100px;}
& HTML
<div class="footer">
<span class="left"> </span>
<span class="right"></span>
</div>
One way is to use transforms.
html, body {
height:100%;
width:100%;
}
#responsive {
position:relative;
height:25%;
width:80%;
overflow:hidden;
min-height: 80px;
}
#triOne {
position:absolute;
background-color:aqua;
height:300%;
width:300%;
transform: rotate(10deg);
top:55%;
left:-100%;
}
#triTwo {
position:absolute;
background-color:blue;
height:300%;
width:300%;
border: 5px solid orange;
transform: rotate(-10deg);
top:45%;
right:-100%;
}
#content {
position:absolute;
right:10px;
bottom:10px;
color:white;
}
<div id="responsive">
<div id="triOne"></div>
<div id="triTwo"></div>
<div id="content">content</div>
</div>
It's not really responsive, but I think with a few tweaks you should be able to get it the way you want it.
In my web application, I wanted to place a small div along border edge of another div like this:
This is my code:
<div style="border:1px solid black; height:1em; width:10em;">
<div style="border:1px solid black; display:inline-block; height:10em;
width:10em;"> Along edge </div>
</div>
How can it be done?
Following way you can do it. Make main div position:relative and along edge div position:absolute to main div. And give top and right to sub div.
.main{
border:2px solid;
position:relative;
width:400px;
height:150px;
top:50px;
}
.sub{
border:1px solid;
position:absolute;
right:10px;
top:-10px;
z-index:99;
background-color: #fff;
}
<div class="main">
Main Div
<div class="sub">
along edge
</div>
</div>
Hope it helps.
put css like this
.main-div
{
position:relative;
}
.along-edge
{
position:absolute;
right:50px;
top:-20px;
z-index:1;
}
Check this fiddle
<div id="Main">
<div id="Edge"></div>
</div>
and css
#Main{
width:200px;
height:200px;
border:solid 1px black;
position:relative;
margin-top:50px;
}
#Edge{
width:50px;
height:50px;
border:solid 1px black;
position:absolute;
top:-25px;
right: 50px;
}
demo
Nest the smaller div inside the main div.
.along-edge {
position: absolute;
margin-top: -10px;
z-index: 1;
}
I need to align multiple DIVs horizontally and vertically inside my main DIV divBig. Each DIV should overlap one over the other but should be in the centre of the main DIV divBig.
This is my DIV structure:
<div id="divBig">
<div class="divBigInner">
<img class="innerSub1" src="image.png" />
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
This is what I tried so far. But Does not align correctly.
#divBig {
background-color: #ff6600;
text-align: center;
}
.divBigInner{
position:relative;
height: 100%;
}
.innerSub1{
position:absolute;
max-width:550px;
width:100%;
z-index: 1;
margin: auto;
pointer-events: none;
}
.innerSub2{
position:absolute;
z-index: 2;
top:10px;
display:inline;
}
.innerSub3{
position:relative;
max-width:550px;
width:100%;
z-index:0;
margin: auto;
pointer-events: none;
}
Thank you.
like this you are asking?
<div id="divBig">
<div class="divBigInner" align="center">
<div class="innerSub1"></div>
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
Css
<style>
#divBig {
background-color: #fff;
text-align: center;
}
.divBigInner{
height: 100%;
}
.innerSub1,.innerSub2,.innerSub3{
border:1px solid #f00;
padding:10px;
margin:10px;
width:100px;
}
</style>
Can you try this:
<div id="divBig">
<div class="divBigInner" align="center">
<div class="innerSub1"></div>
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
Css
<style>
#divBig {
background-color: #fff;
text-align: center;
}
.divBigInner{
height: 100%;
position:relative;
}
.innerSub1,.innerSub2,.innerSub3{
border:1px solid #f00;
padding:10px;
margin:10px;
width:100px;
height:100px;
position:absolute;
margin-left:-50px; /*formula to make div center horizontal (left 50% - width/2)*/
margin-top:-50px; /*formula to make div center vertical (top 50% - height/2)*/
}
</style>
see this link...: Exemple
on this site i have this code
<body>
<div id="geral">
<div id="animacao">
<ul id="banners">
<li><img src="banners/banner_1.jpg" alt="Banner 1" /></li>
<li><img src="banners/banner_2.jpg" alt="Banner 2" /></li>
</ul>
</div>
<div id="menu">
</div>
</div>
</body>
#geral is positioned in the center of the screen -
#animacao has the same size of #geral, on this has animated images with fade effects..
#menu has 271px with and need to stay over and on center of #geral and #animacao, on this i will put the menu with PNG bakcground....
This is my CSS, and probably doesn't work ...
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background: url(../imagens/fundo.jpg) no-repeat;
}
#animacao{
position: relative;
width:990px;
height:530px;
}
#menu
{
position: absolute;
left: 50%;
width:271px;
height:530px;
margin-left:-135px;
background-color:yellow;
z-index: 10;
}
Where am I wrong?
Demo
Is this what you're trying to do? http://jsfiddle.net/brettdewoody/C4jSS/
Or did you want the #menu div positioned on top of #animacao?
html
<div id="geral">
<div id="animacao">
<div id="menu">
<div>
</div>
</div>
css
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background-color: black;
}
#animacao{
position: relative;
width:990px;
height:530px;
background-color: red;
}
#menu{
position: relative;
margin:0 auto;
width:271px;
height:530px;
background-color:yellow;
z-index: 10;
}
Remove the left: 50% and add margin: 0 auto; to the #menu div.
#menu{
position: relative;
margin: 0 auto;
width:271px;
height:530px;
background-color:#FFF;
z-index: 10;
}
http://jsfiddle.net/qmAN5/2/
http://jsfiddle.net/qmAN5/2/show
Don't exactly know what you are trying to ask but try this:
HTML:
<div id="geral">
<div id="animacao">fdgdf</div>
</div>
<div id="geral">
<div id="menu">dfgdf </div>
</div>
CSS
#charset "utf-8";
/* CSS Document */
#geral{
width:990px;
margin-left:auto;
margin-right:auto;
background: #99CCCC;
}
#animacao{
float:left;
width:100%;
height:530px;
background:#FFCCCC;
}
#menu{
margin-left:auto;
margin-right:auto;
width:271px;
height:530px;
background-color:#FFF;
z-index: 10;
border:#000000 1px solid;
display:table;
}
Try this one:
http://jsfiddle.net/qmAN5/3/
I've put the #menu inside #animacao since the position is relative to its parent.
and added margin-left to adjust the position.