/    Sign up×
Community /Pin to ProfileBookmark

Layout Mystery

Copy linkTweet thisAlerts:
Jun 04.2004

I did have the layout almost the way I wanted it. Then, I made a minor margin size change on the style sheet that logically should not have had the effect on the layout that it did.

[url]http://www.maps-gps-info.com/landingcss.html[/url]

Everything below the image caption is supposed to be on the right side of the block. I restored the style sheet to its original state but the result did not go back to the way I wanted it.

Any help solving this mystery would be appreciated.

[upl-file uuid=e780a48f-7c9b-441f-8be9-dfc10abb83fd size=2kB]myrrh060404.zip[/upl-file]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Daniel_TJun 04.2004 — You're going to have to put the image and the text in seperate divs, the float the image left, and the text right. Then, you will need to put the following at the bottom of each "block" div:
<hr style="clear: both; height: 0; width: 0; border: 0; margin: 0; padding: 0;" />
Copy linkTweet thisAlerts:
@myrrhauthorJun 05.2004 — Thank you, Daniel T. That got me closer to what I wanted.

http://www.maps-gps-info.com/landingcss.html

But now I have 4 questions (and I've been playing with this ever since you posted).

1) How can I get the caption below the image to be centered or left-aligned with the image?

2) How can I get "Click here to read the review" all on one line?

3) Is there a way to eliminate much of the empty space below the text?

4) What the #!$* is wrong with it that it looks totally screwy in Netscape?

Updated .zip file attached.

I know this is asking a lot - I'll buy you a case of beer or something.

[upl-file uuid=058b2d77-2bf8-4687-ba8c-93b2f0483f83 size=2kB]myrrh060404.zip[/upl-file]
Copy linkTweet thisAlerts:
@Daniel_TJun 05.2004 — 
  • 1. In your .imgcap class, put one of these:
    text-align: center;
    text-align: left;
    text-align: right;
    text-align: justify;

  • 2. Add this to your stylesheet:
    .block div.intro p {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    }

  • 3. Well, that could be a result of not entering margin or padding attributes correctly. Rather than putting a semicolon in between the four attributes, just leave a space. For example:
    [color=red]Your way:[/color] margin: 10px; 10px; 0px; 0px;

    [color=green]Correct way:[/color] margin: 10px 10px 0 0;

    [color=darkblue]Or, in this case, you could make it easier:[/color] margin: 10px 0;[/quote]

  • 4. It is a result of IE not getting its box model correct. In IE, padding is not included in the width of the object, but in real browsers like Netscape, it is (that is the correct way). I will look over your code and try to fina a way make it work with all browsers.
    [i]Originally posted by myrrh[/i]

    [b]I'll buy you a case of beer or something.[/b][/quote]
    Ooooh awesome!! And it'll age real nicely in the five years it'll take for me to be old enough to drink it! :p


    • [size=1](well, drink it [i]legally[/i], that is?)[/size]

    -Dan
    Copy linkTweet thisAlerts:
    @Aronya1Jun 05.2004 — [i]Originally posted by Daniel T [/i]

    [B]

    Ooooh awesome!! And it'll age real nicely in the five years it'll take for me to be old enough to drink it! :p



    [size=1](well, drink it [i]legally[/i], that is?)[/size]



    -Dan [/B]    [/QUOTE]
    Sometimes I just feel [b]so[/b] old...
    ×

    Success!

    Help @myrrh spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...