On this simple site, I have made several changes without a hitch. The footer, however, is not cooperating. Nothing I do to the elements within the footer has any effect. At this point, I'm just trying to apply ANY property to the child elements to see if they hold, but to no avail. The only properties that are affecting the child elements are 4 properties applied to the parent div, the footer. These four properties are what's leading the child elements to take their current position:
#footer {
color: #FFFFFF;
font-family: Helvetica,sans-serif;
font-size: 14px;
text-align: center;
}
That's it! There's is nothing else I'm able to do. If I delete those properties, the child elements react accordingly, but there is no property I can apply to the child elements themselves for any change to occur. Does this have anything to do with the badges? What am I not seeing? I use Firebug through Firefox, and even there, when I click on the child elements, Firebug keeps showing me the CSS styles above, meaning the styles I'm writing for the child elements are not even being recognized.
Actually, the problem on your site seems to be a missing closing parenthesis on the footer div. It is causing the next rule to be ignored, which is having a cascading effect.
Fix these errors and you should be seeing the changes you apply:
You have an error in your css which might be causing all this:
#footer{
width: auto;
height:auto;
font-family:Helvetica, sans-serif;
font-size:14px;
color:#FFF;
clear:both;
background-color:#000;
text-align:center;
margin-left:auto;
margin-right:auto;
padding-top:4px;
padding-bottom: 4px;
a:link { /* big no no... take this out of the #footer rules */
color: #FF0;
text-decoration: none;
}
.clearfix{clear:both;}
<div id="footer">
<div style="float:left;width:50%;height:50px">11</div>
<div style="float:left;width:50%;height:50px">111</div>
<div class="clearfix></div>
<div>
Related
<html>
<head>
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div class="textAreaWrapper">
<div class="textAreaWrapperPanel">
<h3 class='textblockheader'>Text Block Settings</h3>
</div>
</div>
</body>
</html>
This is my html code, and below is my css code:
.textAreaWrapper{
border: 1px solid black;
background-color: white;
}
.textAreaWrapperPanel{
background-color : #093459;
color: white;
margin-top:0px;
}
.textblockheader{
font-family : "Helvetica Neue,Helvetica,Arial,sans-serif";
font-size: 16px;
font-weight : normal;
}
I expect there will me no space between textAreaWrapperPanel and textAreaWrapper div elements, but instead, it still have. But if I change textblockheader's margin-top to 0px, its work, can anyone explain why this happen?
That's cause the browser applies to H3 elements (and other elements) a margin by default. DEMO
All you need is to use a CSS Reset
To quickly view an ugly rest just use
*{margin:0; padding:0;} /* will apply to all (*) elements */
http://meyerweb.com/eric/tools/css/reset/
http://yuilibrary.com/yui/docs/cssreset/
Regarding your concerns about **[Collapsing Margins][2]**:
*Why the blue background of the H3's parent DIV does not fully cover the space taken by the `H3` element?*
That's cause you're nesting two block-level elements: h3 into div, where the box models and natural floats are being handled by the browser unless specified like in this three solutions:
Set overflow:auto; to the parent div
Or set your H3 element as display: inline-block;
Use a clearfix for the block-level parent element
jsBin PLAYGROUND
/* // uncomment
*{margin:0;padding:0;}
*/
.textAreaWrapper{
border: 1px solid black;
background-color: white;
}
.textAreaWrapperPanel{
/* overflow:auto; */ /* Uncomment this or */
background-color : #093459;
color: white;
}
.textblockheader{
/* display:inline-block; */ /* ... this one or ...*/
font-family : "Helvetica Neue,Helvetica,Arial,sans-serif";
font-size: 16px;
font-weight : normal;
}
/* add this class to your DIV .textAreaWrapperPanel */
.clearfix:before,
.clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
Micro clearfix resource: http://nicolasgallagher.com/micro-clearfix-hack/
I think your problem is that they are already at 0 space between? The two divs both have the same background color and the inner one has no border. Try making the inner one a different color just to see. I bet it will have no upper margin. It's just your H3 tag that by default has a margin.
EDIT:
Sorry I misread your code. You are correct, they are different colors. Here is the WHY of what's going on. Your H3 element is by default presenting as a BLOCK level element. This causes it to have its own background margin that is set to 10px top and bottom. If you were to tell your H3 class textblockheader to:
display: inline;
It would cause it to remove the background area and margins as well without having to reset anything. As it stands the two divs are touching each other, but the white margin from your textblockheader class is adding extra space that gets the default margin color which is white.
But yeah, the reason it's doing that is the default css styling of H3 elements as block level elements with a default top and bottom margin.
The heading tags have default margins. This link might help:Default Heading Styles
Also resetting the default css values of tags may avoid similar future errors: Reset CSS
I'm trying to cause one element to change when another element is hovered. I know this can be done using the sibling selector (~) but it doesn't seem to be working. I tried to find an alternative to using the sibling selector but only found solutions in javascript which I don't know.
I think the problem may come from the fact that I'm trying to tie multiple elements to one sibling, that is to say, hovering over 3 different divs all change one div in three different ways. I don't think there's a mistake though I could be wrong, the code is here...
CSS
#internalContainer {
width:900px;
height:400px;
}
#sectionLeft {
float:left;
height:400px;
width:300px;
}
.leftInternal {
height:100px;
width:300px;
text-align:right;
}
#titleA {
font-size:11pt;
font-weight: bold;
text-transform: uppercase;
letter-spacing:1px;
position:relative;
top:40%;
transition:.2s
}
#sectionRight {
float:left;
width:568px;
height:400px;
margin-left:32px;
background-color:#f2f2f2;
}
#titleA:hover {
top:45%;
transition:.2s
}
#titleA:hover ~ #sectionRight {
background: #ccc;
}
HTML
<div id="internalContainer">
<div id="sectionLeft">
<div class="leftInternal"><div id="titleA">Title of One</div></div>
<div class="leftInternal"><div id="titleA">Title of Two</div></div>
<div class="leftInternal"><div id="titleA">Title of Three</div></div>
<div class="leftInternal"><div id="titleA">Title of Four</div></div>
</div>
<div id="sectionRight">
</div>
</div>
http://jsfiddle.net/xs7h8/
Currently nothing changes when the links are hovered but they're all set to do the same thing right now. I was going to make subclasses for titleA and connect each to the sectionRight but that didn't work either.
You cannot have duplicate IDs. It simply won't work. That is your problem
Also, the #titleAs are not siblings of #sectionRight so the sibling selector will not work. #sectionRight is an uncle to them and, since there is no parent selector at the moment, there is no way to select it using CSS on hover
You also don't need to repeat the transition in the hover, it is inherited from the default state
This is the closest you can get using your current setup and no javascript, applying the hover to #sectionLeft instead
I have HTML as shown in http://jsfiddle.net/Lijo/LLq3v/1/
I need to put the following two div contents in one line.
Tax Report 1
: Frequency - Weekly
Though I have put a inline display, it is coming in two lines. What is the missing point here?
Making the container div inline will not create the effect you want. That will cause the container itself to act as an inline element see http://www.tizag.com/cssT/inline.php.
The best way to create the effect you want would be to float the inner divs to the left. Provided that they are narrower than the container then they will sit next to each other.
Making divs inline is usually frowned upon in web development however as commented below there are exceptions. This is from a post on a similar topic
<!-- An inline div is a freak of the web & should be beaten until it becomes a span
(at least 9 times out of 10)... -->
<span>foo</span>
<span>bar</span>
<span>baz</span>
<!-- ...answers the original question... -->
found here. Spans exist for a reason.
To float the div's left modify your CSS to be:
.reportTitle
{
font:bold 10pt Arial;
float: left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}
But I would recommend replacing the divs with spans.
Try this fiddle update
.reportTitle
{
font:bold 10pt Arial;
float:left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}
You have made the container an inline element, but the inner elements are still block elements, so they are displayed one below the other. Make the inner elements inline instead.
Demo: http://jsfiddle.net/LLq3v/5/
You can also use display: inline-block if you need to preserve the ability to set width or height. Oh, and I got a nice underline.
http://jsfiddle.net/4yqJ8/
.reportTitle {
display:inline-block;
}
.reportFrequency {
display: inline-block;
}
Use spans instead of divs for .reportTitle and .reportFrequency . http://jsfiddle.net/LLq3v/7/
If you want something to behave like an in-line element then you shouldn't code it as a div, you should instead use an inline element. Inline Elements on MDN . It's true that you can use css to do all the work, but there are reasons not to go that way
You're making life unnecessarily difficult for yourself
You're making the html less semantic, ie: a complete pain to interpret on it's own.
Also, if you want to make sure they always stay on one line, even when the parent container is too narrow, you can give it the value, white-space: nowrap
You have to set display:inline to elements which you want to be displayed inline, not the container element.
In your case, that would be .reportTitle and .reportFrequency, but not .repeaterIdentifier, which is the container element.
.reportTitle
{
font:bold 10pt Arial;
display: inline; /* HERE */
}
.reportFrequency
{
font:normal 10pt Arial;
display: inline; /* HERE */
}
.repeaterIdentifier
{
border-bottom:1px solid #A7A7A6;
margin: 0 0 5px 0;
display: inline /* This can be removed */
}
Live demo: jsFiddle
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.
I have a navigation layer, and I cannot seem to get the links to center within.
This is the stylesheet I am using
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #0066FF;
text-decoration: none;
text-align: center;
}
Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.
Have you tried adding:
text-align: center;
to .Layer1 {}?
I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.
Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.
Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.
to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.
The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.