its similar to the image layout in google images. (horizontal layout image next to each other with an indentation separating them)
IT Certifications and Careers (Official Discussion Thread)
- Thread starter fendi_mane
- Start date
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
BobbyBooshay
Arnold Jackson
Okay wow, I got a bit bright and t hought I could just study and pass the AWS.
Damn there is so much to Cloud computing, so I am taking a few steps back before tackling AWS
Current exam path now:
CompTIA Cloud Essentials -I know a lot of this already, but I am cert whore lol
CompTIA Cloud+
May do some Azure too, def wanna have a very good understanding of cloud before taking on AWS.
Damn there is so much to Cloud computing, so I am taking a few steps back before tackling AWS
Current exam path now:
CompTIA Cloud Essentials -I know a lot of this already, but I am cert whore lol
CompTIA Cloud+
May do some Azure too, def wanna have a very good understanding of cloud before taking on AWS.
currently regretting thisrecruiter wasting my timetelling me about this job which is supposed to be some IT job he's called me twice in two weeks but still has not even sent me over the job specifications
on friday he called me and wanted to setup an interview next week. Im sending his ass a email today demanding the job specs im not wasting my time going to an interview for i job i dont even want, although the company would look great on my cv (top 3 company in the world) and the salary is a 6k increase when i leave where im currently at im looking for a serious step up
