How might this be written better?

asasass · October 27, 2022, 12:23pm

.seaview {
  position: relative;
  margin: 0;
}

.seaviewimg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  left: 44px;
  height: 150px;
}

.seaview p {
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 150px;
  top: -10px;
  left: 44px;
  /*border-radius: 50%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px blue;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #AF26FF;
  box-sizing: border-box;
  padding: 25px;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px);
      background-size: 10px 10px;
}

.seaview p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border-radius: 25%;
  background: rgba(0, 0, 0, 0.8);
  z-index: -1;
  width: 110px;
  height: 125px;
}

.seaview2 p {
  position: absolute;
  top: -38px;
  left: 50px;
}

.seaview3 p {
  position: absolute;
  top: -20px;
  left: 50px;
  z-index: 4;
}

.seaview4 p {
  position: absolute;
  top: -1px;
  left: 50px;
  z-index: 5;
}

.seaview5 p {
  position: absolute;
  top: 16px;
  left: 50px;
  z-index: 4;
}

.seaview2 p,
.seaview3 p,
.seaview4 p,
.seaview5 p {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  box-sizing: border-box;
  padding: 25px;
  color: #e88b53;
}

.write {
  position: absolute;
  top: 122px;
  left: 100px;
  color: #F72119;
  z-index: 1;
}

.art {
  position: absolute;
  top: 122px;
  left: 142px;
  color: #FFAD00;
  z-index: 1;
}

.rotatea {
  font-family: 'Roboto', sans-serif;
  color: #1FFF0F;
  font-size: 15px;
  position: absolute;
  top: 77px;
  left: 85px;
  transform: rotate(47deg);
  z-index: 4;
}

.rotateb {
  font-family: 'Roboto', sans-serif;
  color: #FFF01F;
  font-size: 15px;
  position: absolute;
  top: 72px;
  left: 85px;
  transform: rotate(315deg);

}

.sa {
  position: absolute;
  top: 24px;
  left: 95px;
  font-family: 'Roboto', sans-serif;
  color: #00BFFF;
  font-size: 15px;
}

.sb {
  position: absolute;
  top: 68px;
  left: 84px;
  font-family: 'Roboto', sans-serif;
  color: #00BFFF;
  font-size: 15px;
}

.sc {
  position: absolute;
  top: 68px;
  left: 157px;
  font-family: 'Roboto', sans-serif;
  color: #00BFFF;
  font-size: 15px;
  z-index: 0;
}

.sd {
  position: absolute;
  top: 132px;
  left: 86px;
  font-family: 'Roboto', sans-serif;
  color: #00BFFF;
  font-size: 15px;
}

.fs {
  font-family: 'Roboto', sans-serif;
  color: #ee29e7;
  font-size: 15px;
  position: absolute;
  top: 85px;
  left: 43px;
  transform: rotate(270deg);
}

.fs3 {
  font-family: 'Roboto', sans-serif;
  color: #ee29e7;
  font-size: 15px;
  position: absolute;
  top: 43px;
  left: 88px;
  transform: rotate(250deg);
}

.fs2 {
  font-family: 'Roboto', sans-serif;
  color: #ee29e7;
  font-size: 15px;
  position: absolute;
  top: 78px;
  left: 84px;
  transform: rotate(270deg);
}

.fsb {
  font-family: 'Roboto', sans-serif;
  color: pink;
  font-size: 15px;
  position: absolute;
  top: 98px;
  left: 152px;
  transform: rotate(270deg);
}

.fsc {
  font-family: 'Roboto', sans-serif;
  color: pink;
  font-size: 15px;
  position: absolute;
  top: 43px;
  left: 151px;
  transform: rotate(270deg);
}

.sp1 {
  font-family: 'Roboto', sans-serif;
  background: black;
  position: absolute;
  top: 77px;
  left: 58px;
  width: 12px;
  height: 16px;
  fill: white;
}

.sp2 {
  font-family: 'Roboto', sans-serif;
  background: black;
  position: absolute;
  top: 77px;
  left: 184px;
  width: 12px;
  height: 16px;
  fill: white;
}

.green {

  position: absolute;
  top: 118px;
  left: 84px;
  width: 12px;
  height: 16px;

}

.green {
  position: absolute;
  top: 118px;
  left: 84px;
  width: 12px;
  height: 16px;
  background: ;
}

.vegan {
  position: absolute;
  top: 41px;
  left: 76px;
  width: 12px;
  height: 16px;
}

m_hutley · October 27, 2022, 12:24pm

asasass:

.green {

  position: absolute;
  top: 118px;
  left: 84px;
  width: 12px;
  height: 16px;

}

.green {
  position: absolute;
  top: 118px;
  left: 84px;
  width: 12px;
  height: 16px;
  background: ;
}

Well for starters…

asasass · October 27, 2022, 12:25pm

Fixed that: https://jsfiddle.net/gxj4eun8/2/

PaulOB · October 27, 2022, 3:31pm

Why do you need the extra div around structures like this.

<div class="seaview5">
  <p>text text</p>
</div>

The div isn’t used and you target the p element only. Why not just use the p element?

You don’t do that here:

<div class="rotatea">
  text text
</div>

Why aren’t all the elements contained within the main seaview div?

If for example you added a heading then all your absolute elements are misplaced.

Screen Shot 2022-10-27 at 16.18.52

The structure needs to be sound even though you may not be doing anything above it. A simple margin on seaview would also break everything.

Screen Shot 2022-10-27 at 16.21.41

Consistency is the key even if you don’t actually need it for this demo to work as shown.

asasass · October 27, 2022, 4:40pm

How come this text is not appearing? https://jsfiddle.net/n8f5qh6L/1/

<p>text text text text text text text text text text text text text text text text </p>

Am I supposed to do this?

  <p class="seaview1">
   text text text text text text text text text text text text text text text
  </p>

PaulOB · October 27, 2022, 5:03pm

You don’t have a class of seaview1 as far as I can see so you would do this for seaview2.

 <p class="seaview2">
   text text text text text text text text text text text text text text text
  </p>

p.seaview2 {styles etc..}

Not .seaview2 p{}

asasass · October 27, 2022, 5:23pm

I almost got it. https://jsfiddle.net/x7zh6tr0/

I am confused.

.seaview {
  position: relative;
  margin: 0;
}

.seaviewimg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  left: 44px;
  height: 150px;
}

.seaview  {
  position: absolute;
  width: 150px;
  height: 150px;
  top: -10px;
  left: 44px;
  /*border-radius: 50%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px blue;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #AF26FF;
  box-sizing: border-box;
  padding: 25px;
  z-index: -1;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
}

.seaview1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border-radius: 25%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 0;
  width: 110px;
  height: 125px;
}

<div class="seaview">
  <img class="seaviewimg" src="https://i.imgur.com/QbLorUK.png" alt="Sea View">

  <p class="seaview1">
   text text text text text text text text text text text text text text text text 
  </p>

PaulOB · October 27, 2022, 8:32pm

You need to change to these and not .seaview2 p etc…

p.seaview2  {

}

p.seaview3  {
 
}

p.seaview4  {

}

p.seaview5  {

}

p.seaview2,
p.seaview3,
p.seaview4,
p.seaview5  {
}

You seem to have messed the positions up now though so you will need to line them up properly.

asasass · October 27, 2022, 10:46pm

Maybe it would be easier if I figured this part out first.

What should this part be changed to?

Removing those 2 <p> </p> from the html

Deletes these from the css:
.seaview p {}
.seaview p::after {}

https://jsfiddle.net/72ecqz6y/

.seaview {
  position: relative;
  margin: 0;
}

.seaviewimg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  left: 44px;
  height: 150px;
}

.seaview p {
  position: absolute;
  width: 150px;
  height: 150px;
  top: -10px;
  left: 44px;
  /*border-radius: 50%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px blue;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #AF26FF;
  box-sizing: border-box;
  padding: 25px;
  z-index: 0;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
}

.seaview p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border-radius: 25%;
  background: rgba(0, 0, 0, 0.8);
  z-index: -1;
  width: 110px;
  height: 125px;
}

<div class="seaview">
  <img class="seaviewimg" src="https://i.imgur.com/QbLorUK.png" alt="Sea View">
  <p> </p>
</div>

Currently looks like this.

PaulOB · October 28, 2022, 8:52am

I would start like this.

seaview {
  position: relative;
  margin: 0 0 0 44px;
  display:table;
}

.seaviewimg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  left: 0;
  height: 150px;
}

p.seaview1 {
  position: absolute;
  width: 150px;
  height: 150px;
  top: -10px;
  left: 0;
  /*border-radius: 50%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px blue;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #AF26FF;
  box-sizing: border-box;
  padding: 25px;
  z-index: 0;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
}

p.seaview1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border-radius: 25%;
  background: rgba(0, 0, 0, 0.8);
  z-index: -1;
  width: 110px;
  height: 125px;
}


<div class="seaview">
  <img class="seaviewimg" src="https://i.imgur.com/QbLorUK.png" alt="Sea View">
  <p class="seaview1"> </p>
</div>

asasass · October 28, 2022, 10:39am

How come this font is thinner?
https://jsfiddle.net/gv4kfa5x/4/

<div class="seaview">
  <img class="seaviewimg" src="" alt="Sea View">
  <p class="seaview1">
    text
  </p>
</div>

If I want the top font to look identical to the bottom, how do I do that?

How come this font is thicker?
https://jsfiddle.net/w1tpc38n/

<div class="seaview">
  <img class="seaviewimg" src="" alt="Sea View">
  <p>text</p>
</div>

PaulOB · October 28, 2022, 2:00pm

Because it’s not the same font perhaps.

You import this font at weight 700 on one page but not the other.

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

</style>

asasass · October 28, 2022, 2:02pm

Thank you, I should’ve noticed it was missing.

asasass · October 28, 2022, 2:08pm

How do I center the orange text? https://jsfiddle.net/udawpv67/1/

Only horizontally.

This is not working anymore.

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

p.seaview2 {
  position: absolute;
  top: -38px;
  left: 50px;
}

PaulOB · October 28, 2022, 2:11pm

Like this:

p.seaview2 {
  left:0;
}

system · January 27, 2023, 9:12pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.