I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
Is there any way that the position of the posted message works for all the inches of the screens?
How could I solve this? Can someone tell me if this has a solution? Thank you.
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>
We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:
Add this inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
And you can define your styles in css with media
#media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
This code will only work if window size is larger then 768px
Related
I'd like to have a text inside of a specific area (just middle of the screen), I made own background image in Paint and i want to have a paragraph (quote) inside of it. But however I am trying, it just doesnt fit in my handmade background.
Here is the code:
<!DOCTYPE html>
<html lang='cs'>
<head>
<style>
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
position: relative;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
</style>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li>Najdu co neznám</li>
<li>Obrázky</li>
<li>Video vtip</li>
<li>Tabulky</li>
</ul>
<p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</body>
</html>
Here's how I want it to look like. Thanks for your help, I am still a beginner!
https://i.stack.imgur.com/MBTjV.png
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
position: relative;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
.mw1200{max-width:600px;margin:0 auto;}
.fw{width:100%;float:left;background:#fff;}
.paragraphbg{background:url(https://i.ibb.co/rZB3jCZ/star.png);}
.paragraphbg p{padding:10px 10%;font-size:28px;text-align:left;}
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li>Najdu co neznám</li>
<li>Obrázky</li>
<li>Video vtip</li>
<li>Tabulky</li>
</ul>
<div class="fw paragraphbg">
<div class="mw1200">
<div class="fw">
<p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</div>
</div>
</div>
Margin way:
You can use CSS property width with viewport-relative unit vw 'so your content will size in function of the screen size) and the CSS property margin with the value auto :
The browser selects a suitable margin to use. For example, in certain
cases this value can be used to center an element.
In short:
.p {
font-size: 20px;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
margin:auto; /* Added --- make margin-left & margin-right even resulting of centering your p */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
width: 50vw;
margin:auto;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li>Najdu co neznám</li>
<li>Obrázky</li>
<li>Video vtip</li>
<li>Tabulky</li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>
Flexbox way:
Or you can use the CSS flexbox layout.
main{
display:flex; /* Added --- making the container a flexbox */
justify-content:center; /* Added --- centering its element(s) */
}
.p {
font-size: 20px;
position: relative;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
main{
display:flex;
justify-content:center;
}
.p {
font-size: 20px;
position: relative;
width: 50vw;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li>Najdu co neznám</li>
<li>Obrázky</li>
<li>Video vtip</li>
<li>Tabulky</li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
I am trying to position some html elements (particularly h1 and p) under a position: fixed div without having to use the <br> element, because if the top div gets resized (in height), then it will overlap the <h1> and <p> element. Since this type of question usually needs code, here it is:
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Home | lobuo</title>
<link type="text/css" rel="stylesheet" href="stylesheet-main.css">
</head>
<body>
<div id="menuBack">
<ul id="menuBar">
<li class="menuItem">Home</li>
<li class="menuItem" class="subMenuHolder">
<a>Projects ▾</a>
<ul class="subMenu">
<li>Minecraft projects</li>
<li>Minecraft mods/plugins</li>
<li>Web apps</li>
</ul>
</li>
</ul>
<a href="https://github.com/lobuo">
<img class="socialIcon" src="img/Octocat.png" />
</a>
<a href="https://www.youtube.com/LobuoDev">
<img class="socialIcon" src="img/YouTube-icon-full_color.png" />
</a>
</div>
<br><br><br><br>
<div>
<h1>Welcome to my website!</h1>
<p>This is my website. I know how to code a little HTML and JavaScript. I do not have many projects here yet, but there will be some soon. The website is currently under construction, so don't be too dissapointed if a link doesnt work, or a page doesnt exist.</p>
<p>If you find something wrong with the website, you can report it as a bug <a>here.</a></p>
</div>
</body>
</html>
and here is the stylesheet-main.css file:
body {
margin: 0px;
}
#menuBack {
height: auto;
width: 100%;
background-color: rgba(9, 52, 100, 0.92);
position: fixed;
}
.menuItem {
color: #e5822e;
display: inline-block;
font-size: 25px;
font-family: verdana, sans-serif;
padding-left: 15px;
padding-right: 15px;
}
.menuItem:hover {
color: #ab6122;
background-color: rgba(48, 95, 147, 0.92);
}
.socialIcon {
height: 30px;
display: inline-block;
vertical-align: middle;
float: right;
padding: 20px;
}
a {
text-decoration: none;
color: #f44d4d;
}
h1 {
font-family: sans-serif;
text-align: center;
}
p {
font-family: "andale mono", "courier new", courier, serif;
padding: 10px;
}
/* MenuBar dropdown menu came from here: http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ */
#menuBar {
float: left;
}
#menuBar > li {
float: left;
}
#menuBar li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menuBar ul {
position: absolute;
list-style: none;
left: 7.1em;
display: none;
}
#menuBar ul li a {
width: auto;
background-color: rgba(9, 52, 100, 0.92);
}
#menuBar ul li a:hover {
background-color: rgba(48, 95, 147, 0.92);
}
#menuBar li:hover ul {
display: block;
}
Thanks in advance :D
Set the margin-top of the div that you need to be pushed down.
So wrap everything that needs to be pushed down in a div with a class name. Like:
<div class="container">
//everything that needs to be pushed down goes here
</div>
Then in your css you can push that whole container down by setting it's margin-top
.container {
margin-top: 100px;
}
Try setting position to sticky instead of fixed and give it a top: 0px;
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
I'm having trouble repositioning the menu on this to a place of my liking. How would I be able to take the entire list and position it on the page where I would want it to be? Sorry for a simple question, I'm not very experienced.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<style>
body {
background-color: lightgrey;
}
.menu {
list-style: none;
font-family: "futura", sans-serif;
}
.menu li {
float: left;
border-left: 2px solid black;
padding-left: 10px;
margin-right: 10px;
}
a {
text-decoration: none;
}
a:link {
color: grey;
}
a:hover {
color: white;
}
a:visited {
color: darkgrey;
}
.menu li:first-child {
border: none;
}
div.title {
float: left;
font-family: "futura", sans-serif;
padding-left: 10px;
margin-right: 10px;
font-size: 36px;
}
</style>
</head>
<body>
<div class="title">Dan's Cupcakes</div>
<ul class="menu">
<li>Home</li>
<li>Cupcakes</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</body>
</html>
Where exactly do you want to place the menu ??
Anyways I 've edited something and provided you with the jsfiddle of it. See if it is the way you want it to appear.
You just have to change the margin values for the menu css.
.menu {
margin: top_position, right_position, bottom_position, left_position;
}
http://jsfiddle.net/DGjG9/
See that link and come to a decision
here's a link to learn about positioning elements with css.
http://www.w3schools.com/css/css_positioning.asp
There's several ways to do it. Depending where you want it to show on the screen, is how to determine which method to use.