What I am trying to do is give a div margin-top: 30px; But it seems to be moving the whole page 30px down, as opposed to only that div. It is like the child div is influencing the parent div?
Any suggestions?
Html:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="BBcolForum.master.cs" Inherits="BBcolForum.BBcolForum" %>
<!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 runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="content">
<form id="form1" runat="server">
<div class="header" style="margin-top:0px;">
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
</body>
</html>
CSS;
body
{
background-image:url('/img/blue_back.png');
background-repeat:repeat-x;
}
#content
{
background-color:White;
width: 800px;
height:900px;
margin: 0 auto 0 auto;
}
.header
{
border-bottom:1px solid #000000;
height:100px;
color:Blue;
}
That's exactly what's happening, yes. A direct-child of an element with margin-top will also push the parent element. As a really easy/quick fix, have you considered using padding instead?
Failing that, you can use overflow: auto on the parent according to this previous discussion on the topic, and this one too.
Try adding padding:0.01px to the container. This will have no visual effect, but it will cause the margin to be applied in the right place.
It's the margin on the <h1>. This always seemed counter intuitive to me. You can fix it by putting overflow: auto; on the container or changing the h1s margin to padding.
You must change
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
to
<h1 style="color:Aqua; padding-top:30px;">Student Forum</h1>
margin applies the space outside the object while padding applies it inside.
Related
for some reason my css just does not want to work at all. The DIV's just don't want to align in the way that i declared them at all. It essentially just wraps around the text, if some text is shown. It doesn't adjust the page at all like a normal css file would.
My css is as show below:
body {
height: 95%;
width:100%;
margin:0 auto;}
#HEADER{
height: 15%;
width: 100%;
border-bottom: 2px solid black;}
#CONTAINER{height:85%;}
#CONTENT{
height:100%;
border-left: 2px solid black;
}
The CSS should control the following divs
<body>
<div id="HEADER">
TITLE HERE
</div>
<div id="CONTAINER">
<div id="MENU">
</div>
<div id="CONTENT">
<asp:ContentPlaceHolder ID="CPH_Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="FOOTER">
</div>
</div>
I've declared my css in the head as shown below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Labo 2</title>
<link href="/CSS/main.css" rel="stylesheet" type="text/css"/>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
I've also tried it with href="~/CSS/main.css" without any luck.
To my knowledge, the external page is not secured in any shape or form, but to make sure i declared the following in web.config to make sure it's accessible
<location path="CSS">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
Can anyone give me some help or some much needed explanations, any JavaScript i call works like a charm, it's only the css that's really edging me off.
Thanks!
Alright, I have figured out the issue
In order for the % values to kick in, i had to the declare the html tag, not just the body tag in the css file.
Everything is perfect now! Thanks for the help guys!
like so:
html,body {
height:100%;
width:95%;
margin:0 auto;
border: 2px solid red;
}
I know this has been asked a thousand (million?) times, but for the life of me I can't figure out why I can't get a div to center on my page. Even with the HTML and CSS stripped down to the bare minimum.
I'd appreciate it if someone could point out what I'm missing here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div#branchSelect { margin: 0 auto; }
</style>
</head>
<body>
<div id="branchSelect">
<h4 class="selectBranch">Select a Branch to View</h4>
<select type="select" id="ddlBranches" class="selectBranch">
<option id="defaultBranchesListItem" value="0">Select a branch...</option>
<option value="1">Atlanta</option>
</select>
</div>
</body>
</html>
Here's a jsFiddle.
divs are automatically set to 100% width.
Just set the width of the div and use the margin: 0 auto; to center it on the page.
div#branchSelect {
width:300px;
margin:0 auto;
}
Your div lacks a width property and so by default its with is 100%, so no matter what you do it gets streatched all the way accross the screen, so just assing a width property to your div and then set the margin as "0 auto" in style as shown by Marcus Recck
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
<pre><code> <!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>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
.back{width: 1000px;height: 1000px;z-index: 1;position: fixed;top: 0px;
left:0px;opacity: 0.5;filter: alpha(opacity=50);background-color: Black;}
#main
{margin: 100px 0 0 100px;width: 500px;position: absolute;background-color: Aqua;}
#div1 {background-color: yellow;z-index:2;position: relative;}
#div2 {background-color: yellowgreen;}
#div3 {position: relative;}
</style>
</head>
<body>
<div id="main">
<div id="div1">
<div>
<input value="0000" />
</div>
</div>
<div id="div2">
<div>
<input value="1111" />
</div>
<div class="back">
</div>
</div>
</div>
<div id="div3">
<input value="222" />
</div>
</body>
Hi all, i need overlap all with div class='back' except div2, but IE7 show div3 too. It should look like popup. Alternative is to clone div2 and append it to body, but i dont like this idea.
There's a z-index bug in IE7 when using relatively positioned elements. There's a non-JS solution you can try (Not easy though because of the makup), but there's also an easy JS solution for that.
You can see a working example in this fiddle.
The jQuery function goes like this:
if (document.all && !window.opera && window.XMLHttpRequest) {
$(function() {
var zIndexNumber = 1000;
$('div,p,li').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}
It checks if you are on IE (You could just call the script using conditional comments), and if so, it loops through the divs setting a lower z-index each loop.
Now your input box is behind .back in IE7.
The following HTML...
<!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></title>
</head>
<body>
<div style="border: 1px solid blue;">
<div style="float: left;">
Expected NPV</div>
</div>
</body>
</html>
...renders a parent DIV with a blue border and a child DIV inside. However, the float:left; directive makes the parent not surround the child with a border (which is what I desire).
Is there a way to make this happen w/out removing the float:left?
I boiled the HTML down to a very simple example to illustrate the basic problem. I realize float:left; is nonsensical in this example, but it is required from the original HTML. I can post that if it would be more helpful.
You can give the parent an overflow to take the child's height into account, like this:
<div style="border: 1px solid blue; overflow: auto;">
<div style="float: left;">
Expected NPV</div>
</div>
You can test it here. For a full explanation, check out the excellent write-up on quirksmode.org. Note that overflow: hidden also works here, you can test that version here.
Use overflow:auto; eg. on the container.
Similar problem : Floating image to the left changes container div's height
I am wondering why the following HTML/CSS renders fine until I put a doctype in:
<body style="margin:0; padding:0; background-color:#eeeeee"></body>
<div id="HeaderContainer" style="background-color:#eeeeee; color:Black; border-bottom:1px solid #cccccc; height:60px; margin:0px"></div>
<div style="width:100%; background-color:White; margin:0px; padding:0px">
<div style="margin:30px; width:840px; margin:10px auto; margin-top:50px; background-color:#cc0000;">
text
</div>
</div>
</div>
</body>
What I want is a header (a grey bar) with a dark grey border at the bottom. Beneath this, I want my content, which goes into a big 100% width div that's white (as the page is grey). The above code looks fine, but if I add this line to the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The margin on the innermost div turns from white to grey, so the page looks wrong.
Can anyone explain why? I am testing this using IE8 but it looks the same in Chrome.
Image description:
Adding a DOCTYPE declaration causes the browser to render the page in [almost] standards mode instead of quirks mode.
you are closing the body tag on line 1 and and then again on the last line.
This is terribly formed XHTML.
The problem you are referring to is actually a webkit issue. When you use a margin on an element, it uses the background from the parent element in the margin space. Instead use padding to get past this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; background-color:#eee">
<div id="HeaderContainer" style="background-color:#eee; color:#000; border-bottom:1px solid #ccc; height:60px; margin:0px"></div>
<div style="width:100%; background-color:#fff; margin:0px; padding:0px">
<div style="width:840px; margin:0 auto; padding-top:10px; background-color:#c00;">
text
<br /><br /><br />
</div>
</div>
</body>
</html>