Jump to content

silversquid

Members
  • Posts

    10
  • Joined

  • Last visited

Everything posted by silversquid

  1. I want to display the time period 1887-1920 right below the image. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>Tribute Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container-fluid"> <div class="well"> <div class="main"> <h1 class="text-primary">Srinivas Ramanujan</h1> <h3 id="subhead">The man who knew infinity</h3> <figure> <img class="img-responsive img-rounded img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Srinivasa_Ramanujan_-_OPC_-_1.jpg" alt="Srinivas Ramanujan" width="22%" height="28%"> <figcaption>1887-1920</figcaption> </figure> <p id="para1"> <h3 class="head2">Why he is famous?</h3> <ul> <li>He is recognised as one of the greatest mathematicians of his time, but had almost no formal training in math.</li> <li>His infinite series for pi was one of his most celebrated findings.</li> <li>He was the second Indian to be inducted as a Fellow of the Royal Society.</li> <li>He compiled 3,900 results (mostly identities and equations), before he lost his life at the age of 32. </li> <li> A follower of his family goddess Mahalakshmi, Ramanujan credited her for his abilities.</li> <li>His house in Kumbakonam is now maintained as the Srinivasa Ramanujan International Monument.</li> <li>There is also a museum dedicated to telling Ramanujan’s life story.</li> </ul> <h3 class="head2">Life of S. Ramanujan-</h3></p> <p id="para2"> Born in South India, Ramanujan was a promising student, winning academic prizes in high school. But at age 16 his life took a decisive turn after he obtained a book titled A Synopsis of Elementary Results in Pure and Applied Mathematics. The book was simply a compilation of thousands of mathematical results, most set down with little or no indication of proof. It was in no sense a mathematical classic; rather, it was written as an aid to coaching English mathematics students facing the notoriously difficult Tripos examination, which involved a great deal of wholesale memorization. But in Ramanujan it inspired a burst of feverish mathematical activity, as he worked through the book's results and beyond. Unfortunately, his total immersion in mathematics was disastrous for Ramanujan's academic career: ignoring all his other subjects, he repeatedly failed his college exams.As a college dropout from a poor family, Ramanujan's position was precarious. He lived off the charity of friends, filling notebooks with mathematical discoveries and seeking patrons to support his work. Finally he met with modest success when the Indian mathematician Ramachandra Rao provided him with first a modest subsidy, and later a clerkship at the Madras Port Trust. During this period Ramanujan had his first paper published, a 17-page work on Bernoulli numbers that appeared in 1911 in the Journal of the Indian Mathematical Society. Still no one was quite sure if Ramanujan was a real genius or a crank. With the encouragement of friends, he wrote to mathematicians in Cambridge seeking validation of his work. Twice he wrote with no response; on the third try, he found Hardy.<br>Hardy wrote enthusiastically back to Ramanujan, and Hardy's stamp of approval improved Ramanujan's status almost immediately. Ramanujan was named a research scholar at the University of Madras, receiving double his clerk's salary and required only to submit quarterly reports on his work. But Hardy was determined that Ramanujan be brought to England. Ramanujan's mother resisted at first--high-caste Indians shunned travel to foreign lands--but finally gave in, ostensibly after a vision. In March 1914, Ramanujan boarded a steamer for England. Ramanujan's arrival at Cambridge was the beginning of a very successful five-year collaboration with Hardy. In some ways the two made an odd pair: Hardy was a great exponent of rigor in analysis, while Ramanujan's results were (as Hardy put it) <em>"arrived at by a process of mingled argument, intuition, and induction, of which he was entirely unable to give any coherent account".</em> Hardy did his best to fill in the gaps in Ramanujan's education without discouraging him. He was amazed by Ramanujan's uncanny formal intuition in manipulating infinite series, continued fractions, and the like. <br><br> </p> <br> <blockquote> I have never met his equal, and can compare him only with Euler or Jacobi." <br> <span>-Hardy</span> </blockquote> <p id="foot">Read more about <em>S. Ramanujan:</em> <a href="https://www.usna.edu/Users/math/meh/ramanujan.html" target="_blank"> <button title="Opens in new tab" type="submit" class="btn btn-primary">Here</button></a> </p> </div> <footer> © writer 2017</footer> </div> </div> </body> </html> CSS:- body{ line-height: 200%; } .well{ margin:5% 6% 5% 6%; } h1{ text-shadow: 2px 2px 3px; text-align: left; font-family: Algerian; } #subhead{ text-align: left; font-style: italic; text-shadow: 0 0 2px; font-family: "Comic Sans MS"; border-bottom: 2px solid gray; padding-bottom: 2%; } .head2{ text-shadow: 0 0 1px; } figure{ margin: 2%; display: inline; } img{ float: left; display: inline; } p{ text-align: justify; margin: 0 0 0 5px; } ul{ margin: 0 5% 5% 5%; padding-left: 20%; } li{ margin-left: 9%; } blockquote{ margin-left: 20%; } span{ margin-left: 70%; } #foot{ margin: 10% 0 1% 75%; } footer{ margin:3% 0 0 40%; } .main{ border-bottom: 2px solid gray; }
  2. sorry but this is what you are looking for- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> add the above line to your <head> section. The page will adjust when you resize.
  3. I have made a navigation bar. How to change code so that all the tabs open in the same page? Is it possible using html and css only?
  4. Yes got it! Sorry bad question. Too much code caused the confusion. Thanks...
  5. Hello, so I used the universal selector to customize my page using CSS. All the defaults have got removed but now the text does not wrap around the image. I have removed all the CSS customization and have only HTML structure left. So how do I get the text to wrap around the image while using the universal selector '*' as well? It's a naive question, maybe. I basically had to start the page from scratch. I will be creating a nav bar for easy access. The code follows:- <body> <header> <h1>Birds of the Wetlands</h1> </header> <nav> <ul> <li class="selected"><a href="azure.html">AZURE</a></li> <li><a href="little.html">LITTLE</a></li> <li><a href="kakadu.html">KAKADU</a></li> <li><a href="jacana.html">JACANA</a></li> </ul> </nav> <main> <h2>Azure Kingfisher</h2> <article> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge in new window" src="thumbnails/birdpict.png" alt="thumbnail" style="height:150px; width:110px" /></a> </figure> <p>This stunning little kingfisher is common on waterways across the <a title="Top End Australia Video"; href=" " target="_blank">Top End</a>, but can be difficult to see well. It is usually seen streaking past in direct flight, low over the water like a little blue missile. Its passing is often announced by a high-pitched "seep" call which, if learnt, will give you a good clue to the bird's presence. A good strategy for seeing this species is to sit quietly beside a small creek or billabong where they are known to occur. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill.With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill.With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill.With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill and a long, black bill. With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill. </p> </article> </main> </body> </html>Here is what the page looks like sans customization :- Any tips and advice are most welcome.
  6. Now there is some distance between the image and the left border. I had to use (minus) 20 padding-left for img element. HTML - <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>Azure Kingfisher</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="author" content="Someone" /> <link rel="stylesheet" href="style.css" /> </head> <body> <main> <article> <header> <h1>Azure Kingfisher</h1> </header><hr> <p>This stunning little kingfisher is common on waterways across the <a title="Top End Australia Video"; href=" " target="_blank">Top End</a>, but can be difficult to see well. It is usually seen streaking past in direct flight, low over the water like a little blue missile. Its passing is often announced by a high-pitched "seep" call which, if learnt, will give you a good clue to the bird's presence. A good strategy for seeing this species is to sit quietly beside a small creek or billabong where they are known to occur.</p> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge in new window" src="thumbnails/birdpict.png" alt="thumbnail" style="float:left; height:150px; width:110px" /></a> </figure> <p id="arc2">With patience, and a little bit of luck, you may see a bird perched quietly at the water’s edge, usually on a low branch or snag, staring intently at the water and constantly bobbing its head (which helps with depth perception). If it spots a fish, it will dive off its perch and plunge into the water in pursuit, usually returning to the same perch with a tiny fish in its bill. This beautiful bird is dark purplish-blue above and orange below, with tiny red feet and a long, black bill. There is a lot more that can be written kdf knsadfkn df adfn dkfn dfgn odngfo kn. dfn odif dnf df kndfndpifjgrepgmdgwregpoe meggpoer megpjepr mep. pejgpoj egmepog .eg peojgp oeg. egpo pgoergeporg , oegoejrpwg meg.gko ego epogoerg ..g poergpo apergj pav;lmerpjg eg. e.gerg/ ergo perjgop ajepgrj opaejgpoaejgp jepgjpejgeprjgk emgbkmeprgjkdmfgjejgkdlfm jg mggkj ijerkgm ejrgpj preg mapergj ldfg mrjoeg dmfnlheg lng ndgh kgn kdjfg hoeirglk ;eajgoifjg ldmfg joeirjg ld;kfg lkjdfklg joierjo jgkelgm lkjdfgoi jegoijerkg llekjrg oiejrg erglkj ergjirug klerjgiadfogijreuseoiu sidg lkdfjg ljkdfglkj dofiugeoiurg jfdkjgkjfgkjgkjfgk jkjg kjfgkj fkjfkg kjfkgj kfgjkfgj jfkg kfjgk jfkgj kfjgkfj gk fjgkj fkgjfkgj kfjgkfjg kjfkjg kjfkg jfkjg kjfkg jfkg jfkjg kjfkg kfjgkj rirugiurituritapodfkeirjg iejrg ijergje r[gje o[ij. </p> </article> <footer> <p>Posted by:- <strong>Someone</strong></p> <p>Contact Info:- <a href="mailto:someone@gmail.com">Email</a></p> </footer> </main> </body> </html> CSS :- body{ background-color: #1eed8c; margin-right: 20%; margin-left: 20%; font-family: sans-serif; line-height: 180%; } main{ border: 2px dotted blue; background-color: powderblue; border-radius: 10px; } h1{ color: blue; text-align: center; } article{ color: blue; padding: 5px; border-bottom: 1px solid rgb(88, 88, 88); } img{ border: 2px solid black; margin-right: 15px; ; } footer{ margin-left: 74%; padding: 10px; border-left: 1px solid black; } a:link {color: blue; background-color: transparent; text-decoration: none;} a:visited {color: maroon; background-color: transparent; text-decoration: underline;} a:hover {color: yellow; background-color: transparent; text-decoration: none;} As you can see, img margin left is negative to adjust the image. I can't find why the image is inset and why there is space between the image and left border.
  7. 1) Removed <p> element. 2) Got it! 3) Thanks for the correction.
  8. the figure element has no margin and padding! but still the image is a little 'inset' from the left border so I am using negative padding to shift the image to the right.
  9. One more question - How to shift the img to the left so that the distance b/w img and left body border is equal to distance b/w img and text? I have added the following code to img:- img{ border: 2px solid black; margin-right: 15px; ; } I have added margin-left as (minus)20px. Is it okay to add a negative left margin? It seems to work here.
  10. HTML CODE:- <body> <main> <article> <header> <h1>Azure Kingfisher</h1> </header><hr> <p>This stunning little kingfisher is common on waterways across the <a title="Top End Australia Video"; href=" " target="_blank">Top End</a>, but can be difficult to see well. this is some text about the kingfisher this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdnf iuhrwei hear hoheo eogflkvoiejar glk oisdfj w oaif iasdfi asoif asidfjsaifdj osaijdfiasdf insadfoi</p> <p> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge" src="thumbnails/birdpict.png" alt="thumbnail" style="float:left; height:150px; width:110px" /></a> </figure> </p> <p id="arc2">this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdfh osadf' sfoi jsdfj sdofj sdfw'ej fsdlkf aslkfl askdfn sadf sadf oifn afoin asdfn saodifnwieafn'o iwnfkanef iewfan</p> </article> </main> Linked CSS:- body{ background-color: #1eed8c; margin-right: 20%; margin-left: 20%; border: 2px dotted blue; font-family: sans-serif; line-height: 180%; } h1{ color: blue; text-align: center; } p#arc2{ padding-left: 5px 5px 5px 5px; } article{ color: green; padding: 5px 5px 5px 5px; border-bottom: 1px solid rgb(88, 88, 88); } img{border: 2px solid black;} footer{ margin-left: 74%; } a:link {color: blue; background-color: transparent; text-decoration: none;} a:visited {color: maroon; background-color: transparent; text-decoration: underlined;} a:hover {color: yellow; background-color: transparent; text-decoration: none;} The pic of the kingfisher, which is a thumbnail, is right beside the text= arc2. There is no space between the image and the text. I tried padding the #parc2 (second article that was beside the image but still no effect). The image has a black border that I don't want to remove. If I add padding to the image the border sticks to the text(arc2).
×
×
  • Create New...