I'm trying to make a simple browser game without relying on anything fancy like flash or html5. I was doing pretty well in getting everything set up, but when I got to the ground I ran into trouble as I'm not very good at setting up html pages. I want to have a tiled ground that I can put objects on, then click on the objects to take the user to another page. I'm not sure how to go about something like this and am looking for some direction.
I have a fairly good grasp on PHP, understand basic html, very limited css and am starting to learn javascript and am planning on picking up jQuery.
I don't really understand what you want, but this might help:
Live Demo
To understand how the positioning works, see:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
HTML:
<div id="gameContainer">
</div>
CSS:
#gameContainer {
width: 320px;
height: 320px;
border: 1px solid #000;
background: url(http://i.stack.imgur.com/sFV9k.png);
position: relative
}
.wall {
background: url(http://i.stack.imgur.com/IFjyp.png);
width: 32px;
height: 32px;
position: absolute
}
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
So rather than code dumping, I'll just link a reference to the types I've seen so far.
https://www.html.am/html-codes/marquees/html-marquee.cfm
While these are fairly close to what I want, they're just not quite right. The closest one to what I'm after is the bouncing text... But these are all made based on a container that's bigger than the text.
How can I get my text to scroll left and right only when I have text overflow? (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
I thought all this would be possible in css. But if not JS would be fine.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text">abcdefghijklmnopqrstuvwxyz</div>
Solving the Design Issue
Deliberately designing your content to not fit within view might actually be the fundamental issue to solve here. Maybe it is better for users to show the content visibly without any need to scroll, animate, or script it.
There are many reasons not to animate stuff on your web page from problems you cause for groups of your users, to the pure distraction of moving things.
So, my main answer is you probably ought to design a different solution (such as, giving content enough space).
You'll find almost universally that the marquee tag is to be avoided (and that doesn't mean using a different tag and then animating it with CSS or JavaScript). However, we can still have some fun theoretically, just avoid in real life as it is deprecated.
Fun With Marquee
You can use alternate, with some additional non-breaking spaces to show the content in a visual feast of sliding text. I don't think this is good for your users, but marvel in the potential to have lots of moving things.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text"><marquee behavior="alternate"> abcdefghijklmnopqrstuvwxyz </marquee></div>
I am looking for an advice. I have to draw a wind turbine generator. I'm guessing its possible with html, css or canvas but maybe it would take ages.
I have in mind to do it with just images, have the main image for the generator and then have other images over the main one. I think it's the easiest solution to achieve it.
It has to have responsive as well.
The small pieces change the color depending on the data. So I am thinking to replace the images depending on it.
Any recommendation?.
Thanks in advance.
You could skin this cat in several ways, but if you're sure that these are all the components you need (and you won't need to keep expanding it), I agree that canvas is overkill.
Probably all you need is some markup like this:
<div id="turbine">
<div id="injector"></div>
<div id="motor"></div>
<div id="block"></div>
<div id="battery"></div>
</div>
And some CSS that looks something like this:
#turbine {
background: url("turbine-main.png");
position: relative;
}
#injector {
background: url("injector-green.png");
position: absolute;
left: 160px;
top: 130px;
width: 40px;
height: 30px;
}
#injector.failing {
background: url("injector-red.png");
}
#motor {
background: url("motor-green.png");
position: absolute;
left: 220px;
top: 140px;
}
#motor.failing {
background: url("motor-red.png");
}
Rinse and repeat for each part (adjusting image names, coordinates, and size as necessary, so that your pieces fit nicely over the main image). Add and remove the failing class from your individual pieces to toggle the red/green for each part, probably using javascript. (Or just do it in the HTML, if this is a statically rendered page.)
If you should be able to click these engine parts and jump to additional information, replace my <div>'s with <a>'s.
I'm trying to make a house using hr tags, but I've soon discovered that I can't put square shapes(as windows) inside any certain hr-tag-made rectangle/square I've created, they always stack.
Is there a way to use positioning to manually place the shapes?
Hope this will be helpful
<hr class="abc"></hr>
.abc{
width: 100px;
height: 100px;
background: red;
}
jsfiddle
I was wondering if anyone here would be as so kind as to help me out a bit. I am looking to make expandable paragraphs for my client's website. They would like to keep all of the content from their site, which is pretty massive, and they want a total overhaul of the design. They mainly wan tot keep it for SEO purposes. Anyhow, I thought it would be helpful for the both of use if there is some way to use expandable paragraphs, you know, with a "read more..." link after a certain line of text.
I know that there are some JQuery and Java solutions for this, but we really would like to stay away from those options, if at all possible. When would like HTML and CSS, if we can.
Here is kind of an example:
HEADING HERE
Paragraph with a bunch of text. I would like this to appear in a pre-determined line. For example, maybe the start of the paragraph goes on for, let's say, three lines and then we have the [read more...]
When the visitor clicks "read more", we would like the rest of the content to just expand to reveal the article in its entirety. I would like for the content to already be on the page, so it just expands. I don't want it to be called in from another file or anything, if that makes sense.
Thank you in advance for any and all help. It will be greatly appreciated!
Testudo
an easy solution would be this
you will just need 2 toggle events in css with display: none; and display: block;
http://jsfiddle.net/6W7XD/1/
of course you would need to pre-program where you want to start the hide by including a div of it with the close button span inside the div to do the toggles
and if u do decide to javascript it
here is what you can look at
http://jedfoster.com/Readmore.js/
I think you need to use Jquery or Javascript
$('a').click(function() {
var p = $('a').prev('p')
var lineheight = parseInt(p.css('line-height'))
if (parseInt(p.css('height')) == lineheight*2) {
p.css('height','auto');
$(this).text('Less')
} else {
p.css('height',lineheight*2+'px');
$(this).text('More')
}
});
DEMO
This can be achieved using the :target selector for a jQuery/Javascript-less option.
To do this, you need to set each of the expanding texts as targets (give them an id). Then, set the "Show more" tab as a target to said id/target.
Something like:
.article {
position: relative;
border: 1px solid grey;
overflow: hidden;
width: 300px;
}
.article:target {
height: auto;
}
.article:not(target) {
height: 50px;
}
.toggle {
padding: 2px;
position: absolute;
right: 0px;
bottom: 0px;
background: white;
border: 1px solid red;
}
You can view a testable fiddle here.
Note I use :not(:target) to make sure it's the right size when not selected.