text placement

User 2698274 Photo


Registered User
27 posts

I would like help placing text where I want.

1. Using an <aside> with left justified text, I haven't found any way (yet) of keeping the left justified text a pixel or two from the left edge. padding-left and margin-left, don't seem to help.

2. Placing captions under a row of images seems hard too. Applying <figure> to an image causes that particular image to occupy a line all by itself. Declaring it as inline hasn't helped so far.

Suggestions would be appreciated.
User 271657 Photo


Ambassador
3,816 posts

Can you post a link to your page/site?
It would help a lot to see the actual code. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2698274 Photo


Registered User
27 posts

<aside class="sidebar">
<h4>DesLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque.
Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.
<h4>
</aside>
and the css:
.sidebar {
width: 34%;
height: 682px;
float: left;
text-align: center;
background: url(../images/beige001.jpg);
margin-top: -37px;
}
User 2698274 Photo


Registered User
27 posts

Brian wrote:
<aside class="sidebar">
<h4>DesLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque.
Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum.
<h4>
</aside>
and the css:
.sidebar {
width: 34%;
height: 682px;
float: left;
text-align: center;
background: url(../images/beige001.jpg);
margin-top: -37px;
}
User 271657 Photo


Ambassador
3,816 posts

Brian, <aside> indicates a sidebar. It doesn't need the extra class (.sidebar).
If you need to make sure it displays correctly in older browsers, you could change it to
<div class="aside">...</div>

aside {
text-align:left;
margin-left: 10px;
padding: 10px;
}

For a series of images, I wouldn't use <figure>,
Have a look here for info about <figure> and <figcaption>
http://www.techrepublic.com/blog/web-designer/html5-figure-and-figure-caption-elements/
I've had good results with a horizontal unordered list to hold a series of images, then the list items have a class to specify the image size, margins, etc. and the caption info.





I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2698274 Photo


Registered User
27 posts

>> Brian, <aside> indicates a sidebar. It doesn't need the extra class (.sidebar)<<
You are correct I don't need the extra class, but I do need to format it in the css so I can use it elsewhere. Thanks for your suggestion, but I already tried padding: 10px; and margin-left: 10 px. The text stays glued to the left margin of the sidebar.

>> For a series of images, I wouldn't use <figure>,<<
As I said, I don't because it's not working for me. I will check out the rest of what you say. Thanks Paintbrush.
User 271657 Photo


Ambassador
3,816 posts

Brian, do you have a CSS re-set in place?
http://meyerweb.com/eric/tools/css/reset/

Can you post a link to the page?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2698274 Photo


Registered User
27 posts

css reset? Actually the phrase is new to me. From the look of the code at the web Meyer web site, the answer is no. I'm reading about it now.
User 2698274 Photo


Registered User
27 posts

Thank you Paintbrush, I know now what a css reset is. Actually I started the web site from a prefabricated template which was on the CC site. I started by pruning the css file, removing the stuff which seemed, at the time to be irrelevant, ha ha.

Now the reset code is once again in my css file. You can see it at http://brianw.coffeecup.com/index.html As you will see, the left side text alignment of the sidebar has not changed.
User 271657 Photo


Ambassador
3,816 posts

I tried adding some padding here:

.sidebar h2,.sidebar h4 {
color: #704D08;
text-align: left;
padding: 10px 20px;
}

See it here:
http://awesomescreenshot.com/0b239inha0

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.