CODEWITHSUNDEEP
csshtml
Ambidextrous
Ambidextrous

Reputation: 872

Content overlapping in html page, when windows size is changed

I have uploaded a web page The problem is that when I resize the window of browser, the content overlaps with each other. I saw multiple posts related to the topic online, but was not able to find a reasonable answer. I have tried position relative and everything I knew of. If you know, anything about how to solve this issue, please tell me.

CSS:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset 'UTF-8';

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small
{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; 
}

#intro
{
    position:relative;
    width:100%;
    height:30%;
    background: #566074;
    min-width:50%;
    min-height:20%;
}

#nav
{
     position:relative;
     width: 100%;
     height: 7%;
}

#buffer
{
    position:relative;
    width:100%;
    height:1%;
}

/* Base Styles */
#nav ul,
#nav li,
#nav a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#nav {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#nav ul {
  zoom: 1;
  background: #36b0b6;
  background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
  background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#nav ul:before {
  content: '';
  display: block;
}
#nav ul:after {
  content: '';
  display: table;
  clear: both;
}
#nav li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#nav li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}

#nav li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#nav li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#nav li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
img
{
    height:100%;
    position:relative;
    width:15%;
    padding-right:2%;
    float:left;
}

#intro p
{
    color: white;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:150%;
    padding-top:2%;
    font-weight:bolder;
}

#buffer1
{
    width:100%;
    height:1%;
    position:relative;
}

#content {
    position : absolute;
    width : 99%;
    height : 60%;
    background-color : #566074;
    text-align: center;
}
#content:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

HTML

<html>
    <head>
        <title>
            HomePage
        </title>

        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>

        <div id= 'intro'>
        <img src="pics/Sushil_Parti.jpg" alt="Sushil Parti">
        <p>
            Sushil Parti <br>
            Graduate Student <br>
            Dept. of Computer Science <br>
            University of Windsor 
        </p>
        </div>

        <div id='buffer'></div>

        <div id='nav'>
            <ul>
                <li class='active'> <a href='#'><span>About</span></a></li>
                <li> <a href='academics.html'><span>Courses</span></a></li>
                <li> <a href='research.html'><span>Research</span></a></li>
                <li> <a href='work.html'><span>Work Experience</span></a></li>
                <li> <a href='activities.html'><span>Activities</span></a></li>
                <li class='last'><a href='contact.html'><span>Contact Me</span></a></li>
            </ul>
        </div>

        <div id='buffer1'></div>

        <div id ='content'>
            <div id='info'>
                <p>
                    Hi, I am a first year MSc student in <a href="http://www1.uwindsor.ca/cs/">Computer Science</a> at 
                    <a href="http://www.uwindsor.ca/">University of Windsor</a>. </br>
                    I am currently working under the supervision of <a href ="http://danwu.myweb.cs.uwindsor.ca/">Prof. Dan Wu</a>. My research interests
                    include Computer Vision, Robotics, Machine Learning and AI.
                    <br> <br>
                    I have completed my bachelors degree (B.Tech) in Computer Science with specialization in Software Engineering from <a href="http://www.lpu.in/">Lovely Professional University</a> 
                    in 2011.<br><br>
                    <a href="docs\resume.pdf"> Curriculum Vitae </a> [PDF]
                </p>
            </div>
        </div>

    </body>
</html>

Image of webpage after window is resized.

![enter image description here][1

Upvotes: 1

Views: 1726

Answers (1)

David
David

Reputation: 34563

This is doing what you told it to do. You have min-height of #intro set to 20%. If you make the browser too small, then that 20% is not tall enough to show all of your text.

Try setting the min-height to be 150px. That seems to be enough to keep your text from being clipped. Then it will still grow if you make the window taller.

Upvotes: 2

Related Questions