Okay, I'm not entirely sure how to explain this.. but I will, best that I can.
Okay, So I have this Website that I am working on, and uhh. It over-scrolls.
It's extremely annoying, considering there is nothing there for it to scroll.
here, maybe this will better explain it.
I just want to find out how to lock the scroll bar in the MAIN WINDOW.
Not the text-box. I'd greatly appreciate it if you could somehow help me out.
use your browser's developer tool to inspect the DOM.
there's a huge center element below
and also, right click->view source:
your code starts with:
<HTML><HEAD><TITLE>Q u e b e c.-</TITLE>
<style type="text/css"> body { direction:rtl; } </style></HEAD>
<BODY>
<body><html>.... your html code
increase the size of the HEIGHT: 300px; to 400px; of the div.... or whatever can accomodate the text.
You have three different body elements. Change your first five lines of code to this:
<html>
<head><title>Q u e b e c.-</title>
<style type="text/css"> body { direction:rtl; } </style>
</head>
<body bgcolor="#969EAF">
// your content here
As for your actual issue, you can just set the body's overflow to hidden:
body {
direction:rtl;
overflow:hidden;
}
It always helps to pass your code through a validator. It spots all the issues and makes it easier for you to fix them. Looking at your source code right now, there is A LOT you can do to improve it.
Related
here's a common thing we do all the time: export from Google docs as 'html' but the end result is a mass of CSS definitions that have a fixed width and is not centered.
I've tried several common HTML fixes and nothing seems to work such as
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 8em
}
...
<P class="blocktext">
even the good old fashioned table does nothing
<table><tr><td align='center'>
and
<table align='center'><tr><td>
For some reason, everything still seems to have the same left-justified text when exported from google doc.
What I'm looking for is CSS code that will perhaps make it more !important than the rest of the CSS so that my document can at least be in the middle of the page.
The actual body content of the Google Doc starts like this:
<body class="c29" >
<p class="c14"><span class="c8">
I do not want to go into the class definitions because there are hundreds of them. What we want is a snippet of code that simply aligns the whole thing in the horizontal middle of the screen.
Ideas?
Place this BEFORE the (or whatever number it happens to be) and your Google Doc export will be perfectly centered. Thanks to Junaid on my dev team for figuring this out!
<style>
body{
margin:0 auto;
}
</style>
I'm new to CSS (started looking at it yesterday!) so this is probably a very simple problem and hopefully someone will be able to help.
I can't seem to get any text to appear in the margin boxes of a print-formatted page.
Below is a very basic HTML snippet that should put "There should be something here!" in the top-left margin box and "This is the body of the page..." in the main page area.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
#page {
#top-left{
content: "There should be something here!";
}
size: A4 portrait;
margin: 50;
}
</STYLE>
</HEAD>
<BODY>
<P>This is the body of the page...
</BODY>
</HTML>
The body text appears but the margin text does not.
My ultimate aim is to create automated test reports so I need to have identical headers and footers for multiple pages and will fill the main page area with the test data.
Thanks in advance,
Pete.
#top-left is not supported from all engines.
See the anser on a simulare questions: CSS Paged Media Contents Issue
The generic recommendation for you would be to go through some html and css tutorials, css tricks (some methods and technics might be deprecated) or better to use official references alike MDN or official W3C.
If you find this extremely tricky for you, and you still feel the need, you may use HTML editors with WYSIWYG components, they will simplify the start for you.
I'm sorry I cannot show you the code, it is currently on my localhost.
I am pretty sure I have correctly typed the code because Netbeans doesn't show any errors. I am making my parents website for their charity, Enough to Spare. When I load the webpage though, there is a white line on all sides (although you can't see the top line because that div is white)
Here is a screenshot.
Anyone have any suggestions?
I would recommend you use a reset.css file before your own.css, so you start with a blank slate.
You could always add -
html { width:100%; height:100%; margin:0 padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
http://www.cssreset.com/ - This is where I look to get my reset.css file
Thank you to Dan Ovidiu Boncut for reminding me to put in margin:0; and padding:0;!
Ninja edit: Have you tried using the Chrome Developer Tools? You can play with the css using that. Right click on an element and click on inspect, there you can add new css styles and edit your current ones. It is a brilliant way to find solutions to your css issues... it also shows you what line in your css file you're at, so when you come to make the changes in file you know where to look straight away! :)
In the CSS, try changing the padding of the container <div> to 0, because anything inside a <div> is also inside whatever padding it has, resulting in space between the padding and the border. Also try changing the margin to 0, because having a margin will result in space between the border and its container.
If you don't have a container <div>, or this didn't fix it, try setting the padding of the <body> tag to 0, because it's the outer-most container and might have default padding.
I also think there might be alternative ways to set background contents to ignore padding. Unfortunately, it's been a little while since I've worked in HTML and CSS, and I don't currently have time to experiment with that. But see what you can do with the above suggestions.
The fact that NetBeans doesn't show errors doesn't mean your presentation is the way you want it to be.
Check your containing divs. Check for any margins and/or paddings that could cause spacing. Borders as well.
If all fails use a CSS reset and check again.
You need to copy and paste the html and css involving your page elements, otherwise no one will be able to help you. Having your code on localhost has nothing to do with that.
The only thing that solved this problem for me was adding
body {overflow-x: hidden;}
to my CSS file. Once this works, I guess you can remove:
html { width:100%; height:100%; margin:0px padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
And also: quick tip for beginners: always use Command + Shift + R for a hard reload instead of a normal Command + R while testing solutions.
I am new to css and web design so please be gentle ;-)
I was wondering if it is possible to define the background of a page (i.e. what color the screen is) without referring to the tag. So not doing the typical:
body { background-color: #fff; }
I need to do this since I am writing css to stylize our login page, but only have access to the template html to be inserted into the page body. So my html looks something like this (very simplified):
<div id="loginpage">
<div id="title"/>
<div id="content"/>
</div>
I couldn't find any answers online since this seems to be an unusual way of doing it.
So: Is this possible, if yes - how?
How about:
<div style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #999;"> </div>
(put it above all your other html, and maybe use z-index: 1; if necessary)
You can use the :root selector if you don't mind about losing IE6-8 support.
But have you tried targeting body or html, in spite of the fact that they're not in the code? They still get inserted into the DOM.
In my opinion you need to discuss this with your team members and a superior. If you find a work around you may come to work tomorrow and find that someone has added
body {
background-color: #not-white !important;
}
after your code and your next question is how to override !important in css.
On a side note, whoever made the restriction of not giving you access to css/main template should really not do that. If you continue working like that you'd end up with a lot of workarounds that will likely bite you.
Regardless of the restiction you could add a style tag like so:
<style type="text/css">
body {background-color:#fff;}
</style>
which would take priority over the original body rule (assuming the body flow is not tampered with). This would be safer than setting background colour for * which would have unexpected side-effects. You may also want to set it through the shorthand background:#fff; which will reset any background image etc. previosly applied.
Update
I've just seen your comment
I did do that first (just target body) , but was friendly reminded by
my team members to only style elements that are actually on the page I
am working on... (which is not the case for body).
Assuming it's a valid argument and not some sort of petty tyranny going on, maybe it could be appropriate setting the background on the loginpage element? You could reference elements by ID like so:
<style type="text/css">
#loginpage {background-color:#fff;}
</style>
I have a problem with my site.I cant make the table appears on the img. It appears down of the image or up of the image. I need some help with the codes. Actually i dont want the img to reapet and to fit in users window everytime. The code to insert the img is this
<body oncontextmenu="return false;" background="bg_body.jpg">
And the code that a actually helped me but didnt solved the problem 100% because table didnt appears with img is this
<style> <!-- body { margin: 0px; } --> </style>
<img src='whatever' style='width: 100%; height: 100%;' />
if you want a background image to fit the size of the browser (which i'm guessing at, but if you have a 100% height and width on your image, that seems what you're after), you could do something like this:
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
.backgroundlayer { position:absolute;top:0;left:0;z-index:1; }
.toplayer { position:absolute;top:0;left:0;z-index:2; }
</style>
and then in the body of your code...
<body>
<img src="someimage.png" style="height:100%;width:100%;" class="backgroundlayer" />
<div class="toplayer">
my content above the image...it doesn't have to be a div...use a table if you want
</div>
</body>
Consider using CSS background properties.
HTML (something like this, un-tested):
<body ... style="background-image:url('bg_body.jpg'); background-repeat: no-repeat;">
If you want your background image to "resize" to the browser, you will have to hack it to work. One common way is probably to use two div tags; the first one will contain the image at 100% size, with absolute positioning. The second one contains your actual body content, with a higher z-value. It is a lot more work than you might think.
For detailed discussion on this, see this thread: http://www.htmlcodetutorial.com/help/ftopic4503.html
There is a couple things here that don't make too much sense:
"oncontextmenu="return false;" are you trying to run some sort of javascript? If so, you need to call a function before the "return false", like so:
<body onload="someFunction() return false;">
Also, I don't think you can set a background for an element the way you did it, it would be more like this:
<table style="background:path/to/my/image/...">
I'd love to help some more, but please explain yourself a little better.
ok, I'd suggest you do something like this:
Whether it is on an external style sheet, or embedded inside the head tags, you can set the image size with some simple CSS, like so:
<style type="text/css">
body{
background-image:url(../path/to/image);
background-repeat:no-repeat;
height:100%;
width:100%;
}
</style>
Try this to see if it works, I'll help you more if it doesn't.