The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Building a site in frames - can't adjust main window size, New to HTML need help adjust main frame window
Rizzano74
post May 5 2020, 02:24 PM
Post #1





Group: Members
Posts: 3
Joined: 5-May 20
From: Denver, CO
Member No.: 27,322



So I am sort of new-ish to HTML (I made a site back in 2004-2005 using Dreamweaver, which I can't afford atm if it's still a thing. Right now I am using WYSIWYG/Source program called BlueGriffon. It's been pretty much like Dreamweaver.

Anyway, I found a frame template on an HTML site, and modified the font, colors, link colors, etc to my liking. (I don't know if frames are even still used on sites, that's the style I had back in 2004-2005 for a site I built.)

The problem I am having is the header and main frames. The header was just wide enough for text but not an image, unless the image was pretty thin, so I adjusted the header's height to fit my site's Logo.

I cannot seem to adjust the height of the main window. I know some basic things about HTML like making links, linking images, opening links in parent frame or new window, adjusting font style size and color, etc, but what I don't know I have been pretty much able to use the WYSIWYG portion of the HTML editor and adapt accordingly. But like I said, I can't adjust the height of the main window to not overlap the header. Is there code to make the header in the forefront? Or code to adjust the height of the main window? I saw where "main" or "body" has a height of 100% and max-height of 100% so I tried adjusting that as well but it didn't do anything visible.

The screenshot below is what I mean:
IPB Image

And here is my code:
CODE
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Home</title>
    <style type="text/css">
br {
  font-family: "Comic Sans MS";
  font-size: 24px;
}

span {
  font-size: 24px;
}

ul {
  font-size: 24px;
}

h1 {
  font-size: 20px;
  font-family: "Comic Sans MS";
}

</style></head>
  <body>
    <p>
      <!-- Template by html.am -->
      <title>3 Rows, 2 Columns A</title>
      <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  height: 573px;
  max-height: 100%;
  font-family: sans-serif;
  line-height: 1.5em;
}

main {
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 230px;
  right: 0px;
  overflow: auto;
  background: white none repeat scroll 0% 0%;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #bcce98 none repeat scroll 0% 0%;
}

#footer {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #bcce98 none repeat scroll 0% 0%;
}

#nav {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 0px;
  width: 230px;
  overflow: auto;
  background: #dae9bc none repeat scroll 0% 0%;
}

.innertube {
  margin: 15px;
  font-family: "Comic Sans MS";
}

p {
  color: #555555;
  font-family: "Comic Sans MS";
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

nav ul a {
  color: darkgreen;
  text-decoration: none;
}

* html body {
  padding: 50px 0px 50px 230px;
}

* html main {
  height: 100%;
  width: 100%;
}

</style> </p>
    <header id="header" style="top: 0px; height: 128px;">
      <div class="innertube">
        <p><img src="images/HotBTransparent.png" alt=""></p>
      </div>
    </header>
    <main>
      <div class="innertube"><span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"></span></span>
        <div style="text-align: center;"><span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"><br>
            </span></span></div>
        <div style="text-align: center;"><span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"><br>
            </span></span></div>
        <div style="text-align: center;"><span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"><br>
            </span></span></div>
        <div style="text-align: center;"><span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"><br>
            </span></span></div>
        <div style="text-align: center;"><span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;">This
              is a placeholder for the website: HotB-Gaming.com, a community for
              PC gaming.</span></span><br>
          <span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"></span></span></div>
        <span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"><br>
          </span></span>
        <h1 style="text-align: center;"><span style="color: #555555;"><span style="font-family: &quot;Comic Sans MS&quot;;"></span></span><img

            src="images/website_under_construction1.png" alt="" style="width: 865px; height: 356px;">
        </h1>
        <p>
          <script>generateText(300)</script></p>
      </div>
    </main>
    <nav id="nav" style="top: 126px; height: 573px;">
      <div class="innertube">
        <h1><br>
        </h1>
        <ul>
          <li><a href="home.html" target="_parent">Home<br>
            </a></li>
          <li><span style="color: darkgreen;">About Us</span><br>
          </li>
          <li><span style="color: darkgreen;">Games We Play</span><br>
          </li>
          <li><span style="color: darkgreen;">Images</span></li>
          <li><span style="color: darkgreen;">Videos</span></li>
          <li><span style="color: darkgreen;">Links</span></li>
          <li><span style="  color: darkgreen;">Staff</span>
            <h1>Servers and Info</h1>
            <ul>
              <li><span style="color: darkgreen;">7 Days to Die</span><br>
              </li>
              <li><span style=" color: darkgreen;">Ark: SE</span><br>
              </li>
              <li><span style="color: darkgreen;">Conan Exiles</span></li>
              <li><span style="color: darkgreen;">Discord<br>
                  <img src="images/discordbutton.png" alt="" style="top: 380px; left: 15px; width: 86px; height: 82px;">
                </span></li>
            </ul>
          </li>
        </ul>
        <ul>
        </ul>
      </div>
    </nav>
    <footer id="footer">
      <div class="innertube"><br>
      </div>
    </footer>
    <br>
    <p></p>
  </body>
</html>


Thanks in advance for any help!!!!!

This post has been edited by Rizzano74: May 5 2020, 02:46 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 5 2020, 03:23 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



QUOTE(Rizzano74 @ May 5 2020, 09:24 PM) *

So I am sort of new-ish to HTML (I made a site back in 2004-2005 using Dreamweaver, which I can't afford atm if it's still a thing.


It is still a thing. But don't be sad. You are better off with a plain text editor that costs you nothing or very little in comparison.

QUOTE
Anyway, I found a frame template on an HTML site


That's not frames. And that's yet another good thing since frames are bad. wink.gif


QUOTE
The problem I am having is the header and main frames. The header was just wide enough for text but not an image, unless the image was pretty thin, so I adjusted the header's height to fit my site's Logo.


This is part of the problem.

QUOTE
I cannot seem to adjust the height of the main window.


While this is not. It isn't about the height of the main DIV (not window, it still isn't frames you've got). The problem is that everything is positioned and that the header has a fixed height. As of now the header is 128px high. And "main is positioned 50px from the top, so it partly covers #header. If you make #header higher you must increase the value for 'top' for #main with the same amount.

CODE

main {
  position: fixed;
  /* top: 50px; */
  top: 128px;
...

}


That should fix it. But I wouldn't recommend using a template that is as rigid as this one.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th June 2020 - 05:51 PM