CODEWITHSUNDEEP
htmlcsstextalignment
Mike
Mike

Reputation: 19

Cant get text to move on HTML page with CSS

very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.

Trying to get to look like this: https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8

Thanks in advance

Here is my CSS/HTML files:

.img {
    position: relative;
    float: left;
    width:  250px;
    height: 250px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    padding-top: 100px;
}

.text1 {
	position:relative;
	left:100px;
	top:400px: 
}
.text2 {
	position:relative;
	left:200px;
	top:400px: 
}
.text3 {
	position:absolute;
	left:300px;
	top:400px: 
}
.text4 {
	position:absolute;
	left:400px;
	top:400px: 
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>About</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="about.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Title</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="links.html">Links</a></li>
        <li><a href="#">LinkedIn</a></li>
        <li><a href="#">Github</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
	<img src="images/xxx.jpg" class="img-circle img">
	
	<img src="images/xxx.jpg" class="img-circle img">

	<img src="images/xxx.jpg" class="img-circle img">

	<img src="images/xx.jpg" class="img-circle img">



	<div id="text1">
		 <p>TEXT UNDER PIC 1</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 2</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 3</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 4</p>
	</div >


</div>

</body>
</html>

Upvotes: 0

Views: 5196

Answers (3)

Peter McArthur
Peter McArthur

Reputation: 154

http://codepen.io/lostdino/pen/LpKKra

I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.

.img {
    position: relative;
    display:inline-block;
    width:  250px;
    height: 250px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    padding-top: 100px;
}
.text1 {
    position:relative;
    left:100px;
    top:400px: 
}
[id*="text"] {
  width: 250px;
  display: inline-block;
}

With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:

http://codepen.io/lostdino/pen/PPrryZ

.gallery img {
  position:relative;
  width: 100%;
  height: 100%;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}
.gallery {
  padding-top: 100px;
  padding-left: 10px;
  position:relative;
}
.gallery > figure {
    position: relative;
    display:inline-block;
    width:  250px;
    height: 250px;
}

The HTML of the gallery restructured like so:

  <div class="gallery">
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
    </figure>
  </div>

Upvotes: 1

Robert Glover
Robert Glover

Reputation: 1

Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.

Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.

Hope this helps, let me know if you have any more questions!

Upvotes: 0

Ryan Park
Ryan Park

Reputation: 88

The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.

That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:

<div class="container">
    <!-- Image One -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>

    <!-- Image Two -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>

    <!-- Image Three -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>
</div>

You would then set your desired widths on the .image-container class, and your image and captions will follow suite.

Upvotes: 0

Related Questions