Padding property started behave strange (in browser) after i had tried to create one-page scrollable website. Basically initially I had my index.html file linked to the styles.css file. I wanted to create one-page site so I googled it and found this site:
https://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/
I followed the instructions: created side-bar and some sections to test it, but without using js script. It all worked perfectly except 1 thing: titles in side bar werent highlithing when scrolling, so I tried to implement the script (I created new file and paste the code from tutorial) and this is the part when it started to behave strangly: basically my title which was located also in side bar got much larger and padding around all page elements appeared. BUT THATS NOT ALL: that padding is still there (even after I deleted all elements and created everything from scratch), which I suppose shoudnt be there.
I want to get rid of it. Here is screenshot from my browser:
here
On the screenshot you can see 1 elemeent with some text. The thing is that I suppose that this text should be in the very top left corner but it is not.
Here are my index.html and styles.css files:
HTML:
<!doctype html>
<html>
<head>
<title>RA TOOLKIT</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-menu">eha</div>
</body>
</html>
CSS:
body{
background-color: red;
display: flex;
flex-direction: row;
padding-top: 0px;}
.nav-menu{
background-color: white;
transition: all .2s;
width: 25vw;
min-height: 100%;
box-sizing: border-box;}
.nav-menu:hover{
background-color: greenyellow;}
Thanks in advance!
(sorry for my english : D )
When I tried to inspect element the page, i found that your html body has an 8px margin that you thought was the padding. I don't really know what caused this, but you can just overwrite the styling by giving a
body {
margin: 0px
}
to your html body. You can always use inspect element to figure out your final style render of your page
Related
Currently when I use the new API for the personalised sign in with google button, when the button is centered vertically in a flex container, when it is loading it flickers up and down.
Example code is shown below, just in html and css for simplicity, however building this in react - same thing happens.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css"
></link>
</head>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="./script.js"></script>
<div
id="g_id_onload"
data-client_id="920029725372-e913v434vc2hfbb6cfkrs7qhiuvuita6.apps.googleusercontent.com"
data-callback="handleCredentialResponse"
></div>
<div class="button-wrapper">
<div class="g_id_signin" data-type="standard"></div>
</div>
</body>
</html>
CSS:
body {
width: 100vw;
height: 100vh;
margin: 0;
}
#font-face {
font-family: "Google Sans";
src: url("https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtzCwM.ttf")
format("truetype");
}
.button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Any help would be greatly appreciated! Sorta wish google would allow for custom buttons or at least an API so that issues like this could be avoided instead of forcing devs to use an <iframe/>, also the new API isn't awesomely documented (I'm assuming because of how new it is but hopefully this will get better with time.
For some reason, Google created two div's to house identical buttons. The second, with the iframe, replaces the first when the proper font loads. The order in which the css is modified by Google means that no matter how you try to correct the flash with pure css, it will still show up in some way. I went so far as to overlay the div's using position:absolute but the margin gets modified on the first div so it still shifts up before vanishing.
The only thing I found to work is hide one of the div's permanently. Either way works, the difference is the button font. This one lets the iframe only version load:
.g_id_signin > div > div:first-child{
display: none;
}
This one loads the initial div only, so the font is off, but it shows up faster and the auth flow still works:
.g_id_signin > div > div:last-child{
display: none;
}
You could probably catch and handle the flicker via javascript, but I'm not spending that much time on this. I'll use this css fix until Google updates their code.
The best solution I found is to wrap the Sign In with Google button in a div and make that div's height 44px i.e. the height of the button. That way as the button loads additional content, it won't move anything up and down.
As the old generic sign in with google button disappears and new sign in with name and email appears, that unloading and loading seems to cause the flicker.
.GoogleLoginButtonContainer {
height: 44px;
width: auto;
}
I am trying to make students report card of my school using Google spreadsheet...and i almost got it done.
i have embedded the spreadsheet in an iframe with the menu bar hidden. However within iframe i can not print any selected area. The printing dialog box pops up. But it does not generate the print preview.
<html>
<head>
<title>IFrame print</title>
<style>
html, body, iframe {height: 100%; width: 100%; margin: 0; padding: 0;
border-style: none; }
</style>
</head>
<body>
<iframe src="https://docs.google.com/spreadsheets/d/14SSAevO4I_Jqi94aUAe1S1tad55gFvnsTcA9UWYp288/edit?usp=sharing&rm=minimal"
</iframe>
</body>
</html>
I have tried to use some JavaScript too..i couldnt make it work
I don't think you can do that. You need to have the content in the body itself to get the print that you want. Try running a funtion in app script returning the information from spreadsheet concatenated with HTML tags and then getting that string in HTML element by running a hava script function. there you go!
I am just beginning to learn HTML and I need help with making an example I found. Here is an image (link):
I know how to make the black background but I have no clue how to add the body in the middle of the page! Extra Information that was provided to me:
Color Code: #fe9;
Font: "Palatino",serif;
Width is 400px;
If anyone could help out even the littlest bit I would appreciate it! It also uses the embedded style!
What you can do is create a div inside your body tag. And then apply css to that div.
Say give it margin: 0 auto;
You need a containing element, usually a div. All your content should be inside this div. Then you can style the div to be a set width and centered, and give the div a background, etc.
Example:
<html>
<head>
<title>Test</title>
<style>
#container {
width: 400px;
margin-left: auto;
margin-right: auto;
background: #fe9;
font-family: "Palatino",serif;
}
</style>
</head>
<body>
<div id="container">
My Content
</div>
</body>
</html>
You should be able to figure out the rest of the content; if you can't, please ask specific questions about what you need to do and give details about what you have already tried.
I am new to the world of coding as well as XHTML. I am in the process of putting a sample page together however having read a number of conflicting articles, it has been suggested that the navigation div block appear above the content div block or vice versa or does it not matter at all? Below is my base code as an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
}
#header {
background-color: orange;
}
#leftnav {
background-color: yellow;
float: left;
}
#rightnav {
background-color: blue;
float: right;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="leftnav">
leftnav
</div>
<div id="rightnav">
rightnav
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
I think you need to elaborate your question. I am unable to figure it out that whether you are concern with SEO or HTML code. Declaring dive any where is not an SEO issue. But for better readability it would be better to make your web page in order.
Like Header at the top. Content in center and footer at the bottom. Left or right navigation menus can be mention before or after content but i suggest that first you should make left nav, then content and then right....
Ideally from an SEO perspective you would want the most important code to appear highest in the HTML source. This is one of the many factors that potentially contribute to how important certain content within a page is perceived to be to search engines.
If it were me I would make the following adjustments to the base template provided
Move the content div above the navigational elements within the source code.
Move the inline CSS code to an external CSS file to help reduce page load times and allow the most important content to move even higher in the source code.
The advice to put the navigation block before the content block is not SEO related, but usability related, in particular for those with screen readers.
The idea is to put a first (invisible to graphical browsers) link to the content of the page so navigation can be bypassed.
Your code is wrong, but here's how you can fix it:
You are using XHTML so you must include XML language information, also you should just include your general language info in your HTML declaration like this:
Microsft's Bing would flag this as an error and inform you to change it appropriately.
Don't use margins, or floats! This is like saying, ok, please move this element a little towards the left and kind of towards the right. Makes no sense! Use absolute positioning and percentages to place elements in your webpages CSS. There are too many different size screens and too many resolutions today. Float and margin are 1995, and I have no idea why people are still using these methods. We also have a society that is now driven by mobile. Keep in mind, one pixel on device will be larger or smaller than one pixel on another device. You can have 5 laptops that are all 17 inches and all have completely different resolutions! Its ok to specify a fixed pixel width and height for images and elements, but you must use percentages when placing those elements otherwise they won't appear in the right position on alternate devices and LCD screens.
If you position an element using absolute positioning with a percentage value such as:
"position: absolute; left: 30%; top: 5%;", then that particular element will be displayed on the screen at 30% from the left, and 5% from the top of the screen regardless of the device rendering it! However, if you position an element with a fixed pixel value say:
"position: absolute; left: 160px; top: 45px;" this will not render correctly on any screen other than the one you are viewing it on. Don't do this! Think about it? You have 2 separate resolutions, one is 1024x768, and the other is, 1366x768, obviously using fixed values will cause serious problems. A percentage is a percentage of the screens or browsers resolution, while a pixel value is a fixed value that hardly changes.
As for your question, you can include your navigation or any other content any way you wish, just be sure to use CSS ID's and corresponding DIV tags that map back to them. Doesn't matter where or when you specify them in your CSS at all. Its entirely up to you. Just stay away from all that "padding" and "margin" stuff, its pointless. With absolute positioning you don't have to float anything, cause everything goes exactly where you want it too from either the top-left, or bottom-right of the screen.
I'm trying to make a page with an image meant for being loaded in an iframe. But there is 4px of space at the bottom of the body tag that I can't seem to get rid of. Heres my simplified source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body, a, head, img
{ margin: 0;
padding: 0;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>
You'll notice if you shrink your window within 4 pixels of the bottom of the image, you'll get a scroll bar. Where the crap is that space coming from?
The image is placed on the base line of the text line that it's in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like g and j. With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers.
One solution is to make the image a block element, that way it's not part of a text line, and doesn't have a space below the base line. The anchor tag is an inline element and it can't have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also:
a, img { display: block; }
(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can't contain inline elements directly. Making the anchor tag a block element using style doesn't help, the structure has to be valid also before the style is applied.)
All browsers come with default styles. Although you are resetting your tags for the page, there's no such tag as image in your CSS.
I suggest using a more global reset stylesheet. I like the one from Eric Meyer. Something as simple as this can help level the playing field between browsers.
replace image with img on your style
Put your "a" and "img" tag inside a div like this
<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>
This is a follow-on to hallie's answer, here is a full working example that has been updated in a number of ways to make it actually XHTML 1.0 Transitional compliant as well as not showing the spaces. Make sure NOT to introduce whitespace after the </a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is the title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
body, a, head, img
{
margin: 0px;
padding: 0px;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div>
</body>
</html>
All Internet browsers have a small bit of padding they add to the pages themselves. One surefire way to get rid of it is to simply nuke all margin and padding from every element.
*
{
margin: 0px;
padding: 0px;
}
Of course, this will remove margin and padding form every element on your pages, so use this with caution, overriding this default whenever you need padding and margin (every other selector has a higher priority than this global one, so it's easy to do).