If I want the Square to be one size, and the Circle on top of that to be another size, how do I do that?

HTML & CSS
1

The square is 150px but it won’t let me set a desired width and height of the circle, how come, and how would I be abe to do that?

Code:

.window {
  display: table;
  width: 150px;
  height: 150px;
  background: #000;
  position: relative;

}

.tcell {
  display: table-cell;
  width: 100px;
  height: 100px;
  vertical-align: middle;
  text-align: center;
  font-family: New Times Roman;
  font-size: 18px;
  color: red;
  background-color: #7fee1d;
  border-radius: 50%;
}

<div class="window" style="">
  <p class="tcell" style=""> Example Text</p>
</div>
2

I got this far.

Am I even doing this right?

Circle still isn’t in the middle.

3

You are missing a closing </div> tag in your html. And you haven’t written any CSS rules to centre the circle. You just centred the text inside the circle.

4

You mean this?

Code:

.middle {
      vertical-align: middle;
    text-align:center;
    left:19%;
    position:relative; 
    display:table-cell;
 }
5

Okay, you fixed the HTML. Now you just want to centre the circle. Is there a reason why both .middle and the .tcell inside it have display: table-cell; ?

6

Which one should be changed, and to what?

7

I would probably do something like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>text within circle</title>
<!--
https://www.sitepoint.com/community/t/if-i-want-the-square-to-be-one-size-and-the-circle-on-top-of-that-to-be-another-size-how-do-i-do-that/275839/4
asasass
https://jsfiddle.net/bgj6yz7d/11/
-->
    <style>
.window {
  display:table;
  width:150px;
  height:150px;
  border-spacing:25px;  /* Remember border-spacing from the grid example? */
  background:#000;
}
.tcell {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  font-family:"New Times Roman",serif;
  font-size:1.125em;  /* Use em or rem, NOT px */
  color:#00f;
  background-color:#7fee1d;
  border-radius:50%;
}
    </style>
</head>
<body>

<div class="window">
    <p class="tcell">Example Text</p>
</div>

</body>
</html>
2 Likes
8

Hi there asasass,

I would refine @ronpat’s code slightly by removing all
the “px units” and using the “em units” in their place.

There is really no need to use the “class attribute” for
the “p element”

<!doctype html>
<html lang="en">
<head>

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

<title>text within circle</title>
<!--
https://www.sitepoint.com/community/t/if-i-want-the-square-to-be-one-size-and-the-circle-on-top-of-that-to-be-another-size-how-do-i-do-that/275839/4
asasass
https://jsfiddle.net/bgj6yz7d/11/
-->
    <style>
.window {
  display:table;
  width:150px; width:8.333em;  /* Use em or rem, NOT px */
  height:150px; height:8.333em;  /* Use em or rem, NOT px */
  border-spacing:25px; border-spacing: 1.389em;  /* Remember border-spacing from the grid example? */
  background: #000;
  font-family: "New Times Roman",serif;
  color: #00f;
/* Changing the font-size here will proportionally change the size of the ".window" */
  font-size: 1.125em;  /* Use em or rem, NOT px */
 }
.window p {
  display: table-cell; 
  vertical-align: middle;
  text-align: center;
  background-color: #7fee1d;
  border-radius: 50%;
}
</style>
</head>

<body>

 <div class="window">
  <p>Example Text</p>
 </div>

</body>
</html>

coothead

2 Likes
9

Hi there asasass,

If you are not sure how the replacement “em values”
were arrived at, they were calculated like…

  1. width divided by the font-size and the result divided by 150 / ( 1.125*16 ) = 8.3333
  2. height divided by the font-size and the result divided by 150 / ( 1.125*16 ) = 8.3333
  3. border-spacing divided by the font-size and the result divided by 25 / ( 1.125*16 ) = 1.3888

coothead

10

Hi there asasass,

my previous post should have read…

  1. width divided by the font-size and the result divided by 16.
    150 / ( 1.125*16 ) = 8.3333
  2. height divided by the font-size and the result divided by 16.
    150 / ( 1.125*16 ) = 8.3333
  3. border-spacing divided by the font-size and the result divided by 16.
    25 / ( 1.125*16 ) = 1.3888

I must have had one of my “brain fart’s”, whilst composing it. :wonky: :eyebrows:

coothead

11

How do I add this now, and which of these would I use, and how?
I can’t seem to get it to work.

  .windowframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(http://i.imgur.com/4HJbzEq.png);
    background-size: cover;
  }


#window:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://i.imgur.com/4HJbzEq.png);
  background-size: cover;
  content: '';
 }
12

Coothead gave you the entire html for the page to see how it works. Just copy/paste that into a blank html page and open it in your browser.

13

I’m using @ronpat code right now so that’s why I asked him.

14

As @ronpat’s code doesn’t have an element with a class of “windowframe”, or one with an id of “window”, you’ll also need to show the HTML to which you’re applying that CSS.

2 Likes
15

This is how .window looks.

So, I’m going to need to use this then, try and get it to work.
#window:after {

16

When I use #window:after {

It messes everything up.

20

The Code I’m Using

How do I fix this so that the green circle stays put at that exact size?
border-spacing: 25px;

Before adding: .window::after {


After:

https://i.imgur.com/Hi3Ihg6.png

21

My question would be, how would I get

border-spacing: 25px;

to work with

.window::after { ?

I keep trying, but I can’t figure this out.

22

Hi there asasass,

try it like this…

<!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">

<style media="screen">
  /* Use em, NOT px */
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
.window {
  display: table;
  width: 8.333em;
  height: 8.333em;
  border-spacing: 1.389em;
  background: #000;
  position: relative;
  font-family: "New Times Roman", serif;
  font-size: 1.125em;
 }

.tcell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #00f;
  background-color: #7fee1d;
  border-radius: 50%;
}

.tcell::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://i.imgur.com/4HJbzEq.png);
  background-size: cover;
  content: '';
}
</style>

</head>
<body> 

 <div class="window">
  <p class="tcell">Example<br>Text</p>
 </div>

</body>
</html>

coothead

2 Likes
23

Again, I don’t understand your question, as I don’t see border-spacing in any of the JSFiddle versions you’ve provided.

Using the latest version you posted (in post #20), try changing .window::after to .tcell::after and see if that solves your alignment problem.

2 Likes