Anuj TBE
Anuj TBE

Reputation: 9826

relative position of div inside div

I'm designing a logo in CSS3.

I have made a class .logo with particular height and width. Rest of the div inside .logo class will resize its position relative to parent div.

This is my CSS code.

.logo {
    width: 200px;
    height: 200px;
    position: fixed;
}
.logo .vertical-left {
    width: 25px;
    height: 60%;
    position: absolute;
    bottom: 0;
    background-color: #09aaba;
}
.logo .vertical-right {
    width: 25px;
    height: 65%;
    background-color: #09aaba;
    margin-left: 60%;
    top: 0;
    position: absolute;
}
.logo .vertical-right2 {
    width: 25px;
    height: 60%;
    background-color: #ba1dd4;
    margin-left: 60%;
    top: 0;
    position: absolute;
}
.logo .horizontal-top {
    width: 100%;
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    top: 30%;
    border-radius: 10px 0;
}
.logo .horizontal-top2 {
    width: 60%;
    height: 25px;
    background-color: #ba1dd4;
    position: absolute;
    top: 30%;
    right: 0;
}
.logo .horizontal-bottom {
    width: 72.5%;
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    top: 65%;
    border-radius: 10px 0;
}

/* triangle */
.logo .arrow-left {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  position: absolute;
  top: 30%;
  left: 35%;
  border-right:10px solid #ba1dd4;
}
.logo .arrow-down {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 13px solid transparent;
  position: absolute;
  top: 60%;
  right: 27%;
  border-top: 10px solid #ba1dd4;
}
    <div class="logo">
        <div class="vertical-left"></div>
        <div class="vertical-right"></div>
        <div class="vertical-right2"></div>
        <div class="horizontal-top"></div>
        <div class="horizontal-top2"></div>
        <div class="horizontal-bottom"></div>
        <div class="arrow-left"></div>
        <div class="arrow-down"></div>
    </div>

Here .logo div size is 200px X 200px. When I change it to 300px X 300px the inside div are messed up as in following snippet.

.logo {
  width: 300px;
  height: 300px;
  position: fixed;
}

.logo .vertical-left {
  width: 25px;
  height: 60%;
  position: absolute;
  bottom: 0;
  background-color: #09aaba;
}

.logo .vertical-right {
  width: 25px;
  height: 65%;
  background-color: #09aaba;
  margin-left: 60%;
  top: 0;
  position: absolute;
}

.logo .vertical-right2 {
  width: 25px;
  height: 60%;
  background-color: #ba1dd4;
  margin-left: 60%;
  top: 0;
  position: absolute;
}

.logo .horizontal-top {
  width: 100%;
  height: 25px;
  background-color: #09aaba;
  position: absolute;
  top: 30%;
  border-radius: 10px 0;
}

.logo .horizontal-top2 {
  width: 60%;
  height: 25px;
  background-color: #ba1dd4;
  position: absolute;
  top: 30%;
  right: 0;
}

.logo .horizontal-bottom {
  width: 72.5%;
  height: 25px;
  background-color: #09aaba;
  position: absolute;
  top: 65%;
  border-radius: 10px 0;
}


/* triangle */

.logo .arrow-left {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  position: absolute;
  top: 30%;
  left: 35%;
  border-right: 10px solid #ba1dd4;
}

.logo .arrow-down {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 13px solid transparent;
  position: absolute;
  top: 60%;
  right: 27%;
  border-top: 10px solid #ba1dd4;
}
<div class="logo">
  <div class="vertical-left"></div>
  <div class="vertical-right"></div>
  <div class="vertical-right2"></div>
  <div class="horizontal-top"></div>
  <div class="horizontal-top2"></div>
  <div class="horizontal-bottom"></div>
  <div class="arrow-left"></div>
  <div class="arrow-down"></div>
</div>

How can I have a responsive logo which will adjust according to parent height and width?

Upvotes: 2

Views: 1553

Answers (3)

blecaf
blecaf

Reputation: 1645

Setting the dimensions to percentages should make it resize. But the pointed arrow tips won't because they can't be set to percentage. The code below makes the logo resize but you will see that the arrow head cuts off at some point. Hope this puts you in the right direction

.logo {
    width: 300px;
    height: 300px;
    position: fixed;
}
.logo:nth-child(2) {
    width: 100px;
    height: 100px;
    position: absolute;
    right: 0;
}
.logo .vertical-left {
    width: 12.5%;
    height: 60%;
    position: absolute;
    bottom: 0;
    background-color: #09aaba;
}
.logo .vertical-right {
    width: 12.5%;
    height: 65%;
    background-color: #09aaba;
    margin-left: 60%;
    top: 0;
    position: absolute;
}
.logo .vertical-right2 {
    width: 12.5%;
    height: 60%;
    background-color: #ba1dd4;
    margin-left: 60%;
    top: 0;
    position: absolute;
    display: flex;
    justify-content: center ;
    align-items: flex-end;
}
.logo .horizontal-top {
    width: 100%;
    height: 12.5%;
    background-color: #09aaba;
    position: absolute;
    top: 30%;
    border-radius: 10px 0;
}
.logo .horizontal-top2 {
    width: 60%;
    height: 12.5%;
    background-color: #ba1dd4;
    position: absolute;
    top: 30%;
    right: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.logo .horizontal-bottom {
    width: 72.5%;
    height: 12.5%;
    background-color: #09aaba;
    position: absolute;
    top: 65%;
    border-radius: 10px 0;
}

/* triangle */
.logo .arrow-left {

}
.logo .arrow-down {
  
}
.vertical-right2:after {
    content: '';
    width: 100%;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 13px solid transparent;
    position: relative;
    bottom: -10px;
    border-top: 10px solid #ba1dd4;
    z-index: 100;
}
.horizontal-top2:before {
    content: '';
    width: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    position: relative;
    border-right: 10px solid #ba1dd4;
    left: -10px;
    flex-grow: 1;
     z-index: 100;
  }
<div class="logo">
        <div class="vertical-left"></div>
        <div class="vertical-right"></div>
        <div class="vertical-right2"></div>
        <div class="horizontal-top"></div>
        <div class="horizontal-top2"></div>
        <div class="horizontal-bottom"></div>
        <div class="arrow-left"></div>
        <div class="arrow-down"></div>
    </div>
<div class="logo">
        <div class="vertical-left"></div>
        <div class="vertical-right"></div>
        <div class="vertical-right2"></div>
        <div class="horizontal-top"></div>
        <div class="horizontal-top2"></div>
        <div class="horizontal-bottom"></div>
        <div class="arrow-left"></div>
        <div class="arrow-down"></div>
    </div>

Upvotes: 0

Culyx
Culyx

Reputation: 539

I've tweaked your CSS a bit:

.logo .vertical-right {
    width: 25px;
    height: calc(65% - 25px);
    background-color: #09aaba;
    margin-left: 60%;
    bottom: calc(27% + 25px);
    position: absolute;
}
.logo .vertical-right2 {
    width: 25px;
    height: 60%;
    background-color: #ba1dd4;
    margin-left: 60%;
    bottom: 40%;
    position: absolute;
}
.logo .horizontal-top {
    width: 100%;
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    bottom: 60%;
    border-radius: 10px 0;
}
.logo .horizontal-top2 {
    width: 60%;
    height: 25px;
    background-color: #ba1dd4;
    position: absolute;
    bottom: 60%;
    right: 0;
}
.logo .horizontal-bottom {
    width: calc(60% + 25px);
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    bottom: 27%;
    border-radius: 10px 0;
}

/* triangle */
.logo .arrow-left {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    position: absolute;
    bottom: 60%;
    right: 60%;
    border-right: 10px solid #ba1dd4;
}
.logo .arrow-down {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 13px solid transparent;
    position: absolute;
    top: 60%;
    margin-left: 60%;
    border-top: 10px solid #ba1dd4;
}

First off I agree with other posters here that an image sounds more like what should be getting used in this case. However that doesn't really answer the question; it's just handy advice.

With the sort of positioning you're attempting try to make your elements use a common "point of origin" within your container. In other words always try to align them from the same edges. You had a bit of a mixture before of top, right, left, and bottom. I've made elements that respect each other use the same edge for calculating distance. I've also added a couple of CSS calc functions like this one height: calc(65% - 25px);, since you're mixing mostly percentage elements with a couple of static pixel based measurements.

Upvotes: 0

Aur&#233;lien Gasser
Aur&#233;lien Gasser

Reputation: 3120

A perfect way to achieve what you want to do is to go for a SVG logo.

SVGs can be resized without breaking, and are quite powerful.

This tutorial could help you get started.

Upvotes: -3

Related Questions