Everything posted by ricrod
-
help on my new wbsite
Now properly Fixed but you need to look at the other pages and use this page as a layout template <!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>Limo Hire Nottingham</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="limo hire nottingham offers American stretched limousine hire in nottingham." /> <meta name="keywords" content="Limo hire nottingham, Nottingham limos, Nottingham limo, Limo hire in nottingham, Limos for hire in nottingham, Limo for hire in nottingham, Limousine hire nottingham, Limousine hire in nottingham, Wedding car nottingham, Nottingham wedding car, Nottingham wedding car hire, Wedding car hire nottingham, Wedding car in nottingham, Wedding car hire in nottingham, limousines nottingham" /> <meta name="distribution" content="global" /> <meta name="content-language" content="en-gb" /> <style type="text/css"> p { color : #000000; font-family : arial; font-size : small; font-size:15px; margin-left:30px;} h1 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px; } h2 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px; } h3 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px; } h4 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px;} a:link {color: black; text-decoration: underline; } a:active {color: black; text-decoration: underline; } a:visited {color:black; text-decoration: underline; } a:hover {color: black; text-decoration: none; } .wrap { margin:0px auto; width:1050px; height:100%;} .titleleft {color:#990000; text-align:center; background:white; float:left; width:650px; height:100px; margin-left:0px;font-size:35px; margin-top:30px} .Premierlogoright {color:#990000; text-align:center; background:red;height:100px;float:left; margin: 0 auto; width:400px; margin-top:30px} .picture {color:#990000; text-align:center; background:white; float:left; width:1050px; height:350px; margin-left:0px;} .body {color:#990000; text-align:left; background:white; float:left; width:850px; height:700px; margin-left:0px;} .link {color:blue; text-align:left; background:white;height:700px;float:left; margin: 0 auto; width:200px;font-size:20px} body {background-color: #460000;} </style> <style type="text/css"> span.c1 {color: black} </style> </head> <body> <div class="wrap"> <div class="titleleft">Limo Hire Nottingham<br /> 0800 458 4966</div> <div class="Premierlogoright"><img src="logo.jpg" align="right" width="400" height="100" border="0" alt="** limo hire **" /></div> <div class="picture"><img src="limo1.jpg" width="1050" height="350" border="0" alt="** limo hire **" /></div> <div class="body"> <h1>Limo Hire Notingham</h1> <p>Limo hire in Nottingham has provided limo hire in Nottingham for nearly 10 years. We have successfully<br /> carried out many types of limousine hire from Prom nights, party nights, birthdays, wedding days, airport<br /> transfers and race days. We are a family business and our main goal is to provide luxury travel at<br /> affordable prices. Limo Nottingham is not a limo broker so please beware not to use one as you will just<br /> get passed on. Limo Nottingham wants to hear from you, so we can offer you our years of experience<br /> regardless you use us or not.</p> <h2>Limo Hire Notingham</h2> <p>Limo hire in Nottingham has provided limo hire in Nottingham for nearly 10 years. We have successfully<br /> carried out many types of limousine hire from Prom nights, party nights, birthdays, wedding days, airport<br /> transfers and race days. We are a family business and our main goal is to provide luxury travel at<br /> affordable prices. Limo Nottingham is not a limo broker so please beware not to use one as you will just<br /> get passed on. Limo Nottingham wants to hear from you, so we can offer you our years of experience<br /> regardless you use us or not.</p> <h3>Limo Hire Notingham</h3> <p>Limo hire in Nottingham has provided limo hire in Nottingham for nearly 10 years. We have successfully<br /> carried out many types of limousine hire from Prom nights, party nights, birthdays, wedding days, airport<br /> transfers and race days. We are a family business and our main goal is to provide luxury travel at<br /> affordable prices. Limo Nottingham is not a limo broker so please beware not to use one as you will just<br /> get passed on. Limo Nottingham wants to hear from you, so we can offer you our years of experience<br /> regardless you use us or not.</p> <br /> <br /> <p><a href="http://www.premier-limousines.co.uk/barnsley.html">Limo'>http://www.premier-limousines.co.uk/barnsley.html">limo'>http://www.premier-limousines.co.uk/barnsley.html">limo hire barnsley</a> <a href="http://www.premier-limousines.co.uk/barnsley.html">Limos'>http://www.premier-limousines.co.uk/barnsley.html">limos barnsley</a> <a href="http://www.premier-limousines.co.uk/barnsley.html">limo barnsley</a> <a href="http://www.premier-limousines.co.uk/barnsley.html">Limo hire in barnsley</a> <a href="http://www.premier-limousines.co.uk/barnsley.html">Limos in barnsley</a><br /> <a href="http://www.premier-limousines.co.uk/barnsley.html">Limousine'>http://www.premier-limousines.co.uk/barnsley.html">Limousine hire barnsley</a> <a href="http://www.limosheffield.co.uk">limo hire sheffield</a> <a href="http://www.limobarnsley.co.uk">limo hire barnsley</a> <a href="http://www.premier-limousines.co.uk/barnsley.html">Limousine hire in barnsley</a><br /> <a href="http://www.premier-limousines.co.uk/barnsley.html">barnsley limo</a></p> </div> <div class="link"><br /> <br /> <a href="http://www.limohireinnottingham.co.uk/index.html">Home</a><br /> <a href="http://www.limohireinnottingham.co.uk/services.html">Services</a><br /> <a href="http://www.limohireinnottingham.co.uk/contact.html">Contact Us</a><br /> <br /> <br /> <br /> <br /> Free Bubbly<br /> Soft Drinks<br /> Ribbons<br /> Bows<br /> With Every<br /> Limo Hire<br /> <br /> <br /> <br /> <span class="c1">We also operate in</span><br /> <a href="http://www.limohireinnottingham.co.uk/limohirederby.html">Limo hire derby</a><br /> <a href="http://www.limohireinnottingham.co.uk/limohiremansfield.html">Limo hire mansfield</a><br /> <a href="http://www.limohireinnottingham.co.uk/limohirechesterfield.html">Limo hire chesterfield</a><br /> <br /> <br /> <br /> <br /> <strong>0800 4584966<br /> 07918 023120</strong></div> <p> </p> <p> </p> </div> </body> </html>
-
Help with my website
Code now valid just looked at it earlier. The absolute alignment for the telephone number top right might need amending. But now valid and errors removed especially meta errors and doc type etc
-
Help with my website
<!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>Limo Doncaster</title> <meta name="description" content="Limo Hire in Leeds offers American stretched limousine hire within Leeds and the surrounding area." /> <meta name="keywords" content="Limo hire doncaster, Doncaster limos, Doncaster limo, Limo hire in doncaster, Limos for hire in doncaster, Limo for hire in doncaster, Limousine hire doncaster, Limousine hire in doncaster, Wedding car doncaster, Doncaster wedding car, Doncaster wedding car hire, Wedding car hire doncaster, Wedding car in doncaster, Wedding car hire in doncaster, limousines doncaster" /> <meta name="distribution" content="global" /> <meta name="content-language" content="en-gb" /> <style type="text/css"> body { text-align: center } .container{width: 1100px; margin: 0 auto; text align: left;color:#000000; background:#b80000;height:200px} .content {width: 1100px; margin: 0 auto; text align: left;color:#000000; text-align:left; background: white; height:700px} .footer {width: 1100px; margin: 0 auto; text align: left;color:#0000000; text-align:right; background:#b80000; font-size:30px} .premier {position: absolute; left: 150px; top: 75px; font-size:35px} .limo {position: absolute; left: 825px; top: 440px} .number { position: absolute; left: 960px; top: 87px; font-size:35px; width: 363px; } p { color : #000000; font-family : arial; font-size : small; font-size:15px; margin-left:30px;} h1 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px; } h2 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px; } h3 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px; } h4 { color : #383838; font-weight : bold; font-variant : small-caps;margin-left:30px;} </style> <style type="text/css"> body { background-color: #888888; } li.c1 {list-style: none} </style> </head> <body> <div class="container"><img src="limo2.jpg" width="520" height="196" border="2" alt="** limo hire **" /></div> <div class="content"><br /> <h1>Limo Doncaster</h1> <p>Limo Doncaster has operated for nearly 10 years. As we are based here we know Doncaster well. We have successfully carried out many limo hire <br /> for our new and regular customers. Doncaster lies in south Yorkshire and has something for everyone. There is a mixture of bars, restaurants,<br /> clubs and parks. It is also home to one of the most famous race courses called st leger. It is also next door to meadow hall which is one <br /> of the biggest shopping centres. Limo hire Doncaster has a wide range of limousine for you to use so please contact limo Doncaster to <br /> discuss your future plans 0800 458 4966.</p> <h2>Limo hire Doncaster</h2> <p>Limo hire Doncaster has the biggest and newest fleet of white stretched limousines. The limos <br /> have everything you would expect in a top of the range car. We specialize in 8 passenger limos.<br /> Limo Doncaster is proud to say we have very highly trained driver chauffeurs. The drivers all<br /> have a smart dress code and provide that little bit extra to complete a top quality limo hire.<br /> Limo hire in Doncaster are always happy to hear from you so please do not hesitate to contact us. </p> <h3>Limo hire in Doncaster</h3> <p>Limo hire in Doncaster tries to give you the best customer service possible and has the limos and chauffeurs to do this. Limo hire in Doncaster<br /> always wants to meet your needs and we do our best to fulfil your expectations you have. . Limo hire Doncaster has many happy customers and we<br /> would love to provide a level of service you deserve when hiring a limo. Please ring us to discuss your needs with us 08004584966. </p> <p> <a href="http://www.premier-limousines.co.uk/doncaster.html">limo hire doncaster</a> <a href="http://www.premier-limousines.co.uk/doncaster.html">limos doncaster</a><br /> <a href="http://www.premier-limousines.co.uk/doncaster.html">limo doncaster</a> <a href="http://www.premier-limousines.co.uk/doncaster.html">Limo hire in doncaster</a><br /> <a href="http://www.premier-limousines.co.uk/doncaster.html">Limos in doncaster</a> <a href="http://www.premier-limousines.co.uk/doncaster.html">Limousine hire doncaster</a><br /> <a href="http://www.limohireindoncaster.com">limo hire doncaster</a> <a href="http://www.Limohire-doncaster.com">limo hire in doncaster</a><br /> <a href="http://www.premier-limousines.co.uk/doncaster.html">Limousine hire in doncaster</a> <a href="http://www.premier-limousines.co.uk/doncaster.html">doncaster limo</a> </p> </div> <div class="footer">0800 4584966</div> <div class="Premier"><strong>Limo Doncaster </strong></div> <div class="number"><strong>0800 4584966</strong></div> <div class="limo"><img src="limo10.jpg" width="340" height="90" border="0" alt="** limos hire **" /></div> </body> </html>
-
Whys it doing this?
Just looking at code and missing </li> on exhibition menu link replace yours with this. <div class="grid_8"> <ul class="sf-menu"> <li ><a href="index.html">Home</a></li> <li> <a href="networking.html">Networking</a> </li> <li> <a href="seminars.html">Seminars</a> </li> <li class="activelink"> <a href="exhibition.html">Exhibition</a></li> <li> <a href="location.html">Location</a> </li> <li class="last-link"> <a href="register.html">Register</a> </li> </ul> </div> On ALL pages
-
Playing .MP4 video with flash...
Hi Mike trust you are well. Not sure if this helps but had a similar request not long ago. Sorry if it doesn't resolve your issue. For IE and other browsers I implemented this which needed swfobject.js, jquery.js and a SNAPSHOP IMAGE with head and body code, but it did validate. <head> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { var v = document.createElement("video"); // Browser support <video>? if ( !v.play ) { // If no, use Flash. var params = { allowfullscreen: "true", allowscriptaccess: "always" }; var flashvars = { file: "video.f4v", image: "snapshot.jpg" }; swfobject.embedSWF("player.swf", "client-video", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params); } }); </script> </head> <body> <div id="content"> <div id="client-video"> <video id="client-video" poster="snapshot.jpg" controls> <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari --> <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.5+ --> </video> </div> </div> </body></html>
-
Logo Designs
Can you describe the logo you want. The link has SS is that relevant? Colour? regards, Richard.
-
jQuery twitter plugin not working with my username
Hi Cooper there's two main ways I embed twitter. This one is the simplest, just embed this and replace the word "ricroddesign" with your user name and adjust the height and width settings to suit you <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'profile', rpp: 6, interval: 6000, width: 200, height: 450, theme: { shell: { background: '#999999', color: '#ffffff' }, tweets: { background: '#ccc', color: '#ffffff', links: '#09F' } }, features: { scrollbar: true, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('ricroddesign').start(); </script> There is a second way using the twitter blogger script which if you need it let me know.
-
Cannot left align p tag
Just take a copy of the page and style sheet then I'll delete it. OK.
-
Cannot left align p tag
Hi Think Dizi and I have enjoyed looking at this. New amalgam now. Unfortunately I cannot access the university link above. How does this look in your IE Browser http://www.ricrod.com/Fox/Final.html Does it look like this
-
Cannot left align p tag
Hi Fox just reseen this. Would you be kind enough to save this HTML and CSS as perhaps another file and CSS as style2 for example. Just comment on how it works OK for you. HTML <!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"> <head> <!-- Title: Web Design Principles - Assignment 1 Code: UFIE84-20-2 Author: Daniel MacDonald - 09022238 Dated: 28 November 2010 URL: http://www.cems.uwe....on/wdp/project1 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="styleR.css" /> <script type="text/javascript" src="includes/lightbox.js"></script> <script type="text/javascript" src="includes/crumb.js"></script> <title>Home Page</title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">Home<br /></a></li> <li><a href="about.html">About FFXIII<br /></a></li> <li><a href="form.html">Contact Form<br /></a></li> <li><a href="contact.html">Contact Details<br /></a></li> <li><a href="layout.html">Layout<br /></a></li> </ul> </div> <div id="content"> <div id="leftColumn"> <script type="text/javascript"> <!-- breadcrumbs(); --> </script> <br /><br /><br /> <!-- Script courtesy of http://twitter.com --> <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'search', search: 'final fantasy xiii', interval: 6000, title: 'News relating to...', subject: 'Final Fantasy XIII', width: '220', height: '500', theme: { shell: { background: '#bdcce9', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } }, features: { scrollbar: true, loop: true, live: false, hashtags: true, timestamp: true, avatars: true, toptweets: true, behavior: 'default' } }).render().start(); </script> </div> <div id="rightColumn"> <p>Final Fantasy XIII was officially released on the 9th March 2010 and sold 1,321,000 copies in the first 24 hours in the UK & US. Bringing the total number of sales for the complete Final Fantasy series to 7.5 million copies worldwide since the first Final Fantasy in December 1987.</p> <div><br /></div> <div id="leftImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_01_main.jpg" rel="lightbox"><span>The mighty steed, Sleipnir...</span><img src="images/lightbox/ff_01_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_02_main.jpg" rel="lightbox"><span>Serah Farron fights...</span><img src="images/lightbox/ff_02_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_03_main.jpg" rel="lightbox"><span>Flan. Not just for desert...</span><img src="images/lightbox/ff_03_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="centerImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_04_main.jpg" rel="lightbox"><span>The armoured vehicle Brynhildr...</span><img src="images/lightbox/ff_04_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_05_main.jpg" rel="lightbox"><span>In mid fight...</span><img src="images/lightbox/ff_05_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_06_main.jpg" rel="lightbox"><span>Thundara - lightening strikes...!</span><img src="images/lightbox/ff_06_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="rightImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_07_main.jpg" rel="lightbox"><span>Snow & Lightning - ready to fight...</span><img src="images/lightbox/ff_07_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_08_main.jpg" rel="lightbox"><span>Snow finds the power...</span><img src="images/lightbox/ff_08_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_09_main.jpg" rel="lightbox"><span>Cid Raines - 'The Cavelry'...</span><img src="images/lightbox/ff_09_thumb.jpg" alt="FFXIII" /></a> </div> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>Final Fantasy XIII is set within the world of Pulse. Central to the story is Cocoon, an artificial sphere that floats above Pulse's surface and is ruled by the Sanctum, a theocratic government. The worlds are controlled by fal'Cie (, mechanical beings with godlike power, each based around a crystal and created by a god-like figure called the Maker. The Cocoon fal'Cie are additionally responsible for keeping Cocoon floating, as well as providing light and water.</p> <p>Each fal'Cie handles a specific task. The fal'Cie have the capability of marking the humans, also created by the Maker, that live in Pulse and Cocoon as their servants. These servants, called l'Cie, are branded with a symbol representing either Pulse or Cocoon, and are additionally given a "Focus", a task to complete. If the l'Cie complete their task in time, they are transformed to crystal and gain eternal life (as said in the legend); otherwise they become mindless monsters called Cie'th. Five hundred years before the events of the game, two l'Cie named Oerba Dia Vanille and Oerba Yun Fang initiated a conflict that would later be known as the War of Transgression. This quarrel grew to catastrophic proportions, causing a war between Cocoon and Pulse, and ripped a large hole in Cocoon in the process.</p> <p> </p> </div> </div> <div id="footer"> 2010 - 09022238 - Daniel MacDonald </div> </div> </body> </html> CSS /* ---------------------------------------------------------------------------- Web Design Principles - Assignment 1 Daniel MacDonald - 09022238 09 December 2010 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- Divs have been indented to show parent/child structure within the overall design --------------------------------------------------------------------------*/ body { font: bold 14px arial, san-serif; margin: 0px auto 0px auto; background-image: url('../images/ff_xii_background.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } /* Create equal margin around images ----------------------------------*/ img { margin: 3.5% 3.5% 3.5% 3.5%; border-color: #303030; } /* ---------------------------------------------------------------------------- Tooltip code courtesy of http://www.dynamicdrive.com/style/ --------------------------------------------------------------------------*/ .thumbnail { position: relative; z-index: 0; } .thumbnail:hover { background-color: transparent; z-index: 50; } .thumbnail span { position: absolute; background-color: #bdcce9; padding: 5px; left: -1000px; border: 1px solid #8494b4; visibility: hidden; color: white; text-decoration: none; width: 160px; \width: 170px; } .thumbnail span img { border-width: 0; padding: 2px; } .thumbnail:hover span { visibility: visible; top: -90px; left: 7px; } #wrapper { width: 75%; min-width: 900px; margin-left: auto; margin-right: auto; height: 920px; } #header { height: 98px; background: center; background-image: url('../images/ff_xii_header.png'); background-repeat: no-repeat; } #footer { float: left; padding: 10px 0 10px 0; width: 100%; background: #303030; color: #fff; line-height: 0.8em; text-align: center; } /* Start of menu -------------------------------------------------------------*/ #menu { height: 10px; background: #303030; color: #fff; margin: 0px; padding: 10px; } #menu ul { margin: 0px; padding: 0px; } #menu ul li { display: block; padding: 0px; float: left; text-align: left; margin-right: 2em; } #menu li a { color: #fff; text-decoration: none; line-height: 0.8em; display: block; } #menu li a:hover { color: #8181b7; } /* End of menu ---------------------------------------------------------------*/ #content { background: #fff; float: left; font: 14px verdana, arial; color: #000; width: 100%; } #leftColumn { float: left; width: 200px; \width: 240px; font: 10px verdana, arial; } #rightColumn { margin: 0 0 0 200px; padding: 20px; width: auto; text-align: left; } #leftImageColumn { width: 32%; float: left; } #centerImageColumn { width: 32%; float: left; } #rightImageColumn { width: 32%; float: left; } .vcard, .form { padding: 0.5em; background: #ccc; border: 1px solid black; margin: 5em 2em 0 2em; font-size: 90%; } .textDiv { text-align: left; float: left; min-width: 0px; } /* Start of lightbox ---------------------------------------------------------*/ #lightbox { background-color: #eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails { font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption { float: left; } #keyboardMsg { float: right; } #closeButton { top: 5px; right: 5px; } #lightbox img { border: none; clear: both; } #overlay img { border: none; } #overlay { background-image: url('images/overlay.png'); } * html #overlay { background-color: #333; background-color: transparent; background-image: url('blank.gif'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); } img { } /* End of lightbox -----------------------------------------------------------*/
-
Cannot left align p tag
My suggestion <!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"> <head> <!-- Title: Web Design Principles - Assignment 1 Code: UFIE84-20-2 Author: Daniel MacDonald - 09022238 Dated: 28 November 2010 URL: http://www.cems.uwe.ac.uk/~djmacon/wdp/project1 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="includes/lightbox.js"></script> <script type="text/javascript" src="includes/crumb.js"></script> <title>Home Page</title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">Home<br /></a></li> <li><a href="about.html">About FFXIII<br /></a></li> <li><a href="form.html">Contact Form<br /></a></li> <li><a href="contact.html">Contact Details<br /></a></li> <li><a href="layout.html">Layout<br /></a></li> </ul> </div> <div id="content"> <div id="leftColumn"> <script type="text/javascript"> <!-- breadcrumbs(); --> </script> <br /><br /><br /> <!-- Script courtesy of http://twitter.com --> <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'search', search: 'final fantasy xiii', interval: 6000, title: 'News relating to...', subject: 'Final Fantasy XIII', width: '220', height: 385, theme: { shell: { background: '#bdcce9', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } }, features: { scrollbar: true, loop: true, live: false, hashtags: true, timestamp: true, avatars: true, toptweets: true, behavior: 'default' } }).render().start(); </script> </div> <div id="rightColumn"> <blockquote> <p>Final Fantasy XIII was officially released on the 9th March 2010 and sold 1,321,000 copies in the first 24 hours in the UK & US. Bringing the total number of sales for the complete Final Fantasy series to 7.5 million copies worldwide since the first Final Fantasy in December 1987.</p> </blockquote> <div> <blockquote> <p><br /> </p> </blockquote> </div> <div id="leftImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_01_main.jpg" rel="lightbox"><span>The mighty steed, Sleipnir...</span><img src="images/lightbox/ff_01_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> <a class="thumbnail" href="images/lightbox/ff_02_main.jpg" rel="lightbox"><span>Serah Farron fights...</span><img src="images/lightbox/ff_02_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> <a class="thumbnail" href="images/lightbox/ff_03_main.jpg" rel="lightbox"><span>Flan. Not just for desert...</span><img src="images/lightbox/ff_03_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> </div> </div> <div id="centerImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_04_main.jpg" rel="lightbox"><span>The armoured vehicle Brynhildr...</span><img src="images/lightbox/ff_04_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> <a class="thumbnail" href="images/lightbox/ff_05_main.jpg" rel="lightbox"><span>In mid fight...</span><img src="images/lightbox/ff_05_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> <a class="thumbnail" href="images/lightbox/ff_06_main.jpg" rel="lightbox"><span>Thundara - lightening strikes...!</span><img src="images/lightbox/ff_06_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> </div> </div> <div id="rightImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_07_main.jpg" rel="lightbox"><span>Snow & Lightning - ready to fight...</span><img src="images/lightbox/ff_07_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> <a class="thumbnail" href="images/lightbox/ff_08_main.jpg" rel="lightbox"><span>Snow finds the power...</span><img src="images/lightbox/ff_08_thumb.jpg" alt="FFXIII" /></a> <blockquote> <p><br /> </p> </blockquote> <a class="thumbnail" href="images/lightbox/ff_09_main.jpg" rel="lightbox"><span>Cid Raines - 'The Cavelry'...</span><img src="images/lightbox/ff_09_thumb.jpg" alt="FFXIII" /></a> </div> </div> <blockquote> <p> </p> <p> </p> <p> </p> <p>Final Fantasy XIII is set within the world of Pulse. Central to the story is Cocoon, an artificial sphere that floats above Pulse's surface and is ruled by the Sanctum, a theocratic government. The worlds are controlled by fal'Cie (, mechanical beings with godlike power, each based around a crystal and created by a god-like figure called the Maker. The Cocoon fal'Cie are additionally responsible for keeping Cocoon floating, as well as providing light and water.</p> <p>Each fal'Cie handles a specific task. The fal'Cie have the capability of marking the humans, also created by the Maker, that live in Pulse and Cocoon as their servants. These servants, called l'Cie, are branded with a symbol representing either Pulse or Cocoon, and are additionally given a "Focus", a task to complete. If the l'Cie complete their task in time, they are transformed to crystal and gain eternal life (as said in the legend); otherwise they become mindless monsters called Cie'th. Five hundred years before the events of the game, two l'Cie named Oerba Dia Vanille and Oerba Yun Fang initiated a conflict that would later be known as the War of Transgression. This quarrel grew to catastrophic proportions, causing a war between Cocoon and Pulse, and ripped a large hole in Cocoon in the process.</p> </blockquote> </div> </div> <div id="footer"> 2010 - 09022238 - Daniel MacDonald </div> </div> </body> </html>
-
Cannot left align p tag
Not a problem, trust you took the HTML code from my last post above. It validates fine now too only a " issue which I amended and whilst the CSS comment above was correct it didn't take into account the Twitter feed widget which having resized it will give you an even layout. If the widget wasn't changed in Chrome and IE+ the last 3 lines indent slightly further left. regards, R
-
Cannot left align p tag
Pleased it worked for you, amended again sorry should have seen the Strict Doc type HTML <!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"> <head> <!-- Title: Web Design Principles - Assignment 1 Code: UFIE84-20-2 Author: Daniel MacDonald - 09022238 Dated: 28 November 2010 URL: http://www.cems.uwe.ac.uk/~djmacon/wdp/project1 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="includes/lightbox.js"></script> <script type="text/javascript" src="includes/crumb.js"></script> <title>Home Page</title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">Home<br /></a></li> <li><a href="about.html">About FFXIII<br /></a></li> <li><a href="form.html">Contact Form<br /></a></li> <li><a href="contact.html">Contact Details<br /></a></li> <li><a href="layout.html">Layout<br /></a></li> </ul> </div> <div id="content"> <div id="leftColumn"> <script type="text/javascript"> <!-- breadcrumbs(); --> </script> <br /><br /><br /> <!-- Script courtesy of http://twitter.com --> <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'search', search: 'final fantasy xiii', interval: 6000, title: 'News relating to...', subject: 'Final Fantasy XIII', width: '220', height: 385, theme: { shell: { background: '#bdcce9', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } }, features: { scrollbar: true, loop: true, live: false, hashtags: true, timestamp: true, avatars: true, toptweets: true, behavior: 'default' } }).render().start(); </script> </div> <div id="rightColumn"> <p>Final Fantasy XIII was officially released on the 9th March 2010 and sold 1,321,000 copies in the first 24 hours in the UK & US. Bringing the total number of sales for the complete Final Fantasy series to 7.5 million copies worldwide since the first Final Fantasy in December 1987.</p> <div><br /> </div> <div id="leftImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_01_main.jpg" rel="lightbox"><span>The mighty steed, Sleipnir...</span><img src="images/lightbox/ff_01_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_02_main.jpg" rel="lightbox"><span>Serah Farron fights...</span><img src="images/lightbox/ff_02_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_03_main.jpg" rel="lightbox"><span>Flan. Not just for desert...</span><img src="images/lightbox/ff_03_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="centerImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_04_main.jpg" rel="lightbox"><span>The armoured vehicle Brynhildr...</span><img src="images/lightbox/ff_04_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_05_main.jpg" rel="lightbox"><span>In mid fight...</span><img src="images/lightbox/ff_05_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_06_main.jpg" rel="lightbox"><span>Thundara - lightening strikes...!</span><img src="images/lightbox/ff_06_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="rightImageColumn"> <div><a class="thumbnail" href="images/lightbox/ff_07_main.jpg" rel="lightbox"><span>Snow & Lightning - ready to fight...</span><img src="images/lightbox/ff_07_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_08_main.jpg" rel="lightbox"><span>Snow finds the power...</span><img src="images/lightbox/ff_08_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_09_main.jpg" rel="lightbox"><span>Cid Raines - 'The Cavelry'...</span><img src="images/lightbox/ff_09_thumb.jpg" alt="FFXIII" /></a> </div> </div> <p> </p> <p> </p> <p> </p> <p>Final Fantasy XIII is set within the world of Pulse. Central to the story is Cocoon, an artificial sphere that floats above Pulse's surface and is ruled by the Sanctum, a theocratic government. The worlds are controlled by fal'Cie (, mechanical beings with godlike power, each based around a crystal and created by a god-like figure called the Maker. The Cocoon fal'Cie are additionally responsible for keeping Cocoon floating, as well as providing light and water.</p> <p>Each fal'Cie handles a specific task. The fal'Cie have the capability of marking the humans, also created by the Maker, that live in Pulse and Cocoon as their servants. These servants, called l'Cie, are branded with a symbol representing either Pulse or Cocoon, and are additionally given a "Focus", a task to complete. If the l'Cie complete their task in time, they are transformed to crystal and gain eternal life (as said in the legend); otherwise they become mindless monsters called Cie'th. Five hundred years before the events of the game, two l'Cie named Oerba Dia Vanille and Oerba Yun Fang initiated a conflict that would later be known as the War of Transgression. This quarrel grew to catastrophic proportions, causing a war between Cocoon and Pulse, and ripped a large hole in Cocoon in the process.</p> </div> </div> <div id="footer"> 2010 - 09022238 - Daniel MacDonald </div> </div> </body> </html> CSS /* ---------------------------------------------------------------------------- Web Design Principles - Assignment 1 Daniel MacDonald - 09022238 09 December 2010 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- Divs have been indented to show parent/child structure within the overall design --------------------------------------------------------------------------*/ body { font: bold 14px arial, san-serif; margin: 0px auto 0px auto; background-image: url('../images/ff_xii_background.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } /* Create equal margin around images ----------------------------------*/ img { margin: 3.5% 3.5% 3.5% 3.5%; border-color: #303030; } /* ---------------------------------------------------------------------------- Tooltip code courtesy of http://www.dynamicdrive.com/style/ --------------------------------------------------------------------------*/ .thumbnail { position: relative; z-index: 0; } .thumbnail:hover { background-color: transparent; z-index: 50; } .thumbnail span { position: absolute; background-color: #bdcce9; padding: 5px; left: -1000px; border: 1px solid #8494b4; visibility: hidden; color: white; text-decoration: none; width: 160px; \width: 170px; } .thumbnail span img { border-width: 0; padding: 2px; } .thumbnail:hover span { visibility: visible; top: -90px; left: 7px; } #wrapper { width: 75%; min-width: 900px; margin-left: auto; margin-right: auto; } #header { height: 98px; background: center; background-image: url('../images/ff_xii_header.png'); background-repeat: no-repeat; } #footer { float: left; padding: 10px 0 10px 0; width: 100%; background: #303030; color: #fff; line-height: 0.8em; text-align: center; } /* Start of menu -------------------------------------------------------------*/ #menu { height: 10px; background: #303030; color: #fff; margin: 0px; padding: 10px; } #menu ul { margin: 0px; padding: 0px; } #menu ul li { display: block; padding: 0px; float: left; text-align: left; margin-right: 2em; } #menu li a { color: #fff; text-decoration: none; line-height: 0.8em; display: block; } #menu li a:hover { color: #8181b7; } /* End of menu ---------------------------------------------------------------*/ #content { background: #fff; float: left; font: 14px verdana, arial; color: #000; width: 100%; } #leftColumn { float: left; width: 200px; padding: 10px; \width: 240px; font: 10px verdana, arial; } #rightColumn { margin: 0 0 0 200px; padding: 5%; width: auto; text-align: left; } #leftImageColumn { width: 32%; float: left; } #centerImageColumn { width: 32%; float: left; } #rightImageColumn { width: 32%; float: left; } .vcard, .form { padding: 0.5em; background: #ccc; border: 1px solid black; margin: 5em 2em 0 2em; font-size: 90%; } .textDiv { text-align: left; float: left; min-width: 0px; } /* Start of lightbox ---------------------------------------------------------*/ #lightbox { background-color: #eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails { font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption { float: left; } #keyboardMsg { float: right; } #closeButton { top: 5px; right: 5px; } #lightbox img { border: none; clear: both; } #overlay img { border: none; } #overlay { background-image: url('images/overlay.png'); } * html #overlay { background-color: #333; background-color: transparent; background-image: url('blank.gif'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); } img { } /* End of lightbox -----------------------------------------------------------*/
-
Cannot left align p tag
I was just looking at this, please review this: HTML <!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"> <head> <!-- Title: Web Design Principles - Assignment 1 Code: UFIE84-20-2 Author: Daniel MacDonald - 09022238 Dated: 28 November 2010 URL: http://www.cems.uwe....on/wdp/project1 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="includes/lightbox.js"></script> <script type="text/javascript" src="includes/crumb.js"></script> <title>Home Page</title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">Home<br /></a></li> <li><a href="about.html">About FFXIII<br /></a></li> <li><a href="form.html">Contact Form<br /></a></li> <li><a href="contact.html">Contact Details<br /></a></li> <li><a href="layout.html">Layout<br /></a></li> </ul> </div> <div id="content"> <div id="leftColumn"> <script type="text/javascript"> <!-- breadcrumbs(); --> </script> <br /><br /><br /> <!-- Script courtesy of http://twitter.com --> <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'search', search: 'final fantasy xiii', interval: 6000, title: 'News relating to...', subject: 'Final Fantasy XIII', width: '220', height: 375, theme: { shell: { background: '#bdcce9', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } }, features: { scrollbar: true, loop: true, live: false, hashtags: true, timestamp: true, avatars: true, toptweets: true, behavior: 'default' } }).render().start(); </script> </div> <div id="rightColumn"> <p align="left">Final Fantasy XIII was officially released on the 9th March 2010 and sold 1,321,000 copies in the first 24 hours in the UK & US. Bringing the total number of sales for the complete Final Fantasy series to 7.5 million copies worldwide since the first Final Fantasy in December 1987.</p> <div align="left"><br /> </div> <div id="leftImageColumn"> <div align="left"><a class="thumbnail" href="images/lightbox/ff_01_main.jpg" rel="lightbox"><span>The mighty steed, Sleipnir...</span><img src="images/lightbox/ff_01_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_02_main.jpg" rel="lightbox"><span>Serah Farron fights...</span><img src="images/lightbox/ff_02_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_03_main.jpg" rel="lightbox"><span>Flan. Not just for desert...</span><img src="images/lightbox/ff_03_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="centerImageColumn"> <div align="left"><a class="thumbnail" href="images/lightbox/ff_04_main.jpg" rel="lightbox"><span>The armoured vehicle Brynhildr...</span><img src="images/lightbox/ff_04_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_05_main.jpg" rel="lightbox"><span>In mid fight...</span><img src="images/lightbox/ff_05_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_06_main.jpg" rel="lightbox"><span>Thundara - lightening strikes...!</span><img src="images/lightbox/ff_06_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="rightImageColumn"> <div align="left"><a class="thumbnail" href="images/lightbox/ff_07_main.jpg" rel="lightbox"><span>Snow & Lightning - ready to fight...</span><img src="images/lightbox/ff_07_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_08_main.jpg" rel="lightbox"><span>Snow finds the power...</span><img src="images/lightbox/ff_08_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_09_main.jpg" rel="lightbox"><span>Cid Raines - 'The Cavelry'...</span><img src="images/lightbox/ff_09_thumb.jpg" alt="FFXIII" /></a> </div> </div> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="left">Final Fantasy XIII is set within the world of Pulse. Central to the story is Cocoon, an artificial sphere that floats above Pulse's surface and is ruled by the Sanctum, a theocratic government. The worlds are controlled by fal'Cie (, mechanical beings with godlike power, each based around a crystal and created by a god-like figure called the Maker. The Cocoon fal'Cie are additionally responsible for keeping Cocoon floating, as well as providing light and water.</p> <p align="left">Each fal'Cie handles a specific task. The fal'Cie have the capability of marking the humans, also created by the Maker, that live in Pulse and Cocoon as their servants. These servants, called l'Cie, are branded with a symbol representing either Pulse or Cocoon, and are additionally given a "Focus", a task to complete. If the l'Cie complete their task in time, they are transformed to crystal and gain eternal life (as said in the legend); otherwise they become mindless monsters called Cie'th. Five hundred years before the events of the game, two l'Cie named Oerba Dia Vanille and Oerba Yun Fang initiated a conflict that would later be known as the War of Transgression. This quarrel grew to catastrophic proportions, causing a war between Cocoon and Pulse, and ripped a large hole in Cocoon in the process.</p> </div> </div> <div id="footer"> 2010 - 09022238 - Daniel MacDonald </div> </div> </body> </html> CSS /* ---------------------------------------------------------------------------- Web Design Principles - Assignment 1 Daniel MacDonald - 09022238 09 December 2010 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- Divs have been indented to show parent/child structure within the overall design --------------------------------------------------------------------------*/ body { font: bold 14px arial, san-serif; margin: 0px auto 0px auto; background-image: url('../images/ff_xii_background.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } /* Create equal margin around images ----------------------------------*/ img { margin: 3.5% 3.5% 3.5% 3.5%; border-color: #303030; } /* ---------------------------------------------------------------------------- Tooltip code courtesy of http://www.dynamicdrive.com/style/ --------------------------------------------------------------------------*/ .thumbnail { position: relative; z-index: 0; } .thumbnail:hover { background-color: transparent; z-index: 50; } .thumbnail span { position: absolute; background-color: #bdcce9; padding: 5px; left: -1000px; border: 1px solid #8494b4; visibility: hidden; color: white; text-decoration: none; width: 160px; \width: 170px; } .thumbnail span img { border-width: 0; padding: 2px; } .thumbnail:hover span { visibility: visible; top: -90px; left: 7px; } #wrapper { width: 75%; min-width: 900px; margin-left: auto; margin-right: auto; } #header { height: 98px; background: center; background-image: url('../images/ff_xii_header.png'); background-repeat: no-repeat; } #footer { float: left; padding: 10px 0 10px 0; width: 100%; background: #303030; color: #fff; line-height: 0.8em; text-align: center; } /* Start of menu -------------------------------------------------------------*/ #menu { height: 10px; background: #303030; color: #fff; margin: 0px; padding: 10px; } #menu ul { margin: 0px; padding: 0px; } #menu ul li { display: block; padding: 0px; float: left; text-align: left; margin-right: 2em; } #menu li a { color: #fff; text-decoration: none; line-height: 0.8em; display: block; } #menu li a:hover { color: #8181b7; } /* End of menu ---------------------------------------------------------------*/ #content { background: #fff; float: left; font: 14px verdana, arial; color: #000; width: 100%; } #leftColumn { float: left; width: 200px; padding: 10px; \width: 240px; font: 10px verdana, arial; } #rightColumn { margin: 0 0 0 200px; padding: 5%; width: auto; text-align: center; } #leftImageColumn { width: 32%; float: left; } #centerImageColumn { width: 32%; float: left; } #rightImageColumn { width: 32%; float: left; } .vcard, .form { padding: 0.5em; background: #ccc; border: 1px solid black; margin: 5em 2em 0 2em; font-size: 90%; } .textDiv { text-align: left; float: left; min-width: 0px; } /* Start of lightbox ---------------------------------------------------------*/ #lightbox { background-color: #eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails { font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption { float: left; } #keyboardMsg { float: right; } #closeButton { top: 5px; right: 5px; } #lightbox img { border: none; clear: both; } #overlay img { border: none; } #overlay { background-image: url('images/overlay.png'); } * html #overlay { background-color: #333; background-color: transparent; background-image: url('blank.gif'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); } img { } /* End of lightbox -----------------------------------------------------------*/
-
Cannot left align p tag
I was just looking at this, please review this: HTML <!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"> <head> <!-- Title: Web Design Principles - Assignment 1 Code: UFIE84-20-2 Author: Daniel MacDonald - 09022238 Dated: 28 November 2010 URL: http://www.cems.uwe.ac.uk/~djmacon/wdp/project1 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="includes/lightbox.js"></script> <script type="text/javascript" src="includes/crumb.js"></script> <title>Home Page</title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">Home<br /></a></li> <li><a href="about.html">About FFXIII<br /></a></li> <li><a href="form.html">Contact Form<br /></a></li> <li><a href="contact.html">Contact Details<br /></a></li> <li><a href="layout.html">Layout<br /></a></li> </ul> </div> <div id="content"> <div id="leftColumn"> <script type="text/javascript"> <!-- breadcrumbs(); --> </script> <br /><br /><br /> <!-- Script courtesy of http://twitter.com --> <script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'search', search: 'final fantasy xiii', interval: 6000, title: 'News relating to...', subject: 'Final Fantasy XIII', width: '220', height: 370, theme: { shell: { background: '#bdcce9', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } }, features: { scrollbar: true, loop: true, live: false, hashtags: true, timestamp: true, avatars: true, toptweets: true, behavior: 'default' } }).render().start(); </script> </div> <div id="rightColumn"> <p align="left">Final Fantasy XIII was officially released on the 9th March 2010 and sold 1,321,000 copies in the first 24 hours in the UK & US. Bringing the total number of sales for the complete Final Fantasy series to 7.5 million copies worldwide since the first Final Fantasy in December 1987.</p> <div align="left"><br /> </div> <div id="leftImageColumn"> <div align="left"><a class="thumbnail" href="images/lightbox/ff_01_main.jpg" rel="lightbox"><span>The mighty steed, Sleipnir...</span><img src="images/lightbox/ff_01_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_02_main.jpg" rel="lightbox"><span>Serah Farron fights...</span><img src="images/lightbox/ff_02_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_03_main.jpg" rel="lightbox"><span>Flan. Not just for desert...</span><img src="images/lightbox/ff_03_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="centerImageColumn"> <div align="left"><a class="thumbnail" href="images/lightbox/ff_04_main.jpg" rel="lightbox"><span>The armoured vehicle Brynhildr...</span><img src="images/lightbox/ff_04_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_05_main.jpg" rel="lightbox"><span>In mid fight...</span><img src="images/lightbox/ff_05_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_06_main.jpg" rel="lightbox"><span>Thundara - lightening strikes...!</span><img src="images/lightbox/ff_06_thumb.jpg" alt="FFXIII" /></a><br /> </div> </div> <div id="rightImageColumn"> <div align="left"><a class="thumbnail" href="images/lightbox/ff_07_main.jpg" rel="lightbox"><span>Snow & Lightning - ready to fight...</span><img src="images/lightbox/ff_07_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_08_main.jpg" rel="lightbox"><span>Snow finds the power...</span><img src="images/lightbox/ff_08_thumb.jpg" alt="FFXIII" /></a><br /> <a class="thumbnail" href="images/lightbox/ff_09_main.jpg" rel="lightbox"><span>Cid Raines - 'The Cavelry'...</span><img src="images/lightbox/ff_09_thumb.jpg" alt="FFXIII" /></a> </div> </div> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="left">Final Fantasy XIII is set within the world of Pulse. Central to the story is Cocoon, an artificial sphere that floats above Pulse's surface and is ruled by the Sanctum, a theocratic government. The worlds are controlled by fal'Cie (, mechanical beings with godlike power, each based around a crystal and created by a god-like figure called the Maker. The Cocoon fal'Cie are additionally responsible for keeping Cocoon floating, as well as providing light and water.</p> <p align="left">Each fal'Cie handles a specific task. The fal'Cie have the capability of marking the humans, also created by the Maker, that live in Pulse and Cocoon as their servants. These servants, called l'Cie, are branded with a symbol representing either Pulse or Cocoon, and are additionally given a "Focus", a task to complete. If the l'Cie complete their task in time, they are transformed to crystal and gain eternal life (as said in the legend); otherwise they become mindless monsters called Cie'th. Five hundred years before the events of the game, two l'Cie named Oerba Dia Vanille and Oerba Yun Fang initiated a conflict that would later be known as the War of Transgression. This quarrel grew to catastrophic proportions, causing a war between Cocoon and Pulse, and ripped a large hole in Cocoon in the process.</p> </div> </div> <div id="footer"> 2010 - 09022238 - Daniel MacDonald </div> </div> </body> </html> CSS /* ---------------------------------------------------------------------------- Web Design Principles - Assignment 1 Daniel MacDonald - 09022238 09 December 2010 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- Divs have been indented to show parent/child structure within the overall design --------------------------------------------------------------------------*/ body { font: bold 14px arial, san-serif; margin: 0px auto 0px auto; background-image: url('../images/ff_xii_background.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } /* Create equal margin around images ----------------------------------*/ img { margin: 3.5% 3.5% 3.5% 3.5%; border-color: #303030; } /* ---------------------------------------------------------------------------- Tooltip code courtesy of http://www.dynamicdrive.com/style/ --------------------------------------------------------------------------*/ .thumbnail { position: relative; z-index: 0; } .thumbnail:hover { background-color: transparent; z-index: 50; } .thumbnail span { position: absolute; background-color: #bdcce9; padding: 5px; left: -1000px; border: 1px solid #8494b4; visibility: hidden; color: white; text-decoration: none; width: 160px; \width: 170px; } .thumbnail span img { border-width: 0; padding: 2px; } .thumbnail:hover span { visibility: visible; top: -90px; left: 7px; } #wrapper { width: 75%; min-width: 900px; margin-left: auto; margin-right: auto; } #header { height: 98px; background: center; background-image: url('../images/ff_xii_header.png'); background-repeat: no-repeat; } #footer { float: left; padding: 10px 0 10px 0; width: 100%; background: #303030; color: #fff; line-height: 0.8em; text-align: center; } /* Start of menu -------------------------------------------------------------*/ #menu { height: 10px; background: #303030; color: #fff; margin: 0px; padding: 10px; } #menu ul { margin: 0px; padding: 0px; } #menu ul li { display: block; padding: 0px; float: left; text-align: left; margin-right: 2em; } #menu li a { color: #fff; text-decoration: none; line-height: 0.8em; display: block; } #menu li a:hover { color: #8181b7; } /* End of menu ---------------------------------------------------------------*/ #content { background: #fff; float: left; font: 14px verdana, arial; color: #000; width: 100%; } #leftColumn { float: left; width: 200px; padding: 10px; \width: 240px; font: 10px verdana, arial; } #rightColumn { margin: 0 0 0 200px; padding: 5%; width: auto; text-align: center; } #leftImageColumn { width: 32%; float: left; } #centerImageColumn { width: 32%; float: left; } #rightImageColumn { width: 32%; float: left; } .vcard, .form { padding: 0.5em; background: #ccc; border: 1px solid black; margin: 5em 2em 0 2em; font-size: 90%; } .textDiv { text-align: left; float: left; min-width: 0px; } /* Start of lightbox ---------------------------------------------------------*/ #lightbox { background-color: #eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails { font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption { float: left; } #keyboardMsg { float: right; } #closeButton { top: 5px; right: 5px; } #lightbox img { border: none; clear: both; } #overlay img { border: none; } #overlay { background-image: url('images/overlay.png'); } * html #overlay { background-color: #333; background-color: transparent; background-image: url('blank.gif'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); } img { } /* End of lightbox -----------------------------------------------------------*/
-
Website Homepage Feedback
Great looking website, simple and elegant and header really works well. Nice to see for a change a legally compliant website with Terms & Conditions and a robust Privacy Policy which every website that has an enquire/quote form should always have. Sadly many do not provide these or accessibility and legal statements. Really think the site works well. Some people like to read some like a flashy single image that says what their site is about. This is different, tasteful and a pleasure to explore. R
-
All I want is to embed a video!
From the original brief in original post. Download this now http://www.ricrod.co...f/flvplayer.zip Unzip and place on server in swf directory Paste nice clean valid W3C code into the page: <object data="http://www.ricrod.com/swf/flvplayer.swf?video=http://www.ricrod.com/swf/GlambustaPromo1.flv&autoplay=false"'>http://www.ricrod.com/swf/flvplayer.swf?video=http://www.ricrod.com/swf/GlambustaPromo1.flv&autoplay=false" width="580" type="application/x-shockwave-flash" height="460"></object> Replace http://www.ricrod.com/ with http website TWICE Replace GlambustaPromo1.flv with the name of NEW .FLV FILE e.g. Untitled-1.flv Check the width and height you want and amend accordingly. Upload page Visit and click play.............. Done. This is just a live example with autoplay true http://www.ricrod.com/swf/flvplayer.swf
-
All I want is to embed a video!
Hi, The video in this page was .mov file now .flv and can be set to auto start or with a clickable play button. It requires one additional file to be uploaded. If this would help let me know. http://goo.gl/nPvlx regards, R
-
RSS Creation
Its cross browser friendly but best viewed and checked in IE. Until you add an RSS and subscribe you won't actually see the picture by the way. So when you have created the rss.xml file and uploaded please go to the page and select subscribe to feed. Note I have a separate rss directory for this single file as you see above i.e. /rss/ricrod_design.xml This code in the HEAD of each page will then make the RSS logo in IE turn orange when the page s of any site are visited confirming a live valid RSS feed. <link href="http://www.WEB SITENAME.com/rss/rss.xml" rel="alternate" type="application/rss+xml" title="WEBSITE NAME RSS feed" /> So: - Add HEAD Info - Create RSS file - Embed a link on each page perhaps with an RSS ICON of your choice Finally just visit here to Validate the FEED Has no errors http://validator.w3.org/feed/ Just edit the file as often as you wish with new info and links. If you add it to your Feeds in Outlook, every time you check for mail the feeds list will also update.
-
RSS Creation
The layout above has distorted slightly so take the source code from my site here and amend for your needs http://www.ricrod.com/rss/ricrod_design.xml My RSS feed on this site as you can see is ricrod_design.xml
-
RSS Creation
Hi Huw, Really like to help. In the head of every page as its a static site add the following <link href="http://www.WEB SITENAME.com/rss/rss.xml" rel="alternate" type="application/rss+xml" title="WEBSITE NAME RSS feed" /> Note: XHTML closing i.e. /> There are different options but I use this across various sites. Just save it as rss.xml or if you prefer another name just making sure it is saved as an .xml file. <?xml version="1.0" encoding="ISO-8859-1" ?> <rss version="0.91"> <channel> <title>WEBSITE NAME RSS - Click here for the WEBSITE NAMEWebsite</title> <link>http://www.'>http://www.'>http://www.'>http://www.'>http://www.WEBSITE NAME.com</link> <description>WEBSITE NAME</description> <language>en-gb</language> <image> <title>WEBSITE NAME RSS - Click here for the WEBSITE NAME Website</title> <url>http://www.WEBSITE NAME.com/images/RSS_IMAGE.jpg</url> <link>http://www.WEBSITE NAME.com</link> </image><item> <title>WEBSITE NAME - News</title> <link>http://www.WEBSITE NAME.com/news.html</link> <description>Latest News from WEBSITE NAME........................... </description> </item> <item> <title>WEBSITE NAME - Products or Servcies</title> <link>http://www.WEBSITE NAME.com/services.html</link> <description>WEBSITE NAME offers great deals on products and services. Find out more... </description> </item> </channel> </rss> In the above the first part ref Channel Title and then below this IMAGE title need to have the same description. If you wish to use an image for the page too make sure its less than 300px wide and 100px high. The ITEM ENTRIES ABOVE (2 as examples) becomes the content and you can add more items as you wish for example, latest news, updates, special offers etc Any questions please ask. regards, Richard.
-
Form Size
Hi David, this is the corrected code for the the contact.html page if you wish to use 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>David Cook - web designer</title> <meta name="keywords" content="David Cook, web designer, CSS, HTML" /> <meta name="description" content="Personal, web designer" /> <link href="http://www.davidcook.eu/style.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> function clearText(field) { if (field.defaultValue == field.value) field.value = ''; else if (field.value == '') field.value = field.defaultValue; } </script> </head> <body> <div id="site_title_bar_wrapper"> <div id="site_title_bar"> <div id="site_title"> <h1><a href="http://www.davidcook.eu"'>http://www.davidcook.eu" target="_parent"> <img src="images/logo.png" alt="Site Title" /> <span>web designer</span> </a></h1> </div> </div> <!-- end of site_title_bar --> </div> <!-- end of site_title_bar_wrapper --> <div id="banner"> <div id="menu"> <ul> <li><a href="index.html" target="_parent"><span></span>Home</a></li> <li><a href="design.html" target="_parent"><span></span>Design</a></li> <li><a href="seo.html" target="_blank"><span></span>SEO</a></li> <li><a href="photography.html" target="_parent"><span></span>Photography</a></li> <li><a href="contact.html" class="current"><span></span>Contact Us</a></li> </ul> </div> <!-- end of menu --> <div id="banner_content"> <p>We are here to make dreams come to life.<span>- David Cook -</span> </p> </div> </div> <!-- end of banner --> <div id="content"> <div class="section_w900"> <div class="section_w260 float_l margin_r60"> <h2>Contact</h2> <p><strong>TELEPHONE:</strong> 07554 457 844</p> <p><strong>EMAIL:</strong> david@davidcook.eu</p> <p><strong>SKYPE:</strong> davidcookeu</p> <div class="cleaner_h20"></div> </div> <div class="section_w260 float_l margin_r60"> <h2>Contact Form</h2> <div> <!-- Do not change code! --> <table cellspacing="0" cellpadding="0" border="0"><tr><td><iframe width="400" height="450" frameborder="0" src="http://www.foxyform.com/form.php?id=48379&sec_hash=8655408e011" scrolling="no" style="overflow:hidden"></iframe></td></tr><tr><td align="center"><br /><br /><a style="font:8px Arial;color:#5C5C5C;" href="http://www.davidcook.eu">David Cook</a></td></tr></table> <!-- Do not change code! --> </div> </div> <div class="cleaner"></div> </div> <div class="cleaner_h30 divider"></div> <div class="cleaner_h30"></div> <div class="section_w900"> <div class="section_w260 float_l margin_r60"> <h2>Contact</h2> <p><strong>TELEPHONE:</strong> 07554 457 844</p> <p><strong>EMAIL:</strong> david@davidcook.eu</p> <p><strong>SKYPE:</strong> davidcook.eu</p> <p class="contact-us"><a href="contact.html" title="Contact">Contact Me</a></p> <div class="cleaner_h10"></div> </div> <div class="section_w580 float_r"> <h2>Latest Sites</h2> <div class="site_box"> <a href="www.webdesignerforum.co.uk">Get you latest advice and tips here.. </a> <p class="post_info">Posted in <a href="www.webdesignerforum.co.uk">Websites</a> by Site Owner <a href="www.davidcook.eu"></a> on <strong>October 27, 2010</strong></p> </div> </div> <div class="cleaner"></div> </div> </div> <!-- end of content --> <div id="footer"> <ul class="footer_menu"> <li><a href="www.davidcook.eu">Home</a></li> <li><a href="design.html">Design</a></li> <li><a href="SEO.html">SEO</a></li> <li><a href="Photography">Photography</a></li> <li class="active"><a href="contact.html">Contact</a></li> </ul> Copyright © 2010 <a href="www.davidcook.eu">David Cook</a> | Designed by <a href="http://www.davidcook.eu" target="_parent">David Cook</a> | Validate <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div> </body> </html>
-
Form Size
With access to the contact.HTML page: Replace this <table cellspacing="0" cellpadding="0" border="0"><tr><td><iframe width="400" height="490" frameborder="0" src="contact.php"></iframe></td></tr><tr><td align="center"><a style="font:8px Arial;color:#5C5C5C;" href="http://www.davidcook.eu">David Cook</a></td></tr></table> With this <table cellspacing="0" cellpadding="0" border="0"><tr><td><iframe width="400" height="490" frameborder="0" src="http://www.foxyform.com/form.php?id=48379&sec_hash=8655408e011" scrolling="no" style="overflow:hidden"></iframe></td></tr><tr><td align="center"><a style="font:8px Arial;color:#5C5C5C;" href="http://www.davidcook.eu">David Cook</a></td></tr></table>
-
Byte-Order Mark found in File
Hope some people may find this useful either now or in the future. If you have the following W3C validation error Byte-Order Mark found in UTF-8 File What can you do? Well it's a really easy fix to identify and remove the offending code that causes this. Find out more: http://bit.ly/fabJNX
-
No scroll bar on the browser
Two other things ref the page Line 42 width="810" height="720" id="gallery" align="middle"> Remove this align="middle" ,its invalid code If you intend validating this you'll also need to be able to remove this information Byte-Order Mark found in UTF-8 File Let me know via PM if you want the solution