Everything posted by aj47
-
My first webpage
The css was originally all in my style sheet but i moved it in to the source so I could get different lengths of the sidebar on different pages, not sure if theres a way i get around that? I agree with the blockyness of the page too. Once i finally manage to get photoshop to install properly i'll try blending in the colors where the header and sidebar meet, maybe try curving the edges of the header too. Anyway thanks for the feedback everyone.
-
My first webpage
After quite a long time crying over my computer and a ridiculous amount of help from people on this forum, i've finally finished my first webpage... http://antidepressants.zxq.net/ ... what do you guys think? Im a bit unsure on the red rollover on the links.
-
Why doesn't my site work?
aha i just noticed all the files that aren't uploading i've saved beginning with capital letters. Should I change the code or resave the files beginning with lowercase letters? Does it matter.
-
Why doesn't my site work?
I don't understand.. why change the links to black when there meant to be white. I want them to be white! Anyway im a bit confused as to why my image links are wrong? the side bar background code im using is .... <style type="text/css"> #sidebar { float: left; width: 100px; height: 485px; padding: 30px 50px 10px 20px; background-image: url("sidebar-doubled-flipped.jpg"); background-repeat: repeat-y;} </style> and the file i've uploaded is named the same
-
Why doesn't my site work?
Yes your right the links are meant to be white. Anyway the url for the image is definitely correct as if I open the index file in my browser it works perfectly! Also it is not just the picture.. page 3 doesn't work either.
-
Why doesn't my site work?
I recently finished making a website and have been trying to host it but everytime I upload it seems to be missing pictures (i.e. the sidebar background) and couple of pages don't work. The pictures are definitely uploaded which is why its confusing me I've tried uploading to .... http://antidepressants.zxq.net/ and .. http://adchem.110mb.com/index.html .. and its the same problem with both. Can anyone help me?
-
Fade in content
Thanks for the replies. So can you not do this with writing in some javascript code or is it just easier with software?
-
Whats wrong with my css?
actually no worries i think it was just the extra brace..silly me. It seems to validate now. Thanks all
-
Whats wrong with my css?
hmm sorry its uploaded to my unversity server which you can't access outside the network. I can give you example of one of my pages though .... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Stereisomerism and Drug Design</title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> #sidebar { float: left; width: 100px; height: 2015px; padding: 30px 50px 10px 20px; background-image: url("sidebar-doubled-flipped.jpg"); background-repeat: repeat-y;} </style> </head> <body> <div id="container"> <div id="header"> <h1><span style="color: white">The Chemistry of Antidepressants</span></h1> </div> <div id="sidebar"><hr> <p class="class2"><a href="index.html"><b>What are Antidepressants?</b></a></p> <p class="class2"><a href="page 2 history.html"><b>A Brief History of Antidepressants Drugs</b></a></p> <p class="class2"><a href="page3how.html"><b>How Antidepressants Work</b></a></p> <p class="class2"><a href="page5.html"><b>The Blood Brain Barrier </b></a></p> <p class="class2"><a href="page6.html"><b>Stereoisomerism and Drug Design</b> </a></p> <p class="class2"><a href="page7.html"><b>Prozac Synthesis : An Overview</b></a></p><hr> </div> <div id="content"> <br> <h2>Stereisomerism and Drug Design</h2> <hr><br> <h4>What is Stereoisomerism?</h4> <p> Stereochemistry which is the study of stereoisomers is an increasingly important consideration in medicinal chemistry. Stereoisomers are isomeric molecules that have the same atom to atom binding sequences but whose atomic arrangements in space differ. Enantiomers, which are types of stereoisomers, are particularly important as though they have the same chemical and physical properties, their biological effects may be completely different. </p> <p>A good example of this is the SSRI drug ‘citalopram'. Though originally sold as a racemic mixture it was discovered that the ‘<i>S</i>’ isomer (see right) of Citalopram had less side effects due <img src="s-citalopram.png" width="200" height="158" alt="S Isomer of Citalopram" style="float: right" /> to its increased selectivity of serotonin reuptake inhibition and was at least twice as potent. As a result the drug was re-released as the ‘<i>S</i>’ isomer under the name of ‘<b><i>Es</i></b>citalopram’ and sold at lower doses than the racemic mixture. </p> <p>Though often beneficial, separating enantiomers from a racemic mixture or carrying out stereoselective synthesis can be a complicated process that is only possible for minority of molecules. Whether or not a drug is sold as a stereoselective drug or as a racemic mixture is dependant on many factors such as toxicity and cost effectiveness.</p><br> <h4>Resolution and Enantioselective Synthesis </h4> <p>One method that chemists employ to resolve enantiomers is to convert them to diastereoisomers. Unlike enantiomers, diastereoisomers have different physical chemical properties, therefore after reacting an enantiomer with a diastereoisomer, the isomers can be resolved by conventional methods such as recrystallisation or chromatography. Once these diastereoisomers have been separated they can be converted back to an enantiomerically pure product. </p> <p>In neuropharmacology an example of this would be the synthesis of the SNRI antidepressant drug ‘Duloxetine’. In this reaction (summarised below), a racemic alcohol is dissolved in a mixture of solvents to which the (<i>S</i>) isomer of Mandelic acid is added. The (<i>S</i>) enantiomer of the alcohol then forms a diastereomeric salt with the mandelic acid and as this salt is insoluble it can then be filtered from the solution. Finally the free (<i>S</i>) alcohol is liberated upon deprotonisation by the addition of a base (NaOH).</p><br> <img src="Duloxetine.png" width="530" height="378" alt="Duloxetine Synthesis" /><br><br><br> <h4> Chiral Chromatography</h4> <p>Another method to separate enantiomers is chiral chromatography. Although enantiomers are indistinguishable in achiral environments, in chiral environments such as the body, they exhibit different chemical properties. To exploit this property, in a chiral column, achiral silica gel (SiO2) is converted into a chiral stationary phase by a reaction with a chiral molecule. Then when a racemic mixture is run down the column one enantiomer will stick better to the stationary phase and there will be separation. </p><br> <h4> Chiral Pool Synthesis</h4> <p>Though many drugs can be resolved, often it is more economical to synthesize a drug from an enantiomerically pure starting material. This is known as the Chiral Pool Strategy’. The chiral pool refers to a collection of cheap and easily obtained enatiopure starting materials such as amino acids and Monosaccharides. Whether or not this method is employed is dependant on how closely the enatiopure starting material resembles the desired molecule. If it is too dissimilar, then a lengthy synthesis with poor yields is often required which can be a great cost to the manufacturer.</p> <p> A common example used to illustrate this technique is the synthesis of the artificial sweetener ‘Aspartame’. This is synthesised via (<i>S</i>)-phenylalanine and (<i>S</i>)-aspartic acid which are both amino acids, therefore enatiopure. See below.</p> <img src="Aspartame.gif" width="405" height="336" alt="Aspartame Synthesis" /> <br> <br> <span style="font-size: 10pt;"><A HREF="#top">Top of Page</a> <br><a href="page7.html">Next Page >></a> </span><br><br> <hr> <address> <span style="font-size: 10pt;"> <br> Author: <a href="mailto:cha07aj@shef.ac.uk">Alexander Johnson</a> (document modification date: 26 apr 2008) </span> </address> </div> </div> </body> </html>
-
Fade in content
Hi im trying to make the content of my page fade in when it loads. Kind of like going between the tabs on http://validator.w3.org/#validate_by_uri Anyone know how i would go about doing this?
-
Whats wrong with my css?
Hi im trying to validate my css but I keep on getting the following error..'' Parse error - Unrecognized'' Can anyone help? My code is.......... * { padding:0; margin:0; } body {font-family: arial, verdana, sans-serif ; margin: 20px 0px 40px 0px;} #content { float: right; width: 570px; padding: 10px 20px 10px 0px;} #imageleftfloat img {margin: 0px 10px 4px 0px; } #header { width: 796px; height: 89px; padding: 20px 20px 10px 30px; background-image: url("headercrop.jpg"); background-repeat: no-repeat; position:relative; letter-spacing: 4px } h1 { position:absolute; top:35%;} h2 { font-size: 120%; padding: 10px 0px 10px 0px; color: rgb(228,7,7); letter-spacing: 1px } p {padding: 10px 0px 10px 0px; font-size: 97%; } } h4 {color: rgb(20,39,180); } hr { height: 1px; background-color: rgb(200,200,200); border: 0; } #antidepressant img {margin: 0px 0px 0px 7px;} #container {width: 800px; margin: 0 auto;} .class2 A:link { color: white; font-family: sans-serif; text-decoration: none;} .class2 A:visited {text-decoration: none ; color: white; font-family: sans-serif;} .class2 A:active { text-decoration: none ;color: red; font-family: sans-serif;} .class2 A:hover {text-decoration: none ; color: red; font-family: sans-serif; }
-
Trouble with resizing background image in header
hmm tried adding the span tags i.e. <div id="sidebar"><hr><p class="class2"><a href="index.html"><b>What are Antidepressants?</b></a><span> <p><a href="page 2 history.html"><b>A Brief History of Antidepressants Drugs</b></a></p> <p><a href="page3how.html"><b>How Antidepressants Work</b></a></p> <p><a href="page5.html"><b>The Blood Brain Barrier </b></a></p> <p><a href="page6.html"><b>Stereoisomerism and Drug Design</b> </a></p> <p><a href="page7.html"><b>Prozac Synthesis : An Overview</b></a></p><hr> </div> but it still doesn't seem to validate?
-
Trouble with resizing background image in header
Ah yes also one more thing. Im trying to get margins on my images but it isn't working. My image tags are for example .. <div id="moodbrightner"> <img src="moodbrightner.jpg" width="150" height="180" alt="Prozac Advert" style="float: left"/> </div> and in my header i have <style type="text/css"> #moodbrightner {margin: 10px 20px 10px 0px; } </style> I have also tried in my style sheet but it still doesn't work
-
Trouble with resizing background image in header
I have yet another bunch of problem that i can' seem to sort out. firstly i'm trying to make a group of links a different color but im not sure where to put the tags. In my style sheet I have .class2 A:link { color: white; font-family: sans-serif; text-decoration: none;} .class2 A:visited {text-decoration: none ; color: white; font-family: sans-serif;} .class2 A:active { text-decoration: none ;color: red; font-family: sans-serif;} .class2 A:hover {text-decoration: none ; color: white; font-family: sans-serif; } and then around the links i've put the following span tags ... <div id="sidebar"><span class="class2"><hr><p><a href="index.html"><b>What are Antidepressants?</b></a></p> <p><a href="page 2 history.html"><b>A Brief History of Antidepressants Drugs</b></a></p> <p><a href="page3how.html"><b>How Antidepressants Work</b></a></p> <p><a href="page5.html"><b>The Blood Brain Barrier </b></a></p> <p><a href="page6.html"><b>Stereoisomerism and Drug Design</b> </a></p> <p><a href="page7.html"><b>Prozac Synthesis : An Overview</b></a></p><hr><span> </div> however when I use that, although it works it doesn't pass validation. Where's the best place to place the tags. Also on the pages that do pass validation it always picks up errors with my image tags with the following warning Line 70, Column 85: NET-enabling start-tag requires SHORTTAG YES. …" alt="dopamine" style="float: right"/> ✉ The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HMTL 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HMTL 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML. It seems to go if i remove the close tags at the end of my image tags but I'm fairly sure they should be there. I've also been told that there should be a space before the close tags i.e. <img src="Monoamines.gif" width="514" height="84" alt="Deamination of Monoamines" /> but that doesn't seem to make a difference. One final thing that is the most annoying is when i open up my webpage in Internet explorer. For some unknown reason some of the images do not load and the font seems to go back to default style. Anyone know what I can do
-
Trouble with resizing background image in header
ah perfect. Thanks for all the help.
-
Trouble with resizing background image in header
hmm yea that works but its wierdly made all my paragraphs bunch together?
-
Trouble with resizing background image in header
Thanks for the speedy reply. I tried changing the position how you suggested but however i position it to look in firefox when i open in I.E the writing in the header always appears a little higher.
-
Trouble with resizing background image in header
sure i know there are quite a few errors in it as it doesn't pass any validation but im not sure why.... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>The Chemistry of Antidepressants</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header"><span style="color: white"> <h1>The Chemistry of Antidepressants</h1> </span> </div> <div id="sidebar"> <b> <p><a href="page1.html">What are antidepressants?</a></p> <a href="page 2 history.html">A brief history of antidepressants drugs</a> <p><a href="page3how.html">Neurotransmitters and depression</a></p> <p><a href="page4howantidepressantswork.html">How do antidepressants work? </a></p> <p><a href="page5.html">The Blood Brain Barrier </a></p> <p><a href="page6.html">Stereoisomerism and drug design </a></p> <p><a href="page7.html">Prozac synthesis an overview</a></p> </b></div> <div id="content"> <br><span style="color:rgb(3,97,152)"> <h2> What Are Antidepressants?</h2> </span> <p> Antidepressants are a class of mood-stabilising drugs prescribed to treat clinical depression, anxiety, and a wide range of other psychiatric disorders. With current figures suggesting depression affecting an estimate of 7-12% of men and 20-25% of women at some point in their lives, antidepressants have become one of the most commonly prescribed medicines worldwide. </p> <div id="antidepressant"> <img src="antidepressants.jpg" width="200" height="150" alt="Fluoxetine pills" style="float: right"/> </div> <p> Although millions of pounds have been spent on researching antidepressants, they are far from benign and their adverse effects are well documented and the subject of many studies. As a result, the chemical and biological mechanisms behind how these drugs work are becoming increasingly important as pharmaceutical companies spend millions on finding 'rationally designed' safer alternatives to the current drugs on the market.</p> <p> This website is a short introduction to the chemistry and pharmacology behind this class of drugs and a brief overview of the constraints that chemists face today when designing an effective antidepressants.</p> </div> </div> <address> Author: <a href="mailto:......@shef.ac.uk">Alexander Johnson</a> (document modification date: 26 apr 2008) </address> </body> </html>
-
Trouble with resizing background image in header
hmm yea i managed to sort out some of it by changing the widths c but theres still the problem with the writing in the header not being centered even though i added padding above and below?
-
Trouble with resizing background image in header
I haven't uploaded it onto the Internet so i cant really send you a link at the moment. . The problem im having is i managed to get my page layout working in firefox then i opened up the page in internet explorer and its all moved around. The attached files are screen shots of what they look like in both browsers and the css code i've been using is ... body{font-family: arial, verdana,san serif ; margin: 20px 0px 40px 0px; } #content { float: right; width: 600px; padding: 0px 20px 10px 10px; } #sidebar { float: left; width: 100px; height: 630px; padding: 30px 50px 10px 20px; background-image: url("sidebarcrop.jpg"); background-repeat: repeat-y;} #header { width: 796px; height: 89px; padding: 20px 20px 10px 30px; background-image: url("headercrop.jpg"); background-repeat: no-repeat;} #antidepressant {margin: 20px 20px 20px 20px} #moodbrightner {margin: 20px 60px 20px 0px} #header {letter-spacing: 4px} #container {width: 800px; margin: 0 auto;} a:link { color: white; font-family: sans-serif; text-decoration: none;} a:visited {text-decoration: none ; color: white; font-family: sans-serif;} a:hover { text-decoration: none ;color: red; font-family: sans-serif;} a:active {text-decoration: none ; color: white; font-family: sans-serif; }
-
Trouble with resizing background image in header
hmm I think it'll be ok if i make the header and sidebar stationary. Is it easy to do or will i have to rewrite my tags?
-
Trouble with resizing background image in header
Im trying to have an image as a background in my header but im having trouble getting it the right size, as the image is smaller then the header. So far i've written this in my style sheet... #header { width: 655; height: 100px; padding: 10px 20px 10px 20px; background-image: url("headercrop.jpg"); background-repeat: no-repeat;} Can anyone help?
-
Roll over image help
Excellent thanks for the replies guys
-
Roll over image help
hmm just managed to get it semi working. i used .... <img src="rollover0.png" id="Phenylethylamine" onMouseOver="getElementById('Phenylethylamine').src='rollover1.png'" onMouseOut="getElementById('Phenylethylamine').src='rollover1.png'"> It changes when i move the mouse on but not back when i take the mouse off. Anyone know why?
-
Roll over image help
Hi im new to webdesign and im trying to create a roll over image which changes when you put the mouse over but im having a little trouble getting it to work. When I open the following code in my browser nothing much happens... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html lang="en"> <head> <script type="text/javascript"> var revert = new Array(); var inames = new Array('smirk'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped = new Image(); flipped.src = "media/"+inames+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Roll over</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <img src="media/rollover0.png" name="Phenylethylamine" onMouseOver="over(0)" onMouseOut="out(0)"> <img src="media/rollover1.png" name="Dopamine" onMouseOver="over(1)" onMouseOut="out(1)"> </body> </html>