For some reason when I put on the id "enterGame" position: absolute div disappears. Even if I add to body or html tag position: relative I still can't see the div.
Relevant code:
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue, pink);
margin: 0 auto;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
<script src="script.js"></script>
</body>
As soon as you add position: absolute it disappears because it doesn't have a width. Try setting width: 100vw and it appears again.
when you add absolute you need to give the div some width
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue , pink);
margin: 0 auto;
position:relative;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
width:200px;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
position:absolute;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
</body>
You already have the answers, I'll give you the tool to deal with these kinds of problems, know it and you'll be able to solve the problem better yourself in the future, which is the Dev Tool- Inspector.
Now try inspecting the DOM, as you can see in the image below with the inspector (F12/Ctrl+Shift+I on Windows/Linux), it shows that the element #enterGame has the size of 0x173.846, then => either its height or width is 0.
If you ain't already know which number is width, which is height then you can try inspecting the neighbor h1, you'll see that it's 375x21, so it's obvious that 375 is the width, then => the #endterGame disappears is because it doesn't have the width. Now try adding width: 100% (like the answers above said) will solve the problem.
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue , pink);
margin: 0 auto;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
position: absolute;
width: 100%;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
</body>
Related
I am trying to make a footer for a div element, with a <p> tag, however, depending on the font size, the footer would be outside of the box.
How can I make it align at the bottom of the page, with correct padding?
Here's the HTML & CSS file:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
background-color: #202020;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
}
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
}
.currency {
background-color: #202020;
height: 20%;
color: white;
}
.currency-flag {
float: left;
padding: 5px;
}
.currency-name {
text-align: left;
font-size: 120%;
/* padding-top: 5px; */
}
.currency-value {
text-align: left;
font-size: 50%;
}
<center>
<div id="list">
<div class="currency">
<img class="currency-flag" src="flags/eur.svg"></img>
<p class="currency-name">European Euro</p>
<p class="currency-value">1 R$ = 2 EUR</p>
</div>
</div>
</center>
The problem is that you have set fixed height to .currency insted of height:20% use height:auto;
.currency {
background-color: #202020;
height: auto;
color: white;
}
to fixed it at botton use positions like
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
position: absolute;
bottom: 0;
}
.currency {
background-color: #202020;
height: auto;
color: white;
}
Set the height property to auto instead of fixing it it will make your p tag inside the div
One suggestion :- Do not use the center dag as its outdated instead try to do similar thing with css property of text-align center
I have this simple html with a button:
body {
background-color: White;
font-family: 'Roboto', sans-serif;
width: 800px;
margin: 0 auto;
}
div.container_body_content {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
div.buttondiv {
width: 100%;
height: auto;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.button {
background-color: #93d00f;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: Green;
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<div class="container_body_content">
<div class="buttondiv">
<button class="button"><span style="color:White;font-family:'Roboto';font-weight:bold;">Test Button</span></button>
</div>
</div>
When I comment out width: 800px; margin: 0 auto; for body, the button works fine and changes background-color to green on hover.
However if I have width: 800px; margin: 0 auto; set for body, the button just simply does not work, meaning background-color does not change to green on hover.
What I need is for the button to have this on hover effect even when I reduce the body width.
I can not seem to figure out what is going on, what am I doing wrong? Thank you
Strangely enough in the snippet it works, but when I open it in Safari or Google Chrome, it does not, this is how it looks like on my side:
Mystery solved, I just found a rogue DIV which I had "laid" on top of my div.buttondiv. In the snippet it works, because I attached just a MWE and left out the problematic part of the code.
This is the part of CSS that caused my problem:
#bar-graph tbody tr {
height: 296px;
padding-top: 2px;
}
Thanks everyone for your insights
previously in <HEAD> it was
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
As you can see issue in screenShots that I have attached below.. there was issue of UI break so then I have updated <HEAD> with following code
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=0.9; maximum-scale=0.9; minimum-scale=0.9;" />
But Still issue is there
Web page works well with resolution of 1280 X 800 as you can look at this image
these 3 columns (with black vertical line separated) are the <td>
inside that a container with fixed width in px, and I cant change it to % due to some limitations.
only main container have width : 100%,
(Main container: with full page width behind all page content-with white BG)
I have attached screen shots of issues with screen resolution
On 1024 X 768
As you can see On browser with ratio 1024 X 768
"mobile image" is going beyond White box(Main container)
on 1920 X 1080
Here browser ratio is 1920 X 1080 and main container (White box) is 100% of width but those three columns (<TD>) are not, all three width remains same as previous images and main container is 100%
Update: Code link https://jsfiddle.net/p6x6jsgt/3/
The problem is not your meta viewport tag. After having read all the comments here are a couple solutions to your problem:
A non-optimal solution:
Keep the table layout, change to percentage widths and use text blocks with white-space:nowrap; and <br> hard-coded line breaks with different font sizes depending on device screen size.
- About the layout:
Your .preview-panel has a fixed width in rem. To solve this, make the following changes:
.preview-panel {
background-size:100% auto;
width:100%;
}
Now you will notice layout issues with the other td. That's because you have to set them to percentage widths, for example:
.template-editor {
width:100%;
}
.template-editor td {
width:33%;
}
- About the text blocks:
You said setting widths to percentages would mess up your text blocks. Well, unfortunately there's no magical solution for this and all you can do about it (with your current layout) is to add this to whatever text block you put in there:
.foo {
white-space:nowrap;
}
You would also have to fix your line breaks with <br> like so:
Lorem ipsum dolor sit amet,<br>
consectetur adipiscing elit.<br>
Fusce pulvinar aliquet luctus.
You could make the line breaks responsive if you wanted to, with something like (HTML):
<span class="line-break"></span>
(CSS):
.line-break {
display:block;
}
Then you'd have the opportunity to set different font sizes on your media queries, and you could also hide the purposeful line-breaks with display:none;. This is, in my opinion, a better solution than plain old <br>.
With this, your layout should look better in all devices. That being said, this is still a poor solution and an entirely different approach is necessary, in my opinion.
A better solution:
Use flex or maybe just floated items, but not a table when your layout essentially is not a table. You have three panels, why would you forcefully use a table layout for that? Here's an example with flex:
.container {
display:flex;
align-items:stretch;
justify-content:center;
}
.container__panel {
flex-grow:1;
height:600px;
border:1px solid black;
}
<div class="container">
<div class="container__panel"></div>
<div class="container__panel"></div>
<div class="container__panel"></div>
</div>
Disclaimer: the weird container__panel is BEM notation: http://getbem.com/introduction/
Add
td{
width: 33%;
}
For dividing the columns equally ,
Remove width css from the below class so that it can adjust width according to parent class (i have commented the code which i have removed from css)
#cardListHolder {
padding-top: 0.4375rem;
/*width: 21.5625rem;*/
}
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
/* width: 18.75rem;*/
}
.preview-panel {
background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
height: 26.25rem;
margin: auto;
padding: 3.4375rem 0.8125rem 0;
/* width: 13.3125rem;*/
}
Just try replacing this whole css with your css. I hope this will fix your issue.
*,
*::before,
*::after {
box-sizing: border-box;
}
ul {
list-style: outside none none;
margin: 0;
}
.sectional-content {
background: #f6f6f6;
color: #222;
cursor: auto;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding: 0;
position: relative;
}
.wrapper {
min-height: 100%;
position: relative;
}
.centered-container {
margin-left: auto;
margin-right: auto;
width: 96.6667%;
padding-left: 0.3125rem;
padding-right: 0.3125rem;
position: relative;
}
.tabs-content {
background: #fff none repeat scroll 0 0;
border: 1px solid red;
margin-top: -1px;
padding: 1.5625rem;
margin-bottom: 0;
width: 100%;
}
.divider1 {
height: 18px;
}
.template-editor {
background: #fff none repeat scroll 0 0;
border: 0 none;
margin-bottom: 1.25rem;
table-layout: auto;
}
.template-editor tr {
background: transparent none repeat scroll 0 0 !important;
}
td{
width: 33%;
}
.add-remove-template,
.edit-card {
padding-top: 5px !important;
vertical-align: top;
}
.add-remove-template {
border-left: 0 none;
padding-left: 0 !important;
padding-right: 0 !important;
vertical-align: top;
}
table tr th,
table tr td {
color: #222;
font-size: 0.875rem;
padding: 0.5625rem 0.625rem;
text-align: left;
}
#cardListHolder {
padding-top: 0.4375rem;
}
.preview-template,
.edit-card {
border-left: 2px solid #808285;
padding: 0 1.875rem !important;
vertical-align: top;
}
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
}
.preview-panel {
background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
height: 26.25rem;
margin: auto;
padding: 3.4375rem 0.8125rem 0;
}
I think you want something like this it fits it self in every resolution.
.section {
box-sizing: border-box;
padding: 0 16px;
width: 33%;
float: left;
}
.scroll-container {
height: 360px;
overflow-y: auto;
border-right: 1px solid black;
}
.edit-card {
height: 360px;
border-right: 1px solid black;
}
.preview-panel img {
width: 100%;
max-width: 250px;
}
<div class="content">
<div class="section scroll-container" style="height: 360px">
<ul id="cardListHolder">
<li></li>
</ul>
</div>
<div class="section edit-card">
<p>
edit something
</p>
</div>
<div class="section preview-panel">
<img src="http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png"/>
</div>
</div>
May be over-looking here...
Have you tried using media queries to resolve this?
See if this link is any good.
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en
Of course it would mean alot more coding to get it to work fluently and changes will need to be done.
And have you also used the text-align: center; attribute in your css for the text paragraphs in your columns,rather than "setting it perfectly" to align correctly on all three columns followed of course by removing/setting the white space.
From what i can see, i think this may solve your answer.
Remove the defined width you have given in
#cardListHolder {
padding-top: 0.4375rem;
width: 21.5625rem;
}
and in
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
width: 18.75rem;
}
and use
th,td{
width: 33%;
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
ul {
list-style: outside none none;
margin: 0;
}
.sectional-content{
background: #f6f6f6;
color: #222;
cursor: auto;
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
font-style: normal;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding: 0;
position: relative;
}
.wrapper {
min-height: 100%;
position: relative;
}
.centered-container{
margin-left: auto;
margin-right: auto;
width: 96.6667%;
padding-left: 0.3125rem;
padding-right: 0.3125rem;
position: relative;
}
.tabs-content {
background: #fff none repeat scroll 0 0;
border: 1px solid red;
margin-top: -1px;
padding: 1.5625rem;
margin-bottom: 0;
width: 100%;
}
.divider1{
height: 18px;
}
.template-editor {
background: #fff none repeat scroll 0 0;
border: 0 none;
margin-bottom: 1.25rem;
table-layout: auto;
}
.template-editor tr {
background: transparent none repeat scroll 0 0 !important;
position:relative;
}
.add-remove-template, .edit-card {
padding-top: 5px !important;
vertical-align: top;
}
.add-remove-template {
border-left: 0 none;
padding-left: 0 !important;
padding-right: 0 !important;
vertical-align: top;
}
table tr th, table tr td {
color: #222;
font-size: 0.875rem;
padding: 0.5625rem 0.625rem;
text-align: left;
}
#cardListHolder {
padding-top: 0.4375rem;
}
.preview-template, .edit-card {
border-left: 2px solid #808285;
padding: 0 1.875rem !important;
vertical-align: top;
}
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
}
.preview-panel {
background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
height: 26.25rem;
margin: auto;
padding: 3.4375rem 0.8125rem 0;
width: 13.3125rem;
}
th,td{
width: 33%;
}
</style>
</head>
<body>
<div class="sectional-content">
<div class="wrapper">
<div class="centered-container">
<div class="tabs-content">
<div class="divider1"></div>
<table class="template-editor" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="add-remove-template">
<div class="scroll-container" style="height: 360px">
<ul id="cardListHolder">
<li></li>
</ul>
</div>
</td>
<td class="edit-card">
<div class="inner">
</div>
</td>
<td class="preview-template">
<div class="preview-panel">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
I want an image to be displayed behind some text in an <h1> tag. But when I add the image it replaces the text and pushes the text below it.
Screenshots : Before and After
CSS
body {
background-color: #1a1a1a;
}
header,
h1 {
text-align: center;
font-family: CGF Locust Resistance;
font-size: 50px;
color: lightgray;
-webkit-text-stroke: 1.5px #000;
}
header {
margin: 0;
padding: 0;
height: 100px;
border-bottom: .5px solid #b3b3b3;
}
nav {
position: relative;
top: -5px;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
border-bottom: .5px solid #b3b3b3;
}
nav ul li {
display: inline;
color: #fff;
font-family: CGF Locust Resistance;
font-size: 12.5px;
padding: 20px;
}
.red {
color: red;
}
#omen {
z-index: -1;
}
Set the image as a background-image of header. Is that what you're after?
h1 {
background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
background-size: 400px auto;
}
That's approximately how you would use a background image in this situation. center 100px means horizontally centered and 100px from the top (in relation to the h1 element).
h1 {
position : abosolute;
}
This should do the trick but it is preferable to use ids instead of changeing the h tags everywhere on your side
Put this parameter to the image object in css (example creating custom classes) :
.image{
position: relative;
}
And this one to the text :
.text{
position: absolute;
}
Of course, you have to set this classes to it's respective objects. Hope it helps !
I'm trying to achieve the following page divider:
But, I'm ending up with this:
Obviously the yellow is just to tell me where the tops and bottom are (should be white), and I seem to be getting this unwanted top and bottom margin. I've tried a few methods including display:inline-block, display:inline, margin-top:-2px but lost what I've tried and what I haven't. The span was originally a div but this was one of the many things I changed trying.
This is my last attempt:
<style>
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding: 0 15px;
background: yellow;
font-size: 16px;
color: #333;
}
</style>
<div class="pageDivider"><span class="inner">SHARE</span></div>
Any clues on how to do this the proper way?
I cannot delete my question, so I will share the solution I have just found which works really, really nicely - I hope it helps others.
JSFIDDLE DEMO
h6.pageDivider {
font-family: 'Lato', 'Open Sans', sans-serif;
overflow: hidden;
text-align: center;
margin: 40px 0;
font-weight: 700;
color: #555;
}
h6.pageDivider:before,
h6.pageDivider:after {
background-color: #E9E9E9;
content: "";
display: inline-block;
height: 18px;
position: relative;
vertical-align: middle;
width: 50%;
}
h6.pageDivider:before {
right: 30px;
margin-left: -50%;
}
h6.pageDivider:after {
left: 30px;
margin-right: -50%;
}
<h6 class="pageDivider">HELLO WORLD</h6>
your answer is ....
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding:2.5px 20px !important;
background: yellow;
font-size: 16px;
color: #333;
}
<div class="pageDivider"><span class="inner">SHARE</span></div>