I am just a beginner in coding with HTML/CSS, and I am having trouble trying to float a specific div. Every time a type: "float:center" it will not work. Any ideas? (The div bellow will have "*" around it.)
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Java Source-Home</title>
<link rel="stylesheet" type="text/css" href="Java-Source-CSS.css">
</head>
<body>
***<div id="buttons">***
Home
Videos
Downloads
Help
Contact
<div id="header">
<h1>Java Source_</h1>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Java-Source-JS.js"></script>
</body>
</html>
CSS Code
body {
background-color: white;
}
#header {
float: right;
background-color: orange;
font-family: Courier;
border-radius: 5px;
margin-right: 30px;
margin-top: 40px;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
#buttons {
background-color: grey;
height: 80px;
width: 1260px;
float: center;
clear: both;
}
a {
text-decoration: none;
color: black;
font-family: Courier;
font-size: 18px;
padding: 5px;
background-color: orange;
margin-left: 30px;
text-align: center;
clear:both;
}
a:hover {
font-size: 20px;
color: red;
}
Keep in mind I'm just a beginner with HTML/CSS.
float: center doesn't exist. Only possible properties are right, left, none, and inherit. If you use right or left, the element will be taken from the normal flow of the web page and placed at either right or left side of its parent element. Text and inline elements will wrap around the floated element.
To know more about float you can have a read on this page: http://css-tricks.com/all-about-floats/
To center your block-level element horizonally you can use margin: 0 auto. The element needs to have a width speciefied, in your case it's 1260px. What auto will do, is that the remaining space right and left of the element is split evenly between margin-right and margin-left.
And here's a little example: http://jsfiddle.net/4yw3M/
You can see, the yellow div is centered horizontally with margin: 0 auto.
There is no such CSS rule as float: center.
You need to use other methods to center such as text-align: center or margin-right: auto.
See this post for help: Align a div to center
Related
My webpage is hosted on github pages. And it works fine when its on a big screen. However, whenever I and my friends open the page on a device or window that's smaller than the webpage, the option to scroll to the left doesn't exist. In contrast, it's available to scroll right(to the image's right end). How can I solve this problem? And what causes this error?
This is the link to my github repo: https: https://github.com/vroomeee/miniblog
And this is the link to my actual webpage: https://vroomeee.github.io/miniblog
I have searched for similar problems on google, but the closest thing I found was:
Can't scroll to the left on the webpage.
However it still remains unanswered.
I tried overflow: auto; and margin: 0 auto; with div, but all of them don't seem to work.
Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<title>In the memory of vroomeee</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div id="container">
<h1>Vroomeee pictures</h1>
<img src="1.JPG" alt="a picture of vroomeee">
<br>
<button>get next photo</button>
<p>부름이 보고 싶다ㅎㅎ</p>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
And here is my css file:
h1{
color: purple;
font-weight: 1;
text-transform: uppercase;
border-top: 5px solid;
font-size: 75px;
margin: 40px;
letter-spacing: 2px;
}
body {
background-color: salmon;
color: purple;
font-family:sans-serif;
font-weight: bold;
}
img {
height: 500px;
border-radius: 0%;
}
button {
margin: 30px auto 0;
padding: 20px 25px;
background-color: salmon;
font-size: 20px;
text-align: center;
border:1px solid #2E1263;
text-transform: uppercase;
text-decoration: none;
outline: none;
letter-spacing: 4px;
color: purple;
}
button:hover {
text-decoration: underline;
transition: 0.4s;
background-color: purple;
color: salmon;
}
#container{
display:flex;
flex-direction: column;
align-items:center;
justify-content: center;
height:100vh;
}
Have you tried adding a min-width of your image's general dimensions to its container or body? Though I'm not sure why you'd want horizontal scrolling at all. Maybe add a max-width:100vw to the image?
I'm trying to make an overlay design, I have a button when clicked, a new overlay div will be displayed on top my main div , how ever I can't seem to figure out why the overlay div I have created is not appearing. I have watch tutorials and search similar situation like mine but I cant understand why it is not showing.
This is my html page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Liu+Jian+Mao+Cao&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="thiscss/randomqoutes.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>RCaT11</h2>
<div class="qoutewrapper">
<h1>Have an Inspirational day!</h1>
<button id="btn">Genererate Qoute</button>
</div>
<div class="overlaycontainer">
</div>
</div>
</body>
<script type="text/javascript" src="javascript/randomqoutes.js"></script>
</html>
this is my css file, I have set the "overlaycontainer" class display to none to that it will not show up first until the button is clicked :
body {
background: linear-gradient(to left, #ED8F20, #EBD626);
margin: 0;
padding: 50px;
}
.container {
display: flex;
}
.qoutewrapper {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
width: 900px;
height: 250px;
margin: 0 auto;
margin-top: 10%;
padding: 10px;
display: flex
}
.qoutewrapper h1 {
white-space: nowrap;
font-weight: 700;
font-size: 70px;
margin: 0 auto;
position: relative;
left: 90px;
margin-top: 50px;
}
h2 {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
font-size: 2em;
position: absolute;
left: 90%;
color: red;
float: right;
}
.container button {
color: rgba(26, 25, 25, 0.897) !important;
text-transform: uppercase;
background: none;
padding: 12px;
border: 2px dotted rgba(26, 25, 25, 0.897) !important;
font-weight: 800;
float: right;
margin-top: 200px;
}
.container button:hover {
color: #EBD626 !important;
background: rgba(26, 25, 25, 0.897);
border-color: none !important;
transition: all 0.4s ease 0s;
display: flex;
}
.overlaycontainer {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
display: none;
}
this is my javascript file, I have written that when button is clicked the display will be set to "flex" to display the "overlaycontainer", however it is not showing up,
document.getElementById('btn').addEventListener('click', function() {
document.querySelector('.overlaycontainer').style.display = "flex";
})
position your .overlaycontainer by adding these CSS lines and it will show up.
position: absolute;
left: 0;
top: 0;
An element must have a height and width to show up, it does not mean we always have to set width and height to elements. What was happening is, you were setting the height of the .overlaycontainer to 100% and it was not taking it and for that its parent must-have fix width to work.
Normally overlay is positioned.
The position property is used to manipulate the location of an element.
The position:absolute is always refer to its parent, which needs to be set as position:relative.
When you change the left or top value the position of the .overlaycontainer changes. if you give position: relative to the parent or any grandparents element of the overlay (in must of the cases you have to), it will change its location on that respect. if any of the element's ancestors has no position: relative which is our case, the element will be relative to the body.
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
Currently making up a browser based game in phaser and trying to add it into the container div tag I've created however phaser seems to be pushing itself to below the container div.
Two screenshots for comparison:
http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609 (This is the container div with my header div currently inside of it which is what I want my phaser game to be doing)
http://gyazo.com/5a7cea7514a9e295355c87933c3d14ac (This is what my phaser game is currently doing above the footer div you can see the container div and also clearly see the phaser game currently residing under the footer div)
This is the code for my HTML page:
<!DOCTYPE html>
<html>
<head>
<title>This is our menu bar!</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<ul id="menu">
<li><span>Home</span></li>
<li><span>Link1</span></li>
<li><span>Link2</span></li>
<li><span>Link3</span></li>
<li><span>Link4</span></li>
</ul>
<div class="container">
<script rel="javascript" type="text/javascript" src="phaser.js"></script>
<script rel="javascript" type="text/javascript" src="game.js"></script>
<div class="header">
Title of game & small talk about about with some a box surrounding this text before another text box surrounding the game below
</div>
<div class="instructions">
</div>
Instructions
</div>
<div id="footer">
Copyright 2013 marc
</div>
</body>
</html>
And this is the code for my CSS
body {
font-family: Century Gothic, Arial;
background-color: #CCCCCC;
margin: 0px auto;
text-align: center;
}
.container {
background-color: #999999;
margin: auto;
width: 1000px;
height: 1000px;
}
.header {
font-size: 22px;
background-color: #999999;
border: 1px dashed #666666;
color: #444444;
width: 800px;
font-size: 14px;
text-align: center;
margin: 10px auto 0px auto;
}
#menu {
float: center;
padding: 0px 10px;
margin: 10px;
border-bottom: 5px solid #6D7AB2;
}
#menu li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li a {
float: center;
color: #000000;
text-decoration: none;
background: url('menuleft.gif') top left no-repeat;
margin: 0px 0px;
padding: 9px 0px 0px 9px;
}
#menu li a span {
background: url('menuright.gif') top right no-repeat;
padding: 9px 25px 6px 15px;
}
#menu li a:hover,
#menu li a.highlight {
background: url('menuleft-hl.gif') top left no-repeat;
color: #ffffff;
}
#menu li a:hover span,
#menu li a.highlight span {
background: url('menuright-hl.gif') top right no-repeat;
}
canvas {
padding: 0px;
margin: auto;
}
#footer {
clear:both;
margin-top: 10px;
border-top: 5px solid #6D7AB2;
padding: 20px 0px;
font-size: 80%;
text-align:center;
}
Anyone able to help show me where I'm going wrong?
Using the examples found on the phaser github (https://github.com/photonstorm/phaser)
in the Html:
<div id="phaser-example"></div>
on the .js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
The fourth parameter on Phaser.Game() is the id of the DOM element in which you would like to insert the element that Phaser creates.
For Phaser3
you can specify parent id in configuration object
const config = {
width: 800, height: 600,
...
parent: 'element-id'
};
new Phaser.Game(config);
checkout docs here:
https://photonstorm.github.io/phaser3-docs/global.html#GameConfig
The 4th parameter to the Phaser.Game constructor is the parent container. If you leave it empty it will inject the canvas into the document body. If you give it a string, it will run a document.getElementById() on that string, and if found inject the canvas into there. If you provide it with an HTMLElement it will skip the ID check and inject the canvas into that element instead.
So in your case specifically I would suggest you create a div with an ID, then pass that ID into the constructor.
More details here: http://gametest.mobi/phaser/docs/Phaser.Game.html
I have a rather crude implementation of corners for (main_bg.gif) within the wrapping global-inner div. Although now this functions with inner divs to represent each corner, I was told its not the best implementation, so if anyone has a cleaner solution, well that would be great!
The bottom corner images utilize: margin-top: -8px;
You can see this inner image (very light blue) with its corners: http://www.davincispainting.com
Also I cant utilize CSS3 unfortunately.
Here is the HTML:
<body>
<div id="global-wrap>
<div id="global-inner">
<div class="topleft">
</div>
<div class="topright">
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<br style="clear: both" />
<div id="bottom-wrap"></div>
<div class="bottomleft">
</div>
<div class="bottomright">
</div>
</div>
</div>
</body>
Here is the relevant CSS:
body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#global-wrap
{
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft
{
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright
{
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft
{
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
width: 9px;
}
#global-inner .bottomright
{
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
width: 9px;
}
How would I implement this Corner for 2 CSS items?
<script type="text/javascript">
$('#global-inner').corner('15px');
</script>
#global-inner
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/
width:536px;
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;
}
Use jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
.rounded {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
Hope that helps :)
You can use the the jQuery Curvy Corners Plugin.
It will use in modern Browsers the CSS3 Version, but with browsers without the css3 border-radius (IE aso) the plugin create the border radius with javascript.