16 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

okay guys, this is pretty much my second attempt at a site which will likely ultimately contain a fairly detailed layout.

it's to become my "web development" biz page. yeah, yeah, i ain't quite ready for that, but whatever... i'll cross that bridge when i come to it. Cool

right now i need some help on this layout. i have already used floats to position images and <ul>'s on a page so they appear as if in columns nicely laid across the width of the main content area (see here-- the <ul>'s mid page). so, i can get that going okay on my own (i may not be using the best approach for it yet, but i'll get that-- at least what i've done so far "works" w/out the use of tables, so i'm content w/ it for now). but this time, the elements which i want to put in "columns" are supposed to thumbnails w/ descriptive text beneath them-- the idea beign the famous "portfolio" of work page. again, i don't really have much content to put there yet, but i eventually will (i plan to revamp some of my old charity sites to build up a collection that i'm happy with sharing as an example of my work). -- so, i can get the image where i want it okay, but i'm having trouble conceptualizing how i will get the image AND the text placed nicely below. it's going to need a space between the image, so rather than use forced line-breaks, i want to use a new <p>, but that poses a problem w/ the float, as it then is no longer effected by the float applied to the image. i tried using <div>'s for each separate thumnail / text block, but then i had a problem w/ the next section below creeping up into the current section-- i'm using two sections on the portfolio page: 1 for web sites, and 1 for web applications-- that way i can toss in a few little things i've done as inserted apps to other site layouts which are not mine, but which i merely added these little apps (can barely call 'em apps, really) to supplement those sites' existing functionality. you'll see what i mean if you look here. take note that the second image in the "web sites" section, the one on the right, has its own text block below it, but that text block isn't residing where i want it-- instead it is directly under the text block for the first image, begining w/ the words: "nittany research - state college, pa".

the other, less tricky thing (i hope) is that i need to get the "maincol" and "leftcol" (where the navigation list is) to reach down and touch the footer. in previous css layouts, i simply colored the {background-color: ... ;} of the <body> the same as the columns, so any "white-space" whouldn't be discernable. that technique will not work here as i've got my columns a different color than the "surrounding" body area. again, you'll see what i mean here

thanks!!

EDIT:
oh, hey-- feel free to critique my use of the text captions under the thumnails. i'm concerned that i've made 'em too wordy. what do you think?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The &quot;white-space&quot; fix, and float help

Jeff,

There's just too much information. I just couldn't winnow the chaff to get to the problem. Try a rewrite.

  1. Name the problem area, eg., "Too much white space between list items". (I'm just making things up here.)
  2. Tell us what it's doing, and what you want it to do. Do not tell us how you want to fix it.
  3. Tell us what you've tried.
  4. Show us the offending code snippet. If you haven't cared enough to narrow it down, why should we care?
  5. Give us a link to the whole page.
These are general rules that apply to anyone seeking help, so it's not meant personally, Jeff. The following rule is aimed at you Laughing out loud :

Do it in 150 or fewer words. [1]

cheers,

gary

[1] This post is about 125 words, to give you an idea.

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

The &quot;white-space&quot; fix, and float help

kk5st,

rock! i'll do that. gimme a li'l while. jeffie take nap now.

i should write my questions in notepad, then skim the lean from the fat. i think it's my problem of talking it out to myself, then posting that version... definitely not a lack of concern-- more a lack of knowing how to say what i'm trying to say or ask, and an obsessive feeling of needing to add so much commentary (once referred to by one of my professors as "apologizing for myself in the text". not sure if that applies here exactly...).

EDIT:
screw the nap... i'm working on that code snippet. i'll brew some coffee!

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

The &quot;white-space&quot; fix, and float help

Edit:
the url. this is not a finished site, so this is why i'm showing you this page only. i've only published it so i can ask for help.

WHAT I WANT:
images and text layed out as if in columns. one left, and one right.
the image is on the right almost where i want it, but it's relevant text is not-- instead its text is under the text for the first image. this is what i wish to fix.

here's the chunk of html from the page, precisely where i'm confused as to how to handle my intended layout. this will show you what i've tried:

<div id="maincol" > 
			<h2 class="stickout">.portfolio</h2>
<div id="port">
<h3 class="stickout2">web sites:</h3>
<p ><a href="http://www.clubrive.com" target="_blank">
<img src="images/portfolio/RiveThumb.jpg" width="150" height="121" alt="Club Rive - San Antonio, TX" /></a></p>
			<p class="xsmall">Club Rive - San Antonio, TX</p>
			<p class="portcap">A nightclub in downtown San Antonio. Within walking distance of the historical site of the Alamo, Club Rive is <em>the</em> hot-spot for San Antonio night-life entertainment.

<p class="portmid"><a href="http://www.nittanyresearch.com">
<img src="images/portfolio/NittanyResearch_capThumb.jpg" width="150" height="150" alt="Nittany Research - State College, PA" /></a></p>
			<p class="xsmall portmidc">Nittany Research - State College, PA</p>
			<p class="portcap portmidc">A Cyber-Marketing, Survey, Research and Consulting Firm. Nittany Research is owned by Dr. Marlene Burkhardt, professor of Information Technology at Juniata College, Huntington, PA. Dr Burkhardt brings her survey research background to Nittany Research, making the company a good resource for small to medium sized businesses seeking to heighten their customer satisfaction awareness.</p>

			
<h3 class="stickout2">web applications:</h3>

<p ><a href="http://www.dantesinc.com/mail_list.htm"><img src="images/portfolio/DantesMailCapThumb.jpg" width="150" height="143" alt="Dante's V.I.P. Mail Manager" />
</a></p>
			<p class="xsmall">Danet's Inc - State College, PA</p>
			<p class="portcap">Dante's Inc presents many fine resturants and night-life venues in State College and Central Pennsylvania. The mail list management application is designed to allow Dante's Inc visitors to subscribe or unsubscribe from their V.I.P. e-mail list. The automatic subscription function manages the e-mailing list, freeing the web site owners from the tedious task of manually adding or removing addresses from their V.I.P. list. <br />Note: Web Site design by <a href="http://www.carlschaad.com/" target="_blank">Schaad Design</a>.
			<p><!-- IMG HERE -->
			<br /> 
</div>

and the parts for the stylesheet which are directly relevant to this particular portion of the layout:

 
#port {
 	margin-left: 2em;
	margin-top: 2em;
 }

.portmid {
	float: right;
	width: 160px;
	position: relative;
	margin-top: -21em;
	padding-right: 50px;
}
 
.portmidc {
	width: 160px;
	position: relative;
	padding-right: 50px;
	margin-bottom: auto;
} 

 .portcap {
 	text-align: justify;
	width: 150px;
	font-size: 12px;
	font-family: helvetica, arial, sans-serif;
 }

<...snip...>

#leftcol{
	width: 20%;
	float: left;
	position: relative;
	background-color: #000;

}
 
#maincol{background-color: #000000;  
 float: right; 
 display:inline; 
 position: relative; 
 width:80%;

 }

subordinate to that problem above, is my "white-space" problem:

on #leftcol and #maincol, i tried {padding-bottom: 100%;}, which sort of worked to fill up the "empty space" between them and the footer, but it was not acceptable. i need a better fix. i know Tony listed a suggestion for this-- i'll have to look it up. right now, my main concern is to position the thumbnails and the text below them, the problem related to the code snippets here.

(kk5st, am i getting a little closer to a manageable inquiry?)

EDIT:
i missed a class called .portcap first time around, which is now added above.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The &quot;white-space&quot; fix, and float help

kk5st wrote:
There's just too much information. I just couldn't winnow the chaff to get to the problem. Try a rewrite.

I've found that the problem with most of your posts - just too much reading to get to the pertinent bit so I often just move along.
In the case of your layout, you need to put your image, heading & text into some sort of containing element, possibly even a list. So maybe something like:

<ul>
  <li>
  	<p><a href="http://www.clubrive.com" target="_blank"><img src="images/portfolio/RiveThumb.jpg" width="150" height="121" alt="Club Rive - San Antonio, TX" /></a></p>
	<p class="xsmall">Club Rive - San Antonio, TX</p>
  	<p class="portcap">A nightclub in downtown San Antonio. Within walking distance of the historical site of the Alamo, Club Rive is <em>the</em> hot-spot for San Antonio night-life entertainment.</p></li>
	<li>
		<p class="portmid"><a href="http://www.nittanyresearch.com"><img src="images/portfolio/NittanyResearch_capThumb.jpg" width="150" height="150" alt="Nittany Research - State College, PA" /></a></p>
		<p class="xsmall portmidc">Nittany Research - State College, PA</p>
		<p class="portcap portmidc">A Cyber-Marketing, Survey, Research and Consulting Firm. Nittany Research is owned by Dr. Marlene Burkhardt, professor of Information Technology at Juniata College, Huntington, PA. Dr Burkhardt brings her survey research background to Nittany Research, making the company a good resource for small to medium sized businesses seeking to heighten their customer satisfaction awareness.</p>
	</li>
</ul>

and then float your <li>s left.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

The &quot;white-space&quot; fix, and float help

Tyssen,

What were you thinking i'd do once i have them each as <li>'s? i understand the idea of putting them in a container, i think, but i'm not sure why you've chosen an <ul>?

Tyssen wrote:
kk5st wrote:
There's just too much information. I just couldn't winnow the chaff to get to the problem. Try a rewrite.

I've found that the problem with most of your posts - just too much reading to get to the pertinent bit so I often just move along.

thanks, guys... i appreciate the feedback. i'm really going to try to be more concise. it's a bad habit, i know. i do it everywhere... email, forums, etc. it's a very difficult thing for me to overcome.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

bump - a better idea

can you think of an example where i might be able to learn a better way to approach this? i figure it's a fairly common layout "problem"

something specific from the the Useful Links section maybe? or a tutorial somewhere?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The &quot;white-space&quot; fix, and float help

:? I'm not sure why you recommend a ul list for that group of elements Tyssen, if anything it looks more suited to a definition list dl; but I haven't looked at the rest of the code.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

The &quot;white-space&quot; fix, and float help

hmm... i don't think i've ever heard of a <dl>. i'll have to look into that.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The &quot;white-space&quot; fix, and float help

Hugo wrote:
:? I'm not sure why you recommend a ul list for that group of elements Tyssen, if anything it looks more suited to a definition list dl; but I haven't looked at the rest of the code.

Probably it is, but in a lot of cases, the difference between when to use a <ul> and <dl> seems to be fairly marginal.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The &quot;white-space&quot; fix, and float help

Well generally if you have some terms, names, title, which will have some form of description/definition then a dl would be best suited, it just allows that logical grouping of a title and associated description.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The &quot;white-space&quot; fix, and float help

But in this case, there's an image that comes first before any text and I'm not sure a <dt> tag is the best place for an image, as an image isn't really a definition term.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

The &quot;white-space&quot; fix, and float help

this is what i tried before-- i just realized that it is all messed up though, as it is dependent upon how wide the browser window is
(this is a test page, different than the URL above)
my point is that it gives you an idea of what i'm thinking. why is this approach such a bad idea vs using a container?
if you make your browser skinny, the text goes under there. (..slap..), okay, i smacked myself for you.

EDIT:
and why not just use <div>s as the containers? i realize that it seems as though most CSS designers avoid using <div>s for such purpose, but i'm not sure why-- unless it's more an etiquette or "grammar" thing

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The &quot;white-space&quot; fix, and float help

Tyssen wrote:
I'm not sure a <dt> tag is the best place for an image, as an image isn't really a definition term.

An image is an image. there is nothing wrong with using it in a dt, it is an allowed element. An image followed by some text would be perfectly ok, in general terms.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

The &quot;white-space&quot; fix, and float help

guys, this page is so messed up-- i should make those thumbnails a consistent size first of all. let's forget about it for now. what would help though is if you can think of somewhere i might read a more generally accepted / common way of handling a page like this. i'm just shooting in the dark at this point, and becoming frustrated w/ it and myself.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The &quot;white-space&quot; fix, and float help

Whether you use whichever lists or not, this is a basic setup;

 
.site { 
    border: 1px solid black; 
    margin: 10px; 
    overflow: hidden; 
    } 
 
.site img { 
    float: left; 
    } 
 
.site p { 
    margin-top: 0; 
    margin-left: 100px; 
    } 
========= 
<body> 
  <div class="site"> 
    <img src="some.jpg" 
         alt="" /> 
 
    <p>some site</p> 
  </div> 
 
  <div class="site"> 
    <img src="some.jpg" 
         alt="" /> 
 
    <p>some site</p> 
    <p>some site</p> 
    <p>some site</p> 
  </div> 
 
  <div class="site"> 
    <img src="some.jpg" 
         alt="" /> 
 
    <p>some site</p> 
  </div>
Give a little study to what's going on, and you can pretty well apply it as you wish.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 40 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

The &quot;white-space&quot; fix, and float help

thanks very much, gary. i really do appreciate it. i didn't see your entry-- having not visited back here since my last post-- i wanted to give it some time on my own... i tried a different approach. take a look here

i'm going to sleep now. i'll try what you've offered as soon as i am able to get back to this.

thanks again!

(by the way, i realize the application examples probably shouldn't be used... in a way, this is kind of like a place-holder/ reminder of the work i have ahead-- the "crowbar" example in particular-- i've been meaning to re-do that one in PHP and make it work right. long story-- issues which have since been resolved.. in the meantime, i had no feedback to mold the app for real use. that will change now)