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>
Related
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
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 working with a school project and try to do remake a webbsite. Is there someone who knows how I can put my EA logo in the top left corner without moving the navigation menu?
Here is the html:
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<title>FIFA 16</title>
<meta charset="utf-8">
</head>
<body>
<div class="nav">
<div class="ealogo"><img src="img/ealogo.png" alt="ealogo"</div>
FIFA
ULTIMATE TEAM™
NYHETER
MER
KÖP
</div>
</body>
</html>
Css:
body {
margin: 0;
padding: 0;
background-color: #fff;
}
.nav {
padding: 15px;
text-align: center;
font-family: lato;
font-size: 20px;
color: white;
background-color: black;
width: 100%;
}
a {
text-decoration: none;
color: white;
margin: 25px;
}
.fifafont {
font-family: fifawelcome;
font-size: 30px;
}
All I did was give the logo an id and float left with a margin to correct the padding so it is in the top left corner.
#ealogo{
margin-left: -25px;
margin-top: -15px;
float: left;
}
JSFiddle
I am trying to create a simple search bar with a background, and an 'Advanced' href on the side. It is rendered correctly in Chrome, Mozilla, however in IE 8 the href appears as a separate block on the line below?
My HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
<script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="../../IMG/FireFox.png" alt="FireFox Logo" title="FireFox Home" />
<span id="usernav">Logout<a href="#">My Profile</span>
</div>
<form action="" method="Search">
<p>
<input type="search" />
<input type="submit" value="Search"/>
Advanced
</p>
</form>
</header>
</body>
</html>
My CSS code:
/* CSS Reset */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
img { border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Main CSS */
header { width: 1000px; margin: 0 auto; clear: both;}
.wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}
#usernav { position: relative; margin-top: 20 px; font-size: 12px;}
#usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none; float: right; padding: 8px;}
#usernav a:hover { text-decoration: underline; }
form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Ok I've solved the problem after playing around with the code a little. It seems that removing the
<span id="usernav">Logout<a href="#">My Profile</span>
from within the div and placing it directly within the header solved the IE bug. Not sure why though, suggestions are welcome. I can't post the image as I don't have more than 10 reputations points :(
New to the site, hope somebody can help me.
I'm designing a new site using CSS3 and HTML5 (not a wizard in either, but getting the basics down), but for some reason, when I view a basic layout in IE9, it will not display colours or formatting properly. The same page will show as requested in Chrome and in Firefox. Could somebody please assist me on this?
I'll post code below, just a very basic layout with testing colours and sample text. Thanks.
`
HTML CODE
<!DOCTYPE html>
<html>
<head>
<link href="css/test.css" rel="stylesheet" media="screen">
<title>Testing123.com</title>
</head>
<body>
<header id="mainHeader"><h1>TestSite123.com</h1>
<nav id="mainNav">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</nav>
</header>
<aside id="lhs">
<h2>Recent1</h2>
<h2>Recent2</h2>
<h2>Recent3</h2>
</aside>
<content id="Content">
<h2>News</h2>
<h2>Misc</h2>
</content>
<aside id="rhs">
Right Side
</aside>
<footer id="mainFooter">Footer</footer>
</body>
</html>
CSS CODE
#charset "utf-8";
/* CSS Document */
/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
margin: 0;
padding: 0;
border: 0;
}
html {
background-color: #ffffff;
}
body {
width: 85%;
margin: 0 auto;
}
header#mainHeader {
background-color: #000000;
height: 140px;
position: relative;
}
header#mainHeader h1 {
color: #ffffff;
font-size: 2em;
font-family: Arial;
}
nav#mainNav ul, ul.menu {
list-style: none;
}
nav#mainNav {
background-color: #e3e6eb;
text-decoration: none;
position: relative;
height: 25px;
margin-top: 54px;
margin-bottom: none;
}
header#mainHeader nav ul {
float: right;
position: relative;
margin-top: 1px;
}
header#mainHeader nav li {
float: right;
font-family: Garamond;
font-size: 1.2em;
padding: 0 12px;
}
aside#lhs{
width: 200px;
background-color: brown;
font-size: 1.8em;
float: left;
}
content#Content {
font-size: 1.6em;
color: red;
background-color: black;
width: 200px;
}
aside#rhs{
background-color: green;
font-size: 1.4em;
float: right;
position: relative;
width: 150px;
}
footer#mainFooter {
clear: both;
background-color: white;
font-size: 1.2em;
}
/*end of css file*/`
First of all, in your CSS, don't overspecify your ID's (or any element for that matter)
so don't write header#mainHeader but just #mainHeader
Second,
Don't give your html element a background-color, set this on the body tag instead.
Third,
What is it exactly that doesn't display correctly?