Please help me put these boxes next to each other and not on top of each other. This should be so simple, but for some reason I am not able to figure it out.
https://jsfiddle.net/DShepherd79/6qsg8g1L/2/
<body>
<div class="horAlign">
<a class="rTableCell processMap"></a>
<a class="rTableCell sharepoint"></a>
</div>
</body>
.horAlign{
background-color:black;
width: 500px;
position: absolute;
}
.rTableCell{
padding:25px;
}
/*images Start Here*/
.processMap {
background:#08F80D no-repeat center;
display:block;
height:50px;
width:50px;
}
.sharepoint{
background-color:purple; no-repeat center;
display:block;
height:50px;
width:50px;
}
/*Hover Images Start Here*/
.processMap:hover {
background-color:red; no-repeat center;
}
.sharepoint:hover {
background-color:blue; no-repeat center;
}
Change display:block to display:inline-block
See https://jsfiddle.net/6qsg8g1L/3/
Related
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>
How do I create one layout in HTML + CSS?
The problem that I have is that I did not realize how to properly split screen.
Can you give a brief example please jsfiddle
Thanks in advance!
EDIT:
I put this example that please if you know to edit any variant of solving the problem. Very important ... the two bottom divs should always be square
https://jsfiddle.net/L3ttfL72/
For square divs, give them the same height and width. For square divs the size of a percentage of the window width, use vh.
div {
box-sizing: border-box;
}
.container {
width: 60vw
}
.banner {
height: 17em; /* whatever you want */
border-color:red; border-style:solid;
border-width: 6px 6px 2px;
}
.bottom {
float: left;
width: 30vw;
height: 30vw;
}
.left {
border-color:green; border-style:solid;
border-width:4px 3px 6px 6px;
}
.right {
border-color:blue; border-style:solid;
border-width:4px 6px 6px 3px;
}
.container::after {
clear: left
}
<div class="container">
<div class="banner">
The top div
</div>
<div class="bottom left">
bottom left
</div>
<div class="bottom right">
bottom right
</div>
</div>
Here is the code you requested. On a side note, I recommend brushing up on your html / css, this is a place to get assistance and posting questions similar is not recommended.
#numOne{
width:60%;
background:red;
height:60vh;
}
#squareOne{
background:green;
width:50%;
height:40vh;
float:left;
}
#squareTwo{
background:blue;
width:50%;
height:40vh;
float:left;
}
#wrapperDiv{
width:60%;
}
body{
margin:0;
padding:0;
}
http://codepen.io/dnwebdev/pen/waRQme
#numOne{
width:60%;
background:red;
height:60vh;
background-size:cover; background:url(http://lorempixel.com/output/cats-h-g-987-1010-10.jpg);
background-repeat: no-repeat;
background-position: center;
}
#squareOne{
background:green;
width:50%;
height:40vh;
float:left;
background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#squareTwo{
background:blue;
width:50%;
height:40vh;
float:left;
background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#wrapperDiv{
width:60%;
}
body{
margin:0;
padding:0;
}
<div id="container">
<div id="numOne">
</div>
<div id="wrapperDiv">
<div id="squareOne">
</div>
<div id="squareTwo">
</div>
</div>
</div>
I have 3 seperate portion in page. Each should scroll individually. And if we scroll entire page every div should scroll.
How to achieve that. Following is fiddle for that http://jsfiddle.net/qLonzsvj/
html{
overflow-x:hidden;
}
.left-column
{
float:left;
width:30%;
}
.right-column
{
float:right;
width:30%;
}
.center-column
{
margin:auto;
width:30%;
}
I think this is what you are looking for.
CSS
html, body {
height: 100%;
position:relative;
}
body
{
background:#00253f;
line-height:100px;
text-align:center;
}
.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}
.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
background:#ccc;
overflow:scroll;
}
.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}
HTML
<div class="left"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="center"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="right"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
Check demo here
jsfiddle
A few things need to be changed to allow this to work I made a little mock up on jsfiddle you need to give the boxs a defined height and an overflow property of scroll. Also you do not need to float your boxes all willy nilly to make this happen.
:::EDIT:::
Updated Js Fiddle for page scrolling
http://jsfiddle.net/kriscoulson/qLonzsvj/2/
*{
box-sizing: border-box;
}
.cols {
float:left;
width:33%;
overflow: scroll;
height:30px;
}
.left-column{
background: red;
}
.center-column{
background: blue;
}
.right-column{
background: green;
}
<div id="container">
<div class="cols left-column">
<div>div1</div>
<div>div1</div>
<div>div1</div>
</div>
<div class="cols center-column">
<div>div2</div>
<div>div2</div>
<div>div2</div>
</div>
<div class="cols right-column">
<div>div3</div>
<div>div3</div>
<div>div3</div>
</div>
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>
So I have this template design that is currently absolutely positioned, but I'm trying to make it centered in any widescreen browser. I've tried making the width auto on the left and right side in my container, but it is still aligned with the left side.
Css
.JosephSettin_png
{
position: absolute;
left:0px;
top:0px;
width:216px;
height:40px;
background: url("JosephSettin.png") no-repeat;
}
.home_png
{
position: absolute;
left:472px;
top:16px;
width:48px;
height:16px;
}
.discography_png
{
position: absolute;
left:528px;
top:16px;
width:80px;
height:24px;
}
.purchase_png
{
position: absolute;
left:608px;
top:16px;
width:88px;
height:24px;
}
.about_png
{
position: absolute;
left:696px;
top:16px;
width:48px;
height:24px;
}
.contact_png
{
position: absolute;
left:744px;
top:16px;
width:56px;
height:24px;
}
.main__pic_png
{
position: absolute;
left:0px;
top:56px;
width:264px;
height:264px;
background: url("main_pic.png") no-repeat;
}
.footer__lines_png
{
position: absolute;
left:0px;
top:512px;
width:800px;
height:24px;
background: url("footer_lines.png") no-repeat;
}
.info__heading_png
{
position: absolute;
left:32px;
top:360px;
width:216px;
height:32px;
background: url("info_heading.png") no-repeat;
}
.info__pic3_png
{
position: absolute;
left:265px;
top:360px;
width:159px;
height:112px;
background: url("info_pic3.png") no-repeat;
}
.info__pic2_png
{
position: absolute;
left:432px;
top:360px;
width:176px;
height:112px;
background: url("info_pic2.png") no-repeat;
}
.info__pic1_png
{
position: absolute;
left:616px;
top:360px;
width:177px;
height:112px;
background: url("info_pic1.png") no-repeat;
}
.info__pane_png
{
position: absolute;
left:0px;
top:345px;
width:800px;
height:144px;
background: url("info_pane.png") no-repeat;
}
body
{
text-align: center;
background-color:maroon;
}
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#a {
text-decoration: none;
color:white;
font-weight:bold;
}
.style1 {
font-weight: bold;
color: #FFFFFF;
}
html
<body>
<center>
<div id="wrapper">
<div class="JosephSettin_png"> </div>
<div class="home_png"> Home</div>
<div class="discography_png"> Discography</div>
<div class="purchase_png"><span class="style1">Store</span></div>
<div class="about_png">About</div>
<div class="contact_png"><span class="style1"></span>Contact</div>
<div class="ad_png"> </div>
<div class="main__pic_png"> </div>
<div class="welcome__header_png"> </div>
<div class="welcome__text_png"> </div>
<div class="footer__lines_png"> </div>
<div class="footer__text_png"> </div>
<div class="info__pane_png"></div>
<div class="info__heading_png"> </div>
<div class="info__text_png"> </div>
<div class="info__pic3_png"> </div>
<div class="info__pic2_png"> </div>
<div class="info__pic1_png"> </div>
<div class="info__pic3_png"> </div>
</div>
</center>
</body>
I know the container I create works if all my div classes aren't absolutely positioned. Do I have to change the position or did I make another error?
Add position: relative; to the .wrapper definition.
http://www.w3.org/TR/CSS2/visuren.html#choose-position
An absolutely positioned item must be inside of a relatively positioned item, or it will not display as you intended.
Your main problem is that your wrapper needs to be position:relative; and margin:0 auto; will center the wrapper. also you can get rid of you HTML element its not needed.
CSS:
#wrapper {
position:relative;
width: 800px;
margin:0 auto;
text-align: left;
}
Hope this helps.
I strongly suggest using a CSS framework like "Blueprint CSS". It'll save you a lot of time and helps not just with positioning of elements but comes with a lot of nice features like typography, css reset for multi-browser support, etc.