I have a very basic web page using the below code.
The title block is allowing scrolling which I do not want.
I'm certain it will be my poor HTML code. Could anyone point out what is wrong causing the scroll?
The code is actually being used inside tasker for android inside a scene web elemen .
<!--full page style--!>
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
</body>
<style type="text/css">
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}
</style>
<h1 class="otto">Enter fuel fill up date</h1>
</head>
</html>
Caution : If you use height: 100%; or width: 100%; (and you should définitely avoid using this one, blocks are automatically taking all the horizontal space they can), don't use padding.
Padding and borders aren't part of specified width and height, so your h1 is actually 100% + 20px height.
Example with width : http://codepen.io/Manumanu/pen/ryhaC
This is why you get the scroll : You use height + padding + margin (h1 has automatic margins), so it's definitely taller than the view.
You should also apply your background to body, it has no sense on h1.
So, your code should be like this :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
background: #03a9f4;
}
.otto {
text-align: center;
font: bold 20px Roboto;
margin: 0;
line-height: 1.5em;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1 class="otto">Enter fuell fill up date</h1>
</body>
</html>
But now this point is set, what were you trying to do ? Viewing your initial code, didn't you try to vertically align your h1 in the view ?
If so, this is how you go for it :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
background: #03a9f4;
text-align: center;
}
.otto {
font: bold 20px Roboto;
margin: 0;
line-height: 1.5em;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
.strut, .otto {
display: inline-block;
vertical-align: middle;
}
.strut {
height: 100%;
}
</style>
</head>
<body>
<div class="strut"></div><!--
--><h1 class="otto">Enter fuell fill up date</h1>
</body>
</html>
Tell me if explanations are needed about this.
I just tidied it up! try this: everything is fine.
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)
}
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
<h1 class="otto">Enter fuel fill up date</h1>
</body>
There are some errors in the HTML that you would want to fix first. The browser will do its best to try to show the page anyway, but it was most likely causing the browser to work in quirks mode, which is basically to try to be compatible with the oldest browser imaginable.
You have a comment with the wrong ending delimiter --!> instead of -->
You have the body element inside the head element
If you fix that you end up with this code:
<html>
<head>
<style type="text/css">
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}
</style>
</head>
<!--full page style-->
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
<h1 class="otto">Enter fuel fill up date</h1>
</body>
</html>
You might want to put the style for the body tag in the style sheet also, but that is just to make the code nicer to work with.
Related
i have a PHP and HTML code that use Google map and i have a form that includes some fields where it gets the user input and return the result connected to the databases.
the problem is that i want to set the position of the form beside the Google map.
i do not know how to do it using CSS.
here how it looks :
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 400px;
width: 800px;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#form {
background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin: auto;
width: 550px;
height: 450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
[![enter image description here][1]][1] code: =====
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX&callback=initMap"></script>
< /head>
<body>
<div id="map">
</div>
</body>
You could use float: left; on your #map or use display: inline-block;
Maybe you should take a look at W3Schools to get the basics of css.
And how you said in the title of the question:
How to set position relative...
Use position: relative;
I suggest you use responsive frameworks such as bootstrap. however here's simple css solution.
.wrapper {
clear: both;https://i.stack.imgur.com/Le3k5.png
display: block;
content: "";
width: 100%;
}
#map {
float: left;
height: 400px;
width:800px;
}
#form {
float: left;
width: calc(100%-800px);
}
Put both elements in a container and define there width so that they fit both next to each other.
<div id="container">
<div id="map"></div>
<div id="form"></div>
</div>
In the css you then go something like this:
#container {
display: flex
}
#map {
width: 60%;
}
#form {
width: 40%;
}
You can easily use flexbox to align two boxes in the same container. Adapt to your needs.
Example
https://jsfiddle.net/L15Lr2a4/
HTML
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
CSS
.container {
display: flex;
width: 100%;
}
.container div {
flex: 1;
}
.left {
background-color: orange;
}
.right {
background-color: tomato;
}
I was going to work with some JSON to fill in content as an exercise, but while putting together my initial HTML I ran into an issue simply trying to have a couple links on either side of the page. I have a main-container div, and inside I have the two links, and another div, which I was going to put the JSON content.
This question has nothing to do with the JSON content to be clear, I just got stuck on the css of trying to position the two tags right. I've got height: 100% for the html, body, main-container, and second div. The closest I've got is floating the two tags to the left and right, then using an overflow: auto on the main-container, but the problem is that when you shrink the page, the a tags overflow the descendant div, and also, regardless of the size, there is a weird bar at the bottom of the page, with a scrollbar.
Here is the jsfiddle:
https://jsfiddle.net/g8qeko98/
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkboxes from JSON</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
</body>
</html>
Here are my styles:
html, body {
height: 90%;
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100%;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 2%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
First of all, you don't need that height of 90% on html and body. I don't see any weird bars on bottom but my guess is you're referring to the result of setting that height.
Second, you just need to set your values a little more carefully to prevent items from overlapping.
html,
body {
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100vh;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 20px 5%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 60px 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
https://jsfiddle.net/eqpbkozr/
I am trying to center an h1 tag, but it doesn't work when I set it's width. When I don't set a specific width it works, but I would like to keep the width at 400. My code is below.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul {
margin: 0;
color: white;
background-color: black;
overflow: hidden;
-webkit-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
}
a {
color: white;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background-color: black;
transition: 1s;
border: solid 1px transparent;
}
li:hover, li:hover a {
background-color: #3f3f3f;
}
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<strong><li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li></strong>
</ul>
</div>
<strong><h1 class="header-text">DARK</h1></strong>
</body>
</html>
I don't think the other elements are the problem, but hey, it's a possibility.
The h1-element is a block-element. This means that the width is 100% by default. By using text-align: center you only center the text inside the element, not the h1 itself.
When you set the width to 400px the text is still centered inside the block, but the element itself no longer has a full-width.
The solution would be to center the element as a whole. This can be done by setting the horizontal margin to auto.
This should work for you:
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
margin: 0 auto;
}
<h1 class="header-text">DARK</h1>
For more information about centering with CSS, check out this guide: https://css-tricks.com/centering-css-complete-guide/
If you're trying to center the entire element, you can use the auto value for the left and right margin on the header:
.header-text {
margin: 0 auto;
}
I'm a beginner at CSS and HTML and can't figure this out. I've tried using max-height, line height and line-clamp Nothing works.
HTML code:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet home.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="div1" style="height: 500px">
<p>Welcome to the FIFA tournament creator</p>
Get Started
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
div
{
}
#div1
{
background-image: url(../Images/div1.png);
min-height: 440px;
font-size: 35px;
font-family: molengo, sans-serif;
font-weight: 600;
font-variant: normal;
font-style: normal;
color: #FFFFFF;
}
.btn {
background: #CCC;
color: #FFF;
display: inline-block;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
font-family: Arial, sans-serif;
padding: 0 3em;
text-decoration: none;
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
height: 50px;
width: 50px;
-webkit-line-clamp: 1;
line-height: 1;
text-align: left;
}
.blue.btn {
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
}
.btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
.btn:active {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(0,0,0,0.3);
}
Your problem is that you are getting the majority of your width from padding. Padding is exactly what it sounds like - internal empty space that is used to frame the element.
This is not to be confused with margin which is empty space around the element.
To fix your problem, you need to get usable width, as defined by the width element. This is currently set to 50px, which is not big enough for your text. In fact, the only reason you even see the entire word "started" is because you don't have the overflow property set.
Simply remove the width:50px from your button or set it to auto and it will work. I also changed your button's padding to maintain the original size. You can also remove the height value and replace it with vertical padding to center your text:
padding: 10px 1em;
height: 50px;
width: 50px;
JSFiddle
Remove width: 50px to make it works. Your button's width is to short.
Demo http://jsfiddle.net/MgvPB/
I want to have a div that grows when you add more content in it, has at least the height of the viewport and has a header and a footer sticking to the top and bottom. I came up with the following which works fine in IE7 but doesn't work in ff3.5.
This is the HTML (add repeated 'Lots of text' for main_body to grow out of the viewport):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Testing 123</title>
<link rel="stylesheet" href="css/testing.css">
</head>
<body>
<div id="main_body">
<div id="header"></div>
<div id="content">
Lots of text<br>
</div>
<div id="footer"></div>
</div>
</body>
<html>
This is the css:
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
z-index: 10;
font-family: Arial;
font-size: 20px;
text-decoration: none;
text-align: left;
}
html, body {
height: 100%;
background-color: rgb(255, 255, 255);
}
#main_body {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 20px 0px 20px;
}
#header {
position: absolute;
top: 20px;
left: 0px;
height: 50px;
width: 100%;
background-color: rgb(40, 40, 40);
}
#content {
margin: 80px 10px 50px 10px;
}
#footer {
position: absolute;
bottom: 20px;
left: 0px;
height: 20px;
width: 100%;
background-color: rgb(40, 40, 40);
}
I think this should work according to specs. And it does in IE but not in ff3.5. Pleae help.
EDIT:
I found out (thanks to Jeepstone) that it works fine when I change margin to padding in #content.
100% height is not straight forward. You need to do something like http://www.xs4all.nl/~peterned/examples/csslayout1.html.
Incidentally, where you are resetting *, you should look at Eric Meyers CSS Reset http://meyerweb.com/eric/tools/css/reset/ as resetting everything can cause problems.
In fact it doesn't work for me in IE8, FF3.5 and Webkit browsers and Opera.
I can't recall the actual reason but if you add a something e.g. after the "main_body" div, it works.
<div id="main_body">
It works for me in FF 3.5.7.
You can try to set the positioning from relative to static as well, which might solve it.
Let me know!