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