I mean't the images on the same line and the text are below them on line below, similar to when you hit the tab button in word.
IT Certifications and Careers (Official Discussion Thread)
- Thread starter fendi_mane
- Start date
I mean't the images on the same line and the text are below them on line below, similar to when you hit the tab button in word.
its similar to the image layout in google images. (horizontal layout image next to each other with an indentation separating them)
Use the float property on the image... for example:
float: left;
and then change the margin
margin-right: 10%; (or px if you're using px)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#a
{
height: 100px;
width: 100px;
background-color: black;
margin-right: 5%;
float: left;
}
</style>
</head>
<body>
<div id="a"></div>
<p class= "imgtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus temporibus natus, tempore dicta totam quaerat minus labore. Sapiente soluta animi facilis earum, delectus tempora similique recusandae aperiam! Dolores, cupiditate in?
</p>
</body>
</html>Why does the image file go? I have in my html file
<figure> <a href="images/closeup500.jpg" target="_blank" ><img src="images/closeup1800.jpg"alt="Photograph of Sunflowers"title="Wave." width="75" height="50" /> </a>
<figcaption>This image will open in a new page.</figcaption>
</figure>
AND
<figure> <a href="images/closeup500.jpg" ><img src="images/closeup500.jpg"alt="Photograph of Sunflowers"title="Photograph of Sunflowers." width="75" height="50" /> </a>
Assuming you want text to appear to the right of those images wrapped in the figure tags:
Create a new class called imgAlign and attach it to the figure tags
<figure class ="imgAlign">
Then define the css
.imgAlign
{
float: left;
margin-right: 2%;
}
ok that worked but there not on the same line
hit printscreen and upload the picture because I'm having a tough time visualizing exactly what it is you're trying to do
I should of done this first.
)
I should of done this first.http://imgur.com/u5HMAtL Look above the <ul> lists. I'm trying to get both the images and text on the same lines
http://codepen.io/kevm3/full/bNXvjo/
Is that the kind of effect you are trying to achieve? Assume the black blocks are pictures
yes but I want the text below the boxes
Yeswithout the borders
On your figure element, set the css property display to inline-block
figure
{
display: inline-block;
}
also, set the picture to inline-block as well. Then, use the margin property to adjust your spacing. Use text-align: center on both elements as well.
Here is the example I showed you:
http://codepen.io/kevm3/pen/bNXvjo/
Edit it so you can understand what is going on.
I got it working with a little tweaking of your code. I work it working now I'll I need is to get that image in the text "This is some text that is placed in the transparent box."
I added
but the image nor text from the html doesnt show