Hey i'm running my index page through the W3C validator and am getting 6 errors and need some help. The errors are:-
Line 57, Column5: error parsing attribute name
Line 57, Column 5: attributes construct error
Line 57, Column 5: Couldn't find end of Start Tag div line 56
Line 67, Column 14: Opening and ending tag mismatch: body line 14 and div
Line 69, Column 11: Opening and ending tag mismatch: html line 4 and body
Line 70: Extra content at the end of the document
This is my code:-
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="CSS/10000658.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="CSS/default.css" title="assignment2" />
<title>The Garden Co. | Home </title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>The Garden Co.</h1>
</div>
<div id="menu">
<h1>Contents</h1>
<ul>
<li>Home</li>
<li>
Catalogue
<ul>
<li>Plant 1</li>
<li>Plant 2</li>
<li>Plant 3</li>
</ul>
</li>
<li>
<a class="section" href="plants_section/index3.html">Report</a>
</li>
<li>
<a class="section" href="plants_section/index4.html">Report(2)</a>
</li>
<li><a class="section" href="plants_section/form.html">Contact</a></li>
</ul>
</div><!-- end menu -->
<div id="content">
<div id="contentWrapper">
<h1>Welcome</h1>
<div class="text"
***<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>***
</div>
***</div><!-- end contentWrapper -->***
</div><!-- end content -->
<div id="footer">
<p>© My name, 2012.</p>
</div>
</div><!-- end wrapper -->
***</body>***
***</html>***
If anyone can help solve these errors, it would be greatly appreciated. EDIT: Bolded lines are where the errors are found
You didn't close a <div> tag on line 57:
<div class="text"
I can see that your DIV tag isn't closed on line 57:
Should be:
<div class="text">
looks like this is the cause of most of your problems:
<div class="text"
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>
should probably be:
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>
</div><!--this is already there, just the tabbing is off so it looked like it was missing-->
fix that, and re-run it. let us know what errors are left.
Start with fixing your tag here:
<div class="text"
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed eros quis leo sollicitudin tempus. </p>
Need to close the tag so it should read: (missing the ">")
<div class="text">
Rerun it then and let us know results.
Related
Hi i'm working with a new template, and there's a main image on the landing page.
photo
It's the photo behind the main text. I cannot figure out where the img source is.
I don't see it in the HTML. I just would like to find where this stock image is and swap my new image into its place.
I'm pretty sure the following code is where it should be:
<!-- home -->
<section aria-label="home" class="mainbg" id="home">
<!-- intro -->
<div class="container">
<div class="row">
<div class="overlay-main v-align">
<div class="col-md-10 col-xs-11">
<h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
<div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext">
<h3 class="main-text">We Build Your Dream</h3>
<h3 class="main-text">We Are Passionate</h3>
<h3 class="main-text">We Are Capable</h3>
</div>
<p class="onStep" data-animation="animbouncefall" data-time="900">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet eas malesuada leo. Vestibulum eros magna volutpat at facilisis cursus, tempus etex Vestibulum pellentesque et dolor sit amet. Pellentesque eu enim nec nibh convallis suscipit. Morbi interdum dignissim metus dignissim gravida.
</p>
</div>
</div>
</div>
</div>
<!-- intro end -->
</section>
<!-- home end -->
Is there some way it could be in the css?
Edit: when I inspect it, first of all I'm not entirely sure which one is for the image. In any case, when I select what I think is the right element, the styles area don't point to any img tag.
It's more than likely being displayed as a background using the mainbg css class. Can you look in your stylesheet for mainbg?
Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.
The basic Microdata should be something like:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="url"><div itemprop="name"><strong>name</strong></div>
</a>
<div itemprop="description">My Description</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">My Address</span><br>
<span itemprop="addressLocality">My City</span><br>
<span itemprop="postalCode">My Zip</span><br>
<span itemprop="addressCountry">My Country</span><br>
</div>
</div>
But can I "split" the itemscope along the page?
Giving an extreme example - Say I have the name at the header of a page, the address in the middle of the page, and the country at the footer.
Would it still be a valid / effective to split the data in such a way? or do I always need to use a cluster.
And if a split is valid, how exactly to perform it?
Do I just need to repeat the divs like :
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="name"><strong>name</strong></div>
</a>
<div itemprop="description">My Description</div>
</div>
And …
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="streetAddress">My Address</span><br>
</div>
And …
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="country">My Country</span><br>
</div>
This is my first time considering the use of Microdata - and I just want to make sure that I do it correctly - and I could not see any references to such a "split".
And on the same topic, can I use already existing elements, while adding only the itemscope?
For example:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1><div id = "title" class="title" itemprop="name"><strong>name</strong></div></h1>
</a>
The easiest is to have everything in the same hierarchical tree. But you can split things using itemref. See this example from the same document you linked to:
In the following example, the "a" property has the values "1" and "2", in that order, but whether the "a" property comes before the "b" property or not is not important:
<div itemscope>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
<p itemprop="b">test</p>
</div>
Thus, the following is equivalent:
<div itemscope>
<p itemprop="b">test</p>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
</div>
And the following:
<div itemscope itemref="x">
<p itemprop="b">test</p>
<p itemprop="a">2</p>
</div>
<div id="x">
<p itemprop="a">1</p>
</div>
No, a parser will probably see what you're suggesting as 3 separate Local Business entities.
But you can have other text between the various properties in http://schema.org/LocalBusiness as follows:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="url"><div itemprop="name"><strong>name</strong></div></a>
<p>
This paragraph is not used by schema.org
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit pretium
massa, in consectetur velit. Vivamus aliquam, turpis in pellentesque pulvinar,
lectus diam fermentum velit, quis fermentum arcu turpis in orci. Duis egestas
urna vel velit suscipit mollis. Nulla sed diam massa.
</p>
<div itemprop="description">My Description</div>
</div>
I am trying to display a caption on my images. Caption should behave in two different ways. One is normal and second is hover. For better understanding I have added an image. check it.
Here I have already finished big part of this, But I can not display normal caption on the image correctly.
Can anybody tell me how I figure this out?
THIS is my HTML -
<div class="slideimages">
<div id="box-1" class="box">
<div class="fix-caption">
<h3>Fix Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<a href="">
<img class="image_scale" src="images/4750.jpg"/>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</a>
</div>
</div>
MY JS FIDDLE with CSS
Thank you.
Add the following CSS
.fix-caption {
z-index: 5;
background-color: white;
}
Your caption is there, just displaying behind the image...
Alternatively put the elements with .fix-caption lower in the DOM order, which will effectively give them a higher display order (note you'll still want a background-color).
DEMO 1 (z-index) : http://jsfiddle.net/Zfr5c/3/
DEMO 2 (DOM order): http://jsfiddle.net/Zfr5c/2/
Sorry if everyone has already seen this over and over, I'm sure I've done it before but can't remember or find how!
I've got a parent div tag containing a series of span tags to position a series of elements in line with each other - to clarify, the 'in line' is critical and this is just a single row, multiple sequential rows are a requirement. Using position:relative or block level elements forces it onto a new line, which isn't any use. For example:
<!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="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="position: absolute; top: 2px; left: 350px; width:250px;
background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
I promise those colours are just for testing to make things show up (and ditto the inline styling I promise) :-)
Unfortunately, the fuschia box won't size to fit around the lime. Ugly with one line, a major problem when you need two of these in sequence.
I've tried setting overflow on the parent div, which just hides all but the first line of the span. I've tried setting elements to clear in all sorts of places but none had any visible effect.
Could anyone tell me what I'm missing please? Thanks.
How about this?
<!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="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
<style type="text/css" media="screen">
#container {
position: relative;
padding-top: 2px;
padding-bottom: 2px;
background-color: Fuchsia;
float:left;
width: 100%;
}
#container > span {
float:left;
}
#greenbox {
width: 250px;
background-color:Lime;
}
</style>
</head>
<body>
<div id="container">
<span id="helloworld">Hello world</span>
<span id="inputbox">
<input type="text" id="Test"/>
</span>
<span id="greenbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
Try:
<div style="overflow: hidden; background-color: Fuchsia;">
<div style="float: left; margin-left: 10px;">Hello world,/div>
<div style="float: left; margin-left: 10px;">
<input type="text" id="Test"/>
</div>
<div style="float: left; width:250px; background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus.
</div>
</div>
Change the margins and widths as necessary
Because the lime box is position: absolute, it is completely ignored when performing the layout. Therefore, the fuchsia box is sized as though the lime box didn't exist.
You need to change the fuchsia box to position: relative to make included in the layout logic, and add display: block to force its width. (Although it would be better to change it to a <div>, which already is display: block)
your "Lime" SPAN is absolutely positioned, so it is taken out of the page flow.
Try using float: left; instead.
Try changing the SPAN to display as a block element and position it relative to the container. It's the absolute positioning of the span that causes it to be removed from the rendering order and keeps the container from resizing around it.
<!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="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="margin-top: 2px; margin-left: 350px; width:250px;
background-color:Lime; display: block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
Oh, and by the way, I hope you're going to do this with stylesheets and classes once you get it nailed down. Also, you may need to give it a negative top margin to move it up relative to the top of the container.
I think you need is the fuchsia div to be "display: inline" to wrap around the inner content. ¿isn't that?