ACCAPTSO / TicTacToe.js

Because, why not?
1 stars 0 forks source link

Style sheets #2

Open derekalvarado opened 10 years ago

derekalvarado commented 10 years ago

Arg, stylesheets. I can't figure out how to center the XO class within its containing div.

josefvin commented 10 years ago

Where is the CSS file?

derekalvarado commented 10 years ago

Just pushed it. Sill learning Git branches...

josefvin commented 10 years ago

I'm not sure. I added text-align to the box div, but it doesn't work. Figured you probably tried that anyway. You can check my branch if you like, I have text centered using innerhtml on the box element on mouseover. Not quite the same as you have it but maybe it'll give you a clue. I need to practice my JS more.

eindrayaye commented 10 years ago

Hi I am not sure actually what you are trying to do because I did not pay attention this emails till now. I might be wrong but if you are trying to do to adjust the text in the box, please check my screen shot and see it helps! Have a good day.

Eindray

On Tue, Oct 14, 2014 at 8:48 AM, Josef Miller notifications@github.com wrote:

I'm not sure. I added text-align to the box div, but it doesn't work. Figured you probably tried that anyway. You can check my branch if you like, I have text centered using innerhtml on the box element on mouseover. Not quite the same as you have it but maybe it'll give you a clue. I need to practice my JS more.

— Reply to this email directly or view it on GitHub https://github.com/ACCAPTSO/TicTacToe.js/issues/2#issuecomment-59046672.

derekalvarado commented 10 years ago

I'm not seeing your screenshot, but basically there are nine divs with CSS class="box" which serve as the boxes of the TTT board. Currently, with JavaScript, you can click on any box and an X wrapped in h1 tags will be appended to the div that was clicked. I believe I gave the h1 a class="XO". With CSS, I've been trying to make sure that it's centered inside the containing div, but currently it's left-aligned.

eindrayaye commented 10 years ago

In style sheet changed : } .XO { /X's and O's: can't figure out how to center it/ display: block; margin-top: 40; <---------------- float: none; vertical-align:middle; }

and ADD

h1{ text-align: center; }

in HTML page, I changed this way

Tic Tac Toe!

<---Added Table cells On Tue, Oct 14, 2014 at 11:55 AM, derekalvarado notifications@github.com wrote: > I'm not seeing your screenshot, but basically there are nine divs with CSS > class="box" which serve as the boxes of the TTT board. Currently, with > JavaScript, you can click on any box and an X wrapped in h1 tags will be > appended to the div that was clicked. I believe I gave the h1 a class="XO". > With CSS, I've been trying to make sure that it's centered inside the > containing div, but currently it's left-aligned. > > — > Reply to this email directly or view it on GitHub > https://github.com/ACCAPTSO/TicTacToe.js/issues/2#issuecomment-59078609.
eindrayaye commented 10 years ago

It works that way?

On Tue, Oct 14, 2014 at 11:58 AM, Eindray Aye eindray.aye@g.austincc.edu wrote:

In style sheet changed : } .XO { /X's and O's: can't figure out how to center it/ display: block; margin-top: 40; <---------------- float: none; vertical-align:middle; }

and ADD

h1{ text-align: center; }

in HTML page, I changed this way

Tic Tac Toe!

<---Added Table cells On Tue, Oct 14, 2014 at 11:55 AM, derekalvarado notifications@github.com wrote: > I'm not seeing your screenshot, but basically there are nine divs with > CSS class="box" which serve as the boxes of the TTT board. Currently, with > JavaScript, you can click on any box and an X wrapped in h1 tags will be > appended to the div that was clicked. I believe I gave the h1 a class="XO". > With CSS, I've been trying to make sure that it's centered inside the > containing div, but currently it's left-aligned. > > — > Reply to this email directly or view it on GitHub > https://github.com/ACCAPTSO/TicTacToe.js/issues/2#issuecomment-59078609 > .
derekalvarado commented 10 years ago

Josef: Your "split-files" branch takes care of the formatting, but add some mouseOver mouseOut functions. Were those for testing or do they have some gameplay functionality?

-Derek

josefvin commented 10 years ago

I made a new commit; you can now click on the upper left box and it marks it with an X. For some reason though, even though I only changed one line from onmouseover to onclick, the boxes are no longer aligned correctly. Basically yes, the branch is for testing in the sense that I don't know what I'm doing really, with web stuff, and I don't want to get in the way of the project. I think in a few weeks time I can get back to speed with it but I had a pretty busy weekend and haven't been able to. The mouseover functionality is not necessary at all, just a graphical representation to let you know which box you are mousing over.

Maybe one of you can look at my branch and tell me why it's broken. Sorry I can't be of more help at the moment!

[UPDATE] Never mind, I had a missing > tag on the clickable div. It works as intended now. The clicking feature anyway. I updated all the boxes to do that.