So I've got a picture on the top of my website that I want to cover the top of the website ENTIRELY. But there seems to be a small gap as if it is marginalized, see:
http://i.imgur.com/S3IgEPz.png
HMTL:
<body>
<img id="bordi" src="taka2.png"/>
CSS:
#bordi {
height:100%;
width: 100%;
}
I know it doesn't have a lot of code associated but it works fine apart from that gap.
use this CSS:
body,html{
margin:0;
padding:0;
}
there is 8px margin in browser default you need to remove that.
Related
I have quite an annoying problem, for which I don't seem to be able to find an easy fix. Consider the following HTML:
<html>
<body>
<div id="page">
<!-- Some HTML here -->
<div id="menu"><!-- Some stuff here --></div>
<!-- Some HTML here -->
</div>
</body>
</html>
With the following CSS:
body {
text-align: center;
}
#page {
margin: 0px auto;
max-width: 1200px;
}
#menu {
width: 100%;
padding: 0px 2000px;
margin-left: -2000px;
}
This would give a centered page div, with a menu bar in there. Thing is, whenever the browser width becomes > 1200px, the div will not grow any further, but the menu div must at all times stretch all the way to the window edges. And the problem with this approach now is, that I get a horizontal scrollbar because the menubar is bigger than the screen. So, I am looking for a solution for this. Something that disables the scrollbar from having impact on the horizontal scrollbar would do. Disabling the horizontal scrollbar isn't an option however, since the content must be scrollable on small devices as well...
I am aware that I could fix this by pulling the menu bar outside of the page div, but that is hard, since I am editing a Drupal theme and I want this change to have as little impact as possible.
Thanks in advance for any suggestions!
What you mean is that you want the div to stay 100% width all the way but to have scrolling inside of it? If so then you should have a wider div inside the main div.
Something like this-
<div id="full-width">
<div id="scrolling-div">
</div>
</div>
<style type="text/css">
#full-width {
float:left;
width:100%;
height:500px;
overflow-x:visible;
}
#scrolling-div {
float:left;
width:300%;
height:500px;
}
</style>
I tested this code, it works :)
You can easy fix this by setting your html and body styling like this:
html, body {
overflow-x:hidden;
}
body {
margin: 0;
}
This should do it with the current code you have now.
I'm making a website with the title in a div box at the top of the page. The issue is that when i put a heading in the box it doesn't stay in the box
<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
When you create a HTML file, each browser interpret the elements on its way. For example: some browsers have an extra margin config at an <p> or some different line-height property. Because of that, normally, the developers use a Reset CSS (example: http://meyerweb.com/eric/tools/css/reset/). It reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
In your case, h1 by default have some configs that make it go out of the div box (margin and padding, as I checked). You can solve it using: margin: 0; padding: 0; at <h1> element. My suggestion for future projects: use a Reset CSS and you'll have more control in things like that.
Another suggestion: use a CSS file to organize your own styles. Inline styling isn't a good thing when you've a common thing to modify and have to go file by file to do that. With CSS you only change the file and it reflects at all HTML that uses it.
Well, my CSS fix suggestion is:
HTML:
<div>
<h1>Welcome to a Website </h1>
</div>
CSS:
div {
/* Make title go to entire screen*/
width: 100%;
display: block;
/* You visual config */
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin: 0;
padding: 0;
text-align:center;
}
I used width:100%;display:block instead of width:1000px because I assumed that you want a block that occupies 100% width from screen. Working demo: http://jsfiddle.net/brunoluiz/NyLAD/
Well, good luck with HTML and CSS studies!
You can set the margin of your h1 to 0, also note that you should place the styles in some CSS file or right inside the page (between the <style> tags):
div {
width:1000px;
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin:0;
}
Working demo.
Because you specified a specific height for the box in the style. Try removing the "height:40px;" part.
Now the div style looks like this:
style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;"
Fiddle
It looks like the height of the size of the header is too big for the height you set on your div. Try taking out the height from the div's style, like so:
<div style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
I want to build a page that has an image at the top that reaches the side of the page. Like this link
http://www.workoutmeals.com.au/menu
Every time I try I have a gap at the edges. How do I make a div background reach the side of the page while having another background image in the body.
My Attempt
<body>
<div id='banner'>
Test
</div>
</body>
CSS
body
{
background: url(../images/background.jpg);
margin:0;
padding:0;
}
#banner
{
background: url(../images/top_bg.jpg) no-repeat;
margin:0, padding:0;
width: 100%;
height: 661px;
}
Your CSS reset it wrong. You have a comma between margin:0 and padding:0, which should be a semicolon:
/*margin:0, padding:0;*/
margin:0;
padding:0;
If you fix that, it will work as expected:
http://jsfiddle.net/y36cE/
Advice: don't put two style definitions on the same line, even for small ones like this. It makes your CSS less readable, and it's easier to overlook a small error like this.
Not sure if the title is the real issue, but my horizontally scrolled list of images is not playing nice. I want all the images to bunch up (effectively float) next to one another (which I've managed to achieve using display:inline thus far). But I want them to all be 100% height of the window/body, and it isn't playing nice.
Here's my HTML:
<body>
<div id="content">
<ul id="content-images">
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
</div>
</body>
And the CSS:
html, body{
margin:0px;
border:0px;
padding:0px;
height:100%;
}
#content{
height:100%;
background-color:green;
}
#content-images{
height:100%;
white-space: nowrap;
}
#content-images li{
font-size:0;
display:inline;
height:100%;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
The problem is a small gap of about 2/3px that runs along the bottom of the li items. It is hard to tell if it is part of the body or part of the list items, but either way it is an annoying anomaly.
I'm viewing in Chrome. I've attached a screenshot. Note the bottom white line. To be clear, I'm happy for the images to run off the page on the x-axis, and for the client to scroll horizontally through the images, but I don't want any gaps on the vertical, between the images and the edge of the window.
Update:
I'm unable to replicate the issue in jsFiddle because the fiddle seems to have difficulty with styling the html, body and relatively-sized images. I haven't got the time or pateince to figure out why.
I've decided to go for a hack. A mixture of vertical-align:bottom on the img and an overflow-y:hidden on the html and body. This will make any whitespace after the list items redundant, as the viewable area will be restricted.
You can prevent this using vertical-align: bottom on your image tag, like so:
img {
vertical-align: bottom;
}
Hope this helped.
You're getting thing problem because of display: inline [Reason here]. Alqin is right, float:left will solve the problem, but you also have to remove display:inline. If you want horizontal slider, you can increase width of ul to sum of widths of images and use overflow-x:hidden or overflow-x:auto on its parent div.
PS: Its not a good idea to use height:100% on all elements. It will make your page look weird when the content overflows.
I changed the CSS to following, and also removed properties that I thought were unnecessary:
html, body{
margin:0px;
height:100%;
}
#content{
height:100%; /* a bad idea */
background-color:green; /* add this to body if you want whole body green */
overflow-x: auto;
}
#content-images{
height:100%; /* again, a bad idea*/
width: 3000px; /* sum of widths of images I used to test */
}
#content-images li{
font-size:0;
float: left;
}
#content-images img{
max-height:100%;
height:auto;
max-width:100%;
width:auto;
}
Have you tried removing the margin from the unordered list element?
#content-images{
height:100%;
white-space: nowrap;
margin: 0;
}
Use float left instead of inline:
#content-images li{
float:left;
}
That space is because inline elements have a space after them. Add an margin-bottom:-4px to images. Also give the images display:block. Play will all this, you should be able to fix your problem.
I have 2 DIVs, one containing a map, this one is above the other one. It should take all space available, except for the footer, which is 25px high.
Currently I give the map 95% of the height, and the footer 25px. Problem is when the windows gets really big, the footer becomes enormousness, and when the windows becomes really small, scroll bars kick in.
However, this is not what I want, I want:
#map { height: <window_height - footer_height> }
#footer { height: 25px }
How could I achieve this using only CSS and HTML?
PS. I know there probably are some simple javascript solutions, but for educations sake, I want to know how to do this without javascript.
Have a look at this:
keeping footers at the bottom of the page
All the code is there.
Basically you do this in your HTML:
<html><body>
<div id="container">
<div id="map"></div>
<div id="footer"></div>
</div>
</body></html>
And then in your CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#map {
padding:10px;
padding-bottom:25px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
}
There are other ways to achieve this and similar effects.
Let know if this is what you wanted.
Hope this helps.