Html.index question ?

Discussion and feedback on Construct 2

Post » Fri Jan 27, 2012 10:09 pm

Here: http://dl.dropbox.com/u/3954039/iphone%20and%20canvas.rar

Edit: ninja'd by Tom7Soul2012-01-27 22:10:21
B
83
S
21
G
15
Posts: 1,039
Reputation: 15,134

Post » Fri Jan 27, 2012 10:14 pm



Edit: never mind 7Soul beat me to it.

Looks like you will have to re-size your gif though. Its a little small.Wink2012-01-27 22:29:35
B
50
S
11
G
8
Posts: 479
Reputation: 9,911

Post » Fri Jan 27, 2012 10:23 pm

ranma@

I tried the center center option and it lines up on the x axis but it is still slightly out along the Y.

Tom@

<div class="wrapper">... canvas code ...</div>

<style>
     .wrapper
     {
          width:332px;
          height:514px;
          background:url(smiley.gif);
          padding-top:122px;
     }
     </style>


Where would I insert this in the following code?

<style type="text/css">

canvas {
    border: 1px solid red;
}

body {
    background-image: url("iPhone.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position:center center;
}
     </style>
<body>
     <div id="fb-root"></div>
     <div style="text-align: center;">


Sorry to be a pain !
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Fri Jan 27, 2012 10:42 pm

Thanks for all your replies.
7Soul gets the award for expanding my pathetic Knowledge base.
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Fri Jan 27, 2012 10:43 pm

also add

[code]
html,body {margin:0;padding:0;border:0}
[/code]

default margins / padding are set to be > 0 by default by the browser that's why it's off i think.
B
81
S
50
G
10
Posts: 555
Reputation: 13,009

Post » Fri Jan 27, 2012 11:18 pm

[QUOTE=ranma] also add

[code]
html,body {margin:0;padding:0;border:0}
[/code]

default margins / padding are set to be > 0 by default by the browser that's why it's off i think.[/QUOTE]


Where would I implement this ?

I am really new to html5 stuff.
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Fri Jan 27, 2012 11:29 pm

I think to put every <style> tags into the <header> tag before the <body> is the way to go as far as css formating goes.

I don't know if you already seen it but I wrote a tutorial about customizing the index.html page a while ago and added some more concrete example at the end after popular request.

I hope this can guide you along the way.
New to Construct ? Where to start

Image Image
Image Image

Please attach a capx to any help request or bug report !
Moderator
B
247
S
85
G
40
Posts: 6,998
Reputation: 57,791

Post » Fri Jan 27, 2012 11:31 pm

the basics are:
[code]
<style type="text/css">
element {attribute: value; attribute2: value;}
otherelement {attribute: value;}
moreelements, somethingelse {attribute: value}
</style>
[/code]

based on that:

[code]
<style type="text/css">

html,body {
   margin:0;padding:0;border:0
}

canvas {
   border: 1px solid red;
}

body {
   background-image: url('iPhone.gif');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position:center center;
}
</style>
[/code]
B
81
S
50
G
10
Posts: 555
Reputation: 13,009

Post » Sat Jan 28, 2012 12:40 am

Kyatric@

I think to put every <style> tags into the <header> tag before the <body> is the way to go as far as css formating goes.

I don't know if you already seen it but I wrote a tutorial about customizing the index.html page a while ago and added some more concrete example at the end after popular request.

I hope this can guide you along the way.


I only started this thread after reading your excellent index,html tutorial !
----------------------------------------------------------------------


ranma@

the basics are:

<style type="text/css">
element {attribute: value; attribute2: value;}
otherelement {attribute: value;}
moreelements, somethingelse {attribute: value}
</style>


based on that:


<style type="text/css">

html,body {
   margin:0;padding:0;border:0
}

canvas {
   border: 1px solid red;
}

body {
   background-image: url('iPhone.gif');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position:center center;
}
</style>
---------------------------------------------------

I think my brain is finally starting to digest this stuff.

Thanks for the tips.
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Sat Jan 28, 2012 5:13 pm

Here's the finished example:
View

Here's the project files:
Download

I think there is still 1 problem relating to the (z-index:-1;) of the iphone image?
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

PreviousNext

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 10 guests