KikePeris KikePeris - 1 month ago 9
CSS Question

Is position absolute messing my HTML file?

I'm supposed to do part of a social network site for a class project. The

HTML
file itself wouldn't do anything, it's just designing the visual part. I have to do something similar to the 'friends' section in Facebook.

I used a lot of inline
css
and now I'm thinking it wasn't such a good idea. If you are able to try it, the design messes up when you change the size of the window.

Can you help me or give me any tips so this doesn't happen? Thanks a lot

<!doctype html>
<html>
<head>
<title> </title>
</head>
<body>
<div style="border:1px solid black; width:600px;height:900px;margin:auto;">
<p style="margin:auto; background-color:#f7f7f7;width:600px;height:70px;"></p>
<p style="font-size:20px;font-weight:bolder;position:absolute;top:0px;left:415px;">Amigos</p>
<p style="font-size:15px;font-weight:bolder;position:absolute;top:40px;left:390px;">Todos mis amigos</p>
<p style="border:1px solid black;width:599px;height:0px;position:absolute;top:60px;"></p>
<p id="caja amigo 1" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:390px;"></p>
<p id="caja amigo 2" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:390px;"></p>
<p id="caja amigo 3" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:390px;"></p>
<p id="caja amigo 4" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:390px;"></p>
<p id="caja amigo 5" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:390px;"></p>
<p id="caja amigo 6" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:690px;"></p>
<p id="caja amigo 7" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:690px;"></p>
<p id="caja amigo 8" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:690px;"></p>
<p id="caja amigo 9" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:690px;"></p>
<p id="caja amigo 10" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:690px;"></p>
<img src="friends_24.png" style="width:20px;height:20px;position:absolute;top:20px;left:385px;">
<img src="action.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:391px;">
<p style="position:absolute;top:130px;left:500px;font-weight:bold;color:#1f63d1;">Action Bronson</p>
<p style="position:absolute;top:150px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3517 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:566px;width:15px;height:15px;">
<img src="dave.jpg" style="width:100px;height:100px;position:absolute;top:246px;left:391px;">
<p style="position:absolute;top:245px;left:500px;font-weight:bold;color:#1f63d1;">Dave Chappelle</p>
<p style="position:absolute;top:268px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">2985 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:566px;width:15px;height:15px;">
<img src="edmund.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:391px;">
<p style="position:absolute;top:360px;left:500px;font-weight:bold;color:#1f63d1;">Edmund McMillen</p>
<p style="position:absolute;top:380px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">6219 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:566px;width:15px;height:15px;">
<img src="eugenia.png" style="width:100px;height:100px;position:absolute;top:476px;left:391px;">
<p style="position:absolute;top:480px;left:500px;font-weight:bold;color:#1f63d1;">Eugenia Cooney</p>
<p style="position:absolute;top:500px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">8123 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:566px;width:15px;height:15px;">
<img src="kim.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:391px;">
<p style="position:absolute;top:590px;left:500px;font-weight:bold;color:#1f63d1;">Kim Kardashian</p>
<p style="position:absolute;top:610px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">11799 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:566px;width:15px;height:15px;">
<img src="kimjong.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:691px;">
<p style="position:absolute;top:130px;left:800px;font-weight:bold;color:#1f63d1;">Kim Jong-un</p>
<p style="position:absolute;top:150px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">???? amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:866px;width:15px;height:15px;">
<img src="rhettlink.png" style="width:100px;height:100px;position:absolute;top:246px;left:691px;">
<p style="position:absolute;top:245px;left:800px;font-weight:bold;color:#1f63d1;">Rhett and Link</p>
<p style="position:absolute;top:268px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">7007 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:866px;width:15px;height:15px;">
<img src="satchel.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:691px;">
<p style="position:absolute;top:360px;left:800px;font-weight:bold;color:#1f63d1;">Russ Parrish</p>
<p style="position:absolute;top:380px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3015 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:866px;width:15px;height:15px;">
<img src="snoop.jpg" style="width:100px;height:100px;position:absolute;top:476px;left:691px;">
<p style="position:absolute;top:480px;left:800px;font-weight:bold;color:#1f63d1;">Snoop Dogg</p>
<p style="position:absolute;top:500px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">5289 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:866px;width:15px;height:15px;">
<img src="trump.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:691px;">
<p style="position:absolute;top:590px;left:800px;font-weight:bold;color:#1f63d1;">Donald Trump</p>
<p style="position:absolute;top:610px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">599 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:866px;width:15px;height:15px;">
</div>

</body>
</html>

Answer

Yes, position:absolute; is messing your HTML file.

Here are some tips to fix it and to bring more structure into the file:

  1. Give all the elements classes. Elements that look the same should have the same class. Then move the inline style to a stylesheet.

  2. Rename the HTML elements. <p> stands for "paragraph" and therefore should only be used to divide up a longer text. Use <div> for simple blocks.

  3. Remove all occurences of position:absolute;. Move all elements into the right container. (An element that is in front of another element should be inside it)

  4. Layout the elements relative to their parent.

Here's a very simple example how you can layout the grid:

/* Stylesheet */

.container {
   width: 500px;
   margin: 20px auto;
   border: 1px solid gray;
   padding: 10px 0 10px 10px; /* spacing */
}

.profile {
   display: inline-block; /* this lets the boxes float like words in a text */
   border: 1px solid gray;
   width: 222px;
   min-height: 50px;
   margin: 10px; /* spacing */
}
<div class="container">
  <div class="profile">Box 1</div>
  <div class="profile">Box 2</div>
  <div class="profile">Box 3</div>
  <div class="profile">Box 4</div>
  <div class="profile">Box 5</div>
  <div class="profile">Box 6</div>
  <div class="profile">Box 7</div>
</div>

Comments