PDA

View Full Version : Need help aligning text with image


neens_wa
Aug-18-2007, 04:10 PM
Found a really slick thread (sorry, Firefox crash, and can't find it again!) that would allow me to edit my "about me" gallery, so I could have an image to the left, and paragraph(s) of text on the right. Well, that's what it showed on the tutorial... :cry Here's my gallery so you can see what I have right now: http://westernimagphoto.smugmug.com/gallery/3315919

What I WANT :wink is to have the text fill that empty space on the RH side of the image (like the thread displayed in it's example). Here is the code I copied/pasted per the instructions, replacing the gallery number, and monkeying with other numbers t o see if I couldn't MOVE the text...


.gallery_3315919 #galDescImg {
position: relative;
height: 300px;
width: 195px;
margin-top: 20px;
margin-left: 60px;
border:4px double #cccccc;
}

.gallery_3315921 #galDescText {
position: relative;
font-size: 1.2em;
font-weight: bold;
color: #ccc;
text-align: center;
width: 195px;
margin-top: -290px; (I CHANGED THIS)
margin-left: 550px; (I CHANGED THIS)
border:4px double #cccccc; (I ADDED THIS)
}

/* set the height to push the footer down */
.gallery_3315919 #albumDescription {
background: #2C2322; (I CHANGED the #cccccc to my own color)
height: 1000px; (I CHANGED THIS to push the gallery WAAAAAAY down)
}
/* remove stuff for clean page look */
/* some of these may not be needed */
.gallery_3315921 .nophotos h3 {display: none;}
.gallery_3315921 #searchBox {display:none;}
.gallery_3315921 #breadcrumb {display: none;}
.gallery_3315921 .journal_entry {display:none;}
.gallery_3315921 .pageNav {display: none;}
.gallery_3315921 #albumNav_top {display: none;}
.gallery_3315921 #albumNav_bottom {display: none;}
.gallery_3315921 .play_slideshow {display: none;}


Could someone kindly point out what I'm obviously missing for that CSS section? I copied/pasted the whole gamut, but some somethin' ain't happy.

Thanks in advance,

Nina

http://westernimagphoto.smugmug.com

Allen
Aug-18-2007, 04:18 PM
Found a really slick thread (sorry, Firefox crash, and can't find it again!) that would allow me to edit my "about me" gallery, so I could have an image to the left, and paragraph(s) of text on the right. Well, that's what it showed on the tutorial... :cry Here's my gallery so you can see what I have right now: http://westernimagphoto.smugmug.com/gallery/3315919

What I WANT :wink is to have the text fill that empty space on the RH side of the image (like the thread displayed in it's example). Here is the code I copied/pasted per the instructions, replacing the gallery number, and monkeying with other numbers t o see if I couldn't MOVE the text...

...
...

Could someone kindly point out what I'm obviously missing for that CSS section? I copied/pasted the whole gamut, but some somethin' ain't happy.

Thanks in advance,

Nina

http://westernimagphoto.smugmug.com
Try this combo, you didnt have the correct gallery number in some.

.gallery_3315919 #galDescImg {
position: relative;
height: 300px;
width: 195px;
margin-top: 20px;
margin-left: 50px;
border:4px double #cccccc;
}

.gallery_3315919 #galDescText {
position: relative;
font-size: 1.2em;
font-weight: bold;
color: #ccc;
text-align: center;
width: 400px;
margin: -310px 0 20px 300px; /* top right bottom left */
border:4px double #cccccc;
}

/* remove stuff for clean page look */
.gallery_3315919 #searchBox {display:none;}
.gallery_3315919 #breadcrumb {display: none;}
.gallery_3315919 .journal_entry {display:none;}
.gallery_3315919 #albumNav_top {display: none;}
.gallery_3315919 #albumNav_bottom {display: none;}

neens_wa
Aug-18-2007, 07:50 PM
Ohhh Allen.. you are the master...

And I need to get new glasses. :O) You are far too kind.

Thanks! :O)

She who has an aligned text box AND a double white line trim! :thumb

~nina