The placement of text within a <div>

I'm new at this, so please forgive me if my question sounds naive. I've been struggling with this issue the whole day.

I'm working on a student project:

https://codepen.io/kremlevmax/pen/EomEyb

Here is the HTML:

<body>
    <div class="menu-bar">
<button href="#" class="btn menu-button">Test Button</button>
      <button href="#" class="btn menu-button">Test Button</button>
      <button href="#" class="btn menu-button">Test Button</button>
</div>
    <div class="outer">
      <div class="inner">
        <div class="container">
          <div class="col-lg-3 col-sm-3">
            <img src="https://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300" class="portfolio-photo">
            </div>
          <div class="col-lg-9 col-sm-9 div-photo-text">
            <p class="text">
              Some test text
              </div>
            </div>
</div>
</div>
</div>

And the CSS:

body {
  background-color: #C0F2FB;
  font-family: "Tahoma";
  margin: 0;
}

.outer {
  background-color: #E8F8FA;
  margin: 0 auto;
}

.inner {
  background-color: #FFFFFF;
  width: 94%;
  padding: 20px 20px;
  margin: 70px auto;
  overflow: hidden;
}


.portfolio-photo {
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.div-photo-text {
  padding: 50%;
  text-align: left;
}
.text {
  font-size: 120%;
}


.menu-bar {
  position: fixed;
  overflow: hidden;
  top: 0; 
  width: 100%; 
  padding: 10px;
  background-color: #1A899D;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.menu-button {
  float: right;
  background-color: #1A899D;
  border: 2px solid #1A899D;
  color: #C0F2FB;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.menu-button:hover {
  background-color: #C0F2FB;
  color: #000000;
}

I have a few questions regarding this project:

  1. Why isn't "Some test text" vertically centered in the div next to the image?
  2. Why do the picture and text overlap the menu when scrolling instead of going under it?
  3. If I remove the padding in the div-photo-text class, why does "Some test text" move below the image? Shouldn't the col-lg-3 and col-lg-9 classes keep the text next to the image?

Thank you for any assistance you can provide.

htmlcssbootstrap-4

Answer №1

Hey Max! To address the first question, you will need to eliminate the 50% padding as it is creating padding on all sides and include both vertical and horizontal alignment properties.

//Vertical
.vertical-align {
    display: flex;
    align-items: center;
}

//Horizontal
.text {
  text-align: center;
}

Regarding the second question, simply adding z-index:1 to your menu will bring it to the forefront of your text. The z-index property dictates the stacking order of elements, with higher values placing elements in front of those with lower values.

As for the third question, the issue arises from missing a necessary div element below, which is crucial when utilizing bootstrap row grids. You must incorporate this within the parent div containing the text and image to indicate that they belong in the same row.

<div class="row">

</div>

You can review the code here: https://codepen.io/anon/pen/GymbVJ

Answer №2

give this a shot

body {
  background-color: #C0F2FB;
  font-family: "Tahoma";
  margin: 0;
}

.outer {
  background-color: #E8F8FA;
  margin: 0 auto;
}

.inner {
  background-color: #FFFFFF;
  width: 94%;
  padding: 20px 20px;
  margin: 0 auto;
  overflow: hidden;
}


.portfolio-photo {
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.div-photo-text {
  display: flex;
  align-items: center;
  text-align: left;
}

.text {
  font-size: 120%;
}

.menu-bar {
  z-index: 1
  position: fixed;
  overflow: hidden;
  top: 0; 
  width: 100%; 
  padding: 10px;
  background-color: #1A899D;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.menu-button {
  float: right;
  background-color: #1A899D;
  border: 2px solid #1A899D;
  color: #C0F2FB;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.menu-button:hover {
  background-color: #C0F2FB;
  color: #000000;
}
.row{
  display: inline-flex;
    align-items: center;
}
    <div class="menu-bar">
<button href="#" class="btn menu-button">Sample Button</button>
      <button href="#" class="btn menu-button">Sample Button</button>
      <button href="#" class="btn menu-button">Sample Button</button>
</div>
    <div class="outer">
      <div class="inner">
        <div class="container">
          <div class="row">
            
            <div class="col-lg-3 col-sm-3">
            <img src="https://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300" class="portfolio-photo">
            </div>
            
            <div class="col-lg-9 col-sm-9 div-photo-text">
            <p class="text">
              Some example text
            </div>
            
          </div>
        </div>
        </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP is not processing the HTML form I submitted

HTML: <form method="post" action="create.php"> Job #: <input type="text" name="jobnum"> <br> Program: <input type="text" name="program"><br /> Ship Date: <input type="text" name="shipdate"><br /> Description: < ...

phphtmlformshttp-post

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...

javascriptjqueryhtmlcss

Adjust the size of the image to perfectly fit within the div without enlarging it

I have a variety of images with different dimensions, ranging from 50x100 to 4000x4000 pixels. My objective is to display these images in their original size or scale them down to fit within the browser window. However, I have encountered an issue where t ...

javascriptjqueryhtmlcss

Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...

htmlcsstwitter-bootstrap

Is it possible to adjust the height of a panel in Jquery Mobile 1.4.5?

Currently working on a jqm project that is specifically for mobile devices. In this project, I have implemented two panels - one set to push and the other overlay. While one panel is positioned in the left corner of the screen, the other is located in the ...

javascriptjquerycssjquery-mobilepanel

Using Angular and Typescript to create a dynamic text with the routerLink feature

Enhanced Question for Clarity: I am looking to dynamically display text and links retrieved from a service or database in an Angular HTML component. When the user clicks on these elements, I want it to programmatically navigate using Typescript's rou ...

htmlangulartypescriptinnerhtmlangular-router

Attach a child element to the bottom of its parent div when the parent div reaches the bottom

I'm looking to make a child div stick to the bottom when the parent div reaches the bottom of the browser window. Note: This behavior should only occur when the parent div is pushed down, not when the page is scrolled down. For instance, in my demon ...

javascriptjqueryhtmlcss

Hover function not functioning properly

I can't figure out why this hover effect isn't working, there doesn't seem to be a negative z-index or anything like that. At most, it just flashes on hover; .menu{ border-radius: 50%; width: 100px; height: 100px; background: white; box-sha ...

csshover

I relocated the navigation HTML code to a new file and as a result, the JavaScript functionality is

After successfully implementing the hamburger icon animation in my navbar using JavaScript, I decided to move the nav code to a separate file for better organization. However, the decision resulted in an error where clicking on the burger icon returned a m ...

javascripthtmljquerynullnav

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

I am in the process of developing a button that, when clicked by a user, will trigger all embedded YouTube videos on a specific webpage to start playing simultaneously, with sound muted, and set to loop. The target page for this button implementation can ...

javascripthtmljquerycss

The use of a Bootstrap row is leading to incorrect dimensions for FullPageJS

Within the body tag, I have included the following code snippet: <div id="container"> <div class="section profile"> <div class="row"> <div class="col-sm-6"> A </div> ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best method to make the first input field the focus in BootStrap?

Is there a way to prioritize the focus on the initial input element in an HTML form without specifying an ID? How to set the focus to the first input element in an HTML form independent from the id? I'm working with BootStrap and ASP.NET MVC4. De ...

javascripthtmltwitter-bootstrap

Conceal the current table and reveal a new table upon clicking using jQuery

Within my form, there is an option to select a specific type. Depending on the chosen type, relevant data is displayed in a table. Upon selecting the first type and clicking the submit button, the data is correctly shown in the table. However, when selec ...

jqueryhtml

Creating an endless ticker animation in AngularJS that dynamically adjusts to element dimensions

This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...

javascriptangularjscss

Tips for dynamically retrieving a CSS file for an HTML page

With multiple html pages containing the same navbar, I made the decision to place the navbar in its own file called navbar.html and use ajax with jquery.get() to dynamically load it onto each page. This prevents redundant code across all pages. Currently, ...

htmlcssajax

Code to achieve smooth scrolling from a hyperlink to a specific div element

<div style="border-radius: 10px; border: 2px solid #a1a1a1; padding: 10px 20px; width: 94%;"> <ul> <li>Listing of course details by country <ul> <li><a href="#bdpindia">India</a></li> <li><a href="#b ...

javascripthtmlcss

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

Issues following compilation with npm run prod

I am currently working on a small website using Laravel and Tailwind CSS on shared hosting. While I am able to use a command line tool on the host, I have encountered an issue. In my local environment, Tailwind works perfectly fine. However, after running ...

cssnpmtailwind-css

Is there a way to conceal/remove the text displayed on the submit button?

I am facing an issue with a submit button in my PHP code. The button displays an integer value that is crucial for running a script, but I want to hide the value as it interferes with the design using CSS. I have attempted various solutions like removing t ...

phpcss

What techniques can I employ in HTML and CSS to design the user interface for my Java application?

Recently, I came across an interesting article at this link: http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm. The article demonstrates how to develop a java application utilizing the javafx library and utilizing classes like WebEngine and WebVie ...

javahtmlcssuser-interfacejavafx