CODEWITHSUNDEEP
htmlcss
Alexandra
Alexandra

Reputation: 641

How to make button icons align to right

enter image description hereI can't seem to find a way to make my button icons align to the very right of my header, while keeping "About" "Gallery" and "Resume" to the left.

As well, does anyone know how I can make the text fit evenly on the page, I have a strange gap on the right and want it to fit evenly on the page. It looks like I need help with CSS.

HTML

body {
  background-image: url("images/robot.jpg");
  background-position: bottom-left;
  margin-right: 200px;
  text-align: justify;
  width: 800px;
  height: 400px;
  text-decoration: none;
  color: white;
  font-family: 'Marvel', sans-serif;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: right;
  padding: 10px 13px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.circular--portrait {
  margin-top: 70px;
  margin-left: 30px;
  width: 200px;
  height: 200px;
  float: left;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
}

.circular--portrait {
  width: 25%;
  float: left;
}

.column-one p {
  width: 65%;
  float: right;
  margin-top: 150px;
  margin-left: 10px;
}

.column-two {
  float: left;
  width: 100%;
}

img {
  transition: transform .5s;
}

img:hover {
  transform: scale(1.75);
}



<body>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="resume.html">Resume</a></li>

    <li>
      <a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on 
         Deviant Art" target="_blank">
        <img src="images/icons/deviantart.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="[email protected]" title="Contact" target="_blank">
        <img src="images/icons/email.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" 
      title="Follow on Linkedin" target="_blank">
        <img src="images/icons/linkedin.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on 
      Instagram" target="_blank">
        <img src="images/icons/instagram.png" width="30" height="30">
      </a>
    </li>
  </ul>



  <div class="circular--portrait">
    <img src="images/profile.jpg">
  </div>

  <div class="column-one">
    <p>Eddie Munoz has been creating art from the age of 13. While he was 
    completing his Bachelors of Applied Science in Human Relations he was 
  freelancing on the side. Eddie has created numerous character artists.</p>
  </div>



  <div class="column-two">
    <h1>What others are saying</h1>
    <p>"Eddie is the best young talent I have had the pleasure to work with. 
    He has a great eye for detail and really finds the fun in whatever 
    project he is given no matter the size. Eddie strives to learn every 
    nuance of 3D gaming tech as well as distributing
      that knowledge once learned. Eddie is an amazing talent that is bound 
    for superstar status." - Billy Ashlswede, Art Lead at Riot Games</p>
    <p>"Eddie was a highly valued Character Artist with proficiency in many 
    different modeling programs. He was a very dedicated artist who 
    frequently helped others and went out of his way to produce additional 
    assets for our game. Eddie has not only a very
      technical, but also a very artistic mindset. All of these qualities 
    make Eddie a great asset to any team." -Kyle Sarvas, Game Artist/Game 
    Designer</p>
  </div>
</body>

Upvotes: 2

Views: 142

Answers (4)

Julio Feferman
Julio Feferman

Reputation: 2676

I have made many changes to the structure. First, consider placing your header and content inside separate containers. This will give you greater control over each block. In the header, I separated the links <ul> from the icons <ul> and position the icons right using position:absolute.

Now, in the content, you must remember to clear any floats defined previously with clear:both. Here, I used a css grid layout to create two columns but you can opt for any number of other layout strategies.

body {
  background-image: url("images/robot.jpg");
  text-align: justify;
  text-decoration: none;
  font-family: 'Marvel', sans-serif;
  margin: 0px;
  padding: 0px;
}

.header {
  background-color: #333;
}

ul.icons {
  position: absolute;
  right: 0px;
}

ul.links {
  height: 50px;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: right;
  padding: 10px 13px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.content {
  clear: both;
  padding: 8px;
  display: grid;
  grid-template-columns: 48% 48%;
  grid-column-gap: 4%;
}

.circular--portrait {
  margin-top: 70px;
  margin-left: 30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
}

.circular--portrait {
  width: 25%;
}

.column-one p {}

.column-two {}

img {
  transition: transform .5s;
}

img:hover {
  transform: scale(1.75);
}
<div class="header">
  <ul class="links">
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="resume.html">Resume</a></li>
  </ul>

  <ul class="icons">
    <li>
      <a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank">
        <img src="images/icons/deviantart.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="[email protected]" title="Contact" target="_blank">
        <img src="images/icons/email.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank">
        <img src="images/icons/linkedin.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank">
        <img src="images/icons/instagram.png" width="30" height="30">
      </a>
    </li>
  </ul>
</div>

<div class="content">

  <div class="column-one">
    <div class="circular--portrait">
      <img src="images/profile.jpg">
    </div>

    <p>Eddie Munoz has been creating art from the age of 13. While he was completing his Bachelors of Applied Science in Human Relations he was freelancing on the side. Eddie has created numerous character artists.</p>
  </div>



  <div class="column-two">
    <h1>What others are saying</h1>
    <p>"Eddie is the best young talent I have had the pleasure to work with. He has a great eye for detail and really finds the fun in whatever project he is given no matter the size. Eddie strives to learn every nuance of 3D gaming tech as well as distributing
      that knowledge once learned. Eddie is an amazing talent that is bound for superstar status." - Billy Ashlswede, Art Lead at Riot Games</p>
    <p>"Eddie was a highly valued Character Artist with proficiency in many different modeling programs. He was a very dedicated artist who frequently helped others and went out of his way to produce additional assets for our game. Eddie has not only a very
      technical, but also a very artistic mindset. All of these qualities make Eddie a great asset to any team." -Kyle Sarvas, Game Artist/Game Designer</p>
  </div>
</div>

Upvotes: 0

Ajay Gupta
Ajay Gupta

Reputation: 2033

I have created a fiddle: https://jsfiddle.net/o61xr75c/

display: flex; justify-content: space-between; align-items: center;

Basically, when you want to do such things you should divide the items in two or more containers, in this case one container for the left side (text only) and other contains for the right side (image only).

Hope it helps!

Upvotes: 0

Asifuzzaman
Asifuzzaman

Reputation: 1783

Hello You can use the nth-last-child selector to control your child elements so if you have your image list fixed the you can use 

li:nth-last-child(-n+4) { float:right; }

this will move the last 4 image list items to right

check the below fiddle demo

Fiddle Demo

Upvotes: 1

sol
sol

Reputation: 22919

You can use flexbox for the layout of your header. Use margin property on the 4th nav item to push it right.

body {
  background-image: url("images/robot.jpg");
  background-position: bottom-left;
  /* this margin is probably why you have a gap on the right */
  /* margin-right: 200px; */
  text-align: justify;
  width: 800px;
  height: 400px;
  text-decoration: none;
  color: white;
  font-family: 'Marvel', sans-serif;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  list-style-type: none;
}

li a {
  display: block;
  color: white;
  padding: 10px 13px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.nav-right {
  margin-left: auto;
}
<ul>
  <li><a href="about.html">About</a></li>
  <li><a href="gallery.html">Gallery</a></li>
  <li><a href="resume.html">Resume</a></li>

  <li class="nav-right">
    <a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on 
         Deviant Art" target="_blank">
      <img src="images/icons/deviantart.png" width="30" height="30"></a>
  </li>
  <li>
    <a href="[email protected]" title="Contact" target="_blank">
      <img src="images/icons/email.png" width="30" height="30"></a>
  </li>
  <li>
    <a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank">
      <img src="images/icons/linkedin.png" width="30" height="30"></a>
  </li>
  <li>
    <a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on 
      Instagram" target="_blank">
      <img src="images/icons/instagram.png" width="30" height="30">
    </a>
  </li>
</ul>

Upvotes: 0

Related Questions