HTML Picture tanong lang po

loktoy · Mar 10, 2023

ask ko lang po sa picture po kasi una picture po makikita na nakaalign na o nakaayos na pero kapag nililiitan ko na po yun screen ko makikita sa pangalawa picture na natatakpan nya po yun Header nya po..

ito po code ko

html code :

<body>
<header>
<div class="container">

<p><i>Republic of the Philippines</i><br><b>COMPANY</b><br> Quezon City, Philippines| 1101</p>
</div>
<img src="images/image1.png" alt="bswmlogo" class="responsive" width="100vh" height="100vh">
<hr>

</header>

css code :

*{
box-sizing: border-box;
}
.container p{
margin-left: 250px;
padding-top: 4vh;
}
.responsive {
margin-left: 250px;
position: absolute;
top: 10px;

}

🤖 · Mar 10, 2023

It seems that the issue you are encountering is related to the position property of the image. When you set the position property to absolute, it takes the image out of the normal flow of the HTML document and positions it relative to the nearest positioned ancestor (in this case, the header element). This means that when you zoom out and the header element gets smaller, the image stays in the same position and can overlap the text.

One solution could be to use a responsive design approach to ensure that the image and text elements adjust their position and size appropriately based on the screen size. Here's an example of how you could modify your code to achieve this:

HTML:

Code:

<body>
  <header>
    <div class="container">
      <p><i>Republic of the Philippines</i><br><b>COMPANY</b><br> Quezon City, Philippines| 1101</p>
    </div>
    <img src="images/image1.png" alt="bswmlogo" class="responsive">
    <hr>
  </header>
</body>

CSS:

Code:

* {
  box-sizing: border-box;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.container p {
  margin-bottom: 0;
}

.responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

In this code, the container element is given a maximum width and centered on the page using margin: 0 auto. The image is set to display as a block element with a maximum width of 100% and auto height, which allows it to scale down as the screen size decreases. The position property is not needed in this case since the image is now part of the normal document flow.

I hope this helps! Let me know if you have any further questions.

loktoy · Mar 10, 2023

🤖 said:
It seems that the issue you are encountering is related to the position property of the image. When you set the position property to absolute, it takes the image out of the normal flow of the HTML document and positions it relative to the nearest positioned ancestor (in this case, the header element). This means that when you zoom out and the header element gets smaller, the image stays in the same position and can overlap the text.

One solution could be to use a responsive design approach to ensure that the image and text elements adjust their position and size appropriately based on the screen size. Here's an example of how you could modify your code to achieve this:

HTML:

Code:

<body> <header> <div class="container"> <p><i>Republic of the Philippines</i><br><b>COMPANY</b><br> Quezon City, Philippines| 1101</p> </div> <img src="images/image1.png" alt="bswmlogo" class="responsive"> <hr> </header> </body>

CSS:

Code:

* { box-sizing: border-box; } .container { max-width: 1000px; margin: 0 auto; text-align: center; padding: 20px; } .container p { margin-bottom: 0; } .responsive { display: block; max-width: 100%; height: auto; margin: 0 auto; }

In this code, the container element is given a maximum width and centered on the page using margin: 0 auto. The image is set to display as a block element with a maximum width of 100% and auto height, which allows it to scale down as the screen size decreases. The position property is not needed in this case since the image is now part of the normal document flow.

I hope this helps! Let me know if you have any further quest

sinubukan ko po kasi nakacenter po sila gusto ko po mangyari ganito po sa picture na sa gilid ng header yun picture... sinubukan ko po iaddjust i modify pero ganun po nangyayari po

PHC-LEIIKUN · Mar 10, 2023

gamitan mo inspect element para ma e check mo papano

loktoy · Mar 10, 2023

PHC-LEIIKUN said:
gamitan mo inspect element para ma e check mo papano

sorry po medjo newbie lang po ako sa

PHC-LEIIKUN said:
gamitan mo inspect element para ma e check mo papano

pero maraming salamat po sir nagkaroon ulit ako ng idea pano makakuha ng souce code po

Euphoria_Sequoia · Mar 11, 2023

Naka position absolute kasi yung image mo. Need naka relative yan para sumabay pa rin siya sa flow ng div mo.

loktoy · Mar 11, 2023

Euphoria_Sequoia said:
Naka position absolute kasi yung image mo. Need naka relative yan para sumabay pa rin siya sa flow ng div mo.

maraming salamat po sir try ko po

jisoo69 · Mar 12, 2023

chatgpt is the key.

HTML Picture tanong lang po

Eternal Poster

Attachments

PHC Robot

Eternal Poster

Attachments

Forum Veteran

Eternal Poster

Addict

Eternal Poster

Forum Guru

Similar threads

Popular Tags

About this Thread

Online statistics