Web Analytics Made Easy -
StatCounter HTML5 CSS3 , I've done the nav bar but don't know how to proceed - CodingForum

Announcement

Collapse
No announcement yet.

HTML5 CSS3 , I've done the nav bar but don't know how to proceed

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML5 CSS3 , I've done the nav bar but don't know how to proceed

    My first topic on CodingForum
    Here's my thing, I'm back to web-programming and I want to step things up to a new level. I've done my navbar just the way I wanted, everything functions but now, when It came to text below the navbar I'm lost. I've tried doing something for hours and failed every time, that's why I gave up and joined this forum. I'm going to provide screenshots of everything I have till now so you don't have to worry about lack of information.
    My questions / requests:
    Please, don't only provide the solution but also explain it.
    How can I put text on both, left side and right side separated with the size of the logo in the background?
    How can I put credits stuff at the very bottom of the page?

    I didn't find spoilers to cover up images but w/e here they come:
    Index.html :

    [hr]
    HTML :

    [hr]
    CSS 1.Part :

    [hr]
    CSS 2.Part :


    Thanks for reading & helping,
    Florjan

  • #2
    Here is the editable code:
    index.html https://jpst.it/Nv4Y
    style.css https://jpst.it/Nv51

    Comment


    • #3
      My first topic on CodingForum
      You should have read the sticky on How to post = http://www.codingforum.net/html-and-...uidelines.htmlUse code tag to post your code. Then we can read it.

      How can I put text on both, left side and right side separated with the size of the logo in the background?
      Make a three column layout. Give each column a width and seperate them with margins.

      How can I put credits stuff at the very bottom of the page?
      Use a <footer>

      Code:
      <!DOCTYPE html>
      <html>
      <head>
      <title>New document</title>
      <style type="text/css">
      #head {
      	width: 100%;
      	height: 55px;
      	background-color: Pink;
      	margin-bottom: 10px;
      	text-align: center;
      	padding-top:20px;
      }
      #col_1 {
      	width: 30%;
      	margin: 0 5% 0 5%;
      	background-color: gray;
      	float: left;
      }
      #col_2 {
      	width: 15%;
      	float: left;
      	background-color: blue;
      }
      #col_3 {
      	width: 30%;
      	margin: 0 5% 0 5%;
      	background-color: gray;
      	float: left;
      }
      #wrapper{
      	width: 100%;
      	margin-bottom: 20px;
      }
      footer {
      	clear: both;
      	width: 100%;
      	height: 20px;
      	text-align: center;
      	padding-top: 20px;
      }
      </style>
      </head>
      <body>
      
      <div id="head">I am the Top</div>
      <div id="wrapper">
      	<div id="col_1">WRITING ON THE LEFT SIDE</div>
      	<div id="col_2">LOGO GOES HERE</div>
      	<div id="col_3">WRITING ON THE RIGHT SIDE</div>
      </div>
      <footer>SHOUT OUT OT ALL THE PEOPLE AND THINGS THAT HELPED ME</footer>
      
      
      </body>
      </html>
      Evolution - The non-random survival of random variants.
      Physics is actually atoms trying to understand themselves.

      Comment


      • #4
        Thank you very much, although I apologize for not reading the sticky post on top of the forums, didn't even see it.

        Comment

        Working...
        X