Jump to content

lostprophetpunk

Members
  • Posts

    270
  • Joined

  • Last visited

    Never

Everything posted by lostprophetpunk

  1. In the future I plan to make use of css sprites, to lessen the requests that the page has to make...therefore helping the page to load faster.
  2. Just whip it in <style type="text/css">...</style> in the head section of the webpage.
  3. Put this in your CSS file or code... .txtarea { font-family: arial; } Then simply add the class to your textarea html... <textarea cols="50" rows="4" name="inputDesc" value="" class="txtarea"></textarea> That should work fine.
  4. Thanks. I also want to thank you for the time you have put in to help me solve the problem.
  5. Whereabouts did you change it to display:none...as I cannot see it on the test page anywhere.
  6. Tried both of the bits of code you posted, they don't seem to work. Looked at your test page and it appears the problem is occuring there as well. As when you first load the page, it will load the picture of first slide as well as the title and caption. However, it will then display the link for what is the last slide, instead of the first. Such as the first link should be "http://drewcasson.co.uk/watch/?film=vtpt1", whereas...if you hover over it is displays the targeting link of the last slide which is "http://drewcasson.co.uk/watch/?film=rwc".
  7. It's a one page website design, it's all meant to be on one page...
  8. The example works fine, but when I place the exact code into my website...so it's exactly like the example...the problem persists rather than working smoothly.
  9. Heya there, I have recently designed and coded a website for a friend. Drewcasson.co.uk If I could get your thoughts, that would be great.
  10. But I added that in for the fix...which is why I posted about the problem persisting, rather than thanking you for solving the problem.
  11. I thank you for the help. However, I have looked several times at the code on your example, and the code on the website I am making for my friend...it is exactly the same... The problem still persists though. I just don't know what's causing it.
  12. The reason why it is not setting to full opacity is due to the fact the the containing div (div.opaque) is set to a lowered alpha opacity. This makes the opacity of the content within that div the same as the divs opacity setting, no matter what you set the opacity to. A simple fix could be to make a 1px image at the opacity you wish to use, and apply it as the background.
  13. Not a bad job there. Colours are a bit clashing though. Nice work on the design and function of the website. However there are a couple of things I would like to mention... <div id="errorie6" class="return hidden"> Uh-oh. Looks like you’re using an outdated, unsecure, or generally web-developer-headache-inducing browser. You’re going to miss out on some features of this website.<br /> <br /> That’s okay. <a href="http://www.getfirefox.com">Get Firefox</a> to solve that problem. </div> That is a bit harsh to some users. Part of the users who will view your site will still be using IE6 at the moment. I know it's annoying but as a web developer (in which you mention design is your forté) you should be able to make the site compatible for all browsers. Also, there are other browsers out there other than 'Firefox', such as Google Chrome, Opera and Safari in which users may be interested in. On a lighter note, the typography of the website could be improved. Use a different font for headings and a different font for the main body of text on the page, to make it more appealing to users. Anyway, keep up the good work.
  14. Hello there, I have been working on a website for a friend, and managed to implement a jquery slideshow into my design. However, there is a problem with the slideshow... When the slideshow first starts, it takes the image and information from the first slide...but displays the link for the last part in the slideshow. This means it shows the first slides image twice, but only displays the correct link once. This is the jquery involved... $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(5000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } This is the html involved... <ul class="slideshow" style="float: right;"> <li> <a href="watch/?film=vtpt1" title="Watch VT: Veneficus Terminus" target="_blank"><img src="images/film1.png" title="VT: Part 1" alt="A backstreet wand battle inspired by the potter movies" /></a> </li> <li> <a href="watch/?film=h1n1" title="Watch H1N1" target="_blank"><img src="images/film2.png" title="H1N1" alt="Five guys, one house and a shit load of zombies!" /></a> </li> <li> <a href="watch/?film=whit" title="Watch What Happens in Texas" target="_blank"><img src="images/film3.png" title="What Happens in Texas" alt="A gory intro scene inspired by the Texas Chainsaw Massacre" /></a> </li> <li> <a href="watch/?film=rwc" title="Watch Royale with Cheese" target="_blank"><img src="images/film4.png" title="Royale With Cheese" alt="Tarintino inspired short about two assassins on the job" /></a> </li> </ul> If anyone could help, thanks in advance.
  15. Hello there, I have come across a problem whilst coding a website for a friend. Basically, I have implemented a pure css popup for some images on the page. However, I want them to do display in a specified place (in which I have sorted out). This place is meant to be above a YouTube embedded video, but it appears to display underneath it. Before you tell me to play around with the z-index of the object and the images, I have tried that but it hasn't worked. I need the images to display over the YouTube video. Here is the CSS in question... #preview { width: 940px; height: 100px; margin-top: 20px; } #preview a { filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; margin-left: 10px; } #preview a:hover { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #footer { width: 940px; height: 30px; margin-top: 30px; margin-bottom: 30px; font-family: arial; font-size: 0.8em; color: #888888; text-align: center; } #footer span { color: #ffffff; } div.lb { display: none; position: absolute; top: 440px; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; text-align: center; background: url('images/screenbg.png'); } div.lb:target { display: block; } /** IE doesn't support :target, so we use CSS expressions **/ div.lb { z-index: 99999; display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none'); } Here is the HTML... <object width='940' height='547' style='z-index: -9999;'><param name='movie' value='http://www.youtube.com/v/-FrbICttxGQ?fs=1&hl=en_GB&rel=0&hd=1'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='http://www.youtube.com/v/-FrbICttxGQ?fs=1&hl=en_GB&rel=0&hd=1' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='940' height='547'></embed></object><div id='preview'> <a href='#lb1' title='Click to View'><img src='images/bigpreview/i-s-rwc1.png' alt='Lightbox' width='140px' height='100px' /></a> <a href='#lb2' title='Click to View'><img src='images/bigpreview/i-s-rwc2.png' alt='Lightbox' width='140px' height='100px' /></a> <a href='#lb3' title='Click to View'><img src='images/bigpreview/i-s-rwc3.png' alt='Lightbox' width='140px' height='100px' /></a> <a href='#lb4' title='Click to View'><img src='images/bigpreview/i-s-rwc4.png' alt='Lightbox' width='140px' height='100px' /></a> </div> <div id='lb1' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc.png' alt='' /></a></div> <div id='lb2' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc1.png' alt='' /></a></div> <div id='lb3' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc2.png' alt='' /></a></div> <div id='lb4' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc3.png' alt='' /></a></div> If anyone could help, thanks in advance.
  16. It's a good design, but it seems a little overcrowded in places. Maybe look up about spacing and alignment. Also the typography of the design needs to be work on. Such as one font for headers within your content, and another for the actual content. Other than that, great start to a design.
  17. Although the answer is above, I shall explain why. It's because you put the 'solid' before the '1px' in the piece of code. If it doesn't have the correct order for that attribute then it will not execute.
  18. It's in this code lies your problem. You cannot have <b></b> tags inside <b></b> tags, as it will cause validation errors in which you are experiencing.
  19. I am imagine this would help you out.
  20. First thing that catches my eye, is the logo...which is good. That's alright for that bright orange. However, scrolling down the page my eyes start to hurt as the bright orange text/pic clashes with the light brown background. The beige and white colours are fine for this design, but for text...the orange isn't. The code you are using isn't valid. But then there are only 6 errors, which shouldn't be too hard to fix. Spacing is always an issue for layouts, I suggest for you to research grid layouts, as they are perfect for light designs. Other than that...nice start to a design. Keep up the good work.
  21. Not bad to start off with, spacing is good bust could be more consistent (look up grids for webdesigns), and spacing can affect how visitors view your website. The navigation could be moved up to vertically center with the logo, as it leaves a huge gap. For each link you could maybe expand the links so that the whole of the rounded square is clickable, rather than just the text as sometimes this makes it easier for people to click on the links. Typography of the page could be improved. I noticed in your css file you only used Cambria and Georgia for fonts. Try to break the design up a bit and use about 3 fonts. Other than there being no footer, it's a great design. keep up the good work.
  22. Not a too bad a design, keep up the good work. The only thing that drags it down is this.
  23. In that code you are missing the ", like so... <table cell... cell.. border... width... style="display:inline;"> Could it possibly be some conflicting css code at all?
  24. I had a gamecube, but got (regret it!) rid of it after I got a Wii. Miss a good game of smash bros on the gamecube.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.