falcifer
-
Posts
55 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by falcifer
-
I'm not sure that it's entirely possible with CSS. You'd probably have to use some JavaScript.This thread should help a little.
-
-->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.
-
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.
-
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...
-
When do I use front slash " />" for form input, Html tags.
falcifer replied to volitics's topic in HTML/XHTML
That's cool. Thanks.I guess I always had good habits in HTML anyway... -
When do I use front slash " />" for form input, Html tags.
falcifer replied to volitics's topic in HTML/XHTML
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... -
http://fedoraproject.org/wiki/FAQ#head-71f...51c31c50a38323eThat should help
-
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...<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.
-
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.
-
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'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...
-
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...<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. As far as I know, text browsers only display the textual content. So it would skip the flash stuff. 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 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.
-
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.
-
Thanks. 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. ;-) Not to mention the fact that most people that I know hate the marquee tag. But at least it's not a flashing marquee...
-
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):<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