1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

DIV help

Discussion in 'HTML & Website Design' started by pirate_tat87, Mar 7, 2023.

0
  1. #1
    Below is the coding for both HTML and CSS - Everything is working with the coding but what I am trying to accomplish is to make the DIV's more of a square then a rectangle if possible. I will post images below.

    https://i.imgur.com/ejWPwyM.png <-- this is what I want it to look like if possible (this is how it displays in the W3Schools editor.

    https://i.imgur.com/TDtfEU3.png <--- this is how it currently looks when I copy the coding from W3Schools into Notepad++ 

    <!DOCTYPE html>
<html>
<head>
</head>
<title>Pirate's DMCA Service</title>

<body bgcolor="#D5D8DC">
   
<p><center><u><h1>DMCA Take Down/Copyright Claims</h1></u></center></p>   

<p><center><a href="https://piratesdmcaservice.com/DMCA-Compliant-Websites.html">DMCA Compliant Websites</a></center></p>
<p><center><a href="https://piratesdmcaservice.com/Non-DMCA-Compliant-Websites.html">Non DMCA Compliant Websites</a></center></p>
<p><center><a href="https://piratesdmcaservice.com/Online-Forums-Known-For-Leaks.html">Online Forums Known For Leaks</a></center></p>
<hr>
<body>

<div class="flex-parent-element">
  <div class="flex-child-element magenta"><br><b><center>About Me:</center></b><p><hr>
<center>My name is Vince. I have been a longtime member of the content-creating community, and throughout the years, I have noticed that there is a lot of content that
not only gets stolen from sites but also leaked onto many other sites that enable this kind of illegal activity. So I decided to take matters into my own hands and do my best
to assist content creators in having their stolen content removed. I am only one person, however, so I can't guarantee I can remove 100% of all content that has been leaked.
But I can promise that I will remove any content that can be removed.</center></div>
  <div class="flex-child-element green"><br><b><center>Cost:</center></b><p><hr>
<center>The cost of the service is $100 per month. I accept the following payment methods. Visa Online E-Gift Card, Cash App, PayPal.
Once we have discussed whether you want my service, then we can discuss the payment situation further!</center></div>
</div>
<div class="flex-parent-element">
  <div class="flex-child-element magenta"><br><b><center>So you may be asking what happens after I sign up with your services?</center></b><p><hr>
<center><ul>
    <li>The first thing that I do is I create a Microsoft Excel sheet that will I will share with you via e-mail that will provide real time updates on all activity.</li><p>
    <li>Every e-mail that is sent out to report DMCA take down requests I will CC (Copy) you on each e-mail that is also sent with an attached Microsoft Word document so that you will also have a hard copy for yourself.</li>
</ul></center></div>
  <div class="flex-child-element green"><br><b><center>Why choose you over other DMCA Services?</center></b><p><hr>
<center>This is a very great question. While I am new at this I have noticed through working with several content creators and information that has been provided to me that the current DMCA services that have been established still manage to not take down content that can be taken down in a timely manner. I have also been informed that most DMCA services also cost a lot more then what I am charging. I have learned the ins and outs so far about the correct and proper procedures to getting the content removed and with my technical support background and organization habbits I feel that you will be very happy with my services! </center></div>
  </div>
 
<div class="flex-parent-element">
  <div class="flex-child-element magenta"><br><b><center>What is DMCA? How does it help content creators?</center></b><p><hr>
<center>A DMCA Takedown is <b>when content is removed from a website or internet platform at the request of the owner of the content.</b> The DMCA Takedown is a well established and accepted internet standard followed by website owners and internet service providers everywhere.<b>&nbsp;Your right to process.</b> Any owner of content has the right to process a takedown notice against a website owner and/or an Online Service Provider (e.g. ISP, hosting company etc.) if the content owner's property is found online without their permission.
<p>
<i>Note: although the DMCA is part of US Copyright law, a DMCA Takedown does not always require the content to be copyrighted in order to process a takedown notice and for the content to be taken down by the website owner or OSP.</i>
</p>
<i>Simply Stated:</i> the fact the content is yours, or if the subject in the photo or video is you, can be reason enough to process a takedown notice AND for the content to be taken down.
<p>
<center><b>Important:</b>&nbsp;<font color="red">Although signing up for a DMCA service in general can be scary as you do not know what happens with your content that the company finds, It is important for me to relay that doing this service is 100 percent confidential and I do not benefit from any content that I may find.</font></center>
 
</div>
</div>
<hr>

<center>My Social Media</center>
<div class="center-screen">
<div class="socials">
  <div class="twitter">
      <a href="https://twitter.com/pirate_tat87" target="_Blank">
      <div id="test">
          <img src="http://piratesdmcaservice.com/big-twitter-logo.png" style="width:50px;height:50px;">
      </div>
  </div>   
</a>     
      <div class="twitter">
    <a href="https://instagram.com/Pirate_tat87" target="_Blank"> 
    <div id="test">
  <img src="http://piratesdmcaservice.com/87390.png" Style="width:50px;height:50px;">
    </div>
</div>
</a>
</div>
</div>
<p><center><a href="https://piratesdmcaservice.com/ContactMe.html" target="_blank">Contact Request Form</a></center></p>
<hr>
<center><h2><u>Testimonials</u></h2></center>

<div class="container">
  <img src="jswDz58s_400x400.jpg" alt="Avatar" style="width:90px">
  <p><span>@Naomihh666</span>Content Creator</p>
  <p>I have been using large name DMCA services for nearly a year now and they never seem to be able to catch all of the leaks or actually have everything removed.
  PiratesDMCAservice actually reached out to me on twitter to make me aware of some leaked content they had found while filing DMCA for another client and actually made the
  process of removing leaked content super easy. I have now been using their services for around a month and i can absolutely say that they are on top of making sure your content stays yours!
  They CC me in every DMCA email that is sent so i have records of where my content is being shared, brands responsiveness to DMCA filing,
  and how popular certain websites seem to be for sharing stolen content. I highly recommend using their services! </p>
</div>




</body>
</html>
    HTML:
    .flex-parent-element {
  display: flex;
  width: 100%;
}

.flex-child-element {
  flex: 1;
  border: 2px solid black;
  margin: 10px;
}

.flex-child-element:first-child {
  margin-right: 20px;
}

* {
  box-sizing: border-box;
}

.twitter {
  float: left;
  width: 47.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.socials::after {
  content: "";
  clear: both;
  display: table;
}
.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
a{
    display: block //by default anchor elements are not block elements
}
//make your div responsive
#test{
    max-width: 200px;
    width: 100%;
}
//this will make your image responsive relative to the parent div. If you shrink or stretch the div - the image would also shrink or stretch.
#test img{
     width: 100%;
}
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
 
  background-color: #D5D8DC;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
  content: "";
  clear: both;
  display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Increase the font-size of a span element */
.container span {
  font-size: 20px;
  margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 100px) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}
    Code (CSS):

     
    Solved! View solution.
    pirate_tat87, Mar 7, 2023 IP
  2. #2
    Hi there pirate_tat87,

    here is a reworking of the code...
    HTML
    



<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<div id="content-container">
 <h1>DMCA takedown / Copyright Claims</h1> 

 <nav>
 <a href="https://piratesdmcaservice.com/DMCA-Compliant-Websites.html">DMCA Compliant Websites</a>
 <a href="https://piratesdmcaservice.com/Non-DMCA-Compliant-Websites.html">Non DMCA Compliant Websites</a>
 <a href="https://piratesdmcaservice.com/Online-Forums-Known-For-Leaks.html">Online Forums Known For Leaks</a>
 </nav>

 <main>
  <section>
   <h2>About Me:</h2>
   <p>
    My name is Vince. I have been a long time member of the content-creating community, 
    and throughout the years, I have noticed that there is a lot of content that not 
    only gets stolen from sites but also leaked onto many other sites that enable this 
    kind of illegal activity. So I decided to take matters into my own hands and do my 
    best to assist content creators in having their stolen content removed. I am only 
    one person, however, so I can't guarantee I can remove 100% of all content that has 
    been leaked. But I can promise that I will remove any content that can be removed.
   </p>
  </section>

  <section>
   <h2>Cost:</h2>
   <p>
    The cost of the service is $100 per month. I accept the following payment methods. 
    Visa Online E-Gift Card, Cash App, PayPal.Once we have discussed whether you want my 
    service, then we can discuss the payment situation further!
   </p>
  </section>
  <section>
   <h2>So you may be asking what happens after I sign up with your services?</h2>
   <ul>
    <li>
     The first thing that I do is I create a Microsoft Excel sheet that will I will 
     share with you via e-mail that will provide real time updates on all activity.
    </li>
    <li>
     Every e-mail that is sent out to report DMCA takedown requests I will CC (Copy) 
     you on each e-mail that is also sent with an attached Microsoft Word document so 
     that you will also have a hard copy for yourself.
    </li>
   </ul>
  </section>
  <section>
   <h2>Why choose you over other DMCA Services?</h2>
   <p>
    This is a very great question. While I am new at this I have noticed through 
    working with several content creators and information that has been provided to me 
    that the current DMCA services that have been established still manage to not take 
    down content that can be taken down in a timely manner. I have also been informed 
    that most DMCA services also cost a lot more then what I am charging. I have learned 
    the ins and outs so far about the correct and proper procedures to getting the 
    content removed and with my technical support background and organization habits I 
    feel that you will be very happy with my services!
   </p>
  </section>
 </main>

 <section>
   <h2>What is DMCA? How does it help content creators?</h2>
   <p>
    A DMCA Take-down is <b>when content is removed from a website or internet platform at 
    the request of the owner of the content.</b> The DMCA Takedown is a well established 
    and accepted internet standard followed by website owners and internet service 
    providers everywhere.<b>Your right to process.</b> Any owner of content has the right 
    to process a take-down notice against a website owner and/or an Online Service Provider 
    (e.g. ISP, hosting company etc.) if the content owner's property is found online without 
    their permission.
   </p>
   <p>
    <i>
     Note: although the DMCA is part of US Copyright law, a DMCA Take-down does not always 
     require the content to be copyrighted in order to process a take-down notice and for 
     the content to be taken down by the website owner or OSP.
    </i>
  </p>
  <p>
   <i>Simply Stated:</i> the fact the content is yours, or if the subject in the photo or 
   video is you, can be reason enough to process a take-down notice AND for the content to 
   be taken down.
  </p>
  <p>
   <strong>Important:</strong> 
   <span>
    Although signing up for a DMCA service in general can be scary as you do not know what 
    happens with your content that the company finds, It is important for me to relay that 
    doing this service is 100 percent confidential and I do not benefit from any content 
    that I may find.
   </span>
  </p> 
 </section>

 <section>
 <h2>My Social Media</h2>
 <div>
  <a href="https://twitter.com/pirate_tat87" target="blank">
   <img src="https://piratesdmcaservice.com/big-twitter-logo.png" alt="twitter">
  </a>     

  <a href="https://instagram.com/Pirate_tat87" target="blank"> 
   <img src="https://piratesdmcaservice.com/87390.png" alt="instagram">
  </a>

  <a href="https://piratesdmcaservice.com/ContactMe.html" target="blank">Contact Request Form</a> 
  </div>
 </section>

 <section>
  <h2><u>Testimonials</u></h2>

  <img src="https://piratesdmcaservice.com/jswDz58s_400x400.jpg" alt="Avatar">
  <p><span>@Naomihh666</span>Content Creator</p>
  <p>
   I have been using large name DMCA services for nearly a year now and they never 
   seem to be able to catch all of the leaks or actually have everything removed.
   PiratesDMCAservice actually reached out to me on twitter to make me aware of some 
   leaked content they had found while filing DMCA for another client and actually 
   made the process of removing leaked content super easy. I have now been using 
   their services for around a month and i can absolutely say that they are on top of 
   making sure your content stays yours! They CC me in every DMCA email that is sent 
   so I have records of where my content is being shared, brands responsiveness to 
   DMCA filing, and how popular certain websites seem to be for sharing stolen content. 
   I highly recommend using their services!
 </p>
 </section>
<!-- #content-container --></div>

</body>
</html>
    Code (markup):
    screen.css
    



* {
   box-sizing: border-box;
 }
body {
    background-color: #d5d8dc;
    font: normal 1em / 1.5em  sans-serif;
 }
#content-container {
   max-width: 60em;
   margin: auto;
 }
h1 {
   padding: 0 1em;
   line-height: 1.25em;
   text-align: center;
   text-decoration: underline;
}
h2 {
   margin: 0;
   padding: 1em;
   border-bottom: 1px solid #000;
   font-size: 1em;
   text-align: center;
 }
nav {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1em;
   margin-bottom: 1em;
 }
nav a {
   color: #000;
 }
main {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}
main section {
   width: 49.25%;
   margin-bottom: 1.5%;
   border: 1px solid #000;
   background-color: #fff;
 }
main section p {
   margin: 0;
   padding: 1em 2em;
 }
main section ul {
   padding-right: 2em;
 }
section {
   margin-bottom: 1.5%;
   border: 1px solid #000;
   background-color: #fff;
 }
section p {
   margin: 0;
   padding: 1em 2em;
 }
section div {
   padding: 1em 2em;
 }
strong+span {
   color:  #f00;
 }
img[alt="Avatar"]{
   display: block;
   width: 5.6em;
   height: auto;
   margin: 1em 0 0 2em;
   border: 0.4em double #000;
 }
 section > div  {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 2em;
   margin: 1em;
 }
section > div a img{
   width: 3.125em;
   height: auto;
 }
@media ( max-width: 25em ) {
main {
   flex-direction: column;
  }
main section {
   width: auto;
  }
 }
    Code (markup):
    You may view the result here...

    Full Page View
    https://codepen.io/coothead/full/GRXMLRq
    ​

    coothead
     
    denis bayly, Mar 8, 2023 IP
  3. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #3
    @denis bayly - Hey there thank you very much for the rework up on it. however this does not really help me in the manner, although the coding does reflect what I am aiming to do, I kind of wanted to know how to make the boxes square, you doing it for me or anyone doing it as much as I appreciate the effort, won't help me learn or explain how to do the action. so if I ever needed to do it again in the future, i wouldn't know how to do it. however as it has already been done, would you mind highlighting or pointing out the code specifically or a breakdown of what i was doing wrong or what I may have needed to add to make the changes that I was looking for. again not upset by what you did but i'm also trying to learn. at the same time. I hope you can understand.
     
    pirate_tat87, Mar 8, 2023 IP
  4. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #4
    Hi there pirate_tat87,

    That makes no sense, the dimensions of containers is
    determined by their content.
    You are also using code that was deprecated in 1997...
    1. bgcolor="#D5D8DC"
    2. <center>
    3. <font color="red">

    As for W3Schools, I would suggest that you avoid it
    and instead maybe you could check out these links...
    1. MDN - Document and website structure
    2. MDN - CSS Tutorials
    3. MDN - Learn to style HTML using CSS
    ​

    coothead
     
    denis bayly, Mar 8, 2023 IP
  5. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #5
    @denis bayly Thank you very much for the information and education, one last thing in the following image is there any way to move the "contact Request Form" under the twitter and Instagram icons?
     

    Attached Files:

    pirate_tat87, Mar 8, 2023 IP
  6. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #6
    Hi there pirate_tat87,

    No problem, just change this...
    


 <section>
 <h2>My Social Media</h2>
 <div>
  <a href="https://twitter.com/pirate_tat87" target="blank">
   <img src="https://piratesdmcaservice.com/big-twitter-logo.png" alt="twitter">
  </a>     

  <a href="https://instagram.com/Pirate_tat87" target="blank"> 
   <img src="https://piratesdmcaservice.com/87390.png" alt="instagram">
  </a>

  <a href="https://piratesdmcaservice.com/ContactMe.html" target="blank">Contact Request Form</a> 
  </div>
 </section>
    Code (markup):
    ...to this...
    


 <section>
 <h2>My Social Media</h2>
 <div>
  <a href="https://twitter.com/pirate_tat87" target="blank">
   <img src="https://piratesdmcaservice.com/big-twitter-logo.png" alt="twitter">
  </a>     

  <a href="https://instagram.com/Pirate_tat87" target="blank"> 
   <img src="https://piratesdmcaservice.com/87390.png" alt="instagram">
  </a>
 </div>

 <div>
  <a href="https://piratesdmcaservice.com/ContactMe.html" target="blank">Contact Request Form</a> 
  </div>
 </section>
    Code (markup):

    coothead
     
    denis bayly, Mar 8, 2023 IP
  7. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #7
    @denis bayly Hey I don't know if you would be able to help, or If I will need to create a new post if I do I don't mind. but it's something i think very minor I'm just missing something.

    I am playing around with some code, For some reason and I don't know why in the center just below my twitter and Instagram icons there is a small underline it seems and I don't know where it's coming from

    [​IMG] 

    
<div class="socials">
<section>
  <h2>My Social Media</h2><br>
  <div>
  <a href="" target="blank">
   <img src="" alt="twitter">
  </a>    

  <a href="" target="blank">
   <img src="" alt="instagram">
  </a>
</div>
<br>
<div>
  <a href="https://piratesdmcaservice.com/ContactMe.html" target="blank">Contact Request Form</a>
  </div>
</section>
</div>
    HTML:
    
.socials {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 30px;
}
section > div a img{
   width: 3.125em;
   height: auto;
   margin: 20px;
}
    Code (CSS):
     
    pirate_tat87, Mar 10, 2023 IP
  8. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #8
    Hi there pirate_tat87,

    I am not seeing that.

    But to be sure use this HTML - ( there was no need to add a div element ),,,

    


 <section id="socials">
 <h2>My Social Media</h2>
 <div>
  <a href="https://twitter.com/pirate_tat87" target="blank">
   <img src="https://piratesdmcaservice.com/big-twitter-logo.png" alt="twitter">
  </a>     

  <a href="https://instagram.com/Pirate_tat87" target="blank"> 
   <img src="https://piratesdmcaservice.com/87390.png" alt="instagram">
  </a>
 </div>
 
 <div>
  <a href="https://piratesdmcaservice.com/ContactMe.html" target="blank">Contact Request Form</a> 
  </div>
 </section>
    Code (markup):
    ...and this CSS...
    


#socials {  
   margin: 1.875em 0 0.625em;
 }
#socials > div  {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 2em;
   margin: 1em;
 }
#socials > div:first-of-type  {
   margin-bottom: 3.5em;
 }
#socials > div a img{
   width: 3.125em;
   height: auto;
   margin: 1.25em;
 }
 #socials > div:first-of-type a {
   text-decoration-color: none;
 }
    Code (markup):

    coothead
     
    denis bayly, Mar 11, 2023 IP