Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by tejasamrute

  1. you seem to have implemented incomplete code for navigation...check this site.....customize your navbar and just add the code http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/
  2. <head><style type="text/css"> body,html { height:100%; margin:0; padding:0; } .frame { height: 100%; width: 100%; background-color: blue; text-align: center; } img { background: #3A6F9A; position: relative; top: 50%; } </style> </head> <body> <div class=frame> <img src="http://jsfiddle.net/img/logo.png"/> </div> </body>
  3. do i need to mention body,html should be 100%?.......i will try it out
  4. btw....i hope you don't remove padding from a universal class col-md-12....coz u might need that class somewhere else in your website and you might not get the desired results.....instead make a new class..disable the padding then add it besides col-md-12
  5. vertical-align only works with display: inline, inline-block, table-cells... there are so many ways to vertically center an elements in a div You can even center it without vertical-align property.......1 i used was very simple.. Just add img { background: #3A6F9A; position: relative; top: 50%;}
  6. <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"> * { margin:0; padding:0; } nav ul { margin:0; padding:0; height:30px; background-color:#333; } nav li { list-style-type:none; float:left; color:#fff; width:20%; text-align:center; line-height:30px; }</style></head><body><nav><ul> <li>Home</li> <li>Button</li> <li>Button</li> <li>Button</li> <li>Contact Us</li></ul></nav></body></html> Try this out
  7. li { width:20%; text-align:center } this will make it responsive until your font-size overpowers width of the li
  8. @s-play.....we cannot tell you whats wrong without looking at the code....Please show us what you have coded
  9. Please check browser compatibility for "column-count " property
  10. <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body,html { margin:0; padding:0;}.wrapper { width:980px; height:auto; margin:0 auto; background-color:yellow;}.para1 { width:320px; float:left; background-color:pink;}p { margin:0; padding:0;}.image { width:660px; float:right; background-color:red; text-align:center;}.multicolumn { width:100%; float:left; background-color:yellow; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3;}</style></head><body><div class="wrapper"> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies, risus ac fringilla volutpat, risus ex molestie velit, non lobortis nunc enim sed elit. Donec lobortis diam sed arcu gravida, vel viverra urna ullamcorper. Praesent arcu justo, sollicitudin eleifend nibh a, lacinia dictum nunc. Duis feugiat volutpat massa, et tincidunt purus dapibus sed. Mauris quis augue et elit condimentum varius. Integer vestibulum convallis orci, quis dapibus nisl semper a. Sed quis posuere quam. Nulla condimentum iaculis lorem in dignissim. Maecenas dictum quam ac ex porta finibus. Mauris eu ex dignissim, tristique purus id, vulputate libero. Etiam nulla mauris, feugiat in leo at, accumsan venenatis tortor. Nam gravida purus arcu, non gravida mauris scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies, risus ac fringilla volutpat, risus ex molestie velit, non lobortis nunc enim sed elit. Donec lobortis diam sed arcu gravida, vel viverra urna ullamcorper. Praesent arcu justo, </p></div> <div class="image">IMAGE</div> <div class="multicolumn"> <p>Aliquam at luctus lectus. Aliquam pharetra turpis euismod libero mollis lacinia. Donec vitae accumsan tellus, eu volutpat ligula. Aenean dapibus a sapien nec bibendum. Fusce dignissim quis dui in lacinia. Morbi quam ante, dictum in massa eget, aliquam iaculis libero. Aenean accumsan enim vel diam consequat, vel tincidunt mi malesuada. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse pharetra libero in ex porttitor tempus.Ut pellentesque sollicitudin augue ut fringilla. Cras ornare condimentum condimentum. Maecenas ac risus purus. Donec at venenatis sapien, dignissim auctor erat. Cras elementum faucibus neque, id pulvinar velit bibendum vel. Vestibulum ac ornare metus. <br><br>Morbi odio mi, maximus vel tortor et, lacinia consequat nisi. Duis lacinia est a maximus iaculis. Aenean commodo bibendum eros, quis molestie nulla cursus at. Suspendisse potenti. Proin blandit elit sit amet magna auctor efficitur. Nunc pulvinar ultricies mauris quis sollicitudin. Nam consequat blandit urna eu finibus. Aenean bibendum varius porttitor.Cras tempor nisi id tortor bibendum, ac fermentum ligula dictum. Mauris a pretium ligula. Etiam egestas enim et pharetra interdum. Donec aliquam massa in nunc bibendum scelerisque. In convallis porttitor turpis. Etiam quis augue erat. Proin sed elementum orci. Aenean pulvinar nibh dui, quis congue diam elementum et. Sed ultricies varius dolor, at pharetra enim ornare a. Ut mattis maximus lacinia. Aliquam at euismod odio. Donec erat nunc, faucibus sed euismod quis, fringilla nec justo. Ut magna leo, semper sed tristique et, dignissim et libero. Cras vestibulum ex ac mi gravida pulvinar. Pellentesque habitant morbi tristique senectus et <br><br>netus et malesuada fames ac turpis egestas. Mauris pulvinar scelerisque pretium.Fusce ac lacinia nibh. Nulla rhoncus nisl ut lorem pulvinar tincidunt. Mauris faucibus posuere tortor. Sed accumsan est sed lectus ultrices, sed accumsan massa blandit. Phasellus purus orci, dapibus vitae interdum in, sodales eget sapien. Vivamus nunc orci, sodales et fermentum vestibulum, ornare at enim. Curabitur at magna pretium, lobortis ex et, tempus leo. Curabitur justo nulla, posuere non elementum sit amet, faucibus in nibh. Praesent id eros fermentum libero rhoncus ullamcorper. Maecenas nec maximus ante. Donec malesuada euismod ante, eget <br><br />consectetur metus varius vel. Cras luctus consectetur ligula, et bibendum justo vehicula sed. Nunc in leo nunc. Nulla semper orci aliquet placerat suscipit. Aenean bibendum mi a dictum tincidunt. Praesent quis leo sit amet erat lobortis pretium.Aenean id leo dictum augue ornare eleifend. Aliquam id erat nec felis faucibus maximus. Nam nisi ante, interdum id lobortis sit amet, dictum ut neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc id volutpat massa. Fusce consequat tincidunt justo sed porta. <br><br>Morbi quis facilisis mi. Etiam at iaculis augue. Donec dictum malesuada felis sed placerat </p> </div> </div></body></html>
  11. #header {background: #1F1F1F url('../images/logo.png') no-repeat left top;} try this out
  12. if you want more fonts which can be easily embeded....then check the link https://www.google.com/fonts if you still do not like any fonts listed in the above link......then search for a font you like and go @font-face way.. btw which type of fonts are you in need of?....fancy font for headlines n stuff or straight simple font for paragraph.
  13. Just copy the html in all the page.....you want vertical or horizontal navbar??
  14. http://www.w3schools.com/cssref/css_websafe_fonts.asp
  15. https://www.google.com/fonts Google has a good collection of fonts which you can easily embed into your HTML page
  16. Please provide your html...
  17. these 3rd party form generator usually have a option to embed the form in your HTML Page and so is the option of reciever email....if that site doesn't work check the below link https://zapier.com/blog/best-online-form-builder-software/
  18. your code seems fine to me....what only concerned me is that you have left many <td class="blank"> unclosed starting from line 60 of your souce code... Hope to see Brentford in Premier League
  19. dsonesuk...help me out here....i did the below effect...a while ago....with img src.....but dint bother to check if it is perfectly valid under w3c..lemme if it is valid or not....<div class="container"> <a href="#"> <img src="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png" onmouseover="this.src='http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png'" onmouseout="this.src='http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png'" /></a> </div> .container img:hover { -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari */ transform: scale(1.2); } .container img { transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; } .container { width:300px; height:300px; margin: 0 auto; }
  20. yes........@newcoder1010.....i have posted another effect with background image
  21. html <div class="container3"></div> Css .container3 { width:300px; height:300px; margin:0 auto; background-image:url('http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png'); transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; } .container3:hover { width:300px; height:300px; float:left; background-image:url('http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png'); -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari */ transform: scale(1.2); }
  22. img:hover { border:2px solid red; box-shadow: 0 0 10px #333; -webkit-box-shadow: 0 0 10px #333; -moz-box-shadow: 0 0 10px #333; -o-box-shadow: 0 0 10px #333; -ms-box-shadow: 0 0 10px #333;} above is a basic code to highlight an image......if you have something different on your mind.....let us know
  • Create New...