HTML Error w/ Document Formatting - html

I'm typing up a document for a nonprofit I'm involved in, and I'm currently working on the headers at the very top of the first page.
It's supposed to be two headers on the same line, one left-aligned and the other right-aligned, and both 13px bold text. It's also supposed to be directly above the title of the document, which is centred in <h1> text style.
Everything is going swimmingly except for the fact that the headers are both left-aligned, and I cannot for the life of me figure out what I'm doing wrong. I know it's not my browser because both StackEdit and WordPress fail to recognise it. And I asked 2 friends to take a look at it, and they can't figure out what's wrong either.
I recognise I probably screwed something up since I'm still learning HTML (I also haven't learned CSS yet), but it has thus far escaped me.
This is what I have:
<span style="text-align:left; font-size:13px"><b>Project Name</b></span>
<span style="text-align:right; font-size:13px"><b>Branch Name, Org
Name</b></span>
<div style=text-align:center><h1>Document Name 1-PubDate</h1></div>

Is this what you are trying to do? Use float css property
<span style="float:left; font-size:13px"><b>Project Name</b></span>
<span style="float:right; font-size:13px"><b>Branch Name, Org Name</b></span>
<div style="text-align:center;clear:both"><h1>Document Name 1-PubDate</h1></div>

Try to use div instead of span like in the following example:
<div style="float:left; text-align:left; font-size:13px; display:inline-block;"><b>Project Name</b></div>
<div style="float:right; text-align:right; font-size:13px; display:inline-block;"><b>Branch Name, Org
Name</b></div>
<div style="clear:both;"></div>
<div style="text-align:center;"><h1>Document Name 1-PubDate</h1></div>
Hope this may help. Best regards,

Because <span> defaults to display:inline, which means it will only grows as wide as its content's width. Try display:inline-block. Also use float to eliminate the white space between them:
span.header
{
display:inline-block;
width:50%;
font-size:13px;
font-weight:bold;
}
span.header.left
{
float:left;
text-align:left;
}
span.header.right
{
float:right;
text-align:right;
}
div.document
{
clear:both;
}
<span class="header left">Project Name</span>
<span class="header right">Branch Name, Org Name</span>
<div class="document"><h1>Document Name 1-PubDate</h1></div>

You are aligning the text of inline elements rather than aligning the elements themselves. If you inspect and look at the spans they are only as large as the text inside them. You can set the width's if you set them to display: inline-block and then the width to 50% and align the text however you want: http://plnkr.co/edit/hQKymbtYp5iBealcEkr3
<span style="display: inline-block; width: 50%; text-align:left; font-size:13px">
<b>Project Name</b>
</span>
<span style="display: inline-block; width: 49%; text-align:right; font-size:13px">
<b>Branch Name, Org Name</b>
</span>
<div style=text-align:center>
<h1>Document Name 1-PubDate</h1>
</div>

I'm going to change things up a bit and make it a bit more semantic (i.e. meaningful)
h1 {text-align:center; /*Center the H1 text*/
clear:both; /*Remove the affects of loats*/}
.preHeader {font-size:13px; font-weight:bold;} /*Set font size and bold pre-head elements*/
.project, .org {width:50%} /*Set common details*/
.project {float:left; } /*Set the project elemetn to the left*/
.org {float:right; text-align:right; } /*Text align the Right side elelment and set it to the right*/
<!-- A Container for your project and organisation elelments -->
<!-- You don't actually need the container, but it seperates it nicely -->
<div class="preHeader">
<div class="project">Project Name</div>
<div class="org">Branch Name, Org Name</div>
</div>
<h1>Title</h1><!-- Already is the width of its parent so don't need to wrap it -->
Learn more about how different elements display. You have block level elements, inline and (inline block) elements, and replaced elements (images and form elements).
Read more about floats here: https://developer.mozilla.org/en-US/docs/Web/CSS/float
And to see a discussion of the merits of floats (and their drawbacks) and the inline-block alternative see: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, get to know some of the handy tools. Pressing f12 in Chrome and Internet Explorer give you the developemt tools for those browsers enabling you to inspect element on a web page and see what styles are affecting it and how they are affecting it as well as giving you the ability to experiment with the styles in place. Firebug for Firefox provides the same functionality.

Related

why are my divs not stacking correctly?

I am working on a site and for some reason, my Divs are acting very strangely.
link
Im not sure why this is happening.
HTML
<div class="row" id="information">
<div id="informationContent" class="large-12 columns noSlideshow">
<div id="pressReleaseCenter">
<h2>Press Release</h2>
<div class="pressImages"><img src="images/voip_vid_logo.png" height="200" width="200"></div>
<div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as more</div>
<br />
<div class="hrBreak"></div>
</div>
</div>
</div><!--End Row-->
CSS
/*Float press release images*/
#pressReleaseCenter{
width:960px;
margin: 0 auto;
/* background-color:green;*/
height:initial;
}
.pressImages{
/* background-color:yellow;*/
height:auto;
width:30%;
float:left;
height:91px;
}
.pressText{
/* background-color:orange;*/
text-align:left;
width:70%;
float:left;
height:91px;
bottom:0;
}
.hrBreak{
width:100%;
height:3px;
background-color:white;
position:relative;
}
#press1{
padding-top:10px;
}
Also, is there a better way to do this? Im considering using a table. Would that work in this situation? I want to continue with more information in the same format.
Don't use a table for layout. That is very much not the done thing any more. You haven't actually specified how it's supposed to look but it looks like you need to add clear: both; to .hrBreak in order to get the line to sit below your content as I imagine it should be doing.
See here as to why
SIMPLE SOLUTION:
This is a common problem when using float property for divisions. I had the same problem once.
Do the following code addition in both the HTML file and CSS file:
HTML:
<div class="row" id="information">
<div id="informationContent" class="large-12 columns noSlideshow">
<div id="pressReleaseCenter">
<h2>Press Release</h2>
<div class="pressImages"><img src="images/voip_vid_logo.png" height="200" width="200"></div>
<div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as more</div>
<br />
<!-- ADD THE BELOW LINE -->
<div class = "clear"></div>
<div class="hrBreak"></div>
</div>
</div>
</div><!--End Row-->
Add the following code to CSS:
.clear{
clear: both;
}
Here is why that happens:
Link-1
Link-2
Hope it helps you.
Consider wrapping each press release in an element so that you can style the group of elements that make up a press release. You could wrap them in additional div tags, or ul li. You can then get rid of the extra <br> tags and the <div class="hrBreak"></div> entirely.
http://jsfiddle.net/h7GpT/ is an example that uses an unordered list.
I'm assuming that your main problem is with the hrBreak div overlapping with the first two DIVs.
Short version: Adding clear: left; to .hrBreak should give you a quick fix. This makes that DIV appear beneath any left-floated elements before it. clear: both; would also work, though some older browsers sometimes struggle with that particular option (so use clear: left; if that's all you need).
Long(er) version: When you use float, your element ceases to be a part of the regular document order - and unfloated elements that share the same space (in this case, anything within div#pressReleaseCenter) will operate separately.
If you have some content that follows after a floated element (or elements), you can most easily use the clear: left; or clear: right; CSS to ensure a clean divide between the content (or clear: both;, as mentioned before, with the caveat that a minority of browsers may struggle).
You shouldn't require the <br /> tag at all. In your example above. Use the clear on your hrBreak DIV and affect any desired spacing with margin or padding (for example, div.hrBreak { margin-top: 2em; } or whatever.
One thing to be aware of - if you have an unfloated DIV (or any other element) that contains floated elements, you may want to use overflow: auto; if you require that container to exhibit any styling of its own. For example, if you wanted div#pressReleaseCenter to have a border or background colour, using overflow: auto; will force it to acknowldege the proportions of its floated content. If you don't do this, you may find that your DIV only appears as large as its unfloated content (unless you've manually defined a width and height).

make three div class into same line

I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}

HTML/CSS <div> background

How do you set a background on a div? I have a block looking like this:`
<div class="span4">
<font color="000000">
<h4 class="text-center">This is the title</h4>
<p>This is my text</p>
<a href="#" class="btn btn-success">
<i class="icon-star icon-white"></i> This is my button</a>
</font>
</div>
I want to make this whole block have a background image, but when I try (I've tried 6 different methods already), It either doesn't work at all, doesn't fill the whole box, or fills the whole page.
After using JoshC's CSS related answer, I got this problem. In the image you can see my background, but it doesn't stretch across the whole area I want it to. The side bar, as far across as the left edge of the blue highlight on "Home", is meant to be a different image, (not set up yet) and the rest would be the displayed image.
This is the image
Another thing I'd like is a background applied to multiple divs, but not all, however that's optional...
Any help is much appreciated.
Apply a background-image like this:
.span4 {
background-image: url(http://example.com/image.png);
}
jsFiddle demo
or.. style within the HTML like this:
<div class="span4" style="background-image: url(http://example.com/image.png);"></div>
jsFiddle demo
You obviously have to change the URL to an image that exists.
See the specs on the background property here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
.span4
{
background-image:url('your image path');/* by this image set*/
background-color:#cccccc;/* and can use color*/
}
You can give somethinglike this: <div class="span4" style="background:url(../Pictures/website.png) no-repeat fixed;">
We are going to warp your head for a second. Divs are like boxes that exist with no border, no per-defined styles other than 100% width.
You are combining table-line HTML3 standard structure to the nature of a HTML5 div. In the newest code does not contain such attributes like table cells did in the past.
We would accomplish this today through CSS bound to ID's or classes to call those elements that exist within the DOM.
css
<style type="text/css">
.span4{ background-image:url('images/myimage.jpg');
background-repeat:no-repeat;
width:100px; height:100px; }
.span h4{ color:#000; text-align:center; }
.span4 p{ font-weight:bold; /*or whatever*/}
.span4 a{ font-style:italic; color:#0f0; }
.span4 a:hover{}
.span4 a:active{}
.span4 a:visited{}
.span4 a.btn{ color:blue; }
.span4 a.btn-success{ color:green; }
.span4 a.btn.btn-success
.icon-star:before{ content: '* '; }
.icon-white:before{ color:#fff; }
</style>
html
<div class="span4">
<h4>This is the title</h4>
<p>This is my text</p>
This is my button
</div>`

HTML Div tag not showing in Mozilla FireFox

I have three div tags wraps on my website and in those wraps i have multiple other div tags aligned under each other. When I started working on the right column div tag wrap and when i had put my inner div tag in that one it didnt show on FireFox although I coded it the same as the left and center one.
Code of the right column divtag wrap:
<div id="right_column_wrap">
<div id="advertisement_panel">
<img src="images/advertisement_h1.png" />
<p class="advertisement_panel">Want your website featured here? Mail us at info#Ranklist-Top100.com</p>
</div>
</div>
CSS Code:
#right_column_wrap{
width:312px;
height:auto;
margin:0 auto;
text-align:center;
float:right;
}
#advertisement_panel{
background:url('http://www.ranklist-top100.com/skins/ranklist/images/advertisement_panel-bg.png') no-repeat top;
width:312px;
height:710px;
float:right;
}
.advertisement_panel{
font-family:Arial;
font-size:15px;
color:#FFF;
}
I hope I supplied you guys with enough information =)
Miro is right. Your image gets blocked by 'adblock plus' - this will quite probably be the same for the majority of your users.
Try to use that background file locally and name it something different from 'advertisement_panel'.
I see nothing wrong in Firefox - example.
But i have to turn off adblock plus, because it blocks that image.

HTML: Replacement for <center>

I always thought that replacing the <center> tag with <div style="text-align:center;"> will get me the same results. Apparently I was wrong.
This is a portion of my HTML:
(you can also see it in action in the page I created for this question :
http://www.catmoviez.com/ErrorPageSO.aspx
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;float:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>
I want to do 2 things:
Get Rid of the <center> tag while keeping the div in the center of the page.
Make sure the outer DIVs background color and border affect the inner spans.
UPDATE:
Objective 1 is completed.
Time for objective #2.
Use margin: 0 auto; on your enclosing <div>
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>
See it in action.
Reference: CSS: centering things
If you want to simply center the text, you this css style:
text-align:center;
However, if you are looking to center the element or div itself, there are quite
some solutions for that, one being below:
.mydiv
{
margin:0 auto;
}
Or even with something like this:
.mydiv
{
width:300px; // the width can sometimes be ignored based on inherent size of element.
margin-left:auto;
margin-right:auto;
}
Or even with something like this:
.mydiv
{
margin-left:50%;
margin-right:50%;
}
So you see, there can be more possibilities.
Inline content is aligned with text-align, block content is aligned with margins (set to auto for the case of centring). See Centring Using CSS.
if you are trying to center the div on the page, I usually use this method for my main wrapping div to center the page.
making the left positioning at 50% and then margining back left half of the width of the div.
example below.
#mainspace {
position:absolute;
left:50%;
margin-left:-450px;
height:auto;
width:900px;
border:none;
}
Try this, it has worked for me when I wish I still had that
<center>
tag
< p style="text:align-center" > example image or text < / p >