How to centering that download button? I tested many times but it's wrong codes.
.col {
width: 100%;
height: auto;
float: left;
}
.download {
width: auto;
font-weight: 600;
font-size: 14px;
color: #000;
border: 2px solid #000;
padding: 17px 37px;
margin-top: 30px;
float: left;
}
<div class="col">
<span class="download">Download</span>
</div>
Just add text-align: center; to .col and replace float:left with display:inline-block; in the button element. jsfiddle
Remove float:left; from .download (because it forces the element to be floated to the left).
Give display:inline-block; (It acts like inline element, it means you can center it by giving text-align:center; to its parent.)
JSFiddle
.col {
width: 100%;
height: auto;
float: left;
text-align: center;
}
.download {
font-weight: 600;
font-size: 14px;
color: #000;
border: 2px solid #000;
padding: 17px 37px;
margin-top: 30px;
display: inline-block;
}
Related
I am making a sidebar for my site and I want the side bar to fill the rest of the screen but also scroll separate to the right of the screen when it overflows with other elements inside. When I use 100% for the height the element only goes to the height of the last element inside of it.
I am trying to get it to fill the rest of the screen as I stated previously but it only goes to not all the way.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
margin-left: 345px;
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
Your leftmain IS taking up 100% of the space available to it, leftmain stops when it reaches . You have leftmain set to flex-direction: column;
when only the .main should have it. Also don't use the tag, it is no longer supported in HTML5 and is display: block; when it should be inline-block.
I would change just to and set display to inline-block and set a width so the leftmain has room to go past it.
I hope this solves your problem.
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
align-content: center;
background-color: #333333;
overflow: scroll;
}
#nameOfCenterDiv {
position: absolute;
left: 300px;
display: inline-block;
}
Give to the sidebar a position fixed so it always stays there wherever you scroll and and a margin-left to your content on the right (the width of the margin-left must be the same of sidebar width)
.leftmain{
position: fixed
}
.main{
margin-left: 345px;
width: 450px //remove this so it's 100%
}
You have to wrap the left sidebar and right panel within the same container.
Using the display: flex on the container, you no longer need to specify a 100% height for the left sidebar since it will automatically fill in the remaining space.
You also need to remove the margin-left rule for the right content so that it lays nicely with the sidebar.
You can optionally set a max-height of 100vh to the sidebar so that it scrolls when its content exceeds the viewport height.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.container {
display: flex;
}
.leftmain {
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div class="container">
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
</div>
I would like to move the h1 text more to the middle of the screen, but the left margin isn't working properly. I've tried increasing and decreasing the size of the margin (both with pixels and percentages) but it has no effect on the page. I've also tried changing the background colour to see if I just forgot to end the previous line or I had the wrong dimensions, and the colour changed (so no errors there). I've also ran both the HTML and the CSS code through their respective validators and there's no errors related to the margin/header.
Here's the HTML code:
<body>
<div class="menu">
<h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
and the CSS code:
img, img.menui {
width: 165px;
height: auto;
margin-left: 0px;
margin-right: 0px;
}
div, div.cake, div.menu {
width: 80%;
height: 60%;
margin-left: 10%;
margin-right: 10%;
margin-top: 7%;
}
h1 {
font-size: 16px;
/*margin-left: 428769875937548px;*/
}
<div class="menu">
<h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
</div>
For more context you can find the website here
div, div.menu {
width: 80%;
height: 60%;
margin-left: 10%;
margin-right: 10%;
margin-top: 7%;
}
h1 {
font-size: 16px;
display: inline-block;
text-align:center;
}
h1 > span {
font-size: 50px;
text-decoration: none;
text-shadow: 4px 4px 1px #ffffff;
color:#f5cec9;
}
<div class="menu">
<h1><span>Welcome!</span><br>What do you want to make?</h1>
</div>
Move your inline CSS into a CSS class/identifier (span)
Set your H1 wrapper tag to "inline-block" to retain margin values
Set your text to centered to centered the contents text.
Just add "display: inline-block;" to h1:
img, img.menui {
width: 165px;
height: auto;
margin-left: 0px;
margin-right: 0px;
}
div, div.cake, div.menu {
width: 80%;
height: 60%;
margin-left: 10%;
margin-right: 10%;
margin-top: 7%;
}
h1 {
font-size: 16px;
display: inline-block;
margin-left: 150px;
}
<div class="menu">
<h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
</div>
margin-left works, you just have to use a realistic value, not billions of pixels like in your (commented) setting:
img,
img.menui {
width: 165px;
height: auto;
margin-left: 0px;
margin-right: 0px;
}
div,
div.cake,
div.menu {
width: 80%;
height: 60%;
margin-left: 10%;
margin-right: 10%;
margin-top: 7%;
}
h1 {
font-size: 16px;
margin-left: 80px;
}
<div class="menu">
<h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
</div>
But if you want to center the text, just use text-align: center on it:
img,
img.menui {
width: 165px;
height: auto;
margin-left: 0px;
margin-right: 0px;
}
div,
div.cake,
div.menu {
width: 80%;
height: 60%;
margin-left: 10%;
margin-right: 10%;
margin-top: 7%;
}
h1 {
font-size: 16px;
text-align: center;
}
<div class="menu">
<h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
</div>
I am trying to change <h1> and <p> text's width and height dynamically. I want to get parents height and width, then use percentage for changing child's. But all my attempts are failed.
Here is my css example code:
#main-holder #category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#main-holder #category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 20%;
text-decoration: none;
}
#main-holder #category1 h1 a {
color: #FFF;
text-decoration: none;
}
#main-holder #category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#main-holder #category1 p {
color: #CCC;
}
in html I am using like this:
<div id="category1">
<h1>MOVIES</h1>
<p>FOR ALL AGES</p>
</div>
I added width and height like below, but it didn't help:
#main-holder #category1 h1 {
height: 50%;
width: 50%;
}
In your code, you dont have #mainholder, but used all the css with that.so none of the styles applied. So I removed that from css and used line-height as 100% along with height. As the parent div have height as 80px, hope this is working fine and this is what you expected.
Updated Demo
Added font-size:2.9vw; for h1
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
background-color:#666;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 100%;
height: 100%;
text-decoration: none;
font-size:2.9vw;
}
#category1 h1 a {
color: #FFF;
text-decoration: none;
}
#category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#category1 p {
color: #CCC;
}
You can use viewport value instead of ems, pxs or pts.
1vw = 1% of viewport width
1vh = 1% of viewport height
Update: Demo
For <p> Height alignment problem, Use background and border for <h1> along with height and line-height like this:
CSS:
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 80px;
height: auto;
text-decoration: none;
font-size:2.9vw;
background-color:#666;
border: thin solid #999;
}
Why dont you use vw for font-size ?
font-size: 5vw;
Documentation
To change the text size you should use font-size:72px; or font-size:3em;.
One of the options it to use CSSStyleSheet JS object.
Check this tutorial: http://davidwalsh.name/add-rules-stylesheets
This answer provides another approach: modify a css rule object with javascript
You can get stylesheet object and manually modify properties:
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.height = '80px';
Sorry for a weird title but I don't really know how to describe it easily.
First I'll link my JSFiddle on it http://jsfiddle.net/b7YTd/
When I added the "float: left" and "float: right" the rows jumped outside the box and the box doesn't expand as the content gets "larger".
My question is, how do I make the box expand after the content like it should do with content inside it if it doesn't have a set height?
In order to post my JSFiddle I need to add some code so my CSS:
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}
.friend_left {
float: left;
width: 250px;
}
.friend_right {
float: right;
width: 250px;
}
.friend img {
width: 50px;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 8px;
}
.friend ul {
list-style-type: none;
margin-top: -15px;
margin-left: 35px;
}
#profile_friends h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
color: rgb(110,110,110);
font-weight: bold;
height: 20px;
}
#profile_friends hr {
margin: 0;
padding: 0;
}
If I understand you correctly use:
#friendlist {
overflow: auto;
}
http://jsfiddle.net/b7YTd/1/
I had this issue, but used overflow:hidden; on the parent div.
http://jsfiddle.net/b7YTd/3/
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
overflow:hidden;
}
I've been having trouble fitting some content into a border. When entering more text, instead of extending to fit vertically it just continues past the border as shown in the attached screenshot:
And my CSS file is as follows:
body {
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
margin: 0px;
padding: 0px;
font-family: Verdana, Tahoma, sans-serif;
}
h1 {
text-align: center;
font-family: Tahoma, Verdana, sans-serif;
font-size: 24pt;
text-shadow: 3px 3px #999999;
font-weight: bold;
}
p {
font-size: 8pt;
}
#content {
width: 800px;
margin: auto;
border: 4px solid gray;
border-radius: 20px;
background-color: #A2B964;
}
#banner {
height: 50px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/bannerbg.png);
background-repeat:repeat;
}
#banner img {
display: block;
margin:auto;
overflow: hidden;
}
#general {
float: right;
width: 250px;
border-radius: 0px 20px 0px 0px;
}
dl {
margin: 10pt;
font-size: 8pt;
font-family: Ariel, sans-serif;
}
dt {
font-weight: bold;
margin-top: 10pt;
}
ul {
list-style-type: none;
}
li {
margin-left:0px;
}
#leftsection {
width: 550px;
overflow:hidden;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
}
#rating {
height: 83px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/rbg.png);
background-repeat: repeat;
overflow: hidden;
border-radius: 20px 0px 0px 0px;
}
#rating img {
border-radius: 20px;
}
.special {
vertical-align: top;
font-size: 48pt;
font-weight: bold;
color: red;
}
.review {
font-size: 8pt;
font-family: Verdana, Tahoma, sans-serif;
font-weight: bold;
background-color: #E8DC9B;
border: 2px solid gray;
border-radius: 10px;
padding-left: 8px;
padding-right: 8px;
}
.personal {
margin-bottom: 20pt;
}
.italic {
font-style: italic;
margin-left: 40px;
}
img.review {
padding-right: 5px;
}
#leftcol {
margin-top: 2%;
margin-left: 2%;
margin-right: 2%;
float: left;
width: 47%;
}
#rightcol {
margin-top: 2%;
margin-right: 2%;
float: right;
width: 47%;
}
#pages {
text-align:center;
margin: 5px;
}
#validated {
position: fixed;
top: 90%;
left:80%;
width: 600px;
}
#validated img {
opacity: 0.5;
}
I've added the HTML code on CSSDeck: http://cssdeck.com/labs/full/bldwwaec
It would be better if you put the HTML codes too.
The right side element is either fixed (or absolute) or float. If it is float, you can simple fix it with adding a <br /> at the end of its parent element and set clear: both; on it. Like this:
<div id="parent">
<div>aaa</div>
<div class="float-right">bbbb</div>
<br style="clear: both;" />
</div>
Now, the div#parent fits with the content and if you set a border on it, your problem would fix.
In absolute case, however, it is not as easy as I explained and recommend revising the use of absolute (or fixed) for that part.
Good luck,
Mohammad Ali Sharpasand
Of course today, float is no longer needed, as the flexbox is available:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Also, grid is amazing:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
you have to put one more div over the id=content and you can call the calss=pagewrapper.
.pagewrapper{
margin: 0 auto;
width: 800px;
}
put float:left in your ID
#content{
float: left;
}
The problem appears to be the floating right column.
#rightcol {
float: right;
}
It would appear you need to clear the float, since floating elements are removed from normal page flow, the parent element will not expand to match the height. A simple solution is to add a clearfix to your parent element or class (in our case ID)
#content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
This should solve your issue, if you have more questions about this I would suggest looking here.