I'm trying to set up a website to promote myself as a pianist. I'm trying to do this only with html and css, since I don't know anything about javascript/flash etc (YET). I just started html 2 days ago, so this is all new to me.
Here goes: I had this fun idea to put a set of piano-keys on top of the site to function as navigation panel. For now I just have them linked to Google.
Now I have a few questions:
How do I insert text into the divs(keys) nicely, without the divs changing position all the time?
I simply can't work it out.. The key just drops down for some reason.
Am I overlooking a simpler method for positioning all the keys seperately?
I already tried to group them, since C&F are basically the same keys, same goes for Csharp&Fsharp etc.
I decided not to group the keys, so I can easily manage them all seperately.
Any other helpful information is also highly appreciated.
The index file looks as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Thijs Waleson, pianist in Utrecht en omgeving</title>
</head>
<body>
<div class="white-key"ID="C"><p>HOI</p></div>
<div class="black-key"ID="Csharp"></div>
<div class="white-key"ID="D"></div>
<div class="black-key"ID="Dsharp"></div>
<div class="white-key"ID="E"></div>
<div class="white-key"ID="F"></div>
<div class="black-key"ID="Fsharp"></div>
<div class="white-key"ID="G"></div>
<div class="black-key"ID="Gsharp"></div>
<div class="white-key"ID="A"></div>
<div class="black-key"ID="Asharp"></div>
<div class="white-key"ID="B"></div>
<div class="white-key"ID="C"></div>
<div class="black-key"ID="Csharp"></div>
<div class="white-key"ID="D"></div>
<div class="black-key"ID="Dsharp"></div>
<div class="white-key"ID="E"></div>
<div class="footer"></div>
</body>
</html>
And this is what the CSS sheet looks like:
.white-key{
display: inline-block;
border-radius: 5px;
border: 3px solid black;
background: #FFFFFF;
height: 575px;
width: 100px;
margin-left: 0px;
padding: 0px;
z-index: 1;
position: relative;
}
.black-key{
display: inline-block;
border-radius: 5px;
border: 3px solid black;
background-color: #000000;
height:375px;
width: 60px;
vertical-align: top;
margin-left: 0px;
padding: 0px;
z-index: 2;
position: relative;
}
.footer{
background-color: #000000;
height: 3px;
width: auto;
padding: 0px;
margin: 0px;
}
a div:hover{
background-color: grey;
}
/*Positions of the piano keys */
#C {
margin-left: -5px;
}
#Csharp {
margin-left: -50px;
}
#D {
margin-left: -25px;
}
#Dsharp {
margin-left: -25px;
}
#E {
margin-left: -50px;
}
#F {
margin-left: -5px;
}
#Fsharp{
margin-left: -50px;
}
#G{
margin-left: -25px;
}
#Gsharp{
margin-left: -37.5px;
}
#A{
margin-left: -37.5px;
}
#Asharp{
margin-left: -25px;
}
#B{
margin-left: -50px;
}
Having fixed positions for your divs in the form of pixel positions is probably not the best idea. I would suggest you have a look at CSS positioning tutorials like this one for a better idea.
This did the trick, thanks to Stefan Denchev
HTML:
<body>
<div id="menu">
<div class="key white"ID="C">C</div>
<div class="key black"ID="Csharp">C#</div>
<div class="key white"ID="D">D</div>
<div class="key black"ID="Dsharp">D#</div>
<div class="key white nosharp"ID="E">E</div>
<div class="key white"ID="F">F</div>
<div class="key black"ID="Fsharp">F#</div>
<div class="key white"ID="G">G</div>
<div class="key black"ID="Gsharp">G#</div>
<div class="key white"ID="A">A</div>
<div class="key black"ID="Asharp">A#</div>
<div class="key white nosharp"ID="B">B</div>
<div class="key white"ID="C"></div>C
<div class="key black"ID="Csharp">C#</div>
<div class="key white"ID="D">D</div>
<div class="key black"ID="Dsharp">D#</div>
<div class="key white"ID="E">E</div>
<div class="footer"></div>
</div>
</body>
CSS:
.key{
float: left;
border-radius: 5px;
border: 3px solid black;
position: relative;
text-align:center;}
.white{
background: #FFFFFF;
height: 575px;
width: 100px;
z-index: 1;
margin-left: -66px;
left:66px;}
.black{
background-color: #000000;
height:375px;
width: 60px;
z-index: 2;
left:33px;}
.nosharp{
margin-right: 66px;}
body{
width: 1100px;}
.footer{
background-color: #000000;
height: 3px;
width: auto;
padding: 0px;
margin: 0px;}
a div:hover{
background-color: grey;}
Related
I want to have css style like in image. I could not find it in Bootstrap and can not remember what it is called in css style. Can anyone tell me how to style it?
Thanks.
<!DOCTYPE html>
<html>
<body>
<h1>The legend element</h1>
<form action="/action_page.php">
<fieldset style="height:200px;">
<legend>Personalia:</legend>
</fieldset>
</form>
</body>
</html>
This design can be achieved using tag in HTML.
To know more about the Legend tag, see the link below.
https://www.w3schools.com/tags/tag_legend.asp
Example of Legend Tag.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_legend
You can even do it with some Math+CSS.
body {
margin: 0px;
padding: 0px;
}
.outer {
margin: 20px;
height: 100px;
width: 300px;
border: 2px solid gray;
position: relative;
}
.block {
width: max-content;
height: 20px;
padding: 0 5px;
position: absolute;
top: -10px;
background: white;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.center {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="block left">Left Title</div>
</div>
<div class="outer">
<div class="block center">Center Title</div>
</div>
<div class="outer">
<div class="block right">Right Title</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
I am facing problem of scroll-x in css
Please find below html code
<div id=main_user_chat_tab_div class="chat-container_div" style="border:4px solid #F00;">
<div id="chat_box_win" class="chat_box_win" style="position:relative;"></div>
<div id="chat_user_rec" style="width:100%; height:20%; border:3px solid #333;overflow-y:hidden;overflow-x:scroll; display:table-row; position:relative;">
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
<div id="user_chat_image"></div>
</div>
</div>
css code:
.chat-container_div {
width: 20.2%;
height:72%;
margin-right:15%;
margin-top:11%;
float:right;
position:relative;
display:none;
}
#user_chat_image {
position:relative;
display:inline;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
bottom:0px;
float:right; margin-right:2%; width:60px; height:60px; display:block;
}
In below screen I want scroll-x when outer div chat_user_rec will full. But in below screen it is not working, overflow div are adding into next row. Please do you have any idea about it. I think something is happing wrong.
If I'm interpreting your question correctly, I believe you should be using white-space: nowrap; on the parent element to get the desired effect. Take a look here: Codepen
I simplified your example a bit. First, the HTML:
<div id=main_user_chat_tab_div class="chat-container_div" style="border:4px solid #F00;">
<div id="chat_box_win" class="chat_box_win" style="position:relative;"></div>
<div id="chat_user_rec" style="width:auto; height:20%;overflow-y:hidden;overflow-x:scroll; display:block; position:relative; white-space: nowrap; text-align: right;">
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
<div class="user_chat_image"></div>
</div>
</div>
And the CSS:
.chat-container_div {
width: 20.2%;
height: 72%;
margin-right: 15%;
margin-top: 11%;
float: right;
position: relative;
}
.user_chat_image {
position: relative;
display: inline-block;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-right: 2%;
width: 60px;
height: 60px;
}
Note: you're using the ID improperly for user_chat_image, so you should switch it over to a class in both the HTML and the CSS, as I have here.
I would also recommend moving all of the styling into the CSS file and out of the HTML.
So i have 3 box:
Box 1 = red
Box 2 = blue
Box 3 = yellow
Box 1 contains Box 2
Box 2 contains Box 3
Box3 are floated divs and have been cleared using extra div style="clear:both"
I want to have Box 2 as an absolute position to Box 1 like this :
http://i301.photobucket.com/albums/nn42/b1rk0ff/done_zpsd3cd25c0.png
I have tried like this but won't work :
Html :
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Style :
.box1 {
width:300px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
Here's the codepen :
http://codepen.io/anon/pen/Kkirs?editors=110
Anybody could help?
Thank you
what about removing position:relative from .box1, and change position:absolute to .position:relative in .box2
See snipet below, and take a look at the comments in .box2
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Why can't you just set a fixed height for .box1?
.box1 {
width:300px;
background-color: red;
position: relative;
height:250px;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Just replace position: absolute by position: relative.
since box2 is absolute box 1 does not know the height of it's children,
you will need to revert to using both relative elements (or no position definition at all) and solve this problem with margin-left and margin-top
Thank you all, this is what i want.
Hope it helps another newbie like me. :)
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
I have a 9-box with a div structure like so:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBRight"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
</div>
And have the following CSS Rules:
.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}
Everything is in the right place and has the right attributes however, the NBLeft and NBRight elements of the middle row are not taking up any height. Using height:100% does not have any effect.
I have added   and still nothing.
I am usually good with this sort of stuff, but I am stumped. Does anyone have any advice?
your NBleft & NBright are self closing make it like <div></div>
Are self closing divs supported correctly in the HTML Version you're using? You could try using instead?
I can see...
<div class="NBMiddle">SharePoint WebPart goes here<div>
Should be ...
<div class="NBMiddle">SharePoint WebPart goes here</div>
Other thing to try is overflow:auto in the CSS class of the div givin you trouble. As long as the div has content, the CSS will make sure it's displayed.
I'm not 100% sure what you're trying to do, but does the below help? I've added borders to everything so you can see what's happening.
The HTML...
<html>
<head>
<link rel="stylesheet" media="screen" href="bla.css" >
</head>
<body>
<div class="NBWrapper">
<div class="NBrow">
<div class="NBcell">Top Left</div>
<div class="NBcell">Top Middle</div>
<div class="NBcell">Top Right</div>
</div>
<div class="NBrow">
<div class="NBcellFullHeight">Middle Left</div>
<div class="NBcellFullHeight">Middle Middle</div>
<div class="NBcellFullHeight">Middle Right</div>
</div>
<div class="NBrow">
<div class="NBcell">Bottom Left</div>
<div class="NBcell">Bottom Middle</div>
<div class="NBcell">Bottom Right</div>
</div>
</div>
</body>
</html>
Then the CSS...
.NBWrapper {
width: 800px;
margin: auto;
}
.NBcell {
width: 266px;
float: left;
border: 1px solid #000000;
}
.NBrow {
float: left;
width: 804px;
border: 1px solid #000000;
}
.NBcellFullHeight {
width: 266px;
float: left;
height: 500px;
border: 1px solid #000000;
}
What i ended up doing was restructuring the divs:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
<div class="NBRight"> </div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
</div>
Taking away the floats and the margins in the attributes and adding this:
.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}
.NBLeft, .NBRight, .NBMiddle {
display: table-cell;
}
You might ask, why not just use a table? SharePoint 2010 may use less of them, but but its still tables all the way down. I prefer using div structures.