I'm making a Mastermind game using html/js and I've almost got my goal layout, except for points A and B, see image below:
http://jsfiddle.net/5Saxg/
A: What is the best way to layout the hintpegs as goal layout, so they are shown on two rows instead of on one line? I mean, so they are shown like in the goal layout. I've tried using a in the html, so like this
<div class="hintcontainer">
<div class="hintpeg"></div>
<div class="hintpeg"></div><br/>
<div class="hintpeg"></div>
<div class="hintpeg"></div>
</div>
But then it jumps down too much. Also when there are 3 or 5 hintpegs, what's the best way to make it "jump in" a little? So it's more like a honeycomb pattern instead of a grid. I've tried using SPAN element:
<div class="hintcontainer">
<div class="hintpeg"></div>
<div class="hintpeg"></div><br />
<span style="margin-left: 10px;"><div class="hintpeg"></div></span>
<div class="hintpeg"></div>
</div>
But this doesn't work and besides I would have to add a lot of span elements, I'd rather use css as this would be easier to manage during the game.
B: What is the best way I want to add a indicator for when the player selects a color, which cycles through all the colors. It's like a small rectangle above the pegs at the bottom. What is the best way to accomplish this?
Related
I'm studying web development for a few months now and I generally have some problems with the front-end and the UI layout. I often have difficulties placing the elements exactly where I want them. In that case, either I use relative values and break the responsiveness of the site, or I write some rules that seem to me like hacks.
For the example, let's consider this image:
As you can see, there is a Bootstrap container, full-width background color, two classic elements inside the container and an image outside.
For this kind of layout, I'd do something like the following:
<!-- /* MAIN WRAPPER -->
<div class="pull-right">
<img src="/img/topright_image.PNG" alt="shape">
</div>
<div class="bg-red"> <!-- Red background color. -->
<div class="container">
<header class="row">
<div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
<img src="/img/logo.PNG" alt="logo">
</div>
<div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? -->
<h1>Centered title</h1>
</div>
</header>
</div>
</div>
<div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
<div class="container">
<section></section>
</div>
</div>
<!-- MAIN WRAPPER */ -->
It's a quick draft, but you get the idea. The CSS will then implement arbitrary height for the header and the section (300px and 400px), then the max-width for the container.
How to do that properly?
(And what if I want to make the logo a little above the title; between two rows?)
"Proper" is relative. Which makes this a tough question to answer. Using only TBS, this solution is how I would do it. However, I tend to favor flexbox more than TBS so I'd probably use the TBS container how you have it set up (yes, doing that to the containers is a valid way of achieving your goal. Another method I have used before, is box-shadows. Neither option is better, but now you know), and then handle each row as a flexbox or even just simply use floats and centering. This is not a very heavy layout.
If you are looking to learn how to do it "properly", I'd read other code. Specifically for TBS I'd recommend Start Bootstrap. It has a bunch of TBS themes you can look at. Look at the code, see how they do it, see what you like, start doing that.
Ultimately, in the end, it doesn't matter how you get there[1] it just matters that you do. This is a viable solution, and I don't see anything glaringly wrong or hackish.
It actually does matter. But you appear to still be in the learning
phase[2] so it doesn't matter as much so long as you are willing to
keep an open mind and correct things as they are found
We are all always learning.
I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
I am trying to put a detail view between rows in my web application.
I am using Bootstrap and some Frontend Rendering.
My code looks somewhat like this:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
etc...
I am basically looking for some way to do this in bootstrap or some library that does it. The closest example I could find is in the newest itunes version, I've attached a screenshot for that.
Edit:
What I have tried / thought of:
Put the detail view as an absolutely positioned div inside the tile and give the tile a margin-bottom.
This didn't work out since the layout simply breaks. To make this work, you would have to give all elements in the row a margin-bottom.
Put a set of tiles into a row-div and just insert the detail div after that specific row.
This will either break every responsive feature or require a lot of javascript to somehow dynamically put the divs into rows.
I am basically looking for a library / css hack that makes me able to do this without writing a whole lot of javascript.
For the 'details' row, you'd probable just need to use:
<div class="col-xs-12">
...
</div>
That would force it to span the full width regardless of the screen size. So your 3 rows would look like:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
I didn't really know how to put it in words so here is what i actually need to create but have no idea how.
I'm using the latest version of bootstrap
This is the desired effect
https://www.dropbox.com/s/uwq39tbswp44j1i/desired.jpg?dl=0
and this is what I currently have
https://www.dropbox.com/s/ksvgf9ohdmln6xe/Screenshot%202015-05-03%2002.01.19.png?dl=0
this is the markup
<div class="container">
<img class="img-responsive" src="logo.png">
<h1>The text</h1>
</div>
so what would you recommned the site has to be responsive and in terms of mobile version i think the best case sceneario would either be smaller font or stack it on top of each other.
Please help me I'm quite desperate.
It isn't completely clear what you are asking for, but I'll give it a try.
The first issue that I see is the that you aren't following proper bootstrap layout rules (see http://getbootstrap.com/css/#grid). Below is an example of how to do it. To keep items lined up horizontally, you need to have <div class='row'>. Below is what I think you are looking for.
<div class="container">
<div class='row'>
<div class='col-xs-3'>
<img class="img-responsive" src="http://www.xamalot.com/preview/png3/5e78c8d8-3f02-4e3c-9a3a-d95432c606e3" />
</div>
<div class='col-xs-9'>
<h1>The text</h1>
</div>
</div>
</div>
I have put together a working sample at http://jsbin.com/mafuxeyebu/1/edit?html,output
I'm not entirely sure what you're asking but you could try using a screenshot program to capture the desired header as an image then you would not have to build it.
To make an image responsive in bootstrap you can just use the responsive class:
<img class="responsive">
I just used awesome-screenshot to grab that as an image
right click> open image in new tab if you just want to use this image
Now You could use GIMP or Photoshop to edit in your logo/ slogan.
Obviously this is a work around, but then again im not even sure this is what you wanted.
Thanks
I've got two pages, one made with div's and CSS, one made with the notorious table.
The CSS Page...
...and the Table page.
At first glance, they're pretty similar. Both sport a 2x2 grid of rounded "buttons", which resize based on the window around them.
Now, put this in the context of a mobile phone. That's right, shrink that result-frame down (horizontally, don't worry about vertical).
Originally, i just had the CSS version, but there's specific browser widths in which text on the left drops down to two lines where text on the right stays at one, as the strings are different lengths. It just so happens that with the actual strings, most phone resolutions cause this annoying situation to occur.
However, the table predictably acts the way I would want it to. The table has a concept of "rows" as well as "columns", so the columns stay aligned and as a cell in one row gets taller, so do all the rest.
Is there a way to mimic this behavior in CSS? I'm constantly told how bad tables are for accessibility, etc. And I'm a fan of keeping <table> for actual tables of data, not layout.
I know of the adjacent-selector, but I couldn't find a way to say "make your min-height the same as my height, and vice-versa".
Also, obviously this could be done with a script. But unless someone here has a passionately feels that for this problem, javascript > CSS && javascript > Table, let's stick to CSS.
Every sane browser today should support the display: table/table-row/table-cell/... property, which converts your divs to a nice table, but without touching the html markup.
Here is your transformed code:
http://jsfiddle.net/eU6Xe/5/
HTML:
<div id="main">
<div class="row">
<div class="button">
Some text here
</div>
<div class="button">
And more text here
</div>
</div>
<div class="row">
<div class="button">
More Text
</div>
<div class="button">
Lots of text here
</div>
</div>
</div>
CSS:
div #main {
display: table;
width: 100%;
}
div.row {
display: table-row;
}
div.button {
display: table-cell;
}
To be honest both versions are not accessible, and both are equally as annoying to use.
First and foremost: Why aren't you using <button>s or <input type="button">?
It isn't semantically correct for both demos. Tables are not meant to do anything besides hold data. A button should be used for submitting/cancelling/clearing forms. A <div> is that whatchamacallit you keep in your junk drawer, that you use for a last resort.
Table Method
There is no way to make the table accessible. It will be always bee seen as a table, but since this is being incorrectly used, the WAI-ARIA role of presentation needs to be used. However this will tell assistive technology to ignore the fact it is a table, thus chunking the words together. The only way to make the cells clickable, is via an onClick, which may be fired automatically depending on the AT and the way you construct the onClick. Thus not allowing the person get past it, and since they won't know it is a table, they can't jump over it.
CSS Method
First the <h2> elements are used incorrectly. <h2> are to denote sections of a page that contribute to page hierarchy, which it makes little sense that a button would be part of the hierarchy. Next, a <div> doesn't recieve focus by default. Third, if you attach an onClick to the <div>, you run into the same issue as above.
Using ARIA, you can make <div>s act like buttons but your code becomes:
<div class="left-col">
<div class="button" tabindex="-1" role="button">
Some text here
</div>
<div class="button" tabindex="-1" role="button">
And more text here
</div>
</div>
OR
<input type="button" value="some text here" />