CODEWITHSUNDEEP
htmlcss
user6650767
user6650767

Reputation:

Text cuts off page when resizing browser

This question is just about my menu at the top of the screen but it also applies to Ny table I have on my page.

Whenever I resize my browser, nothing moves at all. It all stays in the same place and just gets cut off the screen.

HTML:

<div class="navigation">
    <a href="../Page2/Page2.HTML"><object class="menu" id="Rosa"> Rosa Parks </object></a>
    <a href="../Page3/Page3.HTML"><object class="menu" id="Martin">Martin Luther Jr.</object></a>
    <a href="../page4/Page4.html"><object class="menu" id="Malcom">Maclom X</object></a>
    <a href="../Page5/Page5.html"><object class="menu" id="Design">Design</object></a>
    <a href="../Page1/Website.html"><object class="menu" id="BlackTitle">Black History Site</object></a>
    <a href="../Page1/Website.html"> <img id="Fist" src="../Assets/Fist.png" alt="White Fist"/></a>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: grey;
}

.navigation {
    width: 1280px;
    height: 60px;
    background-color: black;
    position: absolute;
}

.menu {
    display: inline-block;
    color: white;
    float: right;
}

#Rosa {
    color: White;
    font-family: Arial Black;
    width: 100px;
    height: 25px;
    min-height: 5px;
    padding: 2px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    overflow: hidden;
    margin: 14px 1165px;
    position: absolute;
}

#Martin {
    color: White;
    font-family: Arial Black;
    width: 147px;
    height: 25px;
    padding: 2px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    overflow: hidden;
    margin: 14px 995px;
    position: absolute;
}

#Malcom {
    color: white;
    font-family: Arial Black;
    width: 87px;
    height: 25px;
    padding: 2px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    overflow: hidden;
    margin: 14px 885px;
    position: absolute;
}

#Design {
    color: white;
    font-family: Arial Black;
    width: 60px;
    height: 25px;
    padding: 2px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    overflow: hidden;
    margin: 14px 800px;
    position: absolute;
}

#BlackTitle {
    color: white;
    font-family: "Bree Serif", "serif";
    width: 380px;
    height: 50px;
    float: right;
    font-size: 40px;
    padding: 10px;
    overflow: hidden;
    margin: -8px 250px;
    letter-spacing: 2px;
    position: absolute;
}

.navigation a {
    text-decoration: none;
    color: black;
}

#Fist {
    max-height: 3.77em;
    float: left;
    margin-right: 5px;
    position:absolute;
}

Please let me know if you need anything else. This problem is driving me crazy because I can't figure out what I am doing wrong.

Upvotes: 0

Views: 3515

Answers (2)

JesseEarley
JesseEarley

Reputation: 1032

You have a few problems here...

  1. You are absolutely positioning elements, so when your browser shrinks down, they are going to stay where you told them to go.
  2. You are setting explicit widths on elements rather than using percentages, so elements aren't going to adjust as you shrink it down or resize.

Here is the CodePen: https://codepen.io/anon/pen/aWpRBq

Not sure why you had the <object> elements in there, but I removed them. I also simplified your CSS. The layout will still break if you shrink the browser down to where the nav runs into the title, but you would need to fix that with media queries.

   * {
    margin: 0;
    padding: 0;
}

body {
    background-color: grey;
}

.navigation {
    width: 100%;
    height: 60px;
    background-color: black;
    position: absolute;

}

.navigation ul{
    float: right;
    position: relative;
    top: 20px;
}

.navigation li{
    display: inline;
    padding: 0 10px;
}

.navigation ul li a{
    color: White;
    font-family: Arial Black;
    height: 25px;
    padding: 2px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    text-decoration: none;
}



.blackTitle {
    color: white;
    display: block;
    float: left;
    font-family: "Bree Serif", "serif";
    font-size: 40px;
    padding:10px;
    letter-spacing: 2px;
    text-decoration: none;
}


<nav class="navigation">
    <a href="../Page1/Website.html" class="blackTitle">Black History Site</a>
    <ul>
        <li>
            <a href="../Page5/Page5.html">Design</a>
        </li>
            <li>
            <a href="../page4/Page4.html">Maclom X</a>
        </li>   
        <li>
            <a href="../Page3/Page3.HTML">Martin Luther Jr.</a>
        </li>   
        <li>
            <a href="../Page2/Page2.HTML">Rosa Parks</a>
        </li>       
    </ul>
</nav>

Upvotes: 1

Libin C Jacob
Libin C Jacob

Reputation: 1138

If you could possible try the responsive design. That will adjust the things according to the screen size.

You just go through the following links will get an idea about the responsive design

http://www.entheosweb.com/website_design/responsive_web_design.asp

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

If you want to fix the issue temporarily you just make all the width as in percentage.

Upvotes: 0

Related Questions