[RESOLVED] "div" Without New Line Break?

[BobH]

Is it possible to invoke a class with a <div> without invoking a line break?

Maybe this isn't really the question. Let me tell you what I'm trying to do.

I have a photo album where thumbnails are linked to full size jpg's. On the full sized jpg's, I want to have a caption that is left aligned and in my required font and size below the pic. I have a CSS style defined for the font and alignment, but I want the same line to have a text link back to the photo album of thumbnails that is right-aligned. I tried 'align' statements but couldn't get it to work.

This code is in the full size jpg html file:

<br><br>
<div class="buttons_left">
<img src="pathname/filename.jpg" alt="name"><br>
caption
<div class="buttons">
<a href="photo_album.html">Return to Album</a>
</div>
</div>

The problem with this code is that the link is put on a new line.

Would appreciate some help.

[Kravvitz]

Don't use <br>s to create space. Use padding and margins as needed. Apply display:block to the <img>.

Use floats.

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

http://garyblue.port5.com/webdev/floatdemo.html
http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

Curing Float Drops and Wraps (http://nemesis1.f2o.org/aarchive?id=11)

[BobH]

Howdy Kravvitz!

Thank you for the response, but I don't understand the references nor how floats address my question.

I don't need multiple columns nor do I need to float text around an image. I have a (rather large) image that has a caption on the next line, as you can see in my snippet. What I want to do is make the link text appear on the same line but ending on the right margin, whilst the caption begins on the left margin. Said another way, I want to fill the space between the end of hte caption and the beginning of the link with spaces. How do the float commands address that?

I read thru some of the Floatutorial material but didn't see the relevance.

Also, why should I not use line breaks to insert 2 lines before the image displays. I appreciate the intent of the stricture in your statement but would like to understand "Why?" as well.

TIA

[prowebmaster]

Hello,

I think i know what you are talking about...

try in CSS:

.buttons_left
{
text-align: left;
}

.buttons
{
text-align: right;
}

If that does not work try:

display: inline;

Hope this is what you needed :)

[ray326]

I don't need multiple columnsActually you do. You need two single line columns under the image, the left one holds the caption, the right one holds the link text. Sort of like
<div class="image">
<img...>
<div class="caption">caption</div><div class="linktext">link text</div>
</div>
Also, why should I not use line breaks to insert 2 lines before the image displays.Because the right way to do it is with the top margin of the image div.

[Kravvitz]

You shouldn't use the <br> because you are using it for presentational pusposes, which is the realm of CSS.

It sounds to me like you want to do this. Unfortunately, because of the way floats work, you would need to move the div.buttons before the caption.

div.buttons_left .buttons {
float: right;
}
<div class="buttons_left">
<img src="pathname/filename.jpg" alt="name"><br>
<div class="buttons">
<a href="photo_album.html">Return to Album</a>
</div>
caption
</div>
Edit: Ray posted while I was typing. Using the HTML he provided, you could use float:left on those child <div>s instead of using float:right like I suggested.

[BobH]

And I thought this would be a simple formatting issue :)

Thanks for the help. I do, truly, appreciate it.

[Kravvitz]

If you'd like us to try again, please show us more of your HTML and CSS code.

P.S. Please don't include impotant text that is not repeated in the reply message body in thread reply titles.

[ray326]

Edit: Ray posted while I was typing. Using the HTML he provided, you could use float:left on those child <div>s instead of using float:right like I suggested.I almost always forget that the real alignment is a text-align:left and text-align:right on each div rather than float:left and float:right.

This is one of those places where I might also play with using a <dl> for each image block to show the semantic relationships. But that's just me. ;)

[BobH]

Before I go any further, can you please tell me how to take Firefox out of full screen mode. I had a flying fickle finger attack and can't remember to save me how to get my title and menu rows back (WinXP/HE, Firefox)?

I think that the essence of my problem is that DIV inherently invokes a line break even when it is the child of another DIV.

My website is www.broughton1960.com.

If you go to the Student Lounge link and click on the little photo on the bulletin board and then click on the thumbnail on the Photo Album page. You can see the problem more clearly than I can describe it.

TIA

[prowebmaster]

It is F11 to get out of full-screen mode :)

[BobH]

Kravvitz:

P.S. Please don't include impotant text that is not repeated in the reply message body in thread reply titles.

What did you mean by the quoted statement? Did I do something wrong before?

Trying to learn the proper protocol.

[BobH]

Thank you, Sir! F11 did the trick.

Guess you guys can tell how inexpert I am at this; however, I'm determined to learn enough to be able to support my high school class with a website. I suppose I could have gone the WYSIWYG route, but I would have lost ALL self respect.

[Kravvitz]

Why didn't you just link to it directly? Yuo were directing us to http://www.broughton1960.com/photo_album.html, right?

So you're working on a new version of the code for that page?

What did you mean by the quoted statement? Did I do something wrong before?

Trying to learn the proper protocol.
I was referring to this:
Tried Both Solutions - Neither Worked

[BobH]

The answer to your question is that I'm guilty of poor design, probably. My intention is to have the tiny little photo on a bulletin board on the Student Lounge page (like there were back in the '50's when we were in high school). There will eventually be other small icon-like graphics on that bulletin board that link to other album pages such as music audio album, oral recollections taped and digitized album, post-it note type graphics, etc. It was intended to be a figurative bulletin board that will give you information to do other things. Please understand that this is the first design or coding attempt I've ever made. I didn't know what HTML, CSS, PHP, MySQL et al were when this year began although I did write mainframe code in COBOL and BAL more than 30 years ago. I'm learning these tools -- including principles of design -- as I go. You can see that I will NEVER compete with you pro's.

The light dawned on my inappropriate use of thread titles. Mea culpa. It won't happen again.

And I see the light about the <BR> usage in HTML and the point about separating content from presentation. As I said, I'm a complete noob to all of this learning at the knee of you masters.

While we're on this subject, I need to ask a very specific question about the navigation panel on my pages (and on others, too for that matter). I was having a hard time deciding if the nav panel is content or presentation because, the way I have it coded there are explicit HTML statements in virtually every screen presentation file. This is very inefficient in terms of coding time and code maintenance, but I was advised by someone (don't recall whom) that it is content ergo should be in the HTML. That's OK, but it seems that it would be more efficient (and more easily changed as the website evolves over time) if it were in a single place (i.e., single html file) and were somehow called and inserted by a single line of code in each html file that needs it. Obviously, I couldn't figure out how to do this in CSS.

My over-riding criteria has been to get something working first then go back and fix it like it should be when I learn what "should be" really is.

[BobH]

'Tho I realize that replying to one's own post is not good 'style,' I'm reporting what I did to work around the problem because I've been unable to effect any other solution.

View the page at http://www.broughton1960.com/hutchins_2005.html

Here's the relevant HTML:
<div class="photo_image">
<img src="graphics/anniversary_2005.jpg" alt="The Hutchinses">
</div>
<div class="photo_caption">Robert and Dottie (McClellan) Hutchins...........................................................................
<a href="photo_album.html">Return to Album</a>
</div>

And the relevant CSS:
.photo_caption {
position : absolute; top: 500px; left : 235px;
width: 720px;
background-color: transparent;
font-family : "comic sans ms";
color: #48009D;
font-size: 12pt;
}

.photo_image {
position : absolute; top : 70px; left : 235px;
}

.photo_linktext {
background-color: transparent;
font-family : "comic sans ms";
color: #48009D;
font-size: 12pt;
text-align : right;
margin-right : 10px;
}

I would appreciate comments and suggestions that would improve the code.

Also, I'd appreciate hearing the thoughts of you folks about my navigation panel question expressed in my prior post, this thread. If this has been discussed elsewhere and you can point me to it, please don't waste any bandwidth here.

Thank you again for all your help!

[ray326]

A nav panel is content. In fact the current idea for coding a nav panel is to us a unordered list, <ul>, because it is semantically "a list of links." Indeed a common technique for global nav bars is to use the server side include mechanism of choice to include the HTML of the nav bar in every page. See if the beginnings of my little step-by-step on page construction (http://youcancallmeray.%62logspot.com)* helps. I got started on it Monday but this week's been pretty busy so far. Still it already covers a couple of important ideas.


*Looks like my blog host is being block by this forum. If clicking the link doesn't work then you can get to it through the "visit ray326's home page" feature.

[lewis7558]

Disregard - Found an alternate solution