Css html size problem and table need some adjustments

Hello, i just started HTML and i need some help, its probobly easy to fix i just dont know how yet…

1st http://prntscr.com/dg2m0b some how i need to remove that yellow color i need to stretch table somehow… i tried removing border did not help
2nd when i change my screen rez there is some problem, it changes size http://prntscr.com/dg2nra http://prntscr.com/dg2pu1 i tryed changing width and height to auto it kinda helps but it dont… http://prntscr.com/dg2opw when i try to change rez http://prntscr.com/dg2p3b
3rd i need to fix text size http://prntscr.com/dg2qdv http://prntscr.com/dg2r3j so it will be same no matter what

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">

<title>Kompiuterių komponentai!</title>

<meta charset="utf-8">

<div align="center">
<table width="100%"  border="1" cellspacing="0" cellpadding="0"> 


<td class="i" valign="middle" align="center" ><a href="#index.html" > <img src="http://i.imgur.com/RJ7xScQ.png" width="100%" height="100%" >     
	<h2><span>Graphic card</span></h2>

<td class="i" valign="middle" align="center" ><a href="#index.html" > <img  src="http://i.imgur.com/NDk56lE.png" width="100%" height="100%">
	<h2><span>Mother board</span></h2>

<td class="i" valign="middle" align="center" ><a href="#index.html" > <img  src="http://i.imgur.com/WIXxYSK.png" width="100%" height="100%">
	<h2><span>Power supply</span></h2>

<td class="i" valign="middle" align="center" ><a href="#index.html" > <img  src="http://i.imgur.com/EmpYwIx.png" width="100%" height="100%">



html { 
  background: url(http://i.imgur.com/pD6FoXj.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
img {
    opacity: 0.1;
    filter: alpha(opacity=80); /* For IE8 and earlier */

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
td.i {
  position: relative;
  height: 100vh;
  overflow: hidden;

h2 { 
   position: absolute; 
   top: 50%; 
   left: 0; 
   width: 100%;

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 

I would really appreciate any help

Where did you start learning this from? Some of the coding is very dated, you are using lots of “presentational” attributes in the html which are now obsolete and should be replaced by css.
Try putting the code in to the validator to see what I mean.
Also using tables as a layout tool is not the way it is done these days. Tables should only be used for displaying tabular data.

To be honest, this needs a re-write. but the good news is, it is not very content heavy and a design like this should be easily achievable using either flexbox or css tables if you need legacy browser support.

school they try to teach us as easy as possible

OK, well their methods a quite dated and these methods don’t make it any easier in the modern world responsive design.
Let’s see if we can come up with something better than this.

Just for a start, that one is easy, it’s the default margin on the body, reset it with body { margin: 0; }

To make it work well on re-size will require a code re-write.

I dont mind to learn something new :slight_smile: i already checked flexbox, and i will try recreate my school project in more modern way when i will be done with that old school technology

Thank you!

because i wanna learn this by myself can you provide tutorial?

I don’t have a tutorial to hand, but this is a really good reference for flexbox which I found very useful for learing it.

I tried making you page with flexbox, the layout works, but one thing I don’t have working yet is the hover effect.

Well that was fast. hover http://prntscr.com/dg7nrh

That did not work.

I did another version, I thought I had forked it, but did not, so that one is overwritten. :disappointed:
This time the images are images again (not backgrounds) so the hover works. But now I’m having trouble making them ‘cover’ the element.

either way that look more professional than mine, Thank You! now i just need to create other htmls and and think about design and layout
cookie for you :cookie:

1 Like

I had another go at this again, I was busy before.

It was a bit harder to do than I thought it would be. Getting the responsive layout was easy enough with flexbox. The difficulty I had was getting the hover effect to work while at the same time having the images cover the sections.
With the actual images, in the pen earlier, I tried to use object-fit: cover but that is quite finiky to get working and does not have great browser support anyway.
I reverted to what I tried first, removing the actual images and having them as backgrounds, which is probably more correct and background-size: cover works much better than the object-fit equivalent. But the trouble with background images is you cannot alter their opacity.
The workaround was to put the background on a pseudo element, then alter the opacity of that whole element. The problem I had initially with that was combining the :hover pseudo class with the pseudo element in the selector. With a little restructuring I got around that by separating the pseudo class and element to different elements in the selector.

.wrapper li:focus a::after,
.wrapper li:hover a::after {
  opacity: 1;

Note I paired it with a focus for keyboard navigation.

If you are a student learning this, you will need to study it and try to figure out how it works. Admittedly, some of it is a little advanced for a beginner, so you may have questions. (I should add more comments to code).

Another thing I think you may learn from is something I mentioned earlier.

Have a go at validating your original code and see what you were doing wrong.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.