Space Pirate
Join Date: May 2004
Location: Atlanta
|
[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? Last edited by drewprops : 2004-12-24 at 02:38. |
quote |
http://ga.rgoyle.com
Join Date: May 2004
Location: In your dock hiding behind your finder icon!
|
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 |
Rest In Peace
Join Date: May 2004
Location: Atlanta
|
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 |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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....
|
quote |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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; } |
quote |
Veteran Member
|
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 |
Selfish Heathen
Join Date: May 2004
Location: Zone of Pain
|
Quote:
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 |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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!). |
quote |
Selfish Heathen
Join Date: May 2004
Location: Zone of Pain
|
Quote:
Quote:
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 |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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~ |
quote |
Posting Rules | Navigation |
|
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 |