falcifer
-
Posts
55 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by falcifer
-
-
-->QUOTE(David B @ Apr 27 2007, 11:26 PM) <{POST_SNAPBACK}>I kind of understand how the first one works, and how to make it work for me. but can any one give me some insight on the specifics of why it works.Thanks!I just finished working on a menu that uses the same sort of thing...Basically, you know how you can change the colour of a hyperlink when you hover over it? Using CSS...a#someID{ color: red;}a#someID: hover{ color: blue;}You can use the "hover" subset(?) on other elements, to change the appearance of other elements.... for exampleIn this case, all the images are already set on the page. The reason you can't see them is because they're set to have a width of 1px and, I think the main image there is covering them up.The CSS code is used to change the z-index of the img elements to 1, which brings them forward, and changing the width to 500px. This is done using the "hover" thing for the thumbnails. (and the "active" and "focus" ones, too, which means you can use the tab key to scroll through the pics)
-
I guess I read it the wrong way, then. I apologise.Although, in this case, if someone is looking at my portfolio online, then they'd be looking at it for the explicit reason of looking at the content, so having to read the line that tells them how to view larger images isn't going to necessarily correspond to the time they spend looking at the images; since this is the reason for them viewing the page to begin with.If someone's going to judge my photography by how well I design a webpage, then they're not really worth bothering with, I would think.But, as you say, it is a good practice to get into, I agree with that.I do not mean to pick on the solution provided in a way to make it seem imperfect. I only offered my addition perspective to help this person, and others, realize some good habits to get into. -
Well, I think it's about time people stopped acting intuitively... because that's what gets people into trouble with pop-ups and dialog boxes. :)Though, in this case, I do agree. More for the reason that I like clickable things to act like links... And what I came up with was not meant to be an all-inclusive solution... just an example of what can be done.And really, with such a minimal page -- six small images, a line and some text -- is it really that much trouble to read what's barely off the top of the page? I would hope not.You should really have the cursor change from the pointer to the hand to make it clear the images are to be clicked. People prefer to act inuitively and not have to read and instruction. In this case, one might rollover the image and not see the cursor change and then have to read. -
Linux Forums and Linux Questions are good, too. They have Red Hat/Fedora forums, and Network forums, too, so you'll be sure to find someone who can walk you through what to do.
-
-->QUOTE(David B @ Apr 22 2007, 03:38 PM) <{POST_SNAPBACK}>Hi Every one,I am in the design stage of creating an online portfolio and I need to display alot of different images as thumbnails then on-click display them at a uniform size. So, should I create an individual page for each image or is there a way (without frames) to display the full-size image on the same page as the thumbnails. I am open for any and all answers, ideas and suggestions.ThanksThe last time I did something like that I did it in Picasa, which created two pages... one page with all your images, then another for the individual images.Without using frames, you'd have to create a new page for each image, I think. Unless you emulate a frame on your page... you could line up the thumbnails (or small images) along the top or side, then have a larger DIV containing your IMG in the middle of the page, and then change the SRC property of the IMG tag onclick...If you're making a new page, then you can either have it link to the page, or you could make a pop-up window containing the full-size image.As for creating the image on the same page... you'd have something like...
<html><head><title>Portfolio Page 1</title><style>img{ border: none; color: white;}a{ color: white;}</style><script>function showFull(i){s=i.src;s=s.substring(0,s.length-6);d=document.getElementById('fullPic');d.src=s+".jpg";}</script></head><body bgcolor="black"><center><table cellspacing="10"><tr><td align="center" colspan=2 rowspan=2> <img src="http://static.flickr.com/80/236089266_f7a2953c3f_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/66/179211600_e5b9f95256_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/46/182413190_6818bdf780_t.jpg" onclick="showFull(this);" /></td><td align="center" colspan=2 rowspan=2> <img src="http://static.flickr.com/85/207586231_36c9b2980b_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/80/207949159_5d6fe8a119_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/72/207559251_a2ad1bd24f_t.jpg" onclick="showFull(this);" /></td></tr></table><hr /><table><tr><td><img id="fullPic" src="" alt="Click thumbnail to show larger size" /></td></tr></table></center></body></html>Which looks like this; http://homepage.ntlworld.com/josephine.clark2/portfolio.htmOf course, you do need some consistent naming of your files. so if you have your thumbnail named "image_thumb.jpg", then you can use JS to remove the last 10 characters of the name, which leaves you with "image", and then you can add ".jpg" to the end to get your fullsize image...I hope that's clear, and that the code is somewhat helpful... Feel free to ask if anything is unclear.
-
He said "red hat fedora"... if it was Red Hat, then I'd assume it was Red Hat... but since the word "Fedora" was mentioned, I assumed it was actually Fedora...I think it would be better to give him the Red Hat one and not the Fedora one since he's running Red Hat.http://www.redhat.com/docs/manuals/linux/R...ork-config.html -
That's cool. Thanks.I guess I always had good habits in HTML anyway...It's one of the differences between HTML and XHTML (eXtensible HyperText Markup Language). XHTML is a reformulation of HTML into XML. XML requires "well-formed" documents, that means all tags should be closed, elements should be properly nested (<b><i>text</i></b> as opposed to <b><i>text</b></i>). One of the advantages of this is that you're able to extract elements from the documents and use them in other XML languages. Read more here:http://www.w3schools.com/xhtml/default.aspMain differences between HTML and XHTMLhttp://www.w3schools.com/xhtml/xhtml_html.aspIt's not really difficult going from HTML to XHTML, especially if you picked up good coding habits when learning HTML. -
As far as I understood it, all tags require closing tags...but some don't necessarily have a closing tags...e.g.a link has <a ...> link text </a>script has <script> script here </script>and then there are things that don't have closing tags, like <br>, <link>, <img>... but in order to close them you include the />i.e. <br /> instead of <br>It seems to be to be a more formal way of coding HTML and making sure that all tags are closed, even when they don't have a closing tag...
-
-
Well, from that page, there isn't any textarea, so I can't see really what the issue is... The code you posted works fine for me when I save it as an HTML page and view it on my computer.If all else fails, then you can always replace the "<" and ">" with "<" and ">" and put the code insde another container, like DIV tags...
-
Could you supply an example? Maybe link to the page in question, or post the HTML that you are using.As far as I can tell, you shouldn't have to do anything special to make code appear as code inside the textarea. The test page I did with some HTML insde the textarea tags worked...Hi everyone, I am trying to make a <textarea> with code inside of it on my website, like they have here, and I know I have seen it on other sites. When I do it on my site, it always just runs the code, it will not let me just have the code so I can show what certain codes are... Can anyone help me please?<html><body><textarea cols="50" rows="10"><table><tr><td>cell 1</td></tr></table><br /><script type="text/javascript"><!--alert('hello');--></script></textarea></body></html> -
I assume you're not on Linux... if you are then there's always recordMyDesktop
-
The order of attributes in the part of code you provided (though, I'm not sure if it makes much difference anyway) should becolor image repeat attachment positionAnd you don't need to separate them with commas either. Replace this with
body {background: #FFFFFF url(http://img155.imageshack.us/img155/7028/bebop2rc6.jpg) no-repeat fixed bottom right;}The "fixed" part means that it will always be in the bottom right... Or you can use the code in the post above, and add "background-attachment: fixed;" to it to get the same effect.Also, the file is called "animucleb.htm"... you probably want to change that to "animeclub.htm"
-
First of all, I notice that there's a closing DIV tag missing, which I don't know if that will help... I'd think so, though. Then IE would know what to do... I think Firefox tends to fill in missing tags... but I could be wrong.You might also want to change the é in "resumé" to é since it renders as é on my computer...Hope this helps.http://www.adriennedesigns.net is the website I'm working on. I've got the area where the text is set to a width of 450px and the height of the area set to 565px - and it looks just how i want in firefox. The text wraps and the entire image I want shown is shown. However in IE it snips the bottom of the image off and the text overflows just a bit. Why? I don't get it :\Thanks in advance. -
I think what the problem is that when you create a table, the then contents are set to fill the space.e.g. if the table width is 100%, then the columns will fill that width too. So if you only have one column, then it expands to fill the 100%In the other cases, where you have two columns, on of them is set to 550px, and the other automatically fills the empty space.The solution would be to put in an extra empty column to fill up the empty space after resizing the td2 to 550pxIf you think about it, you're setting a table to 100%, and then asking that the column only take up 550px... which leaves some rather ambiguous space. Does it treat it as a border? Padding? Another cell?Personally, I think Firefox is right about how it renders the table like that.And if all the columns in that middle table are of the same class, then maybe you should just make the table 550px wide.If you need the table to take up 100% of the page, then put it inside a container that fills 100% of the width.all have one column only ... but both the first and last block have 2 rows ... but they are all the same -
Also, the MD5 checksum file is to verify that the exact size of what you downloaded and the exact size of the actual file is the same.On Windows, you need a program to do it for you. Generally it's not really necessary. If the archive extracts fine, then chances are that it's okay.I am extracting the apache files right now.. on their website they say this:It is essential that you verify the integrity of the downloaded files using the PGP or MD5 signatureswhat do they mean by that? also where can I get mySQL to install and is it free? -
I'm sure that I had an option to render pages using the IE engine or the Mozilla engine. Perhaps it was a different browser. It was definitely different from just identifying itself as one browser or the other.It might even have been a version of IE...It doesn't do that, Opera uses its own engine, but you can set Opera to identify or mask itself as either IE or Firefox, so that when Javascript code on a web page tries to determine which browser it is it would think that you were using IE or something. It does that by just exposing some of the same Javascript objects and bugs that the other browsers have, so that when they test for them in Javascript they can find them, and it also changes the user agent string it sends to servers. -
This code works for me, in Firefox 2.The images will automatically overlap if their positions overlap. The order of images is related to the order in which they occur in the page.It's fairly obvious, but the first element in the page is rendered first, and all later elements are rendered in order.So the first image in this example is drawn first, then the next image is drawn over the top. And so on... You can change the order of the z-index to get them drawn in any order you like.As far as I know, all elements automatically have a z-index of 0. So if you want something to appear below everything else, then assign it -1.If you want images layered a certain way, then working from the bottom you can assign them 1, 2, 3, 4... etc... Not sure how it works in IE...How do I over lap images or can I?I was trying with z-index but it wasn't working out. Can someone give me some sample code that does this.<html><head><title>Overlap</title><style type="text/css">img#img1 { position: absolute; top: 50px; left: 10px; z-index: 2;}img#img2 { position: absolute; top: 25px; left: 250px; z-index: 1;}</style></head><body><img id="img1" src="ga1.gif" alt="image 1" /><img id="img2" src="ga2.gif" alt="image 2" /></body></html> -
Lynx. Yes.thanks for the reply, pretty much what I figured.Q:where do you find the text browser(lynx) ? and is it free?
As far as I know, text browsers only display the textual content. So it would skip the flash stuff.Q:say the site is not only a flash file - logo at the top is flash and a flash navigation menu -just by having flash on my page will not hurt the google ranking? or does it just skip it like nothing is there?
I would think that adding some META tags to your page, with keywords would help the ranking.And, again, as far as I know, then if you imagine opening your site in IE or Firefox, then selecting the whole page and pasting it into Notepad. Only the visible text on the page would appear. That's how Lynx would show your site, I think.But you'd be better off reading more on the Google page. I'm not sure the extent to which it reads the actual HTML when it's creating the ranking. I wouldn't think it uses much of the source, though.I also have a sitemap with html links at the bottom of the page -
I don't think I came across XHTML until I saw it here. I put my blog template into the W3 validator and it didn't like it at all. But it works fine for everyone who views it, so I don't know if I'll worry much about it. I don't develop for anything commercial, so until people complain about it, I won't worry. ;-)I still come across pages which produce tons of errors in Firefox's error console, so I don't know how much I should worry about XHTML.And @PHILIPS; You're welcome.I always found that the best way to learn was by doing it. So if you see a site you like, you can always view the source code, then copy and paste it into the a text editor (notepad, wordpad or whatever you like) and look at what each part of the site does. See how the CSS is controlling the elements on the page, and get rid of all the extra text and stuff, and you can insert keywords, so you know exactly what is what.I also find that changing the background colour of elements to more vibrant colours made it easier to see exactly where they were, if they were extending too far or not far enough, and if they were covering other elements.And finally... adding comments to closing tags (especially if you have loads of DIV elements nested within each other) always helps to make sure you close your tags, and also make it clearer where things are.Tabbed code is another way to make things easier to read. But depending on the extent of nesting, it can get rather unwieldy.The Tidy Validator included with Firefox Extension named Firebug.And I figured as much about the content Cut and Paste, no problem. Html doesn't require closing tags, but xhtml does whine about them. -
Google InfoUse a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would. If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.If you have ONLY a site full of fancy non-text stuff, then yes, it's true. But if (and you really ought to do this) you make your site available to users with and without the ability to view all the fancy stuff, then it shouldn't affect the site ranking much.If you make an interactive Flash page, then you should make a non-flash equivalent, too. If you want Google to rank you according to your site content, rather than the design of it.Is it true that having flash on your websites confuses the google search engine and ranks you lower because of it?this guy I know hates flash because he says google does not know what to think of flash and because of that ranks you lower..I don't know if i believe this guy or not? any of you know about this? -
Thanks.Good Job! Thanks for chipping in here. I'm sure PHILLIP appreciates the effort.
What validator do you use?I never used one before. I generally tend to write all my tags with the opening and closing tags, then I put all the content inside them.I copied and pasted the tables, and most of the actualy content from PHILIPS' code, so it wasn't my fault. ;-)Couple of errors in the validator I use, but most of them were trivial. Missed a couple of closing tags and a <tr>, but the validator I use checks against xhtml strict, so that is not a big deal.
Not to mention the fact that most people that I know hate the marquee tag. But at least it's not a flashing marquee...Only errors now relate to the use of the Marquee tag. Those errors will go away if the original poster can find a javascript to replace that since the marquee tag is proprietary to IE and is not in the Specs. -
Editing the KingOfPoker source seems to be your best option.Using both that site and the code you posted here, I've come up with the following
<!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>Online Education</title><style type="text/css">body { background-color:#BFBFBC; padding: 0; margin: 0; font: normal 11px tahoma, arial; line-height: 15px; width: 98.3%;}#main { text-align: center; height: 400px; }#main .container { border: 1px solid black; width: 756px; overflow: hidden; background-color: white; text-align: left; padding: 6px; margin:0 auto; }#main .topbar { background-color: #ffffff; height: 62px; /* 43px; */}#main .topbar .header { height: 50px; /* 31px; */ width: 700px; /* 423px; */ float: left; margin: 8px 0 0 12px; margin: 8px 0 0 6px;}#main .topbar .header h1 { font-family: Copperplate Gothic Bold, Arial, Helvetica, sans-serif; color: #333; margin: 0; float: left; font-weight: normal; padding: 21px 0 0 17px;}#main .o { color: #FF0000; }#main .db { color: #333333; }#main .imgtop { padding-bottom: 6px;}#main .imgtop ul { list-style-type: none; width: 700px; margin: 0; padding: 8px 0px 10px 10px; height: 25px; background-color: #333;}#main .imgtop ul li { display: inline;}#main .imgtop ul li a { display: block; padding: 5px 7px 5px 7px; float: left; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; text-decoration: none; font-size: 12px;}#main .imgtop ul li a:hover { background-color: #FF0000;}#main .left-column { float: left; width: 430px; margin: 0 6px 16px 0; }#main .left-column .copy { padding: 11px; margin-top: 0px; }#main .right-column { padding-bottom: 6px;}#main .right-column .newsbox { float: right; width: 320px; margin: 6px 0; }.newsbox table { position: relative; top: 50px;}</style><script language="JavaScript" type="text/javascript">var slideShowSpeed = 5000;var crossFadeDuration = 3;var Pic = new Array('twork.jpg', 'grad.jpg', 'computers.jpg', 'smile.jpg');var t, j = 0;var p = Pic.length;var preLoad = new Array();for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];}function runSlideShow(){if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();}document.images.SlideShow.src = preLoad[j].src;if (document.all){ document.images.SlideShow.filters.blendTrans.Play();}j = j + 1;if (j > (p-1)) j = 0;t = setTimeout('runSlideShow()', slideShowSpeed);}</script><meta lang="en" name="Description" content="Welcome to Online Education" /></head><body onload="runSlideShow()"><div id="main"> <div class="container"> <div class="topbar"> <div class="header"> <h1><span class="o">Online</span><span class="db">Education</span></h1> </div><!-- left --> </div><!-- topbar --> <div class="left-column"> <div class="imgtop"> <ul> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\j.html">Home</a></li> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\d.html">About Us</a></li> <li><a href="">Forum</a></li> <li><a href="C:\Documents and Settings\owner12\My Documents\Project\Test.html">Test</a></li> </ul> <table border="0" cellpadding="0" cellspacing="0"><tr> <td id="VU" height=0 width=0><img src="1.jpg" name='SlideShow' width=700 height=150 /></td> </tr></table> </div><!-- imgtop --> <div class="copy"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et urna. Mauris blandit. Ut interdum. Pellentesque accumsan. Nulla placerat adipiscing tellus. Donec nec tellus. Sed ut sapien placerat nulla porta dictum. Cras sit amet pede vel purus tempor luctus. Maecenas commodo venenatis eros. Nulla adipiscing. Vivamus eleifend, dui sit amet iaculis laoreet, ante tellus sagittis sapien, nec consequat sapien massa vel justo. Nullam eget quam. Ut nec orci. Curabitur vestibulum odio quis odio.<p>Curabitur id nulla. Nunc urna dolor, hendrerit eget, molestie nec, luctus quis, odio. In accumsan quam et urna. Aenean eget sapien non diam varius dapibus. Nullam nunc. Suspendisse potenti. Etiam eget tellus. Nulla facilisi. Integer ultrices aliquet diam. Nullam a nisi. Donec nisl. In luctus sapien sed sapien. Sed vel tortor non pede accumsan vestibulum. Etiam turpis. Mauris sed tortor id dolor mattis vulputate. Aenean facilisis, eros eget bibendum blandit, magna nunc pulvinar mauris, interdum tempor felis velit sed tellus. Praesent bibendum, diam nec congue tincidunt, turpis enim pulvinar lectus, ultrices eleifend pede elit id lectus. Duis ornare, felis pulvinar nonummy egestas, dui sapien viverra risus, eget feugiat diam odio non est. </div><!-- copy --> </div><!-- left-column --> <div class="right-column"> <div class="newsbox"><table cellpadding="0" cellspacing="0" border="0"><tr><td colspan="2"><MARQUEE WIDTH="100%"><h3> News Board! </h3></MARQUEE></td></tr><!--A level--><tr><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">A LEVEL</h3>Which topic is best for you?<a href=""><b>Find out more...</b></a></td></tr><tr><td class="break" colspan="2"></td></tr><!--Revision--><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">Revision </h3>Check out our easy to follow guide on Rivsing for exams.<a href=""><b>Find out more...</b></a></td></tr><tr><td class="break" colspan="2"></td></tr><!--Results--><tr><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">Results</h3>Find your results here<a href=""><b>Find out more...</b></a></td></tr><tr><td class="break" colspan="2"></td></tr><!--Past Exam Papers--><td width="97"><a href="test.html"><img src="grad.jpg" width="97" height="72" border="0" alt="A level tips" /></a></td><td valign="top" class="fix"><h3 class="fix">Past Exam Papers</h3>View previous Exam papers<a href=""><b>Find out more...</b></a></td></tr></table> </div><!-- newsbox --> </div><!-- right-column --> </div><!-- container --></div><!-- main --></body></html>Not sure if it's all perfect, or exactly what you want, but it looks like what you're asking for.You can alter the appropriate attributes to get what you want. Just look at the code and see what's what.The size of the white main part will change to accommodate whatever you put inside there. Hopefully that helps some more.
-
Well, aside from your lack of closing DIV tags... your code works.It does make the background white. However, since the "container" only contains a small part of your page, you can only see a small part with a white background.You'd need to add more content for it to be more evident. Or assign a "height" attribute to the DIV#container element. Something like "100%" would make it cover the whole page, even if the content didn't extend that far. But in my experience, the height CSS attribute isn't very reliable...Some code that works for me (Firefox 2.0):hey, thanks for your help. but i cannot seem to work it. I am not sure where i have to put these tages in to work. I am trying to get a grey background, but want the middle to be normal if you get me. like http://www.kingofpoker2007.com/. Can you help me please, thank you<html><head><title>CSS Example</title><style type="text/css">body { background-color: gray; margin: 0;}div#main { background-color: white; width: 70%; position: absolute; left: 15%; height: 100%; border: 1px solid black;}img.banner { width: 100%;}</style></head><body><div id="main"><img class="banner" height="50px" width="175px" src="http://link/to/image.jpg" /><span>some stuff here</span><div id="inner">more stuff here</div><table border=1><tr><td>even a table!</td></tr></table></div></body></html>My advice would be to work on the base. e.g. the blank page with the background you want, and the "normal" page in the middle. Then add the content you want. If you add everything at once, and there's a problem, then there's no way of knowing what's causing the problem....Hopefully this helps a little
-->
Displaying Images for Portfolio
in HTML/XHTML
Posted