Need help with alignment issues

HTML & CSS
1

Hi all, finally getting my template finished up. Considering my newness to css instead of just plain o html I guess I am getting along just fine.

Anyway I have 3 alignment issues to address and one other unrelated error, I have spent much time and effort researching this to try to figure it out on my own as I like to get to the solution by myself if at all possible but these have me stumped. (10 days experience you know).

Since I can not post pictures here yet I have screen shots of all of the issues posted in the parent folder of the test site. The only image I don’t have is the one for video but can change page settings again and create one if needed.

(edit)
Sorry but I forgot the link to the site:
Here it is.

Lets start with responsive Video.
On my template I have the html5 video tag. I wish to have a boarder/background around the tag to make it stand out a little like a tv frame. I also need it to resize with the view port. Currently it will work this way and looks fine but the W3C does not like what I have done, it throws this error at me. (I took the chevrons <> out because not sure to to leave the in and the text still show here).

Line 217, Column 65: Bad value 100% for attribute width on element video: Expected a digit but saw % instead.

div class=“video” video width=“100%” height=“auto” controls

Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.

Error Line 217, Column 65: Bad value auto for attribute height on element video: Expected a digit but saw a instead.

div class=“video” video width=“100%” height=“auto” controls

Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.

Now I tried to make my html5 video responsive. So far the only way was to put the width of 100% in the inline video tag. The WC3 wants a firm pixel size there instead. If I do that the video breaks out of the container. Also depending on the other settings I loose my styling for boarders. Anyone know how to fix this issue?

My next issue revolves around the blue and red boxes on my template. Basically they are just divs or paragraphs (one of each for the template) with background different from the main container and set to only 200px wide. I have a couple of issues with them. The first issue is getting edges correct. When the screen is large there is not a noticeable difference. between div and the left margin, however when squeezed by a small view port the space between the div and container edge becomes smaller than any other element on the page. I have tried different boarder, padding and margins but can not figure out the solution to that one.

Also I know that you can float the divs but what I would like to know is how the heck can I center either the div or p when it is only a small portion of the container and force it to the to the center and still keep the text in block form? I may want to have a small box across the top of one of my pages with a different background and this was how I was going to do it, or even just float some text if I keep it on the side.

One last alignment issue, also on the page you will see two black images floated with text around them. They do use responsive images as well. These images do maintain proper margins until I put a boarder around them. Then then when the view port is squeezed tight the margin/padding on the opposite the float side gets buggered up if the image floats all the way to the other edge. Again tested different margins and borders and nothing worked. Any way to fix this other than not adding a border?

The last issue is an error from W3C that is based on a sample I from a tutorial. I am not sure if they are using clearfix correctly or if it is just an error that W3C tosses out because of it supposedly being a hack. The code is only for one page of the site which will be to hold a few pictures for the users that have JavaScript turned off, I have a no JavaScript redirect for them to the effected page.

This is the code I used:
.clearfix:before, .clearfix:after { content: “”; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

and

This is the error from W3C:
Line 33 .clearfix Parse Error *zoom: 1;
Line 33 .clearfix Parse Error }

Any solutions to these hopefully minor issues would be much appreciated so I can get on with actually adding content and getting something live.

Thanks

2

It’s better just to put that in your CSS. E.g.

video {width: 100%;}

The width attribute is basically outdated, except on images, but it doesn’t take a value, I believe, just assuming px units.

I can’t quite work out what you mean there.

Again, I can’t quite work out what you mean.

This is a hack for old browsers, so personally I wouldn’t bother with it any more. Still, it’s fine to use. It’s non-standard CSS that gets the desired result, so that’s why the validator has a fit. Just ignore it in this case. :slight_smile:

3

Thanks @ralphm I will try the video and repost the other questions with an annotated picture with a link. I am not sure how to post code here without it dissappearing.

@TechnoBear edited one of my posts to make the code show.

If I understand correctly the clear fix won’t hurt anything leaving it in? CSS Lint does not complain about it?

The page is really only aimed at users with java turned off anyway just so they don’t get a blank page. I needed java for my gallery. Will track the page and if it does not get accessed enough or at all I will change it with even less content.

Thanks.

4

You are correct.

Javascript***. There is a HUGE difference between Java, and Javascript : - ) .

5

Ya know, I always shorten the name of Javascript, I don’t know why because I have never done anything with Java other than one computer application I use to use and for my online stocktrading platform.

I will probably be corrected on that term many times in the future and maybe one of these days it will sink in.

Will be back to rewrite the questions here after helping a friend get a new battery in tbeir car. Had to be jump started to get home.

So probably 60 to 90 minutes. Going to the big W.

6

Yeah, it’s a pain to type out, but JS is the standard abbreviation. :slight_smile:

1 Like
7

Okay then per your message I have a better way to show the issues at hand.
My little run took longer than I thought.

This first image shows the color box divs and paragraph that I am needing help with.

This image shows the floated images that I need help with.

To see the css and html pages they can be seen here.
http://www.quailrunrv.com/html5layout/

Wow I just learned something. I did not know simply putting a link to an image would actually show the image in the post. I had been looking for an insert image the entire time.

Thanks

8

Do you by any chance have a fixed width assigned to the red and blue boxes, say, around 200px maybe?

9

I do.

10

And you know that the width of that column cannot exceed the width of the box plus its border, plus any padding or margin lest the red box will shift to the right. Right?

If you want a sneaky fix, change width:200px to max-width:200px. That will allow it to collapse a few pixels so you can have your border.

11

Thank You,
Is this fix just for both boxes or just the red one?
This is the css that applys to both just that one is a paragraph and the other is a div.

.bluebox {
background-color: #5c759f;
color: #ffffff;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 6px;
padding-left: 6px;
margin-top: 0px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
width: 200px;

}

12

The fixed width is causing the grief because there isn’t enough room in the column for 200px plus the border width that you’ve chosen plus margins, etc. Somethin’s gotta give, so we are allowing whatever has the 200px fixed width to become a little narrower by changing it to a compressible width… max-width:200px;

13

Okay then, I will try it on both and see how it goes.

Can either of these be centered or do then need a parent div to center them in and remain blocked text? I am on the way to test other fix now.

14

Well that was simple or as the commercial says easy. Now if they can be centered and something can be done for the same issue on the floated images but they are already flexible.

15

You appear to have 5px horizontal margins in those boxes, yes? Instead of changing the width to max-width, how about changing the horizontal margins to auto? That will center the boxes.

.bluebox {
    background-color: #5c759f;
    color: #ffffff;
    margin: 0 auto 5px;
    width: 200px;
    padding: 1px 6px;
}
.redbox {
    background-color: #982a3a;
    color: #ffffff;
    margin: 0 auto 5px;
    width: 200px;
    padding: 1px 6px;
}
16

Okay, I will create another class just for that for other boxes. These particular boxes I wanted on the left but can create another class with the new settings and apply that class to the boxes I want centered.

Thank You.

17

Perfect. Made a new class for the centered boxes. Now except for the floated images my template is ready to use.

You know everyone here is just great with helping with these little fixes. Hopefully some day I will be efficient in this but not sure I can dedicate the time needed to learn it all. I have a couple of books in a shopping cart to purchase that should help in the future.

18

Do you have (or can you set up) a working example of a floating image with border? How do you want it to behave?

19

Hi a border is not a big issue only a wish. The main thing is if you look at the live image with the current settings on the template what happens is similer to what was happening with the other boxes. Basically if you have an image floating to the right and then shrink the page down to a small view port all of the text will flow down as needed and when it hits the left side of the page the margin is wrong again.

I also believe the live version has the left floated image without the image actually there but the alt text in the border. Which is why I like the border because the alt text will show in the boarder if the image is missing.

Anyway here is the live version, if you give me a moment I will upload the css with your corrections on it so you can see the results of your help. Will take me about a minute or so.
http://www.quailrunrv.com/html5layout/templateqr2015.html

20

You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.