stackoom
  简体   繁体   中英

Div Positioning & Positioning at resizing of page {Html}

 原文  2021-01-03 11:44:32  8   3    html/ css/ web

Question

I am a beginner level at web programming. I am trying to make a clone of the google search page. I achieved to build the structure of the clone website.

First Problem

However, I have trouble with the positioning of the divs. I am using form class to search written text, and I want to add the picture of the google logo above this form with a specific margin. I used divs to divide the page to achieve this. However, when I change the google frame div position all divs are changing with this change. For example, when I change #oneGoogleBar margin, form and #otherlinks is changing. I could achieve to change #otherlinks by changing its margin value but it is not the solid solution (every time do I need to change it, for example (if I have multiple divs this approach will be very tedious).

Second Problem

When I resize (make webpage smaller) the #otherlinks starts to move down. I also did not understand that reason.

I have asked these questions in the same question due to the fact that probably these are beginner-level problems. You can find the code below.

HTML 

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="index_css.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id="oneGoogleBar">
    <iframe id="backgroundImage" frameBorder = "0"
        src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </iframe>
       </div>
        <div id="form_div">
        <form action="https://google.com/search" class="form">
            <input type ="text" name="q"> <br><br>
            <input type ="submit" value="Google Search">
            <input type ="submit" value ="I'm Feeling Lucky">
        </form>
        </div>
        <div id = "other_links">
        <a href="googleImage.html" class=google_image_page>Google Image Search</a>
        <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
    </body>
</html>

CSS 

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.form{
    text-align: center;
    padding-top:150px;
}
input[type=submit]{
    
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    border-radius:inhterit;
    color: #3c4043;
    font-family: arial,sans-serif;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding-left: 25px;
    outline:none;
}

input[type=text]:hover{
    border-color:#9DD9F3;
}


input[type=text]{
    width : 385px;
    height: 25px;
    border-radius: 15px;
    outline:none;
    
}
.google_image_page{
    font-family: arial,sans-serif;
    color:black;
    text-decoration:none;
    font-size:13px;
    
    
}

.google_advanced_page{
    font-family: arial,sans-serif;
    color:black;
    text-decoration:none;
    font-size:13px;
    
}


#other_links{
     margin-top : -40%;
     margin-left : 80%;
     margin-bottom: -85%
 }

 #oneGoogleBar{
     position: relative;
     margin-left : 42%;
     margin-top: 15%;
     max-width:10%;
     max-height: 10%
     
     
 }

3 answers

solution1
 0  2021-01-03 12:14:09

You have made your html document very complex which is not required. instead of <iframe> you could simply use <img> tag. and in your CSS you have used % for margin property, which is making the alignment messy. Take a look at this.

HTML File 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li>Gmail</li>
        <li>Images</li>
      </ul>
    </nav>
    <main>
      <img
        class="logo"
        src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
        alt=""
      />
      <form action="">
        <input type="text" /> <br />
        <br />
        <input type="submit" value="Google Search" />
        <input type="submit" value="I'm Felling Lucky" />
      </form>
    </main>
  </body>
</html>

CSS File 

body {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: row-reverse;
}
nav ul li {
  margin: 20px;
}

main {
  align-items: center;
}
.logo {
  display: block;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}
form {
  text-align: center;
}
input[type="text"] {
  margin-top: 20px;
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}

solution2
 0  2021-01-03 13:08:58

You are basically applying margin to each div, so it gets to the place you want it to be. Well that is not a very good practice.
Instead of doing this, simply use a

display: flex, ...

to achieve what you want. And basically in Html, elements are displayed based on their place in your code. Meaning, if you want to have a header that has 'Google Image Search' in it, Just write it first.

The reason that the place of your elements changes when you resize the page is, well you are using margin allover the place. It is only natural that it happens.


I would avoid using iframe, because there is no reason to use it. Just use a simple img tag in your html.


Index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
    <main>
        <img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google-img" />
        <div class="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" id="search-field">
                <div>
                    <button>Google Search</button>
                    <button>I'm Feeling Lucky</button>
                </div>
            </form>
        </div>
    </main>        
    </body>
</html>

Style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-top: 200px;
}

header {
  display: flex;
  width: 100%;
  align-items: right;
  justify-content: right;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.form-div {
  width: 100%;
  margin-top: 35px;
}

.form div {
  margin-top: 20px;
}

.form div button {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
}
.form div button:hover {
  cursor: pointer;
}

#search-field {
  width: 80%;
  height: 44px;
  border-radius: 24px;
  border: 1px solid #dfe1e5;
  padding-left: 30px;
}
#search-field:focus {
  outline: none;
}

Just some notes:

  • In Html and css, you don't use camelCaseNaming, you simply put a - between different parts. So oneGoogleBar should be one-google-bar
  • Don't use iframe.
  • You shouldn't use <br> for aligning iteams. See how I did it using flex box.
  • Name your css file, Style.css. There is no rule, but usually that 's the way people usually write their code.
  • And if you want to build a page that already exists, it's a very good practice to inspect the page. You can learn a ton from it.
  • And the last but the most important thing: Keep up the good work.

Edited:

List of changes:

  • I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
  • I changed the name 'index_css.css' to 'style.css'
  • I changed the name 'oneGoogleBar' to 'one-google-bar'
  • I changed the name 'form_div' to 'form-div'
  • I changed the name 'other_links' to 'other-links'

I answer your questions in the same order you asked them:

1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\

Your Html Structure:
1) one-google-bar
2) form-div
3) other-links

If you change the place of 'one-google-bar', the place of those below it, also changes.

Solution:

You have to work in order. Start from the top elements, then move down.

List of changes:

  • I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
  • I removed the 'other-links' from your css. Because this element is already in the top part.
  • I made some changes in your 'one-google-bar' css file. The changes are as follows:

    • I removed 'position: relative'. because what is it that you want it to get relative to?

    • I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.

      Well there is a neat trick to put the element in the middle:

margin: 0 auto;

  • With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
    Now below that, change the top and bottom margin as you please.
  • I also changed 'max-width: 10%' to:

width: fit-content;

Not the right way to use max-width.

2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:

margin-top: 150px;

That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).

Solution:

Simply use px instead of %.

List of changes:

  • I changed 'margin-top: 15%' to:

margin-top: 15%;

Index.html:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id = "other-links">
            <a href="googleImage.html" class=google_image_page>Google Image Search</a>
            <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
        <div id="one-google-bar">
            <iframe id="backgroundImage" frameBorder = "0"
                src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </iframe>
       </div>
        <div id="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" name="q"> <br><br>
                <input type ="submit" value="Google Search">
                <input type ="submit" value ="I'm Feeling Lucky">
            </form>
        </div>
        
    </body>
</html>

style.css:

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
  text-align: center;
  padding-top: 150px;
}
input[type="submit"] {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  border-radius: inhterit;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding-left: 25px;
  outline: none;
}

input[type="text"]:hover {
  border-color: #9dd9f3;
}

input[type="text"] {
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}
.google_image_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

.google_advanced_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

/* #other-links {           //REMOVED
  margin-top: -40%;         //REMOVED
  margin-left: 80%;         //REMOVED
  margin-bottom: -85%;      //REMOVED
} */

#one-google-bar {
  /* position: relative;     //REMOVED       
  margin-left: 42%;          //REMOVED   
  margin-top: 15%;           //REMOVED           
  max-width: 10%;            //REMOVED       
  max-height: 10%;           //REMOVED  
  */
  width: fit-content;        /*ADDED*/                    
  margin: 0 auto;            /*ADDED*/                    
  /* margin-top: 15%;        //REMOVED*/
  margin-top: 150px;         /*ADDED*/   
}

solution3
 0 ACCPTED  2021-01-05 16:27:30

Edited:

List of changes:

  • I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
  • I changed the name 'index_css.css' to 'style.css'
  • I changed the name 'oneGoogleBar' to 'one-google-bar'
  • I changed the name 'form_div' to 'form-div'
  • I changed the name 'other_links' to 'other-links'

I answer your questions in the same order you asked them:

1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\

Your Html Structure:
1) one-google-bar
2) form-div
3) other-links

If you change the place of 'one-google-bar', the place of those below it, also changes.

Solution:

You have to work in order. Start from the top elements, then move down.

List of changes:

  • I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
  • I removed the 'other-links' from your css. Because this element is already in the top part.
  • I made some changes in your 'one-google-bar' css file. The changes are as follows:

    • I removed 'position: relative'. because what is it that you want it to get relative to?

    • I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.

      Well there is a neat trick to put the element in the middle:

margin: 0 auto;

  • With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
    Now below that, change the top and bottom margin as you please.
  • I also changed 'max-width: 10%' to:

width: fit-content;

Not the right way to use max-width.

2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:

margin-top: 150px;

That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).

Solution:

Simply use px instead of %.

List of changes:

  • I changed 'margin-top: 15%' to:

margin-top: 15%;

Index.html:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id = "other-links">
            <a href="googleImage.html" class=google_image_page>Google Image Search</a>
            <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
        <div id="one-google-bar">
            <iframe id="backgroundImage" frameBorder = "0"
                src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </iframe>
       </div>
        <div id="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" name="q"> <br><br>
                <input type ="submit" value="Google Search">
                <input type ="submit" value ="I'm Feeling Lucky">
            </form>
        </div>
        
    </body>
</html>

style.css:

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
  text-align: center;
  padding-top: 150px;
}
input[type="submit"] {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  border-radius: inhterit;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding-left: 25px;
  outline: none;
}

input[type="text"]:hover {
  border-color: #9dd9f3;
}

input[type="text"] {
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}
.google_image_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

.google_advanced_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

/* #other-links {           //REMOVED
  margin-top: -40%;         //REMOVED
  margin-left: 80%;         //REMOVED
  margin-bottom: -85%;      //REMOVED
} */

#one-google-bar {
  /* position: relative;     //REMOVED       
  margin-left: 42%;          //REMOVED   
  margin-top: 15%;           //REMOVED           
  max-width: 10%;            //REMOVED       
  max-height: 10%;           //REMOVED  
  */
  width: fit-content;        /*ADDED*/                    
  margin: 0 auto;            /*ADDED*/                    
  /* margin-top: 15%;        //REMOVED*/
  margin-top: 150px;         /*ADDED*/   
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question DIv positioning in html page CSS/HTML Div Resizing and Table positioning html div positioning Blogger html div positioning HTML DIV Button Positioning Positioning div at the bottom of the page Positioning div at the bottom of the page HTML div positioning off HTML/CSS Div Positioning HTML footer/Div positioning
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM