User Name
Password
AppleNova Forums » Genius Bar »

CSS positioning question (w/ diagram)


Register Members List Calendar Search FAQ Posting Guidelines
CSS positioning question (w/ diagram)
Thread Tools
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2004-12-24, 02:28

[center][/center]

Hate to bug you CSS'ers, but I'm trying to learn how to style some text as illustrated above. Note that the red rectangle around each line of text represents a potential encompassing DIV, not a rendered element.

What I especially can't seem to figure out is how to make the "leading" element on the line (cited as "A" in my illustration) to be a fixed-width block-like element. When I style "A" with display:block it effectively shoves the following text onto the next line below.

Even if a leading topic's title is really short, like "Cat" I want the block to ALWAYS be 80px wide... that way they all line up on the page and look orderly instead of dynamically scaling to fit the words.

Any ideas?

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter

Last edited by drewprops : 2004-12-24 at 02:38.
  quote
Gargoyle
http://ga.rgoyle.com
 
Join Date: May 2004
Location: In your dock hiding behind your finder icon!
 
2004-12-24, 03:21

Here you go... Linky

Its much easier to give an example than to explain, but basically you want to "float" your title (the left bit) and the main content to the left and set the width of the title element to 80px. Then float the date to the right. Finally, use a <br> with style clear: both;

The 3 sections on that page use the same HTML code. But the style is only applied to the top 2.
Edit: I changed the order of the second and 3rd, so you can see how to easily change the layout without changing the code, just the styles.

Note: If you change the text sizes of the sections, you will have to play with margins and padding to keep them inline.

OK, I have given up keeping this sig up to date. Lets just say I'm the guy that installs every latest version as soon as its available!

Last edited by Gargoyle : 2004-12-24 at 03:48.
  quote
LoCash
Rest In Peace
 
Join Date: May 2004
Location: Atlanta
 
2004-12-24, 19:39

I haven't read this whole thing, but when you're talking about floating elements, you'll do yourself well to go find a Windows box with IE and look at your final product to make sure.

It is with great regret that we say our farewells to Jack, who passed away on May 28th, 2005. Jack, you will be missed by all

Superior thinking has always overwhelmed superior force. - Marine Corps Officers

"You don't lead by hitting people over the head-that's assault, not leadership." - General Eisenhower
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2004-12-24, 19:46

First off, many thanks to Gargoyle for helping me to see a way to skin this cat; I'll probably spend as much of my quiet time during the Christmas holidays understanding this. Secondly, I went and bought the QuickStart book for DHTML/CSS and will work between that and Eric Meyer's book. Thirdly, I've been considering getting a cheap PC to see how badly it renders what I'm doing. Fourthly, for awhile there was a guy who had a website that would give you an image of how your page/site rendered under other browsers/platforms. His server was slammed and I never got to test it....

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2005-01-01, 22:39

Okay, I've got a new CSS question (new facet of my experimentation) and I don't want to clog up the Genius Bar with multiple threads...hope you guys have time to look at this one...

I'm trying to position some paragraphs together and tighten the space between them because two are styled as display:block and have line breaks in front and behind them due to that styling.

Now, I understand how to reduce the spacing by reducing the margins to zero (margin:0px), but there's a catch: I've created styles that are specific to hover states. For some reason this isn't working.

ALL I WANT to do is to tighten the spacing between these three paragraphs AND understand why it doesn't work with my current CSS styles as it does when I use simple, non-link-specific styles. Thanks!

Here's a link to an example of my experiment:

http://homepage.mac.com/drewprops/ap...blocks_001.htm

Here's the relevant CSS (inline in the HTML doc as well):

#index p.p1 a {
border: 1px solid #cccccc;
padding: 2px;
text-decoration: none;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
color: #000000;
display: block;
text-decoration: none;
}

#index p.p1 a:hover {
border: 1px solid #cccccc;
padding: 2px;
text-decoration: none;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
color: #000000;
display: block;
text-decoration: none;
background: #ccccff;
}

#index p.p2 {
font-family: "Times New Roman", Times, serif;
margin: 0;
}

#index p.p3 a {
width: 100px;
font-size: xx-small;
background-color: #e8e8e8;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #000000;
padding: 2px;
margin: 0px;
display: block;
}

#index p.p3 a:hover {
width: 100px;
font-size: xx-small;
background-color: #ccccff;
text-align: center;
text-transform: uppercase;
color: #003399;
display: block;
}

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
MCQ
Veteran Member
 
Join Date: May 2004
Location: NY
Send a message via MSN to MCQ  
2005-01-01, 23:16

Kind of odd. Don't work with CSS much so I don't know if it's a render bug or what. You could set some margins to negative values to get closer spacing, though I don't know if that's a normally accepted way of doing things
  quote
Brad
Selfish Heathen
 
Join Date: May 2004
Location: Zone of Pain
 
2005-01-01, 23:51

Quote:
Originally Posted by drewprops
I'm trying to position some paragraphs together and tighten the space between them...
I'm not sure if I followed all of your babbling but is this what you're looking for?

Alternatively, this.

You're getting that spacing because your first and third paragraphs' classes don't have the margin set to 0. Remember, <p>'s have a default margin above and beneath them.

The quality of this board depends on the quality of the posts. The only way to guarantee thoughtful, informative discussion is to write thoughtful, informative posts. AppleNova is not a real-time chat forum. You have time to compose messages and edit them before and after posting.
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2005-01-02, 00:53

I followed your first example, going to go look at the second one now.

I think that the crucial thing to understand is that YES, I did specify zero margins for the a and a:hover states for two of the paragraph styles , but the basic, fundamental state of those paragraphs were not specified as having any values so they defaulted to their normal behavior. Is that right?

Anyway, it's working splendidly and I'm hoping to remember this basic principal.

You guys will get the first look at my new site when I'm done (don't bother looking on the old site). One of the things I want to do is to get people to write their own "skins" for my site. That's what will keep the site fun for me as I settle into simply using it.

PHP is the BOMB by the way. I am having a blast working on this thing (in between hair-pulling sessions of CSS lessons!).

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
Brad
Selfish Heathen
 
Join Date: May 2004
Location: Zone of Pain
 
2005-01-02, 00:57

Quote:
Originally Posted by drewprops
I think that the crucial thing to understand is that YES, I did specify zero margins for the a and a:hover states for two of the paragraph styles , but the basic, fundamental state of those paragraphs were not specified as having any values so they defaulted to their normal behavior. Is that right?
Bingo! It doesn't matter what the <a>'s classes are because <a>s don't have any margins by default anyway. The <p>'s are what have the margin. So, by not setting the <p>s' classes correctly, they followed the default behavior of having a margin.

Quote:
PHP is the BOMB by the way. I am having a blast working on this thing (in between hair-pulling sessions of CSS lessons!).
Yes, PHP rocks. CSS rocks too once you understand how things work.

The quality of this board depends on the quality of the posts. The only way to guarantee thoughtful, informative discussion is to write thoughtful, informative posts. AppleNova is not a real-time chat forum. You have time to compose messages and edit them before and after posting.
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2005-01-02, 09:40

Thanks Brad!
It's a mind-bender learning how to write elegant code that truly cascades. Coupled with writing CSS that hijacks the CMS services of Movable Type it's a mind-squisher.

I know that I'll have one more important question to ask about the styling of my navigation menu but I want to wait until the site is ready for early visitors... which will probably be a couple more WEEKS with the schedule I'm on~

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
Posting Rules Navigation
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

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
Dumb PowerBook hard drive question... psmith2.0 Genius Bar 12 2004-11-16 10:54
video capture question Mac+ Genius Bar 11 2004-10-03 21:19
View New Post Positioning _Ω_ Feedback 3 2004-08-28 00:14
airport express, digital out question. piwozniak Apple Products 6 2004-07-15 09:59
Airport configuration question art jrk Genius Bar 6 2004-07-10 21:55


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 02:39.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova