Need guidance - aligning images & text

I need some guidance on how to build the main content of the next pages I will build from this site : http://pages.videotron.com/dragon64/

I know, I know, I still have many validating errors to fix before I move any further.

Once I fix all those, I need help for the part where there’s :
((text)) ((wide wide image))
((text)) ((image)) ((image))
((image)) ((image))

I attached a picture to help you guys understand what I mean.

The easy way would be to put all that in a table … but I assume I should shy away from that, eh?

I would have no trouble (I think) using a float:right for the first picture but where I’m not sure is the second line where I would have no text on the left and 2 pictures side by side.

The other option would be to merge the 2 pics in photoshop (or the whole bunch of them) but the gap between them wouldn’t match the background color.

And finally, I assume I would put the whole thing in a ‘div’ container?

BTW, when will all browsers all behave the same *sigh … ?

The easy way would be to put all that in a table … but I assume I should shy away from that, eh?

No, the easy way would be to set up two columns within that main column.
Column on the left for text and a wider column on the right for the images.

And finally, I assume I would put the whole thing in a ‘div’ container?

Yes, that’s the wide right column I mentioned above. I would make it about the same width as your wide images.

No need to merge the smaller images, just set a class on them and float the left and right.

Oh dear, that was easy. Why didn’t I think of that?! Can’t say that I caught the Div-it-iss (sp?) syndrome yet.

Thanks for the advice, I can sleep now :slight_smile:

Still work in progress (and I haven’t completely fixed the WWC3 errors) and as I progress, it seems that I’m breaking this site as I add content and pages. I know I should look at those errors before I go any further but the ‘client’ is supposed to approve tomorrow and I needed to move forward a bit more.

Where I’m stumped is, the graphic artist that I’m working with uses the evil evil IE (not sure which version) and she says that if the vertical scroll bar isn’t there (i.e. less content), the whole site jumps a 1/4’’ to the right (when jumping from a long page to a short page).

I may need to re-create a smaller content page for you to see it in action but perhaps you already know what creates this?

http://pages.videotron.com/dragon64/index.html

http://pages.videotron.com/dragon64/triumph.html

Style sheet is here if you need it
http://pages.videotron.com/dragon64/styledva.css

Can’t wait to have more free time to finish Russ Weakley’s courses to clean up my code :slight_smile:

she says that if the vertical scroll bar isn’t there (i.e. less content), the whole site jumps a 1/4’’ to the right (when jumping from a long page to a short page).
She’s probably using IE8 then since 6/7 have the scrollbar position in place at all times.

It’s normal behavior for the page to recenter itself when a scrollbar is introduced.

If you want to stop the jumping you can use overflow-y:scroll on the html element


html {
    overflow-y:scroll; /*keep scrollbar position present at all times*/
}

:shifty:

Oh dear, thanks so much! You guys are gods, I swear.

I broke it again :frowning:

On the same line, I’m trying to position the ‘English’ link (contained in a p tag) on the right and the h2 title on the left.

I managed to do this with position:relative

All went well but now, I have a huge gap between that and the top nav. What is going on here? I ‘think’ I understand the position:relative effect but there has to be something I’m not getting.

Link to see the gap http://pages.videotron.com/dragon64/

Link to see how the graphic artist wants it (the English link is under the nav bar and I don’t like it there!)
http://dejavuautos.com/

Thank you for helping my newbish-nesses.

P.S. the post title is no longer relevant, should I start a new thread when I encounter new things?

I managed to do this with position:relative

All went well but now, I have a huge gap between that and the top nav. What is going on here?

Hi,
When you use relative positioning it only moves the element visually, it still occupies it’s original position in the page flow. That gap you are seeing is the element still sitting there physically.

You will be better off using a float:right; for that link. You will need to bring the float before the h2 in the markup in order for it to sit on the same line in all browsers.

After you float that <p> tag right you can fine tune its’ position with margins.

Oh, now I get the concept of relative positioning. Why would one want to use that? I sure will try to stay clear of that one :slight_smile:

Thanks again!

Ok, now I have yet another page layout and I’m struggling with the floats for this new page.

*must stay away from tables

I build the previous page http://pages.videotron.com/dragon64/triumph.html as per Rayzur’s suggestion but everything breaks down when I try put the content of this new layout

So, for this new layout (attached) I was going to try an unordered list? My hurdles are the texts under the pictures in the right section and those lines that divide each car brand.

Help!

PS Is it better to wrap images in a paragraph?

but everything breaks down when I try put the content of this new layout

My hurdles are the texts under the pictures in the right section and those lines that divide each car
Hi,
I haven’t seen the image yet as it is still pending approval. Regardless, you should not expect the image format on the other page to work the same for the new page. There was no text (captions) under the images on the page you just linked to.

So, for this new layout (attached) I was going to try an unordered list?
Yes, if you need image captions then a UL would be a good choice. The UL gives you a <li> by default to nest the images in. You can also force the text to drop below the image with a <br> tag or by nesting the text in a <span> or a <p>. If you set a width on the <li> you can then set. The <p> is a block by default so it would fill the width of the <li>. If you used a span you could set display:block on it.

Now depending on whether or not the image and text needs to nest in an anchor will determine whether you use a <span>. Anchors are inline elements and you cannot nest a <p> tag in it.

View the page source on this Image Caption to see how the html is set up.

PS Is it better to wrap images in a paragraph?
Whether it is a <p> or a <div> it doesn’t really matter. I tend to use a <p> tag myself since I see an image as a means to convey a message.

The reason for doing this though is so your inline element (image) is wrapped in a block. It can cause problems if you have an inline element adjoining another block. What you don’t have to do is nest every sibling image in a block of it’s own. I noticed you wrapped every image in it’s own <p> tag in your link above. Only one <p> was really needed, even then it would only be needed if you had more block elements following those images in that right column. If not, the block level parent <div id=“carsectionright”> would be enough. It just depends on what may happen… It would also be a good idea to contain those floated images by setting overflow:hidden; on the <p>

        <div id="carsectionright">
            [COLOR=Blue]<p>[/COLOR]
                <img src="images/Triumph_TR6_1973_6.png" alt="TR6" width="391" height="157" class="left" />
                <img src="images/Triumph_TR6_1973_2_face.png" alt="TR6" width="186" height="105" class="left" />
                <img src="images/Triumph_TR6_1973_7.png" alt="TR6" width="186" height="105" class="right" />
                <img src="images/Triumph_TR6_1973_10_porte.png" alt="TR6" width="186" height="105" class="left" />
                <img src="images/Triumph_TR6_1973_11_volant.png" alt="TR6" width="186" height="105" class="right" />
                <img src="images/Triumph_TR6_1973_18_sieges.png" alt="TR6" width="186" height="105" class="left" />
                <img src="images/Triumph_TR6_1973_13_sieges-2.png" alt="TR6" width="186" height="105" class="right" />
                <img src="images/Triumph_TR6_1973_17.png" alt="TR6" width="391" height="187" class="left" />
            [COLOR=Blue]</p>[/COLOR]
        </div>

I also cleaned up that bread crumb nav a little bit. You had your double bottom border on the <li>s and then you used a negative margin to make it look like one border. You could have just floated the UL left and would shrinkwrap to the content width. Then you can just set the bottom border on the UL instead.

By doing that you can set a right padding on the li and eliminate the excessive no-break space characters.


        <ul id="smallsub">
            <li>NOS AUTOS CLASSIQUES [COLOR=Blue]&nbsp;&raquo;[/COLOR]</li>
            <li>PAR MARQUE D'AUTOMOBILE [COLOR=Blue]&nbsp;&raquo;[/COLOR]</li>
            <li id="green">TRIUMPH TR6</li>
        </ul>
/* Small sub */
[B]ul#smallsub[/B] {
    [COLOR=Blue]float:left;[/COLOR]
    [COLOR=Blue]display:inline;/*ie6*/[/COLOR]
    list-style: none;
    padding: 0;
    margin: 0 0 0 27px;
    [COLOR=Blue]border-bottom: double #666666;[/COLOR]
}
[B]#smallsub li[/B] {
    [COLOR=Blue]display:inline;[/COLOR]
   [COLOR=Blue] padding: 0 .25em 3px 0;[/COLOR]
    font-size: 0.8em;
}
ul#smallsub li#green {
    color: #33CC33;
}

Oh wow, thanks Rayzur, awesome explanations there. I never thought of putting a whole bunch of images inside a single ‘p’, now I know and I’ll abuse it!

Gonna work on that new page and report back with the results :slight_smile:

I fixed my mess, thanks :slight_smile:

I am so going around in circles with this new page …

Perhaps the image I uploaded is too big, I re-uploaded a part of it only, maybe it will be approved faster.

The reason I’m struggling with this stupid part is that the ‘‘right’’ section has a different width than the left one. And those stupid lines across the ‘right’ and ‘left’ sections are throwing me off.

I keep looking at that page you linked, my design, copy/paste your stuff, work with the sizes and nothing is making any sense anymore. So, time to take a break and wait for that image to be approved.

Coffee sounds good at this point. And thank you so much for helping me out, I’ll be forever grateful.

I keep looking at that page you linked, my design, copy/paste your stuff, work with the sizes and nothing is making any sense anymore. So, time to take a break and wait for that image to be approved.

So is that screenshot you just posted what you currently have or is that what you are aiming for?

That image I posted is what I need to code. The graphic artist sends me a PDF and I go from there to code it.

Next time, I’ll ask for all the layouts before I start anything. Lesson learned.

To recap, the lines that divide each of the car brands is one of my hurdles.

My thoughts :
<div id=“carsection_brands”>
<ul>
<li id=“xxx_width”>image+text floating left<li/>
<li id=“yyy_width”>image+text ((I’m stumped))<li/>
<li id=“yyy_width”>image+text floating right<li/>
<ul>

</div>

a) Do I really need a ‘div’? I don’t believe I do
b) Where would I put the lines that divide the car brands
c) Looking at your Inline-Block Image captions again and I see that all the blocks have the same width.

Help, I’m stuck and still confused.

To recap, the lines that divide each of the car brands is one of my hurdles.
That could just be a bottom border on the UL

a) Do I really need a ‘div’? I don’t believe I do
b) Where would I put the lines that divide the car brands
c) Looking at your Inline-Block Image captions again and I see that all the blocks have the same width.

a) No, you don’t need a div. Just style separate ULs with three LIs in them.

b) On the bottom of the UL (border)

c) I’m see three elements (list items) that ARE the same width. The first one just has a smaller image. You can just nest a <p> tag in the LI after the html image and it should drop below since it is a block. I suggested the inline-block before I had seen your image, there is no need for that now. Just set widths on the LI and float them left. You will need to set overflow:hidden; on the UL so it contains the floats, then the bottom border will appear at the end.

Rinse and repeat for each row, use a class on the UL so it can be used multiple times.

Ha! So so simple :confused:

They’re not quite the same in the messed up HTML version I’m trying to achieve but they’ll finish equal, trust me. One hurdle behind.

I like the rinse and repeat part the most.

Again, thank you for holding my hand. This should be the last ‘template’, then I’ll be good to go!

I’ll report back with my homework and show you how it went.

I think I did good.

http://pages.videotron.com/dragon64/marques.html

The only thing I can’t figure how to fix is that the text (paragraph’s) are not aligned on the left side, there’s some sort of indent there which I have no clue where it comes from.

Can you help me there?

And tomorrow will be cleaning up of my files.

Thanks again.

Hi,

You have globally supplied every p element with a margin here:


h1,h2,h3,[B]p{margin:0 .5em .5em; }[/B]
h1{padding-top:.3em; margin-bottom:.15em; font-size:2.6em;}
h2{font-size:2em;}
h3{font-size:1.5em;}
[B]p {margin-bottom: .5em;}[/B]


Just over-ride it here :slight_smile:


ul#carbrand p {
  [B]margin: 0[/B];
  padding: 0 15px 0 0;
  text-align: justify;
}

O.o So so simple … Wasn’t enough to style it in the

ul

… now I know.

Thanks a bunch. I really don’t know what I would do without this site and the kind people that hang around here.