Results 1 to 3 of 3

Thread: centralise text in Divs

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default centralise text in Divs

    Hi,


    is there a way to centralise the text in the DIV called MyText1?

    I've been playing with it and I need to it be centralised both horizontally and vertically:


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>How to vertically and horizontally center text in an unordered list or div</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" media="all" />
    <title>Blooms Taxonomy</title>
    <font size=5>
    <script language="JavaScript">
        <!--
    
        function level3() {
        pic = new Array();
        pic[0] = "What colours has the artist used? ";
        pic[1] = "What materials has the artist used?";
        pic[2] = "When was the picture made?";
        pic[3] = "Who made this work of art?";
        pic[4] = "What is the subject of this picture?";
        pic[5] = "What objects or people are in it?";
        pic[6] = "What is in the background of the work?";
        pic[7] = "What is in the foreground of the work?";
    
    
    
        randomNum = Math.floor(Math.random()*pic.length);
    
        return pic[randomNum];
        }
    
        // -->
    
        <!--
    
        function level4() {
        pic = new Array();
        pic[0] = "How would you describe the people in this picture? Are they like you or different?";
        pic[1] = "What things do you recognize in this painting? ";
        pic[2] = "What things seem new to you? ";
        pic[3] = "How would you describe(the place depicted in) this painting?";
        pic[4] = "What words describe this painting?";
        pic[5] = "What other words might we use?";
        pic[6] = "What style is this picture?";
        pic[7] = "Is the work realistic, abstract or abstracted or another kind?";
        pic[8] = "How would you describe this work to someone that canít see it?";
        pic[9] = "Does this work look like others you have seen?";
        pic[10] = "Does this work belong to a movement or a style?";
        pic[11] = "Does the work show perspective?";
        pic[12] = "How is this picture different from real life?";
    	
    	
    
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
        randomNum = Math.floor(Math.random()*pic.length);
    
        return pic[randomNum];
        }
    
        // -->
    
        <!--
    
        function level5() {
        pic = new Array();
        pic[0] = "Can you explain how the work is composed?";
        pic[1] = "How has the artist used colour?";
        pic[2] = "What kind of lines did the artist use?";
        pic[3] = "Explain how the artist has used tone";
        pic[4] = "Where can you see areas of contrast? And if so, describe them";
        pic[5] = "Does the artist show movement and if so, how?";
        pic[6] = "How have the marks been made?";
        pic[7] = "If there a focal point to the work, what is it and how has the artist showed this?";
        pic[8] = "Can you explain the techniques the artist has used?";
        pic[9] = "In what way is the picture balanced?";
        pic[10] = "Can you explain how the work is composed?";
    	pic[11] = "What objects seem closer to you or further away?";
        pic[12] = "What size and shape of mark did the artist use?";
        pic[13] = "Explain how the artist has shown texture";
        pic[14] = "Which element of art Ė line, shape,colour, scale, balance, tone etc is the artist most interested in?";
    
    
    
    
        randomNum = Math.floor(Math.random()*pic.length);
    
        return pic[randomNum];
        }
    
        // -->
    
        <!--
    
        function level6() {
        pic = new Array();
        pic[0] = "What title would you give to this artwork and why?";
        pic[1] = "Pretend you are inside the artwork. What does it feel like?";
        pic[2] = "If you had to label the work so someone could find it, what would you write?";
        pic[3] = "Do you think the work include symbols or hidden meanings?";
        pic[4] = "If this work was to have a theme tune, what would it sound like?";
        pic[5] = "Compare this work to an animal and justify your choice.";
        pic[6] = "What emotion does the work create and why do you think that?";
        pic[7] = "Why do you think the artist wanted to show this subject?";
        pic[8] = "If this work saved in a time capsule, what would it tell people in the future about the artist?";
        pic[9] = "What do think happened to the people in the picture before or after this image?";
        pic[10] = "Does the work tries  to tell a story?";
        pic[11] = "Is the work about the elements of art or is it about human life?";
        pic[12] = "What kind of person would make this picture? What other things would they show?";
        pic[13] = "How do you think the artist wants you to feel about the work?";
        pic[14] = "What do you think it would be like to live in this painting? What makes you think that?";
        pic[15] = "Describe the person who made this picture, what kind of home do they live in?";
    	pic[16] = "If the artist was a teacher at school, what kind of teacher would he be?";
    
    
    
    
    
        randomNum = Math.floor(Math.random()*pic.length);
    
        return pic[randomNum];
        }
    
        // -->
    
        <!--
    
        function level7() {
        pic = new Array();
        pic[0] = "Why do you think people should see this work of art?";
        pic[1] = "What do you think is worth remembering about this painting?";
        pic[2] = "What are the important elements of this picture and why?";
        pic[3] = "What is the artist trying to say to the viewer?";
        pic[4] = "Which elements of the work are least and most successful?";
        pic[5] = "How does this work compare to other work on a similar subject?";
        pic[6] = "Can you think of another type of art or artwork that works in a similar way?";
        pic[7] = "Explain why the artist made this piece of work?";
        pic[8] = "How would this work be viewed a hundred years ago?";
        pic[9] = "Does your opinion of the work differ from what you are told, explain why?";
        pic[10] = "What would make it a better artwork? ";
    
    
    
    
    
    
        randomNum = Math.floor(Math.random()*pic.length);
    
       return pic[randomNum];
        }
    	
    	<!--
    
    function tools() {
    pic = new Array();
     pic = new Array();
     pic[0] = "Art Questioning";
    
     
     randomNum = Math.floor(Math.random()*pic.length);
     
     return pic[randomNum];
     }
    
    // -->
    
        function rollover(f,c) {
         var obj=document.getElementById('myText1');
         obj.innerHTML=f();
         obj.style.backgroundColor=c;
       }
        // -->
    
        function pupilsname() {
    
     randomNum = Math.floor(Math.random()*pic.length);
     return pic.splice(randomNum, 1)[0] || "Sorry, no more names left.";
     }
    
     function tools() {
    
     var pic = new Array();
     pic[0] = "Pick a name from the hat.";
    
    
     randomNum = Math.floor(Math.random()*pic.length);
    
     return pic[randomNum];
     }
    
    
     </script>
    </font>
    <style type="text/css">
    .arial {
    	font-family: Arial, Helvetica, sans-serif;
    }
    .arial {
    	font-size: 28px;
    	line-height: 48px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    body {
    	background-color: #b42020;
    }
    </style>
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=5)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tbody>
      </tbody>
      <tbody>
        <tr>
          <td width="42%" rowspan="3" align="center" valign="middle"><img src="https://jupiter.inthehive.net/sites/bigwood/Departments/2381/Blooms/triangle.png" height="377" width="425" name="myImage0" border="0" usemap="#myImage0Map"></td>
          <td height="60" align="left" valign="middle"><img src="https://jupiter.inthehive.net/sites/bigwood/SiteImages/Icons/Art_Design.png" width="50" height="50"></td>
          <td width="51%" height="60" align="left" valign="middle"><b><font size="5" color="#FFFFFF">Blooms Questioning for Art</font></b></td>
        </tr>
        <tr>
          <td height="28" colspan="3" align="left" valign="top"></td>
        </tr>
        <tr>
          <td colspan="2" align="center" valign="middle"><div class="items">
            <ul>
              <li>
                <div class="outerContainer" style="text-align: left; width: 400px; float: left; height: 100px; border: #ffffff 0px solid;">
                  <div class="innerContainer">
                  
                    <div class="element" id="myText1" style="text-align: ;height:100px;width:400px;float:center; onMouseOver="this.innerHTML = level3();"><strong><font size=4>Art Questions</font></strong></div>
                    
                  
                    
                  </div>
                </div>
        
              </li>
            </ul>
          </div>
          
          
          </td>
        </tr>
      </tbody>
      <tbody>
      </tbody>
    </table>
    <p>
      <map name="myImage0Map">
        <area shape="poly" coords="278,124,211,8,146,123" href="#" onMouseOver="rollover(level7,'#E1BAF9');">
        <area shape="poly" coords="317,187,283,128,143,129,109,187" href="#" onMouseOver="rollover(level6,'#A4C5F2');">
        <area shape="poly" coords="350,249,319,193,105,191,71,250" href="#" onMouseOver="rollover(level5,'#F08595');">
        <area shape="poly" coords="389,313,354,256,67,255,36,312" href="#" onMouseOver="rollover(level4,'#F07A32');">
        <area shape="poly" coords="419,371,393,317,32,318,0,371" href="#" onMouseOver="rollover(level3,'#F6D06D');">
        <area shape="poly" coords="420,361,222,7,418,7" href="#" onMouseOver="rollover(tools,'#b42020');">
        <area shape="poly" coords="7,353,205,8,4,6" href="#" onMouseOver="rollover(tools,'#b42020');">
      </map>
    
    </body>
    </html>
    Last edited by keyboard; 05-24-2013 at 12:10 PM. Reason: Format: Html Tags [html][/html]

  2. #2
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    and here's the CSS that I used from an existing site, it worked on a template but in the one above:


    Code:
    :link,:visited { text-decoration:none }
    ul,ol { list-style:none }
    h1,h2,h3,h4,h5,h6,pre,code { font-family: Arial, Helvetica, sans-serif; font-size:1em; font-weight: normal; }
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,dt,dd
    { margin:0; padding:0 }
    a img,:link img,:visited img { border:none }
    address { font-style:normal }
    fieldset { border: none;}
    legend { display:none; }
    
    
    body
    {
    	font-family: Arial;
    	margin: 20px;
    }
      
    .items li
    {
    	float: left;
    	margin: 0px 5px 5px 0px;
    	
    }
      
    .items li .outerContainer
    {
    	display: table;
    	height: 180px;
    	overflow: hidden;
    	width: 200px;
    	background-color: #EBEBEB;
    	border-bottom: 1px solid #CCCCCC;
    	border-right: 1px solid #CCCCCC;
    }
      
    .items li .outerContainer:Hover
    {
    	background-color: red;
    }
    
    .items li .outerContainer .innerContainer
    {
    	display: table-cell;
    	vertical-align: middle;
    	width: 100%;
    	margin: 0 auto;
    	text-align: center;
    }
      
    .items li .outerContainer .innerContainer .element a
    {
    	color: #999999;
    	text-decoration: none;
    	padding: 0px 10px;
    	display: block;
    }
      
    .items li .outerContainer:Hover .innerContainer .element a
    {
    	color: #FFFFFF;
    	text-decoration: none;  	  
    }
    Last edited by keyboard; 05-24-2013 at 12:09 PM. Reason: Format: Code Tags [code][/code]

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    HTML Code:
    <div class="element" id="myText1" style="text-align:center;display:table-cell;vertical-align:middle;height:100px;width:400px;" onMouseOver="this.innerHTML = level3();"><strong><font size=4>Art Questions</font></strong></div>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Iframe-divs: a technique for letting divs overlay anything we want
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 0
    Last Post: 03-22-2012, 08:30 PM
  2. Various Text Lengths Influence Divs
    By kohnency in forum Looking for such a script or service
    Replies: 0
    Last Post: 06-21-2011, 07:14 PM
  3. Various Text Lengths. borders, and Managing Divs
    By kohnency in forum Looking for such a script or service
    Replies: 0
    Last Post: 06-08-2011, 07:23 PM
  4. Replies: 1
    Last Post: 03-10-2010, 12:10 AM
  5. Using Divs for picture text caption
    By Girard Ibanez in forum CSS
    Replies: 0
    Last Post: 11-24-2006, 01:44 PM

Bookmarks

Posting Permissions

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