Question 252431 in Html Question posted in
Some basic documentation can be found here.

all my elements change location when trying to change only one element. css html

When I’m trying to put my H1 more down and to the left of the picture (like you can do in word) it stays on top of the page and shifts the whole navigation bar down etc. I tried it with margin-top: down; but that wouldn’t work. also I want to let the underline appear with an fade when hovering over it in the nav bar but that wouldn’t work either.

body {
  display: block;
  background-color: black;
}


/*Navigation Menu*/

ul {
  display: block;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

ul li a {
  display: block;
  text-decoration: none;
  color: white;
  float: left;
  margin-left: 50px;
  margin-top: 30px;
  font-size: 20px;
  transition: 1s ease-out;
  /*Transition for animation*/
}

.active {
  display: block;
  color: rgb(255, 0, 0);
  text-decoration: underline;
}


/*On hover animation*/

ul li a:hover {
  display: block;
  text-decoration: underline;
}


/*Images Home page*/

.IMG1TEXT {
  margin-top: 100px;
  color: white;
}

.IMG1 {
  margin-top: 100px;
  float: right;
  margin-right: 50px;
  border: 5px solid white;
}
<body>
  <!--Navigation-->
  <nav>
    <ul>
      <li><a class="active" href="#">Photo's</a></li>
      <li><a href="#">Films</a></li>
      <li><a href="#">Trips</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <h1 class="IMG1TEXT">Portofino, </h1>
  <img class="IMG1" src="img/Portofino1.png" height="350">
</body>

please help and this is some text because my post is mostly code so had to type something ig.

Tags:

2

Answers


  1. 0

    Here is how you can manage your page layout using Flexbox.

    Here is documentation on flexbox

    body {
  display: block;
  background-color: black;
}

.master-container {
  display: flex;
  flex-direction: column;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}


/*Navigation Menu*/

ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 35%;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

ul li {
  display: flex;
  align-items: center;
}

ul li a {
  text-decoration: none;
  color: white;
  margin-top: 30px;
  font-size: 20px;
  transition: 1s ease-out;
  /*Transition for animation*/
}

.active {
  color: rgb(255, 0, 0);
  text-decoration: underline;
}


/*On hover animation*/

ul li a:hover {
  text-decoration: underline;
}

.main-container {
  display: flex;
  flex-direction: row;
}


/*Images Home page*/

.IMG1TEXT {
  margin-top: 100px;
  color: white;
}

.IMG1 {
  margin-top: 100px;
  float: right;
  margin-right: 50px;
  border: 5px solid white;
}
    <body>
  <!--Navigation-->
  <div class="master-container">
    <nav>
      <ul>
        <li><a class="active" href="#">Photo's</a></li>
        <li><a href="#">Films</a></li>
        <li><a href="#">Trips</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    
    <div class="main-container">
      <h1 class="IMG1TEXT">Portofino, </h1>
      <img class="IMG1" src="img/Portofino1.png" height="350">
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    I guess you are trying to get your <h1> tag down from the nav tab and to place on left of the image.

    Changes made:

    1. nav tab is styled.

    2. h1 and the img tag are put into a single div .

    body{
    margin:0;
    padding:0;
} 

/*navigation menu*/
nav{
    width:100%;
    height:50px;
    background-color: red;
    display:flex;
    align-items:center;
}
nav ul{
    display:flex;
    gap:50px
}
nav ul li{
    list-style:none;
}
nav ul li a{
    text-decoration:none;
    color:whitesmoke;
}

/*content*/

h1{
    margin-top:50px; /*your desired value*/
}

div{
    margin-top:3%;
    display:flex;
}
    <!--Navigation-->
<nav>
  <ul>
    <li><a class="active" href="#">Photo's</a></li>
    <li><a href="#">Films</a></li>
    <li><a href="#">Trips</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="container">
      <h1 class="IMG1TEXT">Portofino, </h1>
      <img class="IMG1" src="img/Portofino1.png" height="350">
</div>

    Following these steps you will acheive your target.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search