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.
Brian
Registered User
27 posts
paintbrush
Ambassador
3,816 posts
Can you post a link to your page/site?
It would help a lot to see the actual code.
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
https://www.callendales.com
Brian
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;
}
<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;
}
Brian
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;
}
<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;
}
paintbrush
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.
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
https://www.callendales.com
Brian
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.
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.
paintbrush
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?
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
https://www.callendales.com
Brian
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.
Brian
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.
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.
paintbrush
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
.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
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.
