Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsWeb DesignWeb Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old May 13th, 2006, 10:25 PM
Rsulliv1 Rsulliv1 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2006
Posts: 5 Rsulliv1 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 37 m 20 sec
Reputation Power: 0
Flush/align bottom in a div

I am trying to get a poster layout correct. The page is here:

http://birdmachinedb.worldwontlisten.net/gallery/gallery.php?year=2001&page=1

As you can see, the first poster of the top section is aligned to the top. I'd like to see all of the posters' titles aligned along the bottom. The css for the div is listed below:

div.row1column1 {

position:relative;
width:140px;
height:140px;
float:left;
margin-left:49px;
text-align:left;
font-size: 10px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
z-index:1;
padding-right: 10px;
word-wrap: break-word;
padding-bottom:0%;
margin-bottom:0%;
}

There are a few redundancies in there due to my testing. If there's anything you guys can see that may help me, please do!

-ryan.

Reply With Quote
  #2  
Old May 14th, 2006, 07:47 PM
Kravvitz Kravvitz is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2005
Location: USA
Posts: 140 Kravvitz User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 1 h 33 m 14 sec
Reputation Power: 12

Reply With Quote
  #3  
Old May 15th, 2006, 10:01 PM
Rsulliv1 Rsulliv1 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2006
Posts: 5 Rsulliv1 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 37 m 20 sec
Reputation Power: 0
Quote:
Originally Posted by Kravvitz


Thanks, Kravvitz. That seems to be exactly what I'm looking for. I've tried to port it over to my site, but I'm having some issues. I was able to get the sample working, but it went back to normal when I filled in my details.

do you mind taking another look at my site? I left the coloring in there to show the gaps in the div's.

css:

#example1 {
position: relative;
width: 720px;
height: 180px;
background-color: #fbc;
background-color: #fdb;
margin-left: 49px;
margin-right: auto;
padding-bottom: 0;
}
#example1 div.alignBottom {
position: absolute;
bottom: 0;
background-color: #f00;
padding:0;
}
#example1 div.alignBottom div {
width: 7em;
background-color: #fbc;
padding-right:10px;
float: left;
text-align:left;
font-size: 10px;
}

<div id="example1"><div class="alignBottom">

<div class="row1column1"><b>dianogah</b><BR><a href="javascript:;" onClick="MM_openBrWindow('detail.php?id=137','','resizable= yes,width=555,height=400')" target="_self">Click for detail & info</A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR><IMG SRC="phpThumb/phpThumb.php?src=/poster_images/2001_dianogah_pinebender.jpg&h=120&w=135"></div>

<div class="row1column2"><b>breeders</b><BR><a href="javascript:;" onClick="MM_openBrWindow('detail.php?id=135','','resizable= yes,width=555,height=400')" target="_self">Click for detail & info</A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR><IMG SRC="phpThumb/phpThumb.php?src=/poster_images/2001_breeders_1.jpg&h=120&w=135"></div>

<.......>

</div></div>


Please let me know if there's anything you need to know from me about what I did!

Thanks again,
ryan.

Reply With Quote
  #5  
Old May 16th, 2006, 12:04 AM
Rsulliv1 Rsulliv1 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2006
Posts: 5 Rsulliv1 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 37 m 20 sec
Reputation Power: 0
Quote:
Originally Posted by Kravvitz
You will need to change the selectors for it to work.

Learn CSS.


Thanks again for the blunt info, but why would I have to change the selectors? if the id matches the selector why wouldn't it work? As I'm sure you know, the inner most tags seem to register with the correct css due to the selector, not because of the style class name. That is, in the example you gave me, they didn't have explicit styles made for classes one,two,and three. That's the same way as I'm retaining my original class names.

I know it's bad form to just lift tags from somewhere else, but I was still in PoC.

As it turns out, phpThumb seemed to be getting in the way. It was forcing the dimentions therefore not allowing the pic to flush left. Or at least this is what I've been able to do to get it to work a bit better.

I do appreciate the time, but I can google with the best of them. I've done all the reading I can through plenty of css books before I ended up here. If you actually see something in the code I have supplied, specific notes would help.

If you want to take a first look at the site link I supplied in the first post, you can see the progress I've made. Everything is flush to the bottom with my original css. Turns out it was correct from the start for that issue.

Now I need to see if I can flush the posters to the left of their current position. there's a phpThumb attrib for this, but it doesn't seem to work. Might be working against the css, but maybe not.. I'll keep digging though.

Let's try to stay positive or did my example page really look that green? I would of thought I have a working knowledge of css!

Thanks again!
-ryan

Reply With Quote
  #6  
Old May 16th, 2006, 12:14 AM
Kravvitz Kravvitz is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2005
Location: USA
Posts: 140 Kravvitz User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 1 h 33 m 14 sec
Reputation Power: 12
Your code is very messy. It's difficult to read it. The code you posted doesn't seem to be included in the page you linked to.

You don't need the #example1 CSS rule or <div>.

This is a bit old, but much of what it says is relevant -- What's wrong with the FONT element?

Reply With Quote
  #7  
Old June 1st, 2006, 05:15 AM
leoyang leoyang is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2006
Posts: 2 leoyang User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 32 m 10 sec
Reputation Power: 0
Wink

div,table which better?
i want to design the next website by div.

Reply With Quote
  #8  
Old June 1st, 2006, 02:13 PM
Kravvitz Kravvitz is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2005
Location: USA
Posts: 140 Kravvitz User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 1 h 33 m 14 sec
Reputation Power: 12
Welcome to DevArticles Forums, leoyang.

Next time please start a new thread.

The point of table-less layouts is not to simply replace tables with <div> elements as so many newbies mistakenly think. The point is to use semantically correct markup and then use CSS to make it look the way you want it to.
Read these:
http://www.camaban.co.uk/semanticwhat.php
http://www.webaim.org/techniques/structure/
http://www.brainstormsandraves.com/...tics/structure/
Standards don't necessarily have anything to do with being semantically correct
Semantics and Bad Code

Reply With Quote
  #9  
Old June 21st, 2011, 07:55 AM
shubham shubham is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jun 2011
Posts: 9 shubham User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 21 m 16 sec
Reputation Power: 0
ans

i think the url address is unavailable.

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsWeb DesignWeb Development > Flush/align bottom in a div


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap