/    Sign up×
Community /Pin to ProfileBookmark

Text caption beneath image

Copy linkTweet thisAlerts:
Aug 08.2014

Hi, I’m very new to web design and I wanted to make a row of images with one word captions beneath them.

However what happens is that the images displace the text.

[URL=”http://imgur.com/XSv3kct”]http://imgur.com/XSv3kct[/URL]

My CSS is:

[CODE]/********************
Focuses
********************/

#focuses{

white-space: nowrap;

}

#focuses img{
display: inline-block;
float: left;
margin-right: 5px;
}

#focuses p {

background-color: #e5e5e5;

}
[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@dhygjkfdsfAug 11.2014 — That's right css coding given by you.
Copy linkTweet thisAlerts:
@PoxMoyauthorAug 11.2014 — Anyone help?
Copy linkTweet thisAlerts:
@Kevin2Aug 11.2014 — Might help if you posted some HTML.
Copy linkTweet thisAlerts:
@StuartSpindlow1Aug 12.2014 — Nice stuff dear, thanks for sharing.
Copy linkTweet thisAlerts:
@w3responsiveAug 13.2014 — You didn't posted html, you need to create div for each image with text, for example

<div>

<img src=""/>

<p>Text here</p>

</div>
Copy linkTweet thisAlerts:
@PoxMoyauthorAug 14.2014 — <div id="focuses">

<h2>Our Focuses</h2>

<div>

<img src ="img/communication.jpg">

<p>Communication</p>

</div>

<div>

<img src ="img/security.jpg">

<p>Security</p>

</div>

<div>

<img src ="img/management.jpg">

<p>Management</p>

</div>


</div>
Copy linkTweet thisAlerts:
@Kevin2Aug 14.2014 — Not a whole lot of help dude. I was really hoping you'd post the code between the <body> tags or give a link. But here's a WAG: you are using[B] id="focuses"[/B] (and maybe other IDs) more than once on that page. You can only use an ID once per page. That's the rules. Want to use something again? Use Classes:

[code=html]<div class="focuses">
your other code
</div>[/code]

CSS:
.focuses{

<i> </i>white-space: nowrap;


}

.focuses img{
display: inline-block;
float: left;
margin-right: 5px;
}

.focuses p {

<i> </i>background-color: #e5e5e5;

}
×

Success!

Help @PoxMoy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...