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>
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>
For my site I want to show some products on my site and when you hover over these products, there should be more information. Currently the design for the product card is there. I have 2 questions that I cannot get to work.
I cannot get the shadow box around the whole div when I hover around it. Have tried to add a height to my div but that messed up the layout of my other divs. What am I doing wrong?
Also the border of my div goes through my button (at least the link I have styled as a button). How can I fix this?
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
Vergelijk prijzen
</div>
</div>
</div>
A lot of your issues come from .product-info having position: absolute;. So remove that (both of them, you have position: absolute; in there twice); then you can add some padding-bottom to .product-grid to "fit" your button inside the div.
Check out what I did here:
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
padding-bottom: 15px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
width: 225px;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product</p>
Vergelijk prijzen
</div>
</div>
</div>
You can use shadow settings similar to 0px 0px 10px 4px (i.e. the first and second values are zero, so the shadow will be spread equally on all sides according to the third and fourth values):
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
Vergelijk prijzen
</div>
</div>
</div>
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;
}
I have been trying to get the following code working for hours, without success... Could you please help me to get the projects div centered (even when the page is zoomed in and out)?
Here is my HTML & CSS:
#bottom {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #FFF;}
#secondsection {
background-size: 100% auto;
background-size: cover;
color: #eaeaf0;
margin-left: 7%;
margin-right: 7%;
padding-top: 35px;
padding-bottom: 35px;
position: relative;}
#ss_top {
width: 100%;
height: 100%;}
.ss_title {
display: inline;
float:left;
color: #000000;
font-family: 'Eurostile';
font-size: 35px;
text-transform: uppercase;}
.ss_title2 {
color: #a5a5a5;}
#gallerybutton {
position: relative;
display: inline;
float: right;
margin-right: 0%;
margin-top: 50px;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
#projects {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 2000px;
padding: 175px 0px 0px 0px;}
#pr_one, #pr_two {
display: block;}
.pr_img {
float: left;
display: inline;
margin-right: 1%;
margin-bottom: 1%;}
#viewprofilebutton {
position: relative;
left: -75px;
margin-left: 50%;
margin-top: 3.5%;
margin-bottom: 2.5%;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
<div id="secondsection">
<div id="ss_top">
<p class="ss_title">A selection of projects<br /><span class="ss_title2">I've worked on lately</span></p>
<button type="button" id="gallerybutton">See everything</button>
</div>
<div id="projects">
<div id="pr_one">
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
</div>
<div id="pr_two">
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
</div>
</div>
<button type="button" id="viewprofilebutton">See my work</button>
</div>
Here is a start. Look at the following CSS:
#bottom {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #FFF;}
#secondsection {
background-size: 100% auto;
background-size: cover;
color: #eaeaf0;
margin-left: 7%;
margin-right: 7%;
padding-top: 35px;
padding-bottom: 35px;
position: relative;
border: 1px dotted red;
}
#ss_top {
width: 100%;
height: 100%;
border: 1px dotted blue;
overflow: auto;
}
#ss_top p {
margin: 0;
}
.ss_title {
display: inline-block;
color: #000000;
font-family: 'Eurostile';
font-size: 35px;
text-transform: uppercase;}
.ss_title2 {
color: #a5a5a5;}
#gallerybutton {
position: relative;
display: inline;
float: right;
margin-right: 0%;
margin-top: 50px;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
#projects {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 2000px;
padding: 175px 0px 0px 0px;
border: 1px dashed blue;
}
#pr_one, #pr_two {
display: block;
border: 2px dashed blue;
overflow: auto;
text-align: center;
}
.pr_img {
display: inline-block;
width: 30%;
margin-right: 1%;
margin-bottom: 1%;
}
.pr_img img {
display: inline-block;
width: 100%;
height: auto;
}
#viewprofilebutton {
position: relative;
left: -75px;
margin-left: 50%;
margin-top: 3.5%;
margin-bottom: 2.5%;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
I started by getting rid of the floats in the title, #ss_top, you don't need it.
For the #projects panel with the images, floats are getting you into trouble with
centering.
On #pr_one and #pr_two, add text-align: center and then use display: inline-block on .pr_img, this will center align your images (give/take some margins), and then apply a suitable width of say 30% so that the images auto scale to form a row of three.
The trick now is to apply display: inline-block to the images (.pr_img img) so you
can now use margins to control top/bottom/left/right spacing.
See demo at: http://jsfiddle.net/audetwebdesign/rmtpy6t0/
Note: You still have some polishing up to do but at least this clarifies the issues related to centering and floated elements.
Responsive Design: If you want 2 or 3 images in a row depending on the screen size, you need to learn about media queries. However, because you wrapped 3 images in a div, you are locked into 3 per row, but that may be okay.
If you want to center your pictures, make changes in your css:
.pr_img {
/* float: left; */
display: block;
/* margin-right: 1%; */
/* margin-bottom: 1%; */
margin: 0 auto;
}
Instead of using margin-left:auto and margin-right:auto add margin:auto
#projects {
position: relative;
margin:auto;
max-width: 2000px;
padding: 175px 0px 0px 0px;
}
.pr_img {
display: block;
margin: 0 auto;
}
tell me if it works
edit: yep.
works :)
http://jsfiddle.net/max7j84m/
.pr_img {
text-align: center;
left: 0;
right: 0;
display: block;
margin: 0 auto;
}
It's work for me
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;
}