Jump to content

my2sens

Members
  • Posts

    3
  • Joined

  • Last visited

Everything posted by my2sens

  1. Sorry, couldn't think of a better title... but here is my latest issue. I am building a Sharepoint page for my team using HTML, and have created a wonderful looking site thus far. Problem is... when I switch to a larger screen everything 'widens' and then everything is out of sync. Is there a way to fix this? Make the page, 'sticky'? Here is my code: <!DOCTYPE html> <html> <img src="/sites/FIJA/SiteAssets/SitePages/Test/Financing%20Landing%20Page.jpg" " width="920" height="120"> ********* <style> * { box-sizing: border-box; } .column { float: left; padding: 10px; } .left { width: 75%; } .right { width: 25%; } .row:after { content: ""; display: table; clear: both; } </style> <body> <div class="row"> <div class="column left" style="background-color:#FFFFFFF;"> <img src="/sites/FIJA/SiteAssets/SitePages/Test/corporatelendingbutton.jpg" " width="220" height="100"> <img src="/sites/FIJA/SiteAssets/SitePages/Test/SPF.png" " width="220" height="100"> <img src="/sites/FIJA/SiteAssets/SitePages/Test/IFD%20Button.png" " width="220" height="100"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column right" style="background-color:#FFFFFF;"> <img src="/sites/FIJA/SiteAssets/SitePages/Test/Intake%20Form%20Button.png" " width="215" height="50"> <img src="/sites/FIJA/SiteAssets/SitePages/Test/Library%20button.png" " width="215" height="50"> <!DOCTYPE html> <html> <head> <style> h1 {text-align: center;} p {text-align: center;} div {text-align: center;} </style> </head> <body> <h1>REFERENCE SITES</h1> </body> </html>
  2. Let me try that, thank you.
  3. Hey Everyone! First off, thank you for this site - this is what I needed for my new job! I have a question where I need help. I am using HTML to build a Sharepoint page for my team. On the page I need 2 navbars, 1 on top of the other. The top nav bar will have 3 "buttons" and the bottom 4 "buttons". I have the following code, but here is the issue. I would like the top bar to fill the page, ie center above the 4, but it keeps sticking to the left! Thoughts? Ideas? Thanks! PS - Ignore the **** that's for me visually to know where a new item starts. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Arial, Helvetica, sans-serif;} .navbar { width: 100%; background-color: #FFFFFF; overflow: auto; align: center; } .navbar a { float: left; padding: 12px; color: black; text-decoration: none; font-size: 17px; width: 33%; /* Three links of equal widths */ text-align: center; } .navbar a:hover { background-color: #A1FFFA; } .navbar a.active { background-color: #4CAF50; } @media screen and (max-width: 500px) { .navbar a { float: none; display: block; width: 100%; text-align: left; } } </style> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">Search</a> <a href="#">Contact</a> </div> ****************** <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Arial, Helvetica, sans-serif;} .navbar { width: 100%; background-color: #FFFFFF; overflow: auto; } .navbar a { float: left; padding: 12px; color: black; text-decoration: none; font-size: 17px; width: 25%; /* Three links of equal widths */ text-align: center; } .navbar a:hover { background-color: #A1FFFA; } .navbar a.active { background-color: #4CAF50; } @media screen and (max-width: 500px) { .navbar a { float: none; display: block; width: 100%; text-align: left; } } </style> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">Search</a> <a href="#">Contact</a> <a href="#">Contact</a> </div> ******************
×
×
  • Create New...