www.webdeveloper.com
Results 1 to 8 of 8

Thread: HTML & CSS ​​code

  1. #1

    HTML & CSS ​​code

    Code:
    <style>
        .msgBox{
        position:absolute;
        z-index:10;
        border-radius:5px;
        border:1px solid #F5F5F5;
        background-color:#DDD;
        box-shadow:1px 1px 5px #999;
        overflow:hidden;
        display:none}
        .msgBox ul, .msgBox li{
        list-style:none;
        padding:0;
        margin:0;
        border:0}
        .msgBox .title{
        border-bottom:#AAA solid 1px;
        padding:5px;
        background-color:#CCC;
        font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight:bold;
        text-shadow:1px 1px #DDD;
        font-size:12px}
        .msgBox .msgContent{
        border-top:#F5F5F5 solid 1px;
        padding:5px;
        text-shadow:1px 1px #F1F1F1;
        font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
        font-size:12px}
        .msgBox .ok{
        text-shadow:1px 1px #F1F1F1;
        font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
        font-size:12px;
        margin:0 auto 5px auto;
        width:20px;
        padding:4px 5px 4px 5px;
        background-color:#CCC;
        text-align:center;
        cursor:pointer;
        transition:all 300ms linear;
        border:#DDD solid 1px;
        box-shadow:0 0 1px #AAA;
        border-radius:4px}
        .msgBox .ok:hover{
        background-color:#EEE}
        </style>
        <div class="msgBox">
        <ul class="title">Alert</ul>
        <ul class="msgContent">Friv 2015</ul>
        <ul>
        <li class="ok">Ok</li>
        </ul>
        </div>
        <script src="code HTML & CSS"></script>
        <script language="javascript">
        // Upgraded confirm function
        var msgBox = function(msg){
        var w =$(document).width(),
        h = $(document).height();
        var msgW = $('.msgBox').width(),
        msgH = $('.msgBox').height();
        $('.msgBox').css({left:(w-msgW)/2, top:(h-msgH)/2});
        $('.msgBox')
        .show()
        .find('.msgContent').text(msg);
        $('.msgBox').find('.ok').click(function(){
        $('.msgBox').hide();
        });
        $(document).keyup(function(event){
        if(event.which==13){
        $('.msgBox').hide();
        }
        });
        }
        msgBox('Enter your message!');
        </script>

  2. #2
    Join Date
    Mar 2012
    Posts
    1,559
    PLease explain why you have started this thread. Are you asking for assistance with a problem? If so, what is the problem???
    Last edited by jedaisoul; 07-18-2014 at 01:37 PM.

  3. #3
    It fails on some browsers like Opera IE9

  4. #4
    Join Date
    Mar 2012
    Posts
    1,559
    What do you mean by "fail"? What is it supposed to do? What is it doing? Please give us something to work with...

    There is HTML, CSS, and JavaScript in the code, any one of which could be faulty. They are dealt with in different sections of the forum. At the moment I do not even know which section the thread belongs in...

  5. #5
    Join Date
    Mar 2012
    Posts
    1,559
    I do not know if it is anything to do with the problem, but just from a curssory look I note:

    1. You have no DOCTYPE, HEAD, TITLE, META or BODY tags, so the browsers will be working in "quirks" mode, which makes cross-browser compatibility unlikely.

    2. Your CSS does not start with a general reset, which also makes cross-browser compatibility unlikely.

    3. You have no <h1> tag, which is required on every HTML page.

    4. You have <ul> tags containing no <li> tags.

    5. You have "[" brackets instead of "<".

    Basically, without knowing what your problem is, all I can suggest is:

    1. Start again with NO JavaScript.

    2. Get your HTML and CSS working correctly. That means adding all the missing HTML code that is required on every HTML page.

    3. Then add your JavaScript to make the game (whatever it is) work.
    Last edited by jedaisoul; 07-18-2014 at 01:51 PM.

  6. #6

    errors in JavaScript

    I also did not run but it is good because JavaScript when using the body image in the css section magin pading and it is not faulty pixel format

  7. #7
    Join Date
    Mar 2012
    Posts
    1,559
    i still do not understand what the problem is, but here is a basic template which you can use to get the structure right:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>put the page title here</title>
    <style>
    * {
        margin:0;
        padding:0;
        border:none;
    }
    
    /* put CSS here */
    
    </style>
    </head>
    <body>
    <h1>put the page heading here </h1>
    
    <!-- put HTML here -->
    
    <!--- put JavaScript procedures here -->
    </body>
    </html>
    It is not perfect, and do not worry about what it all means, well, not for now. Just use this each time you start a new web page.

    Now I'll move the thread to the JavaScript section, as the problem may be there...

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    You are not using JavaScript, you have a framework
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles