I have searched and searched on this site for a solution to this and tried to apply all results too my simple HTML but none have appeared to work.
I'm sure there is a really easy way to do this because at the moment there isn't really any code as will explain.
I want a simple layout, 3 divs. One Main Page div containing two horizontal divs, I want the two inside divs to contain a picture that will be used as the div backgrounds enclosed in the Main Page div, I can get the backgrounds on but cannot rid the page of the white line, that I'm sure you guys are sick of reading about.
I get the line appearing between "header" and "site" divs. I'm sure this is an easy solution.
I have want to keep the HTML as simple as possible and only plan to have 3 three links that I will put in once the space has gone, as I'm sure I can apply the solution to further divs.
I'm also struggling to upload code, please advise
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
</html>
CSS:
#header{
width:1080px;
margin:0;
height:285;
background: url(header.jpg);
float:left;
}
#site{
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg);
}
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
}
Many Thanks if someone can post a solution.
You're having this problem because of the font size of the container. Set the line-height and font-size of the container to 0 and the space will disappear.
If it still doesn't fix it, remove any whitespace (including tabs or line breaks) from your HTML so the code blocks are touching each other like so:
</div><div>
// ^^ no space here
However, remember that font style declarations will cascade down into the container's children, so be sure to set the font-sizeand line-height back to normal inside them.
I tried entering your code in to jsFiddle, but I wasn't able to reproduce the same results you were seeing (with the white lines). May just be my browser...
However, I think this will help solve your issue. I've found it's always a good idea to include a CSS Reset in your CSS file. This gets rid of all those unwanted spaces, margins, and other things that are a pain to work with later.
Try adding the CSS from this site:
http://meyerweb.com/eric/tools/css/reset/
Or just Google "CSS Reset" and use any of the CSS samples. You would add the CSS to your existing CSS... the reset just makes sure all the margins, padding, etc are set to zero.
Adding to each element in css file
{overflow: hidden;}
works for me.
Like Mr. Brice Said you need to set the smaller line-height as possible to fix the small size to your div of the source code of your page but take care if in the CSS of your general Body the line-height are diferent, like the example:
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545454;
line-height:18px;
}
If your div needs a diferent line-height, and font-size to some speciffic section of website you need to set a class to then, link this:
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
line-height:18px;
}
If you want your line between divs disappear you simply add one line of code in your CSS. This line of code is BORDER I believe that 1 to 3 pixel border would be ok.
#header{border:1px;}
You can change the colour of your border the same way as well:
#header{border-color:#ffffff;}
For example:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
CSS
#header{
border:1px;
width:1080px;
margin:0;
height:285;`enter code here`
background: url(header.jpg);
float:left;}
#site{
border:1px;
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg); }
#mainwrap{
border:1px;
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;}
Related
I've got an assignment for an introductory web design course, and so far it's been real easy, but when the professor introduced div and span tags, I really lost my momentum and have fallen into a slump. I've registered for the course late, and as luck would have it, an assignment on div and span is due tomorrow.
I have been using w3schools extensively thus far, as well as StackOverflow itself, but I can't really find a specific answer to my question, or the answers I find are well beyond my 'skill level'.
I want to emulate a website provided to me; no source code is provided, just an image of what the final product should look like, as well as resources like images, text sizes, etc. Here is the link to the assignment itself.
http://www.cosc.brocku.ca/Offerings/2P89/2P89%20Assign2.pdf
I've gone through the first few bits myself, but the meatier portion of the assignment I'm lost on. I need to make one large div element (I'm assuming), and inside that I need more div elements. I've got to this area:
"Below the main heading is the page's overall content area, with an overall 32% rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centered horizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sized large enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.)"
The image in the link is how it should look, and so far I have everything above the rounded border section with all of the meatier content. Here is what I have thus far:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="http://www.cosc.brocku.ca/Offerings/2P89/Images/rotten.gif"
type="image/x-icon">
<title>Abraham Lincoln: Vampire Hunter - Rancid Tomatoes</title>
<link href="abe.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="banner" style="background: url
(http://www.cosc.brocku.ca/Offerings/2P89/Images/bannerbg.png) repeat-x;width:100%;height:50px;">
<img src="http://www.cosc.brocku.ca/Offerings/2P89/Images/banner.png" alt="">
</div>
<h1>Abraham Lincoln: Vampire Hunter (2012)</h1>
<div class="reviewshell">
<div class="reviewleft">hi</div>
</div>
</body>
</html>
...and style sheet...
.banner {
margin:0px;
text-align:center;
}
.reviewshell {
margin-left:auto;
margin-right:auto;
border:4px solid;
border-radius:20px;
border-color:grey;
width: 800px;
}
.reviewleft {
margin:0px;
text-align:left;
}
.reviewright {
}
.reviewbottom {
}
body {
background-image:url("http://www.cosc.brocku.ca/Offerings/2P89/Images/background.png");
background-attachment:fixed;
font-size:8pt;
font-family:Verdana, Tahoma, sans-serif;
margin:0px;
}
h1 {
text-align:center;
font-size:24pt;
font-family:Tahoma, Verdana, sans-serif;
font-weight:bold;
text-shadow:#999999 3px 3px;
}
blockquote {
}
a:link {
}
a:visited {
}
ul.a {
}
I apologize in advance if homework help is frowned upon here; I've been at this for about 9 hours reading up on HTML and I can't find out how to continue. There is no prof or TA available on Sundays unfortunately.
edit; I should probably mention that I don't need a specific answer, just a link to a page or guide that can help me figure it out. w3schools is indepth, but I still can't get it.
That paragraph basically means "put the main content in a div with the following styles":
width: 800px;
margin-left and margin-right: auto; to center it
border: 4px solid gray
border-radius: 20px;
This is a pretty good Smashing Magazine tutorial: http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
I could write up a guide for you if no one supplies a better answer...
HTH.
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:1px;
margin-top:5px;
margin-bottom:5px;
}
This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?
http://jsfiddle.net/fwqSH/
Problem is your not closing the div:
You cannot close a div as you did there must be a closing tag as so:
<div></div>
and not
<div />
corrected jsfiddle:
http://jsfiddle.net/fwqSH/1/
EDIT
Final solution was to add a min-height of 1px because an empty div sometimes do weird things.
Final CSS:
div.horizontalRule {
min-height: 1px;
clear:both; width:100%;
border-bottom:1px solid #d1d1d1;
height:1px; padding-top:5px;
margin-top:5px;
margin-bottom:5px;
}
The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div /> and thinks that the paragraph after that is part of the div. So change your HTML to something like this:
<div class="horizontalRule" runat="server"></div>
If this is a horizontal rule, I recommend adding your class to the horizontal rule tag, <hr class="horizontalRule" /> This may help resolve some div interaction glitches.
I have tried to create an anchor point using:
<a href="index-xxx.html#reference-name"> and
<a name="reference-name">
The problem is I have a floating margin on the top and the anchor point goes to the top of the page hiding the top of the text.
Is there an easy way to add a relative spacing to the top margin using HTML?
I'm new to this and using a template that I found online. I have since found that it would have been easier to start from fresh instead of using the template but I am too far down the line now, and I don't really understand how to change the CSS to do this. Is there an easier answer?
Many thanks in advance to someone that has been searching for hours for the answer.
EDIT: I've updated based upon the code supplied.
Basically we've got something to the effect of this:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#main {
min-width: 980px;
margin: 0 auto;
font-size: 0.75em;
padding:101px 0 37px 0;
}
header {
height:101px;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
}
footer {
overflow: hidden;
position:absolute;
bottom:0;
left:0;
width:100%/*; height:37px*/;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
color:#9d9d9d;
text-transform:uppercase
}
</style>
</head>
<body>
<div id="main">
<header>...</header>
<section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
<footer>...</footer>
</div>
</body>
</html>
As written the anchors links are buried under the top navigation. It seems the only solid fix is to use 'CSS frames' to get the content to display correctly, which requires the following CSS tweaks:
#main
{
padding:0 0 37px 0;
}
section#content
{
position:fixed;
top:101px;
width:100%;
bottom:37px;
overflow:auto;
}
footer
{
position:fixed;
height:37px;
}
So I've removed the top padding from #main.
Then I made the content and footer fixed position. Because of this the content has to be moved down 101px, hence the top.
I then had to give the footer a height, and then put that same amount as a bottom on the content.
Overflow auto gives us scrollbars, and width of 100% puts those bars in a reasonable place.
Tested on IE 9, Chrome 10, Firefox 4, and Opera 11.
Edit 2: And unfortunately I can't find much online about this particular method. Eric Meyer talks about it in Smashing CSS. It doesn't look like any of the existing resources online test for how anchor links will work with the content, which is pretty unfortunate.
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style>
#boxTop{
margin-bottom:20px;
border:1px solid green;
}
#box1{
float:left;
border:1px solid blue;
}
#box2{
clear:both;
border:1px solid red;
}
</style>
</HEAD>
<BODY>
<div id="boxTop">test</div>
<div id="box1">test</div>
<div id="box2">bottom</div>
</BODY>
</HTML>
check it here
in IE,why has a padding in #box1 and #box2 ? how to fix it?
What you've come across is the IE hasLayout "feature".
Getting #box2 to have layout will fix this issue. If you are concerned with IE7, add min-height: 0; to the style for #box2, like so: http://jsfiddle.net/VTmes/
UPDATE:
There also seems to be a big with the first element on the page having a margin. I tried to remove the margin-bottom and add a margin-top to the box1 and it works. Have a look here: http://jsbin.com/uqide3/6
ORIGINAL ANSWER:
Different browsers have different default margins and paddings. Reset this at the top of your CSS and you should not have these differences.
The simplest but not very efficient reset is:
* { margin:0; padding:0 } /* '*' affects everything (all elements) */
One I've been using recently is:
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,div { margin:0; padding:0 }
Google 'CSS Reset' and you should see many variations, some claiming to be better than others. My take is use the minimum that works for you.
One other approach is to not use one at all, and just set the properties you need as you polish your design. Read this for a deatailed explanation: http://snook.ca/archives/html_and_css/no_css_reset/
float:left
property seems to be problem in IE. Even though we set margin and padding to 0, still rendering is not as expected in IE. Try to use span instead of possible in place of 2nd div and remove float:left property.