I have a simple script that displays a html file
function doGet(e) {
return HtmlService.createTemplateFromFile('Final Contract Agreement').evaluate();
}
and the corrasponing html:
<html>
<head>
<style type="text/css">
#content{
padding :0 0;
margin : 0 auto;
width: 800px;
height : 600px;
background: #FFFFFF;
}
body{
background: #dbdad4;
margin : 0;
}
#header{
width: 100%;
height: 82px;
background: #4F2170;
background-repeat:no-repeat;
}
#header h1{
vertical-align:middle;
text-align:right;
color: white;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="header">
<h1>
Contract Form
</h1>
</div>
<div id="content">
<h3>
Hello World!
<?= new Date() ?>
</h3>
</div>
</body>
</html>
it ouputs this:
I have tried setting all combinations of margins/paddings on the elements but nothing is getting rid of the whitespace on top. When i put the same code in a plane jane html file it works just fine.
Im guessing the caja is adding the whitespace to the top, this css removed the whitespace for me:
* {
margin: 0;
}
also for those wondering this is how i got it to take up the whole browser window:
html {
height:100%;
}
body{
height:100%;
}
Related
I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...
When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...
There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...
The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?
HTML
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<br> UNDER CONSTRUCTION!
</p>
</div>
</div>
</body>
CSS
body
{
margin:0;
background-color: seagreen;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
I changed you HTML to enclose your text in a span tag and removed the br:
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.
#content span {
display: block;
margin: 0;
line-height: .8;
}
And removed the position attribute from here:
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
Here is a sample fiddle
UPDATE
It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.
I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}
Here is the updated fiddle
I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you.
CSS
body
{
margin:0;
background-color: seagreen;
}
img{
display: block;
margin: auto;
width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
margin-top: 200px;
padding-top: 10px;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
<div id="container">
<div id="content">
<img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction">
<br>
<p>UNDER CONSTRUCTION!</p>
</div>
</div>
I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE.
*{
border: 0;
margin: 0;
margin: 0;
}
.container {
font-size: 0;
}
.container span {
font-size: 35px;
background: #ff8ea1;
padding: 0;
margin: 0;
}
.container span.no-space {
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
}
<div class="container">
<span>Under Construction</span>
<div style="height: 20px;"></div>
<span class="no-space">Under Construction</span>
</div>
TRY THIS ONE!
For some reason User Agent overrides my css, and puts a margin on top of a website i'm creating. I've searched stackoverflow for answers, but none seem to solve my problem.
Here's an example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="site-wrapper">
<div class="menu">
<div class="nav">
<ul>
<li>EXAMPLE</li>
<li >EXAMPLE</li>
<li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
</ul>
</div>
</div>
<div class="content">
<p id="notice"></p>
<div class="container">
</div>
</div>
</div>
</body>
</html>
CSS:
html,
body {
height:100%;
width:100%;
margin: 0px;
display: block;
}
.site-wrapper {
display: block;
background-color: yellow;
width: 100%;
height: 100%;
}
.nav {
background-color: red;
}
.content {
background-color: blue;
width: 300px;
height: 300px;
}
.menu {
font-weight: 400;
top:50%;
margin-top:-115px;
position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}
ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}
http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview
Paragraphs have a default margin. Eliminate it:
p {
margin:0;
}
jsFiddle example
The problem is caused by margin collapsing - parent elements don't have margin (or padding) so paragraph's margin is used.
You could either remove margin from the paragraph as suggested by j08691 or you can prevent margin collapsing by adding styling to parent containers - see this question: How to disable margin-collapsing?
For example this will help:
.content {
display: inline-block;
}
You can use this code to set margin for all elements
*{
margin:0;
padding:0;
}
So I have a page and I'm trying to put all my links on a seperate HTML file and my plan is to use iFrame to easily add the list of links to every page so to change the links I just have to change one file. My problem is that after using iFrame, other text doesn't show up on my page... Here's my code:
Home page:
<html>
<head><title>HTML Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="navigationLinks"><iframe src="links.html" height="100%" width="10%" seamless></iframe></div>
<div id="mainBody">Hello World</div>
</body>
</html>
CSS Page:
body {
}
.navigationLinks, .navigationLinks a:link {
float:left;
margin-left: 0px;
margin-right: 80%;
font-family: impact;
}
.mainBody {
float:center;
margin-left: 22%;
margin-right: 22%;
color:black;
}
My mainBody text doesn't show up. Any ideas?
Fix:
.mainBody {
float:left;
width:100%;
display:block;
margin-left: 22%;
margin-right: 22%;
color:black;
text-align:center;
}
By the way, there is no float: center
I have a header logo where I'm adding one more image on the left of this logo.
I have used margin-left property and works perfectly across all major browsers except IE6.
As a bit of a research I used position:relativeproperty to fix this negative value.
But no luck. Here's the code I used.
in the <body> section I'm using this
<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>
now the DIV id="logo"
has following css styles
#logo {
background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
The following code works well on my IETester - IE6 mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#logo {
background: url("logo.png") repeat scroll 0 0 #EEE;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-400px;
background:blue;
}
</style>
</head>
<body>
<div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>
P.S. maybe you should use something like this:
<div id="logo-wrapper">
<div id="logo" style="float:right;"></div>
<div style="float:right;"><img src="logo.png" /></div>
</div>
If an element has floating, in this case IE6 doubles the margin value. So if you want to move 400px to left, you should separately for IE6 write margin-left: -200px
#logo{position:relative}
span {position:absolute:left:-400px}
Yes IE6 does not support negative margin-padding values so you can play with positioning with the use left right position negative or positive for getting your desired results......
like this:-
HTML
<div id="logo">
<span>span</span>
</div>
CSS
#logo {
background: red;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-200px;
background:yellow;
width:50px;
height:50px;
}
You can try using position:relative with the left or the right attributes to position it in the right place. Or write specific styles for IE browser.
.header{
position:relative;
left: -200px;
}
I am trying to make the following design for a web site.
The last time I made a web site, everything was usually done using a bunch of tables to align the element on the page. I can understand that this is not how we roll in 2011, where it's all about the css.
I have tried to implement the following design using css, but I have not succeeded.
Can someone point me in the right direction?
The layout is located here: http://imageshack.us/photo/my-images/828/layoutcx.png/
Edit:
I forgot to include the CSS and HTML I had produced so far. (The wife distracted me by shopping orders.) Sorry about that. I never intended for anyone to do my work, although I can tell that someone has already done it. Very helpful indeed, thank you!
My issue was with the "float" attribute/property.
Although I can, by dissection of the various suggestions, tell that there are things like !important that really are important.
You start from largest, end with smallest, go from top, to bottom, as that is way, you should understand HTML.
I won't show you any serious tricks or CSS3 fastest-way-to-do stuff, that you will need to learn by yourself.
With such a tasks, you do, like you would write a document, at first, you write a content, second, you format it.
Begin with basic HTML, sand continue with some basic construction of frames:
<!DOCTYPE HTML>
<html>
<head>
<title>My layout</title>
</head>
<body>
<div id="zones_theSite">
<div id="zones_unb"><p>Universal navgiation bar</p></div>
<div id="zones_body">
<div id="zones_header"><p>Header</p></div>
<div id="zones_fnnb"><p>Flashing news navigation bar</p></div>
<div id="zones_fn"><p>Flashing news</p></div>
<div id="zones_main">
<div id="zones_lsb" class="column"><p>Left side bar</p></div>
<div id="zones_mp" class="column"><p>Main page</p></div>
<div id="zones_rsb" class="column"><p>Right side bar</p></div>
<div class="clearfix"></div>
</div>
<div id="zones_footer"><p>Footer</p></div>
</div>
</div>
</body>
</html>
And now, with formatting. CSS can do anything you like, with divisions (DIV).
<head>
<title>My layout</title>
<style type="text/css">
body {
background-color: #616161;
margin: 0;
}
div { position: relative; }
p {
margin: 0; padding: 3px;
color: #FFF;
text-transform: uppercase;
font-family: Verdana, sans-serif;
font-weight: bold;
}
.clearfix { clear: both; }
#zones_unb {
width: 100%;
background-color: #000;
line-height: 2em;
text-align: center;
}
#zones_body {
width: 1000px;
margin: 0 auto;
background-color: #616161;
}
#zones_body div {
width: 100%;
text-align: center;
}
#zones_header {
height: 100px;
background-color: #E20000;
}
#zones_fnnb {
background-color: #0078FF;
line-height: 2em;
}
#zones_fn {
height: 80px;
background-color: #003ACE;
}
#zones_main p {
color: #000;
}
#zones_main {
width: 984px!important;
padding: 5px;
background-color: #FFF;
border: 3px solid #000;
}
#zones_main .column {
float: left;
}
#zones_lsb, #zones_rsb {
width: 200px!important; height: 300px;
border: 3px solid #000;
padding: 5px;
}
#zones_mp {
width: 552px!important;
}
#zones_footer {
height: 80px;
background-color: #3FCE00;
}
</style>
</head>
Now, just replace last HEAD part with HEAD part in first HTML code and done. Next, you should seperate CSS to single .css file and tune it to your liking. :)
I think no one will give you the complete design, it's some heavy work.
You should have a look a this positioning tutorial to begin with. Then, if you have a precise question, come back here ;)
To create that layout and understand it, you are best off learning CSS as soon as possible rather than asking someone to create it for you. I'd recommend: https://developer.mozilla.org/es/learn/css
As a right direction push - the html would look something like:
<div id="navBar"></div>
<div id="middleBody">
<div id="header"></div>
<div id="newsBar"></div>
<div id="flashingNews"></div>
<div id="mainPage">
<div id="leftBar"></div>
<div id="rightBar"></div>
</div>
<div id="footer"></div>
</div>
And the CSS would be similar to:
#navBar {
width:100%;
height:30px;
}
#middleBody {
margin:0 auto; /* This will centre the middle body */
}
#header {
height:200px;
}
etc...
Such designs are easy to setup using CSS frameworks:
960 Grid System: http://960.gs/
Blueprint Framework: http://www.blueprintcss.org/
Something like this:
<html>
<head></head>
<body>
<div style="width:100%; height: 150px; background:#f00;">Header</div>
<div style="width:100%; height: 20px; background:#00f;"">Nav</div>
<div style="width:100%; height: 150px; background:#005;"">News</div>
<div style="width:100%;">
<div style="width:200px; float:left; height: 300px; border: 1px solid #000;">Left col</div>
<div style="width:200px; float:right; height: 300px;border: 1px solid #000">Right col</div>
Center text
</div>
<div style="width:100%; height: 150px; background:#0f0; clear: both;"">Footer</div>
</body>
</html>
This reproduces your layout reasonably well, with all the css inlined.
it is briefly something like:
HTML:
<div id="universial-navigation"></div>
<div id="wrapper">
<div id="header"></div>
<div id="navigation-bar"></div>
<div id="flashing-news"></div>
<div id="main">
<div id="left-sidebar"></div>
<div id="content"></div>
<div id="right-sidebar"></div>
</div>
<div id="footer"></div>
</div>
CSS:
* { margin:0; padding:0 }
#universial-navigation { width:100%; height:20px }
#wrapper { width:960px; margin:0 auto }
#header { width:960px; height:200px }
#navigation-bar { width:960px; height:40px }
#flashing-news { width:960px; height:150px }
#main { width:960px; height:100px }
#left-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#right-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#content { position:relative; float:left; width:600px; overflow:hidden }
#footer { width:960px; height:100px }