The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Why CSS code don't work in my HTLM page

View previous topic View next topic Go down

Why CSS code don't work in my HTLM page

Post by Stewcha on June 25th 2013, 2:41 pm

Hi, I making HTLM page and I need to center absolute image. In my forum CSS I put this code.

#image {
position:absolute;
width: 100%;
text-align: center;
}

Then when I want on forum to center and move some image (top,left...) it's work perfect! I just need to add div like this.

<div id="image">
<div style=" position:absolute;top:100px; left:300px;">
<img src="http://i82.servimg.com/u/f82/17/73/84/52/online10.png"></div>
</div>

But problem is when I want make that work in my HTLM not work!

I create HTLM page and when I turn on forum header and footer CSS code and div with <div id="image"> work perfect but when I turn off forum header and footer it wont work!

I know that i need to put css in htlm with codes but i try and not work.

This code I put in HTLM page

<style type="text/css">

#image {
position:absolute;
width: 100%;
text-align: center;
</style>

<div id="image">
<div style=" position:absolute;top:100px; left:300px;">
<img src="http://i82.servimg.com/u/f82/17/73/84/52/online10.png"></div>
</div>


But it's not work when I turn off forum header and footer , it's work only when I turn on forum header and footer.

Can someone help me please?

PS. sory for my bad english.

Stewcha
New Member

Posts : 17
Reputation : 1
Language : Serbian

Back to top Go down

Re: Why CSS code don't work in my HTLM page

Post by Ultron's Vision on June 25th 2013, 2:51 pm

The CSS you add to your CSS Stylesheet in the Admin Panel only applies to all pages which use the forum header and footer - that's where the CSS is inserted by the Admin Panel, either way.

If you have a HTML page without forum header and footer, you will need to create a HTML page from scratch.

Examples.

Below, an incorrect way of creating a HTML page.
Code:
<head>
<style>
<!-- content here -->
</style>
</head>
<body>
<!-- content here -->
</body>

HTML pages must always contain <html> tags and an optional doctype declaration.

Below, a correct example.

Code:
<!DOCTYPE html><!-- this is enough for browser which support HTML 5 - you can always change it if you want to use XHTML or DHTML (though DHTML is deprecated) -->
<html>
<head>
<title>Your Document Title</title>
<style>
#yourcsshere { content: "Your CSS here"; }
</style>
<meta http-equiv="Content-Type: text/html; charset=utf-8"><!-- use UTF-8 as encoding and mark this as HTML page -->
<meta name="robots" content="index,follow,noodp"><!-- allow search engines to scan this site - you can disable it by setting content="noindex,nofollow" -->
<script>
<!--
// window.notification = function(x) {
// if(typeof x !== "string") return false;
// window.alert(x);
// }
// window.notification("Optional scripts go here.
//-->
</script>
</head>
<body>
<h1>Headers, etc.</h1>
<p>Paragraphs, </p><span>spans, </span><div>divs, </div><i>italic text, </i><span style="text-decoration: none !important;">normal text.</span>
</body>
</html>

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Why CSS code don't work in my HTLM page

Post by Stewcha on June 25th 2013, 4:28 pm

Thank you very much, that will help me , but that does not solve my problem :/xD


Look

Because everybody have different monitor screen resolution nobody see the same HTLM page. In some resolution picture are on left side, in some picture are on top or center.

Try to zoom page

link1
http://www.nnw-serbia.com/h7-demo-2

link2
http://www.nnw-serbia.com/h14-demo-1


When you zoom htlm page from link1 picture goes in left side. But when you zoom htlm page from link2 picture goes in center.


What I want is to make work like on link 2.no matter where is position of the picture on page i want to stay there like on link2 .

Stewcha
New Member

Posts : 17
Reputation : 1
Language : Serbian

Back to top Go down

Re: Why CSS code don't work in my HTLM page

Post by Ultron's Vision on June 25th 2013, 4:52 pm

Try it with
Code:
position:fixed;

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Why CSS code don't work in my HTLM page

Post by Stewcha on June 25th 2013, 5:05 pm

I have already try that and it's not work...

This work only in forum CSS, but not in htlm
In forum CSS I have this code:



#image {
position:absolute;
width: 100%;
text-align: center;
}





Then I only need this div somewhere


<div id="image">
<div style=" position:absolute;top:100px; left:300px;">
<img src="http://i82.servimg.com/u/f82/17/73/84/52/online10.png"></div>
</div>




And I can positioning image everywhere I want on the page and picture will stay there no matter how many someone zoom page or havedifferentmonitor screen resolution..


Can someone tell me how to make this work in HTLM without forum header and footer. I try like you said in post abow with full htlm codes but still not work if forum header and footer are off.




<!DOCTYPE html><!-- this is enough for browser which support HTML 5 - you can always change it if you want to use XHTML or DHTML (though DHTML is deprecated) -->
<html>
<head>
<title>Your Document Title</title>
<style>
#image {
position:absolute;
width: 100%;
text-align: center;
}
</style>
<meta http-equiv="Content-Type: text/html; charset=utf-8"><!-- use UTF-8 as encoding and mark this as HTML page -->
<meta name="robots" content="index,follow,noodp"><!-- allow search engines to scan this site - you can disable it by setting content="noindex,nofollow" -->
<script>
<!--
// window.notification = function(x) {
// if(typeof x !== "string") return false;
// window.alert(x);
// }
// window.notification("Optional scripts go here.
//-->
</script>
</head>
<body>
<h1>Headers, etc.</h1>
<p>Paragraphs, </p><span>spans, </span><div>
<div id="image">
<div style=" position:absolute;top:100px; left:300px;">
<img src="http://i82.servimg.com/u/f82/17/73/84/52/online10.png"></div>
</div>
</div><i>italic text, </i><span style="text-decoration: none !important;">normal text.</span>
</body>
</html>

Stewcha
New Member

Posts : 17
Reputation : 1
Language : Serbian

Back to top Go down

Re: Why CSS code don't work in my HTLM page

Post by levy on June 25th 2013, 5:13 pm

What you really want ? I don't looked very more at topic

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Re: Why CSS code don't work in my HTLM page

Post by Stewcha on June 25th 2013, 6:24 pm

I want this CSS code to work in HTLM , i try many things but it won't work. But when I turn on forum header and footer it's work.

Can you tell me in wich tags I should put this CSS code in HTLM?

#image {
position:absolute;
width: 100%;
text-align: center;
}

Stewcha
New Member

Posts : 17
Reputation : 1
Language : Serbian

Back to top Go down

Re: Why CSS code don't work in my HTLM page

Post by levy on June 25th 2013, 6:28 pm

Code:
<!DOCTYPE html><!-- this is enough for browser which support HTML 5 - you can always change it if you want to use XHTML or DHTML (though DHTML is deprecated) -->
<html>
<head>
<title>Your Document Title</title>
<style>
#imagey img {
position:absolute;
width: 100%;
text-align: center;
top:100px;
left:300px;
width:128px;
height: 225px;
}
</style>
<meta http-equiv="Content-Type: text/html; charset=utf-8"><!-- use UTF-8 as encoding and mark this as HTML page -->
<meta name="robots" content="index,follow,noodp"><!-- allow search engines to scan this site - you can disable it by setting content="noindex,nofollow" -->
<script>
<!--
// window.notification = function(x) {
// if(typeof x !== "string") return false;
// window.alert(x);
// }
// window.notification("Optional scripts go here.
//-->
</script>
</head>
<body>
<h1>Headers, etc.</h1>
<p>Paragraphs, </p><span>spans, </span><div>
<div id="imagey">
<img src="http://i82.servimg.com/u/f82/17/73/84/52/online10.png"></div>
</div><i>italic text, </i><span style="text-decoration: none !important;">normal text.</span>
</body>
</html>

Try now , dont use 200000 times Div only 1 time Smile

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum