PDA

View Full Version : centralise text in Divs



Jay Dog
05-24-2013, 12:03 PM
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:



<!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>

Jay Dog
05-24-2013, 12:03 PM
and here's the CSS that I used from an existing site, it worked on a template but in the one above:



: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;
}

jscheuer1
05-24-2013, 06:22 PM
<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>